JavaScript基础

JavaScript

JavaScript是一门跨平台，面向对象的脚本语言，来控制网页行为的，它能够使网页可交互。
基础语法与java类似

JavaScript（简称：JS）在 1995 年由 Brendan Eich 发明，并于 1997 年成为一部 ECMA 标准。
ECMAScript 6 (ES6) 是最新的 JavaScript 版本（发布于 2015 年)。

JavaScript引入方式

内部方式

在html文件中，使用写在元素底部，可以提高显示速度，将javaScript写在body中的最后，先加载html界面。

外部方式

将js代码编写为一个后缀名为js的文件中。
在html文件中通过引入文件

<script src="../js/alert.js">script>

alert("真菜");

书写语法

区分大小写：与 Java 一样，变量名、函数名以及其他一切东西都是区分大小写的
每行结尾的分号可有可无、建议写上
注释
- 单行注释：// 注释的内容
- 多行注释：/* 注释的内容 */
一对大括号标识代码块

输出语句

使用window.alert()写入警告框
使用document.write()写入 HTML 输出
使用console.log()写入浏览器控制台

变量介绍

variable的缩写var是JavaScript声明变量的方式。
- var定义的变量是全局变量，可在var所在代码块的外部访问
- 可以重复定义覆盖旧值
- ```
var a=20;
var a=30;
```
JavasScript是一门，弱类型语言可以存放不同类型的变量
组成字母，数字，下划线_,英文$符号，数字不能开头，建议使驼峰命名。
ECMAScript 6新增了let关键字来定义变量，类似于var,但是let只在自己的代码块中有效，且与java一样不允许重复声明。
ECMAScript 6新增const关键字，用来声明一个只读的常量。一旦声明不能改值。

注意事项(let报错)

如果let变量报错、需要修改idea中js的版本。
在File->Settings->Languages & FrameWorks->JavaScript，将版本改为 ECMAScript 6

数据类型

原始类型和引用类型
typeof（）获取数据类型
原始类型分类：
- number：数字（整数、小数、NaN(Not a Number)）
- string：字符、字符串，单双引皆可
- boolean：布尔。true，false
- null：对象为空，对于null使用typeof()方法会返回object，null被认为是对象占位符
- undefined：当声明的变量未初始化时，该变量的默认值是 undefined

运算符

运算符分类（类似于Java）

一元运算符：++，--
算术运算符：+，-，*，/，%
赋值运算符：=，+=，-=…
关系运算符：>，<，>=，<=，!=，==，===
逻辑运算符：&&，||，!
三元运算符：条件表达式 ? 表达式1 : 表达式2;

类型转换

其他类型转化为bumber

1 string:按照字符转的子面值，转为数字，如果字面值不是数字，转化为NAN

var str=+"adc";+号代表正数 parseInt()

2 boolean true 转换为1 false 转换为0

其他类型转换为boolean（用于简化健壮性判断）

1 number 0和NAN转换为0，其他数字为true

2 string 空字符串为false

3 null 为false

4 undefined为false0

类型转换细节

== 和 ===
- == 会进行类型转换、转换后再比较数据值。
- === 不会进行类型转换、类型不一致直接返回false。
其他类型转为数字
- string:将字符串字面值转为数字。如果字面值不是数字，则转为NaN。一般使用parseInt方法进行转换。
- boolean: true 转为1，false 转为0。
其他类型转为 boolean
- number：0和NaN转为false，其他的数字转为true。
- string：空字符串转为false，其他字符串转为true。
- null: 转为false。
- undefined：转为false。

流程控制语句

if
switch
for
while
do…while

函数

1.函数介绍

js中的函数类似java中的方法。
将共性功能抽取到方法中、提高代码的复用性。
将不同的功能在不同的方法中实现、提高代码的阅读性。
使用function关键字定义函数

2.函数格式

格式一：

形式参数不需要类型。因为JavaScript是弱类型语言。
返回值也不需要定义类型，可以在函数内部直接使用return返回即可。

因为var的性质使得javaScript有以上特点

// 书写格式
function 函数名(参数1,参数2,...){
    方法体;
    return 结果;
}

// 调用格式
var 变量名 = 函数名(实际参数);   // 有返回值方法
函数名(实际参数);                 // 无返回值方法

.//定义
function add(a,b){
return a+b;
}
//调用
var result=add(1,2);

格式二

// 书写格式
var 函数名 = function(参数1,参数2,...){
    方法体;
    return 结果;
}

// 调用格式
var 变量名 = 函数名(实际参数);   // 有返回值方法
函数名(实际参数);                 // 无返回值方法
 // 格式二
    var add = function (a,b){
        return a + b;
    }
    var result = add(1,2);
    alert(result);

函数调用可以传递任意个参数，但没有什么意义

var result1=add(1,2,3)//3实际上没什么用处，但是可以传递
var result2=add(1) 第二个参数被NAN代替，结果NAN

JavaScript对象

Array

格式一

var 变量名 = new Array(元素列表);

格式二

var 变量名 = [元素列表];

JavaScript 数组参考手册 (w3school.com.cn)

String对象

格式一

var 变量名 = new String(s);

格式二

var 变量名 = s;   // 单引、双引都可以

JavaScript String 参考手册 (w3school.com.cn)

trim() 去除字符串两端，空格问题

自定义对象

{}代表对象 : 连接属性值或者方法体 ,号连接属性和方法

var 对象名称 = {
属性名称1:属性值1,
属性名称2:属性值2,
...
函数名称:function (形参列表){}
...
};




    
    自定义对象

Window对象

Window 对象 (w3school.com.cn)

BOM介绍

Browser Object Model 浏览器对象模型
JavaScript 将浏览器的各个组成部分封装为对象

Window：浏览器窗口对象

- Navigator：浏览器对象 (了解)
- Screen：屏幕对象 (了解)
- History：历史记录对象
- Location：地址栏对象

Window窗口对象

获取：直接使用 window，其中window. 可以省略
属性：获取其他 BOM对象

方法

DOM介绍

Document Object Model 文档对象模型
将标记语言的各个组成部分封装为对象
- Document：整个文档对象
- Element：元素对象
- Attribute：属性对象
- Text：文本对象
- Comment：注释对象
JavaScript 通过 DOM，就能够对 HTML进行操作了
- 改变 HTML 元素的内容
- 改变 HTML 元素的样式（CSS）
- 对 HTML DOM 事件作出反应
- 添加和删除 HTML 元素

1.document对象常用方法

getElementById(id值)：根据id属性值获取，返回一个Element对象
getElementsByTagName(标签名)：根据标签名称获取，返回Element对象数组
getElementsByName(name值)：根据name属性值获取，返回Element对象数组
getElementsByClassName(class值)：根据class属性值获取，返回Element对象数组

事件监听

事件：HTML 事件是发生在 HTML 元素上的“事情”。例如：(按钮被点击、鼠标移动移出、键盘按键按下等)。
事件监听：JavaScript 可以在事件被侦测到时执行对应的代码。

事件绑定

方式一：通过 HTML标签中的事件属性进行绑定

JavaScript