Javaweb - 4.1 JavaScript
目录
1. 简介
起源
JS 组成部分
JS 的引入方式
内部脚本方式引入
外部脚本方式引入
2. JS 的数据类型和运算符
数据类型
算术符
3. JS 的流程控制和函数
if 结构
switch 结构
while 循环
for 循环
foreach 循环
JS 函数声明
完!
1. 简介
起源
JavaScript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的面向对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务端语言遗留的速度问题。
比如说,当用户要进行一个注册页面,在没有 Javascript 的时候,用户在填写自己注册的用户名和密码时,是没有相对应的提示,只有当数据发送给服务器,服务端发现接收到的数据不符合要求,才会返回一个信息,告知客户端,大大影响了效率~
于是 Netscape 公司的浏览器 Navigator 加入了 Javascript,提供了数据验证的基本功能~
之后的其他公司,例如微软等,也都在自己公司中的浏览器加入了对应的脚本语言,但是不同公司的脚本语言,大大小小的都略有差异,底层实现浏览器的程序员苦不堪言~~
巨头公司也意识到了这个问题,这么好的技术,不应该因为商业而被搞乱套,于是向 ECMA 组织,提议出一个统一版本~~
ECMA-262 是正式的 Javascript 标准~ 这个标准由 ECMA 组织发展和维护。 JavaScript 的正式名称是“ECMAScript”。
总的来说:JS 是一种运行在浏览器端上的小脚本语句,可以实现网页如文本内容,数据动态变化和动画特效等等~
JS 有如下特点:
脚本语言:JS 是一种解释型的脚本语言。不同于 C Java 等语言先编译后执行,JS 不会产生编译出来的字节码文件,而是在程序的运行过程中对源文件逐行进行解释。
基于对象:JS 是一种基于对象的脚本语言,它不仅可以创建对象,也能使用现有的对象。但是,面向对象的三大特性:封装,继承,多态中,JS 能够实现封装,模拟继承,不支持多态~
弱类型:JS 中也有明确的数据类型,但是声明一个变量后,这个变量可以接收任何类型的数据,并且会在程序执行过程中,根据上下文自动转换类型。
事件驱动:JS 是一种采用事件驱动的脚本语言,不需要经过 Web 服务器就可以对用户的输入做出相应。
跨平台性:JS 脚本语言不依赖于操作系统,只需要浏览器的支持。因此一个 JS 脚本在编写后可以在任何机器上使用~ 只要当前机器上的浏览器是支持 JS 脚本语言的~
JS 组成部分
BOM 编程:
BOM 是 Browser Object Model 的简写,即浏览器对象模型
BOM 有一系列对象组成,是访问,控制,修改浏览器的属性和方法
BOM 没有统一的标准(每种客户端都可以自定标准)
BOM 编程是将浏览器窗口的各个组成部分抽象成各个对象,通过各个对象的 API 操作组件行为的一种编程
DOM 编程:
DOM 编程就是使用 document 对象的 API 来完成对网页 HTML 文档进行动态修改,以实现网页数据和样式动态变化效果的编程
document 对象代表整个 html 文档,可用来访问页面中所有元素
DOM 编程其实就是用 window 对象的 document 属性的相关 API 完成对页面元素的控制的编程
JS 的引入方式
首先要解决的是 JS 如何声明函数
在 Java 中,声明一个函数方法:public void surprise(){ }
在 JS 中,声明一个函数方法:function 函数名() { }
内部脚本方式引入
在页面中,通过一对 script 标签引入 JS 代码,script 代码放置的位置具有一定的随意性,但一般都放置在 head 标签中~
外部脚本方式引入
内部脚本仅仅只能在当前页面上使用,代码的复用度并不高。可以把脚本放在独立的 .js 后缀的文件中,通过 script 标签引入外部脚本文件~
注意:
1. 一个 html 中可也有多个 script 标签
2. 一对 script 标签不能在引入外部 js 文件的同时,还定义内部脚本
3. script 标签如果用于引入 js 文件,中间最好不要有任何字符,包括空格和换行
2. JS 的数据类型和运算符
数据类型
JS 是弱类型,不是没有类型,是变量在声明的时候不指定类型,赋值的时候才确定类型,JS 中的变量声明,统统都使用 var
JS 中常见的数据类型:
数值类型 number 不区分整数和浮点数
字符串类型 string
布尔类型 boolean
引用类型 Object
function 类型 function
未命名赋值 undefined 值 unfinished
赋予 null Object 值 null
判断数据类型的运算符 typeof
注意:JS 中,使用 var 声明变量的特点:
1. 弱变量类型,可以统一使用 var 来进行声明
2. var 声明的变量,可以再次进行声明
3. 变量可以使用不同的数据类型来进行多次赋值
4. JS 的语句可以以分号结尾,也可以不以分号来结尾
5. 变量的标识符严格区分大小写
6. 标识符的命名规则参照 Java
7. 如果使用了一个没有声明的变量,那么时候会报 uncaught ReferenceError:*** is not defined
8. 如果一个变量只进行了声明,没有赋值,那么值是 unfined
算术符
算术运算符: + - * / %
/ 在除 0 的时候,结果是 Infinity
& 在模 0 的时候,结果是 NaN,意思是 Not A Number
复合算术符:++ -- += -= *= /= %=
同样 /= 0 结果为 Infinity
%0 结果为 NaN
关系运算符:> < >= <= == === !=
这里需要注意 == 和 ===
==:如果两端数据类型不一致,会尝试将两端的数据转换成 number,再对比 number 的大小
‘123’ 这种字符串可以转换成 123 数字
true 会转换成 1 false 会转换成 0
===:如果两端数据类型不一致,则直接返回 false,数据类型一致的话才会进行比较~
逻辑运算符:|| &&
与 Java 几乎相同
条件运算符: 条件?值1:值2
与 Java 几乎相同
位运算符:| & ^ << >> >>>
与 Java 类似
3. JS 的流程控制和函数
if 结构
这里的 if 结构几乎和 Java 中一样,但有三点需要注意:
1. if()中的非零字符串会被认为是 true
2. if()中的非零数字会被认为是 true
3. if()中的非空对象会被认为是 true
switch 结构
switch 结构几乎和 Java 中一样~
while 循环
for 循环
foreach 循环
foreach 循环和 Java 的语法有所不同了~
在对数组进行迭代的时候:
1. 括号中的临时变量表示的是元素的索引,而不是元素的值。
2. ()中也不再用 : 进行分割了,而是使用 in 关键字~
JS 函数声明
JS 中的方法,一般称为函数,函数的声明语法和 Java 中有很大的区别~
函数声明的语法:
1. function 函数名() {}
2. var 函数名 = function() {}
和 Java 相比有如下特点:
1. 没有访问修饰符
2. 不用声明函数的返回值类型,需要返回直接在函数体中 return 进行返回即可~ 返回值类型也没有 void
3. 参数列表中,因为是弱类型变量,所以无序数据类型~
4. 调用函数的时候,实参和形参的个数可以不一致~ 可以在方法的内部通过 arguments 获得调用时候的实参~
5. JS 函数中没有异常列表~
6. 函数也可以作为参数传递给另一个方法~
// 声明函数
function sum(a, b) {return a + b;
}var sum = function(a, b) {return a + b;
}
//调用函数 接收结果
var result = sum(10, 20);
console.log(result);
如果在调用函数中,多传了几个参数 ==》 相当于没有传~
// 函数也可以作为参数传递给另一个方法var sum = function(a, b) {return a + b;
}
function add(getSum) {return getSum(20, 30);
}
var result = add(sum);
console.log(result);