-- 核心部分:基础部分(变量定义、运算符、流程控制 for in)、
函数的定义、函数的调用、函数的作用、类、对象、继承、JSON、内置函数.
-- DOM编程
-- BOM编程
-- AJAX编程
一、js语句可以写在哪些地方:
1. 写在<script type="text/javascript">js语句</script>之间
<script></script>可以写在html页面的任何地方。
2. 写在外部的js文件中。用得时候要在当前页面引入。
<script type="text/javascript" src="a.js"></script>
3. 写在html元素事件属性中。
<input type="button" οnclick="1-N条语句"/>
onxxxx事件属性
4. 写在a标签的href属性中。
<a href="javascript:1-N条语句">fkjava</a>
二、js中的变量分两种:
-- 全局变量: 属于window的属性就是全局变量。
-- 局部变量: 函数中定义的变量。
三、js中函数分两种:
-- 自定义函数
-- 内置函数(Date、Array、Number、RegExp、String、Boolean、Function、Object、Math、Error)
四、js中的数据类型:
-- Number : 数字 (var i = 10;) js中所有的数字都是Number类型.
-- String : 字符串
-- Array : 数组
-- Boolean : 布尔
-- RegExp: 正则表达式
-- Function : 函数
-- Object : 对象
五、函数定义的三种方式:
1. 第一种定义函数的方式 : Function
function test1(a, b){
alert("第一种" + a + "==" + b);
}
语法:
function 函数名(形参列表){
// 函数的执行体(写js语句)
}
2. 第二种定义函数的方式 : Function (常用)
var test2 = function(a, b){
alert("第二种" + a + "==" + b);
}
语法:
var 函数名 = function(形参列表){
// 函数的执行体(写js语句)
}
// 匿名函数(第一种)
(function(a, b, c){
alert(a * b * c);
}(10,20,30));
语法:
(function(形参列表){
// 函数的执行体(写js语句)
}(实参列表));
// 匿名函数(第一种)
(function(a, b, c){
alert(a * b * c);
})(10,20,40);
语法:
(function(形参列表){
// 函数的执行体(写js语句)
})(实参列表);
3. 第三种定义函数的方式 : Function (不常用)
var test3 = new Function("a","b","c", "alert('第三种' + a + b + c)");
语法:
var 函数名 = new Function(arg1,arg2,arg3,...,argN);
-- arg1-argN-1 : 形参列表
-- argN : 函数的执行体(写js语句)。
注意:
a. 函数不存在重载,后定的函数会覆盖前定的函数.
var test1 = function(){}; // Function
b. 只要定义了一个函数,那它就是Function类型,这样就可以用Function中的属性方法。
c. 函数想实现重载功能要用Function中arguments属性。
d. 定义一个函数就是window的方法
五、函数调用的三种方式:
1. 第一种方式:
var test1 = function(a, b){
alert(a + b);
};
window.test1(20,30); // 默认主调是window
语法:
主调.函数名(实参列表);
2. 第二种方式:
var test1 = function(a, b){
alert(a + b);
};
test1.call(window, 20,30);
语法:
函数名.call(主调, 实参列表1,实参列表1,..);
3. 第三种方式:
var test1 = function(a, b){
alert(a + b);
};
test1.apply(window,[20,30]);
语法:
函数名.apply(主调, [实参列表1,实参列表1,..]);
函数的三个作用:
1. 把函数当作函数用(html页面事件监听时用得最多):
-- html元素事件绑定的四种方式:
a. 第一种绑定事件方式:
<input type="button" onxxx="函数调用字符串"/>
onxxx : onclick、onmouseover、onmouseout、onfocus、onblur、onchange
b. 第二种绑定事件方式:
// 根据html 元素的id属性值获取dom 元素
var dom元素 = document.getElementById("html元素的id属性值");
dom元素.onclick = function(){
alert("第二种");
};
语法:
dom元素.onxxxx = 事件处理函数;
-- onxxx : html元素的事件属性名
c. 第三种绑定事件方式:
// 根据html 元素的id属性值获取dom 元素
var btn3 = document.getElementById("btn3");// Object
btn3.addEventListener("click", function(){
alert("第三种");
});
语法:
dom元素.addEventListener("click", 事件处理函数);
-- 第一参数 : html元素的事件属性名把前面的on去掉。
d. 第四种绑定事件方式:(msie专用)
// 根据html 元素的id属性值获取dom 元素
var btn4 = document.getElementById("btn4");// Object
btn4.attachEvent("onclick", function(){
alert("第四种");
});
语法:
dom元素.attachEvent("onclick", 事件处理函数);
-- 第一参数 : html元素的事件属性名.
2. 把函数当作类来用:
-- 当你把函数当作类来用时,它就提供了一个万能的构造器。
-- new Function() --> function
-- new new Function() --> object
-- 创建对象:var obj = new function(); // object
var Person = function(){
};
a. 静态的属性
Person.age = 20;
函数的引用.属性名 = 属性值;
函数的引用["属性名"] = 属性值;
调用:
函数的引用.属性名|函数的引用["属性名"]
b. 静态的方法
Person.say = function(){};
函数的引用.方法名 = 函数的引用;
函数的引用["方法名"] = 函数的引用;
调用:
函数的引用.方法名(实参列表);
函数的引用["方法名"](实参列表);
创建对象才能用的属性与方法:
var Person = function(){}
/** ############### 对象创建之后添加属性与方法 ################## */
var p = new Person();
1. 对象的属性
p.age = 30;
p["sex"] = "女";
对象名.属性名 = 属性值
对象名["属性名"] = 属性值
2. 对象的方法
p.say = function(){};
p["info"] = function(){};
对象名.方法名 = 函数的引用
对象名["方法名"] = 函数的引用
/** ############### 对象创建之前添加属性与方法 ################## */
var Person = function(age){
this.age = age;
}
1. 对象的属性
Person.prototype.age = 30;
Person.prototype["sex"] = "女";
函数的引用.prototype.属性名 = 属性值
函数的引用.prototype["属性名"] = 属性值
var p = new Person(40);
p.属性名
2. 对象的方法
Person.prototype.say = function(){};
Person.prototype["info"] = function(){};
函数的引用.prototype.方法名 = 函数的引用
函数的引用.prototype["方法名"] = 函数的引用
var p = new Person(40);
p.方法名(实参);
/** 继承 */
1. 对象冒充的方式
2. 通过原型实现继承
-- 单一继承:
var Person = function(){}
var Student = function(){}
Student.prototype.say = Person.prototype.say;
语法:
子函数的引用.prototype.属性名|方法名 = 父函数的引用.prototype.属性名|方法名
-- 全部继承:
Student.prototype = Person.prototype;
语法:
子函数的引用.prototype = 父函数的引用.prototype
3. 把函数当作类中的方法用。
七、js中的对象:
a. js中的对象分两种:
-- 内置对象(BOM)
-- 自已创建对象.
b. 创建对象的三种方式:
-- var obj = new new Function();
-- var obj = new Object(); // 空对象
-- var obj = {}; // 空对象
JSON: JavaScript Object Notation (javascript对象标记) .
-- json已经成为了跨平台,跨语言进行数据交互的通用格式。(比较流行)
json取代xml进行数据传输.
-- 生成与解析xml的数据格式都比较繁琐。
-- 用xml传输数据冗余的数据太多。
json格式:(java中map集合)
{key : value, key : value} --> Object类型
key: 对象的属性名|方法名 (只能用字符串)
value : 对象的属性值|函数的引用 (js能支持的所有数据类型)
调用json对象(js对象)
a. 调用一
alert(obj.name);
b. 调用二
alert(obj["age"]);
c. 调用三
for (var key in obj){
key : 属性名|方法名
}
json在什么情况下用得最多:
1. 异步请求时,用json格式返回数据.
2. 跨平台时,进行数据交互时. (webservice)
xml:
<types>
<type>
<code>0001</code>
<name>fdsfa</name>
<remark>fdfd</remark>
</type>
<type>
<code>0001</code>
<name>fdsfa</name>
<remark>fdfd</remark>
</type>
</types>
json:
[{"code" : "0001", "name" : "fdfdfd", "remark" : "fdsf"},
{"code" : "0001", "name" : "fdfdfd", "remark" : "fdsf"}]
List集合 []
List<Article> [{},{}]
Map集合 {}
八、实战示例
-- 系统运行时间
-- 两个时间比较计算出相差的秒数
内置函数:
1. Function中的属性方法:
-- arguments : 获取实参数组。
-- toString() : 把函数定义当作字符串输出
-- length : 获取形参的长度。
-- call(主调, arg1,arg2,...) : 函数调用
-- apply(主调, [arg1,arg2,...]) : 函数调用
-- prototype : 专门为函数的对象添加属性与方法。
2. Date : 日期
内置对象(BOM):
1. window : 代表html页面对应的窗口
-- onload : 窗口加载完的事件
-- setTimeout("调用函数的字符串", "毫秒数") : 定时器(延迟多少毫秒调一次) 只执行一次
-- setInterval("调用函数的字符", "毫秒数") : 定时器(每隔多少毫秒调一次) 不断执行
2. document : 代表html页面当前的文档 <html></html>
注意:
1. 函数与对象之间关系
-- 函数的创建: new Function(); --> function
-- 对象的创建: new new Function(); --> object
函数的定义、函数的调用、函数的作用、类、对象、继承、JSON、内置函数.
-- DOM编程
-- BOM编程
-- AJAX编程
一、js语句可以写在哪些地方:
1. 写在<script type="text/javascript">js语句</script>之间
<script></script>可以写在html页面的任何地方。
2. 写在外部的js文件中。用得时候要在当前页面引入。
<script type="text/javascript" src="a.js"></script>
3. 写在html元素事件属性中。
<input type="button" οnclick="1-N条语句"/>
onxxxx事件属性
4. 写在a标签的href属性中。
<a href="javascript:1-N条语句">fkjava</a>
二、js中的变量分两种:
-- 全局变量: 属于window的属性就是全局变量。
-- 局部变量: 函数中定义的变量。
三、js中函数分两种:
-- 自定义函数
-- 内置函数(Date、Array、Number、RegExp、String、Boolean、Function、Object、Math、Error)
四、js中的数据类型:
-- Number : 数字 (var i = 10;) js中所有的数字都是Number类型.
-- String : 字符串
-- Array : 数组
-- Boolean : 布尔
-- RegExp: 正则表达式
-- Function : 函数
-- Object : 对象
五、函数定义的三种方式:
1. 第一种定义函数的方式 : Function
function test1(a, b){
alert("第一种" + a + "==" + b);
}
语法:
function 函数名(形参列表){
// 函数的执行体(写js语句)
}
2. 第二种定义函数的方式 : Function (常用)
var test2 = function(a, b){
alert("第二种" + a + "==" + b);
}
语法:
var 函数名 = function(形参列表){
// 函数的执行体(写js语句)
}
// 匿名函数(第一种)
(function(a, b, c){
alert(a * b * c);
}(10,20,30));
语法:
(function(形参列表){
// 函数的执行体(写js语句)
}(实参列表));
// 匿名函数(第一种)
(function(a, b, c){
alert(a * b * c);
})(10,20,40);
语法:
(function(形参列表){
// 函数的执行体(写js语句)
})(实参列表);
3. 第三种定义函数的方式 : Function (不常用)
var test3 = new Function("a","b","c", "alert('第三种' + a + b + c)");
语法:
var 函数名 = new Function(arg1,arg2,arg3,...,argN);
-- arg1-argN-1 : 形参列表
-- argN : 函数的执行体(写js语句)。
注意:
a. 函数不存在重载,后定的函数会覆盖前定的函数.
var test1 = function(){}; // Function
b. 只要定义了一个函数,那它就是Function类型,这样就可以用Function中的属性方法。
c. 函数想实现重载功能要用Function中arguments属性。
d. 定义一个函数就是window的方法
五、函数调用的三种方式:
1. 第一种方式:
var test1 = function(a, b){
alert(a + b);
};
window.test1(20,30); // 默认主调是window
语法:
主调.函数名(实参列表);
2. 第二种方式:
var test1 = function(a, b){
alert(a + b);
};
test1.call(window, 20,30);
语法:
函数名.call(主调, 实参列表1,实参列表1,..);
3. 第三种方式:
var test1 = function(a, b){
alert(a + b);
};
test1.apply(window,[20,30]);
语法:
函数名.apply(主调, [实参列表1,实参列表1,..]);
函数的三个作用:
1. 把函数当作函数用(html页面事件监听时用得最多):
-- html元素事件绑定的四种方式:
a. 第一种绑定事件方式:
<input type="button" onxxx="函数调用字符串"/>
onxxx : onclick、onmouseover、onmouseout、onfocus、onblur、onchange
b. 第二种绑定事件方式:
// 根据html 元素的id属性值获取dom 元素
var dom元素 = document.getElementById("html元素的id属性值");
dom元素.onclick = function(){
alert("第二种");
};
语法:
dom元素.onxxxx = 事件处理函数;
-- onxxx : html元素的事件属性名
c. 第三种绑定事件方式:
// 根据html 元素的id属性值获取dom 元素
var btn3 = document.getElementById("btn3");// Object
btn3.addEventListener("click", function(){
alert("第三种");
});
语法:
dom元素.addEventListener("click", 事件处理函数);
-- 第一参数 : html元素的事件属性名把前面的on去掉。
d. 第四种绑定事件方式:(msie专用)
// 根据html 元素的id属性值获取dom 元素
var btn4 = document.getElementById("btn4");// Object
btn4.attachEvent("onclick", function(){
alert("第四种");
});
语法:
dom元素.attachEvent("onclick", 事件处理函数);
-- 第一参数 : html元素的事件属性名.
2. 把函数当作类来用:
-- 当你把函数当作类来用时,它就提供了一个万能的构造器。
-- new Function() --> function
-- new new Function() --> object
-- 创建对象:var obj = new function(); // object
var Person = function(){
};
a. 静态的属性
Person.age = 20;
函数的引用.属性名 = 属性值;
函数的引用["属性名"] = 属性值;
调用:
函数的引用.属性名|函数的引用["属性名"]
b. 静态的方法
Person.say = function(){};
函数的引用.方法名 = 函数的引用;
函数的引用["方法名"] = 函数的引用;
调用:
函数的引用.方法名(实参列表);
函数的引用["方法名"](实参列表);
创建对象才能用的属性与方法:
var Person = function(){}
/** ############### 对象创建之后添加属性与方法 ################## */
var p = new Person();
1. 对象的属性
p.age = 30;
p["sex"] = "女";
对象名.属性名 = 属性值
对象名["属性名"] = 属性值
2. 对象的方法
p.say = function(){};
p["info"] = function(){};
对象名.方法名 = 函数的引用
对象名["方法名"] = 函数的引用
/** ############### 对象创建之前添加属性与方法 ################## */
var Person = function(age){
this.age = age;
}
1. 对象的属性
Person.prototype.age = 30;
Person.prototype["sex"] = "女";
函数的引用.prototype.属性名 = 属性值
函数的引用.prototype["属性名"] = 属性值
var p = new Person(40);
p.属性名
2. 对象的方法
Person.prototype.say = function(){};
Person.prototype["info"] = function(){};
函数的引用.prototype.方法名 = 函数的引用
函数的引用.prototype["方法名"] = 函数的引用
var p = new Person(40);
p.方法名(实参);
/** 继承 */
1. 对象冒充的方式
2. 通过原型实现继承
-- 单一继承:
var Person = function(){}
var Student = function(){}
Student.prototype.say = Person.prototype.say;
语法:
子函数的引用.prototype.属性名|方法名 = 父函数的引用.prototype.属性名|方法名
-- 全部继承:
Student.prototype = Person.prototype;
语法:
子函数的引用.prototype = 父函数的引用.prototype
3. 把函数当作类中的方法用。
七、js中的对象:
a. js中的对象分两种:
-- 内置对象(BOM)
-- 自已创建对象.
b. 创建对象的三种方式:
-- var obj = new new Function();
-- var obj = new Object(); // 空对象
-- var obj = {}; // 空对象
JSON: JavaScript Object Notation (javascript对象标记) .
-- json已经成为了跨平台,跨语言进行数据交互的通用格式。(比较流行)
json取代xml进行数据传输.
-- 生成与解析xml的数据格式都比较繁琐。
-- 用xml传输数据冗余的数据太多。
json格式:(java中map集合)
{key : value, key : value} --> Object类型
key: 对象的属性名|方法名 (只能用字符串)
value : 对象的属性值|函数的引用 (js能支持的所有数据类型)
调用json对象(js对象)
a. 调用一
alert(obj.name);
b. 调用二
alert(obj["age"]);
c. 调用三
for (var key in obj){
key : 属性名|方法名
}
json在什么情况下用得最多:
1. 异步请求时,用json格式返回数据.
2. 跨平台时,进行数据交互时. (webservice)
xml:
<types>
<type>
<code>0001</code>
<name>fdsfa</name>
<remark>fdfd</remark>
</type>
<type>
<code>0001</code>
<name>fdsfa</name>
<remark>fdfd</remark>
</type>
</types>
json:
[{"code" : "0001", "name" : "fdfdfd", "remark" : "fdsf"},
{"code" : "0001", "name" : "fdfdfd", "remark" : "fdsf"}]
List集合 []
List<Article> [{},{}]
Map集合 {}
八、实战示例
-- 系统运行时间
-- 两个时间比较计算出相差的秒数
内置函数:
1. Function中的属性方法:
-- arguments : 获取实参数组。
-- toString() : 把函数定义当作字符串输出
-- length : 获取形参的长度。
-- call(主调, arg1,arg2,...) : 函数调用
-- apply(主调, [arg1,arg2,...]) : 函数调用
-- prototype : 专门为函数的对象添加属性与方法。
2. Date : 日期
内置对象(BOM):
1. window : 代表html页面对应的窗口
-- onload : 窗口加载完的事件
-- setTimeout("调用函数的字符串", "毫秒数") : 定时器(延迟多少毫秒调一次) 只执行一次
-- setInterval("调用函数的字符", "毫秒数") : 定时器(每隔多少毫秒调一次) 不断执行
2. document : 代表html页面当前的文档 <html></html>
注意:
1. 函数与对象之间关系
-- 函数的创建: new Function(); --> function
-- 对象的创建: new new Function(); --> object