JavaScript语言基础
JavaScript概述
- 在1995年时，由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成
- JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于对象的语言，内置支持类型。（其他著名弱语言：Python，PHP）
- 它的解释器被称为JavaScript引擎，为浏览器的一部分，在HTML中使用，用来给网页增加逻辑功能。
- 值得一提的是：java是强类型语言，其多态，泛型可以在强类限制下尽量多的去匹配
- 多态：让父类可以匹配子类类型
- 泛型：把类作为参数，传入什么类型就可以匹配相应的类型
- 基于对象 != 面向对象
- 基于对象：可以创建对象，使用对象，但是没有继承和多态
JavaScript编写方式
JavaScript代码需要插入HTML中。
- 嵌入方式：JavaScript代码嵌入
<Script>…</Script>标记中 - 引用方式：JavaScript代码写在JS文件中，由
<Script></Script>标记引入到HTML代码中 <Script>标记可写在HTML的任意地方，但建议写在<head>中
JavaScript开发环境
- WebStorm
- HBuilder
- Dreamweaver
- Eclipse
- EditPlus
嵌入
<html>
<head>
<title>我的网页</title>
<script type="text/javascript">
<!--//
alert("我的JavaScript对话框");
//-->
</script>
</head>
<body>
……
</body>
</html>
模态对话框：对话框会导致程序阻塞且主体窗体无法操作
<script>标记中增加HTML注释：<!--……-->
是为了避免某些不支持JavaScript的浏览器（老旧工控设备）将JavaScript
源代码显示在网页中。
引入
<html>
<head>
<title>我的网页</title>
<script src="sample.js"></script>
</head>
<body>
……
</body>
</html>
JavaScript基本数据类型
五种原始数据类型
- Boolean：true/false 或 1/0
- String：字符串，"…"或’…'隔开
- Number：数值，可为32/64位整型/浮点数
- *Undefined：未初始化的变量
- *Null：空值，指向的对象不存在
空值也是值，连空值都没有的叫
Undefined
JavaScript复合数据类型
- 对象
- 日期对象
- 全局对象
- 数学对象
- 字符串对象
- 数组
JavaScript其他数据类型
函数：function
- avaScript中，“函数”充当了两个角色，一个运用在数据类型方面，另一个运用在子程序设计方面 。
可以将一个函数子程序赋值给变量
空值：Null
- 通常用来判断对象的创建或引用是否成功
不确定的类型：Undefined
- null值表示一个变量拥有空值。可以理解为已经把“空”给了某个变量，而undefined则表示一个变量什么都没有得到，连“空”都没有。通常用来判断一个变量是否已经定义或已经赋值。
JavaScript数据类型转换
隐式转换
- 在程序运行时，系统根据当前上下文的需要，自动将数据从一种类型转换为另一种类型的过程称为隐式类型转换。其实这个转换很多时候都在我们身边悄悄发生，比如我们使用document.write和alert方法时，很多时候就发生了隐式转换，也就是无论你向这两个方法中输入什么类型的数据，最后都被转换为字符串型数据。
- var str = “数字” + 1;
显式转换
- 与隐式类型转换相对应的是显式类型转换，此过程需要手动转换到目标类型。要将某一类型的数据转换为另一类型的数据需要用到特定的方法。
- var num = parseFloat(“1.1”) + parseInt(“1”);
JavaScript常量
常量的使用方法
- 常量直接在语句中使用，因为它的值不需要改变，所以不需要再次知道其存储地点。
如：
if(true){
………
}
JavaScript变量
什么是变量
- 顾名思义，变量在程序运行过程中值可以发生改变的量。是可读写的内存单元，通过引用变量名即可访问/修改/删除该内存单元的值。
变量的定义方式 - JavaScript中，用如下方式定义一个变量。
var 变量名 = 值;
变量名 = 值;
变量的命名规则：
- JavaScript变量的命名必须以字母、下划线或 开 始 ， 后 可 跟 下 划 线 或 开始，后可跟下划线或 开始，后可跟下划线或或数字，但不能使用其他特殊符号
JavaScript关键字
关键字为系统内部保留的标识符，其用途特殊，用户的标识符不能与关键字相同
JavaScript表达式和操作数
具体参考java
JavaScript控制语句
选择语句
- if语句 、if-else语句 、if-else-if语句、switch语句
循环语句
- for语句 、while语句 、do-while语句 、for-in语句、break和continue语句
异常处理语句
- try-catch语句 、try-catch-finally语句 、throw语句
JavaScript函数
函数是完成特定任务的可重复调用的代码段，是JavaScript组织代码的单位 。
函数的功能
- 函数的主要功能是将代码组织为可复用的单位，可以完成特定的任务并返回数据
JavaScript自定义函数
定义函数的两种方法：
- 使用function关键字以普通的形式来定义一个函数
- JavaScript的函数属于Function对象，因此可以使用Function对象的构造函数来创建一个函数 。
JavaScript函数的普通定义方式
普通定义方式使用关键字function，也是最常用的方式，形式上跟其它编程语言一样。语法格式如下：
function 函数名( [ 参数1, [ 参数2, [ 参数N ] ] ] ) {
[ 语句组 ];
[ return [表达式] ];
}
- function：必选项，定义函数用的关键字。
- 函数名：必选项，使用合法的JavaScript标识符。
- 参数：可选项，使用合法的JavaScript标识符，外部的数据可以通过参数传送到函数内部。
- 语句组：可选项，JavaScript程序语句，当为空时函数没有任何动作
- return：可选项，遇到此指令函数执行结束并返回，当省略该项时函数将在右花括号处结束。
- 表达式：可选项，其值作为函数返回值。
JavaScript函数的变量定义方式
函数变量定义方式是指以定义变量的方式定义函数。
- JavaScript中所有函数都属于Function对象，于是可以使用Function对象的构造函数来创建一个函数 。
变量定义方式实质上就是创建一个函数对象。
var 变量名 = new Function( [ 参数1, [ 参数2, [ 参数N ] ] ], [ 函数体 ] );
- 函数变量名：必选项，代表函数名。必须是合法的JavaScript标识符。
- 参数：可选项，作为函数参数的字符串，必须是合法的JavaScript标识符，当函数没有参数时可以忽略此项。
- 函数体：可选项，一个字符串。相当于函数体内的程序语句序列，各语句使用分号格开，当忽略此项时函数不执行任何操作。
JavaScript函数的参数
函数的参数是函数与外界交换数据的接口。外部的数据通过参数传入函数内部进行处理，同时函数内部的数据也可以通过参数传到外界。
- 函数定义时圆括号里的参数称为形式参数（形参），调用函时传递的参数称为实际参数 （实参）
//函数声明
function func(agr1, agr2){ //agr1和agr2为形参
……
}
//函数调用
func(20, 30); //20和"ok"为实参
//JavaScript允许形参与实参数量不一致
func(20);
func(20, "ok", "cancel");
JavaScript arguments对象
arguments对象代表正在执行的函数和它传入的实参
- 函数对象.length属性表示：调用该函数时传递的形参个数
- 函数中的arguments.length属性表示：该函数实参个数
通常使用arguments对象来验证所传递的参数是否符合函数要求
- 使用arguments对象判断形参实参数量是否匹配
01<script type=“text/javascript"> // 脚本程序开始
02 function sum( arg1, arg2 ) { // 加法函数
03 var realArgCount = arguments.length; // 调用函数时传递的实参个数
04 var frmArgCount = sum.length; // 函数定义时的形参个数
05 if( realArgCount < frmArgCount ) { // 实际参数个数少于形参个数
06 var e = new Error(); // 定义错误信息，然后抛出
07 e.number = 100001; // 错误编号
08 e.message = "实际参数个数不符合要求！"; // 错误消息
09 throw e; // 抛出异常
10 }
11 }
12</script>
JavaScript参数传递方式
值类型
- 值类型使用的是值传递方式，即传递数据的副本
function test(arg) {
……
}
test(1+20); //函数调用
引用类型
- 引用类型返回的是数据的地址，而不是数据本身
function test(arg) {
……
}
test(new Function()); //函数调用
JavaScript函数返回
- 参见java，通过return语句返回一个值。
function 函数名(){
return 返回值;
}
- 函数声明时不需要定义返回值类型
- 值类型和引用类型的规则在返回值中同样适用
JavaScript函数变量传递方式
- 回调 ：其机制是通过指针（地址）来调用函数 。
回调函数定义
01 <script type=“text/javascript">
02 function SortNumber( obj, func ) { // 定义通用排序函数
03 // 参数验证，如果第一个参数不是数组或第二个参数不是函数则抛出异常
04 if( !(obj instanceof Array) || !(func instanceof Function)) {
05 var e = new Error(); // 生成错误信息
06 e.number = 100000; // 定义错误号
07 e.message = "参数无效"; // 错误描述
08 throw e; // 抛出异常
09 }
10 for( n in obj ) { // 开始排序
11 for( m in obj ) {
12 if( func( obj[n], obj[m] ) ) { // 使用回调函数排序，规则由用户设定
13 var tmp = obj[n]; // 创建临时变量
14 obj[n] = obj[m]; // 交换数据
15 obj[m] = tmp;
16 }
17 }
18 }
19 return obj; // 返回排序后的数组
20 }
21 </script>
回调函数调用者
01 <script type=“text/javascript">
02 function SortNumber( obj, func ) { // 定义通用排序函数
03 // 参数验证，如果第一个参数不是数组或第二个参数不是函数则抛出异常
04 if( !(obj instanceof Array) || !(func instanceof Function)) {
05 var e = new Error(); // 生成错误信息
06 e.number = 100000; // 定义错误号
07 e.message = "参数无效"; // 错误描述
08 throw e; // 抛出异常
09 }
10 for( n in obj ) { // 开始排序
11 for( m in obj ) {
12 if( func( obj[n], obj[m] ) ) { // 使用回调函数排序，规则由用户设定
13 var tmp = obj[n]; // 创建临时变量
14 obj[n] = obj[m]; // 交换数据
15 obj[m] = tmp;
16 }
17 }
18 }
19 return obj; // 返回排序后的数组
20 }
21 </script>
- JavaScript中函数调用的形式比较多，非常灵活。
- 函数是一种对象，对象是一种数据类型，函数对象可通过参数进行传递，采用引用的方式只传递地址，获得函数对象的地址后，即可对函数进行调用和传参。
JavaScript内部函数
内部函数(inner function)是定义在函数内部的函数
- 内部函数可调用其外层函数的所有局部变量
- 外层函数无法调用其内部函数的局部变量
JavaScript闭包
闭包(closure)：是指可以访问另一个函数作用域变量的函数，一般是定义在外层函数中的内部函数。
是JavaScript中较难掌握的一个概念和技巧
- 形成闭包的条件：
- 内部函数调用了外层函数的局部变量；
- 内部函数在外层函数之外被调用，内部函数即形成闭包；
- 闭包即使执行完毕，外层函数变量也不会被释放。
无闭包的函数
function outter() {
var msg = 1;
function inner() {
msg += 1;
return msg;
}
return inner();
}
var result = outter();
alert(result);
有闭包函数
function outter() {
var msg = 1;
function inner() {
msg += 1;
alert(msg);
}
return inner;
}
var ofunc = outter();
ofunc();
ofunc();
JavaScript匿名函数
无名称的函数
- 通常用来定义只使用一次的语句块
- 或直接赋值给函数类型变量
格式：
function ( [ 参数1, [ 参数2, [ 参数N ] ] ] ) {
[ 语句组 ];
[ return [表达式] ];
}
将匿名函数赋值给变量，相当于给匿名函数增加函数名
var func = function () {
alert(msg);
}
func();
将子函数写为匿名函数
function outter() {
var msg = 1;
return function () {
alert(++msg);
}
}
var ofunc = outter();
ofunc();
ofunc();
JavaScript数组
JavaScript数组定义
数组：JavaScript数组是指将多个数据对象编码存储、提供一致的存取方式的集合 。
- JavaScript中同一个数组中的元素，数据类型可以不相同。
数组元素：是指存储在数组中并赋予唯一索引号的数据段 。
- 各元素的数据类型可以是任意
有效的JavaScript数据类型，
元素按添加进数组的顺序存储
于数组中。
JavaScript数组创建
- 创建一个空数组
var Obj = new Array();
- 创建指定长度数组
var Obj = new Array( Size );
- 根据指定元素创建数组
方法1：var Obj = new Array( 元素1, 元素2, …, 元素N );
方法2：var Obj = [ 元素1, 元素2, 元素3, …, 元素N ];
JavaScript数组元素读写
使用方法：
- 数组名[下标索引];（与java一样）
JavaScript添加/删除数组元素
JavaScript的数组可以动态添加、删除元素
- 使用Array对象的
push方法：在数组的尾部添加新元素
var students = new Array();
students.push("Lily"); //在数组尾部新增元素Lily
- 使用“[]”运算符指定一个新下标来添加新元素，新元素添加到指定的下标处。
如果指定的下标超过数组的长度，数组将被扩展为新下标指定的长度。
students[0].push("Tom"); //在下标0处新增元素Tom，后面的元素依次向后移
删除数组元素
- 使用delete运算符：删除数组中指定元素
delete 数组名[下标];
var names = Array("李莉", "杨杨");
delete names[0]; //删除数组的第2个元素
JavaScript数组元素的基本操作
数组对象的length（长度）属性指示了数组元素的个数
| 方法 | 作用 |
|---|---|
| length属性： | 返回指定数组的长度 |
| join(分隔符)： | 按指定分隔符将各元素组合为字符串 |
| push(元素1, 元素2……)： | 添加单个或多个元素至数组末尾 |
| pop()： | 移除数组末尾元素并返回 |
| shift()： | 移除数组顶端元素并返回 |
| shift(元素1, 元素2……)： | 添加单个或多个元素至数组顶端 |
| concat(item1, item2……)： | 将连接多个item按参数顺序连接在数组末尾，item可为数组或数组元素 |
| reverse()： | 反转数组中元素的顺序 |
| shuffle()： | 打乱数组元素 |
| sort([sortfunction])： | 对数组元素进行排序，sortfunction用来确定元素顺序的函数的名称，是一个具备两个形参的函数类型，缺省按照ASCII字符顺序进行升序排列。 |
EverdayForCode坚持每天做笔记
294
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
