Java web之JavaScript

一、概述与作用

JavaScript（简称“JS”）是一种解释型或即时编译型的编程语言。
它是一门脚本语言（开发Web页面的语言）。

作用：
1、验证数据
2、加强用户体验
3、增加互动

二、使用

1、使用的分类

（1）行内（标签内）

元素上使用js代码

（2）内部（html内任何外置）

html内部定义script标签对,标签对中定义js代码

（3）外部（head标签内外连js文件）

外部定义js文件,文件中定义js代码,在使用的html中使用script标签对用来引入

2、使用问题

（1）使用位置：

1）任意位置

2）推荐使用位置：

head中，便于后期维护（head中配合window.onload使用，确保加载完成）。
body结束前，页面所以内容加载完成之后。

（2）使用注意：

一个script标签不能及用来引入外部js文件,又用来定义js代码

三、JavaScript数据类型

1、基本数据类型

（1）Number（控制台中显示蓝色）

1）Number：表示整数,小数

2）NaN ：表示(not a number)

1.赋值NaN
2.运算无法计算正确的结果

（2）String（控制台中显示黑色）

字符串要定义在一对引号当中,''|""都可以

（3）Boolean

true | false

（4）Null 类型

1.赋值
2.获取不到元素

（5）Undefined （指未定义的类型）

1.赋值
2.只声明不赋值存在默认值

2、复合数据类型和函数类型

（1）对象类型（Object）

对象中的内容都是以键值对的形式存在的：key:value
多个键值对之间使用个逗号进行分隔
最后一个键值对后面不需要添加逗号
key属性名,满足标识符的命名规范
key和value其实都是字符串
key如果满足标识符的命名规范,前后引号可以省略

（2）函数类型（方法）

四、类型转换

1、显示类型转换：

通过其他方式或函数,手动让数据改变其类型（注意：js中对象类型和函数类型不参与类型转）

任意类型都可以转换以下三种类型
String(数据)
Number(数据)
Boolean(数据)

2、隐式类型转换

目的不是为改变数据的类型,但是执行过程中会隐式改变类型（+ - * / ..）

五、运算符

1、+ 运算符

字符串的连接符使用

2、= == === 之间的区别:

= 赋值
== 比较数据是否相同
=== 比较数据和类型是否都相等（先比较类型,后比值）

3、！运算符

! 非取反
!! 不变
!!!取反

4、逻辑运算符: && ||

java中逻辑运算符两边的操作数必须为boolean类型的
js中中逻辑运算符两边的操作数可以都是boolean,也可以有其他类型的数据参与,如果有, 结果肯定为其中一个操作数

（1）&& 一个为false就是false

第一个操作数转为boolean,为false,结果就为第一个操作数的值为true,,结果就为第二个操作数的值

（2）|| 一个为true就是true

第一个操作数转为boolean,为true,结果就为第一个操作数的值为false,结果就为第二个操作数的值

5、{} 块

java中{}自成作用域
js中块不是作用域,作用域在js中之间函数function

六、数组与数组方法

1、数组

（1）数组的属性

可以存储任意个任意类型的数据,长度可变
数组有序: 索引顺序从0开始
根据索引操作数组,当索引非0~n的整数,作为数组的自定义属性

（2）创建数组的方式:

new Array(); 构建一个空的新数组
new Array(数据1,数据2..) 创建的同时赋值
[数据1,数据2...] 字面量的创建方式 --推荐

（3）数组的遍历:

1.普通for
2.for .. in
3.foreach

2、数组常用方法

（1）slice 截取（切片数组，原数组不发生变化）

一个参数作为起始索引,从参数索引位置开始,截取到最后,返回
两个参数第一个参数作为其实索引,第二个参数结束索引,结束索引不包含

（2）splice 剪接数组（原数组变化，可以实现前后删除效果）

一个参数作为起始索引,从参数索引位置开始,截取到最后,返回,原数组为截取后剩下的
两个参数第一个参数作为其实索引,第二个参数作为个数
3~n个参数重第一个参数位置开始,拿第二个参数个,替换成为第三个参数及以后的数据

七、函数及注意事项

1、函数

1）函数声明

                function 函数名 (参数列表) {
                    函数体;
                    [return 返回值;]
                }

2）函数调用:

1. 函数名(实参);
1. 转换函数表达式,在最后添加()自执行（在函数声明的前面添加~|!|+|-，在函数声明天后添加()包裹）

2）函数表达式的方式

                var 变量名 = function 函数名 (参数列表) {
                    函数体;
                    [return 返回值;]
                };

函数名一般省略,不可以通过函数进行调用,只能通过变量名,函数名可以在函数内部进行递归使用

2）函数表达式的调用:

1.通过变量名调用变量名(参数);
2.函数表达式最后添加(),直接直接这个函数,自执行

注意:参数省略var关键字

（2）函数的注意事项

函数的作用域提升:只有函数声明的方式才有函数作用域的提升,函数表达式没有,提升到当前作用域的最上面
若函数形参同名（一般不会这么做），在使用时以最后一个值为准。
函数的参数可以定义默认值

值传递

var num = 12;
function change(n) {
  n = 30;
}
change(12);
console.log('值传递-----' + num);  //12

引用传递