Java web之JavaScript

2020-02-11 本文已影响0人爱比立务

一、概述与作用

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

引用传递