一.JavaScript概述
1.js概述 (理解)
JS是一门基于对象和事件驱动的脚本语言, 主要应用在客户端
js特点:
解释运行, 不需要编译
基于对象
弱类型
js的历史
js优点:
交互性
安全性
跨平台
2.在html中结合js代码 (掌握)
(1)直接在html中书写js代码
通过html中的<head>标签中的<script type="text/javascript"></script>在这个标签的内部可以书写js代码
(2)引入外部的js文件
通过<script type="text/javascript" src="demo1.js"></script>来引入外部的js文件
注意: 这个标签不能够合并成自闭标签, 否则会引入失败.
二.js的语法 (都需要掌握, 根据自己的实际情况选择性的练习)
1.js中的注释 (掌握)
//单行注释
/*
多行注释
*/
2.数据类型 (!!掌握)
基本数据类型: 数值类型(number) 字符串类型(string) 布尔类型(boolean) undefined null
(1)数值类型 -- js中的所有数值在底层都是浮点型, 但是在处理和显示的时候, js会自动的在整型和浮点型之间进行转换
常量: 1, 3, 5, 8.9, 100
特殊值:
Infinity -- 无穷大
-Infinity -- 负无穷大
NaN -- 非数字 NaN和任何数值都不相等, 包括它本身. NaN和任何数值运算结果都是NaN, 如果要判断一个数值是否是一个非数字, 不能用 xx == NaN进行判断, 可以用isNaN(xx)进行判断.
数值类型是一个基本数据类型, 但是在js中也提供了对应的包装对象 -- Number
Number提供的属性：
Number.MAX_VALUE 可表示的最大数字
Number.MIN_VALUE 可表示的最小数字
Number.NaN 非数字值
Number.POSITIVE_INFINITY 正无穷大
Number.NEGATIVE_INFINITY 负无穷大
(2)字符串类型
js中的字符串类型是一个基本数据类型, 字符串常量必须用单引号或双引号引起来
js中为字符串类型提供了对应的包装对象 -- String, 并提供了一些重要的属性和方法
length -- 字符串的长度
...
(3)布尔类型
布尔类型的值可以是 false和true
js中为布尔类型提供了对应的包装对象 -- Boolean, 并提供了一些重要的属性和方法
...
(4)undefined
undefined类型的值只有一个, 就是undefined. 表示变量未定义, 如果定义一个变量未初始化值, 那么该变量的值就是undefined.
(5)null
null类型的值只有一个, 就是null. 表示空值, 即表示该处的值现在为空
作为函数的返回值, 表示该返回值是一个没有任何内容的对象
复杂数据类型: 对象(普通对象 数组 函数)
**js中的数据类型的转换
js中的数据类型在需要时会自动的进行类型转换, 转换时遵循如下规则:
数值类型:
转字符串时, 自动的转成对应值的字符串
转布尔值时, 0 和 NaN转为 false, 其他数值转为true
需要时自动的转成对应值的包装对象
字符串类型:
空字符(""): 转数字为0, 转布尔为false
非空数值字符串("123"): 转数字为对应值的数字, 转布尔为true
非空非数值字符串("abc123"): 转数字为NaN, 转布尔为true
需要时自动的转成对应值的包装对象
布尔类型:
true: 转数字为1, 转字符串为"true"
false: 转数字为0, 转字符串为"false"
需要时自动的转成对应值的包装对象
undefined:转数字时为NaN, 转字符串为"undefined", 转对象抛出异常
null:转数字时为0, 转字符串为"null", 转对象抛出异常
3.变量的定义 (掌握)
js中有数据类型, 但是在js中变量不区分数据类型, 所以称js是一个弱类型的语言
在js中通过var关键字定义一个变量, 变量没有类型区分, 可以指向任意类型的值
4.运算符 (掌握)
算术运算符: +，-，*，/，%，++，--
赋值运算符: =，+=，-=，*=，/=，%=
比较运算符: ==，!=，===，!==，>，>=，<，<=
位运算符: & ， |
逻辑运算符: && ，||
前置逻辑运算符: ! (not)
三元运算符: ? :
其他运算符: typeOf, delete
5.语句 (掌握)
if判断语句
语法和Java中大致相同, 但是判断条件没有类型的限制
switch选择语句
语法和Java中大致相同, 并且也支持字符串类型
循环语句
do..while(){} while(){} for(){} 语法和Java中的很相似, 但是js中不支持增强for循环
6.函数 (!!!掌握)
所谓函数就是一组整合在一起的具有功能的代码块, 可以反复调用
(1) 通过function关键字来定义一个函数
function 函数名(形参列表){
函数体
}
函数名(实参列表)
(2) 通过函数表达式来定义一个函数
var fn = function (形参列表){
函数体
}
函数名(实参列表)
(3) 通过Function构造函数来定义函数
var fn = new Function(参数1, 参数2, ..., 参数n, 函数体);
**函数的参数
在js中, 调用函数时, 参数是可以省略的. 并且实参个数可以小于,等于或大于形参个数
当实参个数大于形参个数, 多出来的参数可以通过arguments(所有实参组成的数组)数组来获取
由于在调用函数时, 即使省略参数也可以调用, 为了避免一些错误或一些意外的操作, 我们可以给参数设置默认值来避免
function fn3(name, age){
age = age || 16;
alert(name+":"+age);
}
fn3("wangwu", 26);
**由于js中函数可以理解为一种对象, 所以可以赋值给其他变量, 也可以作为参数传入到其他函数, 甚至可以作为函数的返回值返回.
之所以具有这些特性, 是因为js是一门可以直接解释执行的脚本语言, 它没有编译的过程, 每次执行的都是源代码. 而js中的函数就是一组整合在一起的具有功能的代码块, 被调用时, 就是这个代码块执行,而这个代码块本质上就是一段字符串, 所以可以被任意的赋值和传递.
7.数组 (!!!掌握)
(1) 通过Array()构造函数来创建数组
var arr1 = new Array(); //长度为0的空数组
var arr2 = new Array(5); //长度为5的数组
var arr3 = new Array(1, 3, 5, "abc", true, new Object()); //创建指定初始值的数组
(2) 通过数组直接量来创建数组
var arr4 = []; //长度为0的空数组
var arr5 = [1, 3, 5, "abc", true, new Object()]; //创建指定初始值的数组
**js中的数组的长度是可以被任意改变的, 如果数组中某一位置没有赋值, 那么该处的值为undefined
**js中的数组的内容可以是不同类型的
length属性 -- 数组长度
arr5.length = 0; //可以通过设置数组的length属性值为0, 来清空数组中的元素
**js中的数组就是用[]括起来并用逗号分割开的一组内容, 本质上就是一段字符串.
8.对象 (!!!掌握)
(1)js中的内置对象
String对象
Array对象
Date对象
Math对象
Global对象
调用global对象上的属性或方法时, 可以省略global.
RegExp 对象
(2)自定义对象
方式一:
function Person(){}
var p = new Person();
p.name = "zhangsan";
p.age = 19;
p.run = function(){
alert(this.name+"~"+this.age+"~runing");
}
alert(p.name);
p.run();
方式二:
function Person(name, addr){
this.name = name;
this.addr = addr;
this.method = function(){
alert(this.name+"~"+this.age+"~method~~~");
}
}
var p = new Person("lisi", "beijing");
alert(p.name);
p.method();
方式三:
var p = {name:"wangwu", gender:"nan", run:function(){alert(this.name+"~"+this.gender+"~running...")}}
alert(p.name);
p.run();
**对象上的属性和方法可以动态的添加或减少
(3)js的对象操作
//对象上的属性和方法可以动态的添加或减少
var p = {name:"wangwu", gender:"nan", run:function(){alert(this.name+"~"+this.gender+"~running...")}}
p.age = 19; //添加属性
alert(p.age);
//delete可以用来删除对象上的属性和数组中的元素
delete p.age;
alert(p.age);
//对象中属性和方法的其他访问方式
var p = {name:"wangwu", gender:"nan", run:function(){alert(this.name+"~"+this.gender+"~running...")}}
p.name;
p.run();
alert(p["name"]);
//alert(p["run"]);
p["run"]();
//with语句
var p = {name:"wangwu", gender:"nan", run:function(){alert(this.name+"~"+this.gender+"~running...")}}
with(p){
alert(name);
alert(gender);
run();
}
//for...in语句
var p = {name:"wangwu", gender:"nan", run:function(){alert(this.name+"~"+this.gender+"~running...")}}
for(var x in p){
alert(x);
}
for(var x in p){
alert(x+":"+p[x]);
}
1.js概述 (理解)
JS是一门基于对象和事件驱动的脚本语言, 主要应用在客户端
js特点:
解释运行, 不需要编译
基于对象
弱类型
js的历史
js优点:
交互性
安全性
跨平台
2.在html中结合js代码 (掌握)
(1)直接在html中书写js代码
通过html中的<head>标签中的<script type="text/javascript"></script>在这个标签的内部可以书写js代码
(2)引入外部的js文件
通过<script type="text/javascript" src="demo1.js"></script>来引入外部的js文件
注意: 这个标签不能够合并成自闭标签, 否则会引入失败.
二.js的语法 (都需要掌握, 根据自己的实际情况选择性的练习)
1.js中的注释 (掌握)
//单行注释
/*
多行注释
*/
2.数据类型 (!!掌握)
基本数据类型: 数值类型(number) 字符串类型(string) 布尔类型(boolean) undefined null
(1)数值类型 -- js中的所有数值在底层都是浮点型, 但是在处理和显示的时候, js会自动的在整型和浮点型之间进行转换
常量: 1, 3, 5, 8.9, 100
特殊值:
Infinity -- 无穷大
-Infinity -- 负无穷大
NaN -- 非数字 NaN和任何数值都不相等, 包括它本身. NaN和任何数值运算结果都是NaN, 如果要判断一个数值是否是一个非数字, 不能用 xx == NaN进行判断, 可以用isNaN(xx)进行判断.
数值类型是一个基本数据类型, 但是在js中也提供了对应的包装对象 -- Number
Number提供的属性：
Number.MAX_VALUE 可表示的最大数字
Number.MIN_VALUE 可表示的最小数字
Number.NaN 非数字值
Number.POSITIVE_INFINITY 正无穷大
Number.NEGATIVE_INFINITY 负无穷大
(2)字符串类型
js中的字符串类型是一个基本数据类型, 字符串常量必须用单引号或双引号引起来
js中为字符串类型提供了对应的包装对象 -- String, 并提供了一些重要的属性和方法
length -- 字符串的长度
...
(3)布尔类型
布尔类型的值可以是 false和true
js中为布尔类型提供了对应的包装对象 -- Boolean, 并提供了一些重要的属性和方法
...
(4)undefined
undefined类型的值只有一个, 就是undefined. 表示变量未定义, 如果定义一个变量未初始化值, 那么该变量的值就是undefined.
(5)null
null类型的值只有一个, 就是null. 表示空值, 即表示该处的值现在为空
作为函数的返回值, 表示该返回值是一个没有任何内容的对象
复杂数据类型: 对象(普通对象 数组 函数)
**js中的数据类型的转换
js中的数据类型在需要时会自动的进行类型转换, 转换时遵循如下规则:
数值类型:
转字符串时, 自动的转成对应值的字符串
转布尔值时, 0 和 NaN转为 false, 其他数值转为true
需要时自动的转成对应值的包装对象
字符串类型:
空字符(""): 转数字为0, 转布尔为false
非空数值字符串("123"): 转数字为对应值的数字, 转布尔为true
非空非数值字符串("abc123"): 转数字为NaN, 转布尔为true
需要时自动的转成对应值的包装对象
布尔类型:
true: 转数字为1, 转字符串为"true"
false: 转数字为0, 转字符串为"false"
需要时自动的转成对应值的包装对象
undefined:转数字时为NaN, 转字符串为"undefined", 转对象抛出异常
null:转数字时为0, 转字符串为"null", 转对象抛出异常
3.变量的定义 (掌握)
js中有数据类型, 但是在js中变量不区分数据类型, 所以称js是一个弱类型的语言
在js中通过var关键字定义一个变量, 变量没有类型区分, 可以指向任意类型的值
4.运算符 (掌握)
算术运算符: +，-，*，/，%，++，--
赋值运算符: =，+=，-=，*=，/=，%=
比较运算符: ==，!=，===，!==，>，>=，<，<=
位运算符: & ， |
逻辑运算符: && ，||
前置逻辑运算符: ! (not)
三元运算符: ? :
其他运算符: typeOf, delete
5.语句 (掌握)
if判断语句
语法和Java中大致相同, 但是判断条件没有类型的限制
switch选择语句
语法和Java中大致相同, 并且也支持字符串类型
循环语句
do..while(){} while(){} for(){} 语法和Java中的很相似, 但是js中不支持增强for循环
6.函数 (!!!掌握)
所谓函数就是一组整合在一起的具有功能的代码块, 可以反复调用
(1) 通过function关键字来定义一个函数
function 函数名(形参列表){
函数体
}
函数名(实参列表)
(2) 通过函数表达式来定义一个函数
var fn = function (形参列表){
函数体
}
函数名(实参列表)
(3) 通过Function构造函数来定义函数
var fn = new Function(参数1, 参数2, ..., 参数n, 函数体);
**函数的参数
在js中, 调用函数时, 参数是可以省略的. 并且实参个数可以小于,等于或大于形参个数
当实参个数大于形参个数, 多出来的参数可以通过arguments(所有实参组成的数组)数组来获取
由于在调用函数时, 即使省略参数也可以调用, 为了避免一些错误或一些意外的操作, 我们可以给参数设置默认值来避免
function fn3(name, age){
age = age || 16;
alert(name+":"+age);
}
fn3("wangwu", 26);
**由于js中函数可以理解为一种对象, 所以可以赋值给其他变量, 也可以作为参数传入到其他函数, 甚至可以作为函数的返回值返回.
之所以具有这些特性, 是因为js是一门可以直接解释执行的脚本语言, 它没有编译的过程, 每次执行的都是源代码. 而js中的函数就是一组整合在一起的具有功能的代码块, 被调用时, 就是这个代码块执行,而这个代码块本质上就是一段字符串, 所以可以被任意的赋值和传递.
7.数组 (!!!掌握)
(1) 通过Array()构造函数来创建数组
var arr1 = new Array(); //长度为0的空数组
var arr2 = new Array(5); //长度为5的数组
var arr3 = new Array(1, 3, 5, "abc", true, new Object()); //创建指定初始值的数组
(2) 通过数组直接量来创建数组
var arr4 = []; //长度为0的空数组
var arr5 = [1, 3, 5, "abc", true, new Object()]; //创建指定初始值的数组
**js中的数组的长度是可以被任意改变的, 如果数组中某一位置没有赋值, 那么该处的值为undefined
**js中的数组的内容可以是不同类型的
length属性 -- 数组长度
arr5.length = 0; //可以通过设置数组的length属性值为0, 来清空数组中的元素
**js中的数组就是用[]括起来并用逗号分割开的一组内容, 本质上就是一段字符串.
8.对象 (!!!掌握)
(1)js中的内置对象
String对象
Array对象
Date对象
Math对象
Global对象
调用global对象上的属性或方法时, 可以省略global.
RegExp 对象
(2)自定义对象
方式一:
function Person(){}
var p = new Person();
p.name = "zhangsan";
p.age = 19;
p.run = function(){
alert(this.name+"~"+this.age+"~runing");
}
alert(p.name);
p.run();
方式二:
function Person(name, addr){
this.name = name;
this.addr = addr;
this.method = function(){
alert(this.name+"~"+this.age+"~method~~~");
}
}
var p = new Person("lisi", "beijing");
alert(p.name);
p.method();
方式三:
var p = {name:"wangwu", gender:"nan", run:function(){alert(this.name+"~"+this.gender+"~running...")}}
alert(p.name);
p.run();
**对象上的属性和方法可以动态的添加或减少
(3)js的对象操作
//对象上的属性和方法可以动态的添加或减少
var p = {name:"wangwu", gender:"nan", run:function(){alert(this.name+"~"+this.gender+"~running...")}}
p.age = 19; //添加属性
alert(p.age);
//delete可以用来删除对象上的属性和数组中的元素
delete p.age;
alert(p.age);
//对象中属性和方法的其他访问方式
var p = {name:"wangwu", gender:"nan", run:function(){alert(this.name+"~"+this.gender+"~running...")}}
p.name;
p.run();
alert(p["name"]);
//alert(p["run"]);
p["run"]();
//with语句
var p = {name:"wangwu", gender:"nan", run:function(){alert(this.name+"~"+this.gender+"~running...")}}
with(p){
alert(name);
alert(gender);
run();
}
//for...in语句
var p = {name:"wangwu", gender:"nan", run:function(){alert(this.name+"~"+this.gender+"~running...")}}
for(var x in p){
alert(x);
}
for(var x in p){
alert(x+":"+p[x]);
}