Javascript
内容：JavaScript语言。 JavaScript语法很多和C#、Java、C等语言类似
目标：掌握JavaScript语法，为Dom编程和jQuery打基础。
参考书：张孝祥《JavaScript网页开发——体验式学习教程》
什么是脚本语言、脚本程序？
答：
1.脚本是批处理文件的延伸，是一种纯文本保存的程序，一般来说的计算机脚本程序是确定的一系列控制计算机进行运算操作动作的组合，在其中可以实现一定的逻辑分支等。 脚本程序相对一般程序开发来说比较接近自然语言，可以不经编译而是解释执行，利于快速开发或一些轻量的控制。
2.动态程序一般有两种实现方式，一是二进制方式，一是脚本方式。 二进制方式是先将我们编写的程序进行编译，变成机器可识别的指令代码（如.exe文件），然后再执行。这种编译好的程序我们只能执行、使用，却看不到他的程序内容。 脚本简单地说就是一条条的文字命令，这些文字命令是我们可以看到的（如可以用记事本打开查看、编辑），脚本程序在执行时，是由系统的一个解释器，将其一条条的翻译成机器可识别的指令，并按程序顺序执行。因为脚本在执行时多了一道翻译的过程，所以它比二进制程序执行效率要稍低一些。 我们上面提到的各种动态语言，如ASP、PHP、CGI、JSP等，都是脚本语言。
DHTML：动态html。【JavaScript + html + css】
什么是JavaScript(简称js)
JS的开发环境
JavaScript的组成
ECMAScript是一种由欧洲计算机制造商协会（ECMA）通过ECMA-262标准化的脚本程序设计语言
核心的JavaScript由以下3部分组成：
ECMAScript（基本语法）
语法、类型、关键字、保留字、语句、运算符、对象
Dom文档对象模型（封装好的一些函数库）
在html于xml中都是用dom
Xml与html的应用程序接口(api)
Bom浏览器对象模型
XMLHttpRequest、ActiveXObject对象等。浏览器特有的。
JavaScript入门
1.JavaScript如果遇到错误，有错误的<script></script>中的代码不会执行，但是不会影响后面的而其他<script></script>代码和html的显示。
2.当使用导入外部js文件时，由于js得加载时“阻塞”模式，所以需要等到js全部加载完成以后才会继续向后执行，所以如果对于性能要求比较高的时候可以考虑把js加载放到页面的最后。
CDN：
CDN的全称是Content Delivery Network，即内容分发网络。其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳定。通过在网络各处放置节点服务器所构成的在现有的互联网基础之上的一层智能虚拟网络，CDN系统能够实时地根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上。其目的是使用户可就近取得所需内容，解决 Internet网络拥挤的状况，提高用户访问网站的响应速度。
JavaScript的事件
ps:
只有超链接的href中的JavaScript中才需要加“”javascript:”，因为它不是事件，而是把“”javascript:”看成像“http:”、“ftp:”、“thunder://”、“ed2k://”、“mailto:”一样的网络协议，交由js解析引擎处理。只有href中这是这是一个特例。
onblur 鼠标失去焦点事件
onclick 单击事件
ondbclick双击事件
onfocus 得到焦点事件
onkeydown 键按下事件
onkeypress 键按下 参数不一样
onkeyup 键按下抬起事件
onmousedown鼠标按下事件
onmousemove鼠标悬浮事件
onmouseover进来
onmouseout 出去
onmouseup 鼠标按下抬起
<!--有时候不想让程序触发onclick事件，但是单击的时候还想执行一些js代码。
这个时候就考虑用href="javascript:js代码"，这里的“javascript:”，是表示一种协议。告诉浏览器“:”后面的是一段js代码。
j
-->
<a href="javascript:alert('js弹出对话框');">执行</a>
JavaScript中void是一个操作符，该操作符指定要计算一个表达式返回undefined。一个无用的值。
void 操作符用法格式如下： 1. javascript:void (expression) 2. javascript:void expression expression是一个要计算的 JavaScript 标准的表达式。表达式外侧的圆括号是可选的，但是写上去是一个好习惯。我们可以使用 void 操作符指定超级链接。表达式会被计算但是不会在当前文档处装入任何内容。面的代码创建了一个超级链接，当用户点击以后不会发生任何事。当用户点击链接时，void(0) 计算为 0，但在 JavaScript 上没有任何效果。
<a href=”javascript:void(0)”>单击此处什么也不会发生</a>
<a href=“javascript:document.form.submit();”>submit form</a>
JavaScript语法
js注意几点
1大小写敏感
2弱类型语言
3声明变量用var
4字符串用单引号
5每句话后面分号
关键字、保留字
关键字：
break、else、new、var、case、finally、return、void、catch、for、switch、while、continue、function、this、with、default、if、throw、delete、in、try、do、instanceof、typeof
保留字：
abstract、enum、int short、boolean、export、interface、static、byte、extends、long、super、char、final、native、synchronized、class、float、package、throws、const、goto、private、transient、debugger、implements、protected、volatile、double、import、public
JavaScript数据类型
一个变量声明没有赋值的结果undefined
Typeof还有一个作用那就是判断变量是否可用
JavaScript中的null与undefined
JavaScript变量的作用域
注意：在函数内部的for或者while或者if等块中声明的变量，的作用域范围也是整个函数之内，所以为了避免混淆，不如直接在函数内一开始的时候就声明这些变量。Var n=10;function ff(){n++;}; ff();alert(n);
C#变量作用域没学好
function f1(){ n=100;alert(n)};
f1();alert(n); 报错不
Function f2(){ var sum=10;if(sum>5){var n=10;n++;} alert(n);} f2();
声明变量的时候用var 如果不用表示在整个页面都有效,所以省略var 不推荐
有可能会冲突,外部导入
还有被释放资源的问题
<script type="text/javascript">
//1.如果在某个函数内定义了变量则作用域范围属于该函数，声明变量时使用var与不使用var的区别
//声明变量时没有使用var,这个n属于全局作用域范围的变量
function f1() {
n = 100;
};
f1();
alert(n);
//声明变量时使用var
// function f2() {
// var k= 100;
// };
// f2();
// alert(k); //这里会报错，找不到这个变量k
//2.JS中没有块级作用域范围。
if (true) {
var sum = 100;
for (var i = 0; i < 100; i++) {
sum += i;
}
}
//js中没有块级作用域，所以这个i可以访问
alert(i);
var t = 'test.txt';
</script>
<script type="text/javascript">
//3. 一个页面中的多个 < script > 标签中的变量可以互相访问
alert(t);
</script>
JavaScript中字符串同样需要转义符
alert('c:\\windows\\microsoft\\vs.txt');
alert('you\'re');
alert('姓名：Bob\r\n性别：男');
三元运算符：
var stuName = 'zl';
var stuGender = (stuName == 'wdz') ? '男' : '女';
alert(stuGender);
=================switch-case======================
var v;
v = true;
switch (v) {
case 123:
alert(123);
break;
case "true":
alert("字Á?符¤?串ä?true");
break;
case true:
alert(true);
alert("这a个?是º?Boolean的Ì?true");
break;
case "abc":
alert("abc");
break;
default:
alert("没?有®D找¨°到Ì?符¤?合?要°a求¨®的Ì?。¡ê");
}
类型转换
判断一个数字是不是NaN不能直接写parseInt(s34)!=NaN;二用IsNaN var n1 = 'sds332'; if (isNaN(parseInt(n1))) { alert('果然'); } else { alert('是啥'); }; ---------- var n1 = '123'; var n2 = parseInt(n1, 16); alert(n2); 十六进制转换为10进制 -------------------- Tostring()如:var n1=‘2’;var n2=‘4’; n2=null;就不行了,所以用String();一旦有一个为null就报错了 --------------------------- var n1 = 20; var n2 = 23; alert(n1.toString() + n2.toString()); var n3 = 20; var n4 = null; alert(n3.toString() + String(n4)); ------------------------------------------------------------------------------String()和toString()的区别 类型转换参考结果 ========================-Boolean()===================== var b1 = Boolean(“”); //false - 空字符串 var b2 = Boolean(“hello”); //true - 非空字符串 var b1 = Boolean(50); //true - 非零数字 var b1 = Boolean(null); //false – null var b1 = Boolean(0); //false - 零 var b1 = Boolean(new object()); //true - 对象 =========================String()-================================ 与调用对象的toString()方法等效。 特列：当对象为null或undefined时，调用toString()会报错，而String()可以转换成功。 Example: var v = null; v = String(v); //v的结果是”null” var v; v=String(v); //v的结果是”undefined” ===========================Number()========================================= Number(false)0 Number(true)1 Number(undefined)NaN Number(null)0 Number("1.2")1.2 Number("12")12 Number("1.2.3")NaN Number(new object())NaN Number(50)50
JS除错与调试(IE8直接调试或VS)
IE禁用javascript脚本：工具Internet选项安全自定义级别。
函数声明
没有返回值类型,不需要写参数类型,没有返回值就不用写return
函数名不要重名,尤其是系统中的,我怎么知道这个名字不行,你想到的都被使用了
函数声明时注意{ }的位置
arguments对象
<script>
//不存在方法重载
//后声明的函数会将先声明的函数覆盖
function add(a, b) {
alert(a + b);
}
function add(a,b,c) {
alert(a + b + c);
}
//add(1, 2);
//可变参数
function sum(a) {
//使用arguments获取所有参数，是一个数组
//alert(arguments.length);//返回数组的元素个数
var sum1 = 0;
for (var i = 0; i < arguments.length; i++) {
sum1 += arguments[i];
}
alert(sum1);
}
//调用
sum(1, 2, 3,4,5,6);
</script>
匿名函数（函数直接量function literal）
<body>
<input type="button" id="btnShow" value="显示"/>
<script>
//快捷键：fun,tab
//定义匿名函数，赋值给一个变量
var f1 = function(a, b) {
alert(a+b);
};
//通过变量调用
//f1(1, 2);
//典型应用：为事件绑定处理函数，传递回调函数
//根据id获取页面元素，为它绑定单击事件
document.getElementById('btnShow').onclick = function() {
alert(123);
};
</script>
</body>
查看执行的结果
var x=1;
var y=0;
var z=0;
function add(n){n=n+1;return n;}
y=add(x);
function add(n){n=n+3;return n;}
z=add(x);
alert(y+','+z);
//执行结果？
结论：命名函数在执行之前就已经确定了。
答案： 4,4
var x=1;
var y=0;
var z=0;
var add=function (n){n=n+1;return n;}
y=add(x);
add=function(n){n=n+3;return n;}
z=add(x);
alert(y+','+z);
//执行结果？ 答案：2,4
Js中的“闭包”
简言之，闭包就是两个方法嵌套,外面方法定义的变量,里面可以访问
闭包延长作用域,没事别乱写 闭包:函数内部又定义了一个函数,里面的函数可以用外面函数的变量 function f1(name) { return function () { alert(name); }; }; var ff = f1('早市'); ff(); Ff可以访问的到上面函数的变量,但是没什么关系 内部函数能访问他外部定义的变量 作用域链 层层搜索 思路： 1.先通过一个案例说明什么是闭包。 2.介绍作用域链。通过代码+画图的方式 2.1穿插案例： 观察代码，请说明输出结果： function f1() { var funs = new Array(); for (var i = 0; i < 10; i++) { funs[i] = function () { alert(i); }; } return funs; } var myFuns = f1(); for (var n = 0; n < myFuns.length; n++) { myFuns[n](); } 2.2穿插案例2，闭包中的this与arguments对象 var name = "window中的name变量"; function Person() { this.name = "Person中的name属性"; this.getName = function () { return function () { return this.name; }; }; } var p = new Person(); alert(p.getName()());//输出结果是什么？ 3.用“闭包”模拟一个类（私有变量和公有方法。）
JS面向对象基础
闭包：简单的理解就是在函数（“外部函数”）中又定义了函数（“内部函数”），并且可以在“外部函数”之外，使用“内部函数”。
JavaScript中没有类的语法，是用函数闭包（closure）模拟出来的，下面讲解的时候还是用C#中的类、构造函数的概念，JavaScript中String、Date等“类”都被叫做“对象”，挺怪，方便初学者理解，不严谨。JavaScript中声明类（类不是类，是对象）。
面向对象 参考文章：http://www.cnblogs.com/heros/archive/2009/09/14/1566622.html
闭包参考文章 http://www.ibm.com/developerworks/cn/linux/l-cn-closure/
<script>
//为类增加成员
function Person(name) {
this.Name = name;//在类内部声明一个属性Name,初始化为name值
this.say = function() {
alert(this.Name);
};
//类是没有返回值的，所以如下代码可以不写
//return name;
}
//使用构造方法创建对象
var p1 = new Person('zhh');
//p1.say();//调用 方法
//alert(typeof (p1));//object
//alert(typeof (Person('zhh')));//因为Person作为函数时，没有返回值，所以是undefined
//alert(typeof(Person));//Person就是一个函数，类型是function
</script>
JavaScript中的一些对象
VS2010中的帮助文档默认没有索引，如果需要，得安装VS2010 sp1
图中，左边是vs2008的帮助文档，右边是vs2010中的帮助文档（需要安装vs2010sp1，才会有“帮助查看器”，否则为网页版本。）
String对象(*)
var uname = new String('a我不h是美女haha10086'); /* alert(uname.length); alert(uname.charAt(6)); //返回a，不是h,索引从0开始。 alert(uname.indexOf('h', 3)); //从索引为3的字符开始搜索h,如果在索引为3的字符前有h,也不予理会。 */ /* var reg = /\w+/g; //当采用全局模式g,的时候直接把所有匹配的元素返回到一个数组当中 var result = uname.match(/\w+/g); alert(result.length); for (var i = 0; i < result.length; i++) { alert(result[i]); } */ /* var reg = /^\w$/; var reg1 = new RegExp('\\w'); */ /* //不要忽略这里的全局模式g,否则只能匹配第一个符合的元素 //加上g以后，可以吧所有匹配正则表达式的元素都替换 var result = uname.replace(/a/g, 'X'); alert(result); */ //search()方法与indexOf()方法都是返回找到字符串的第一次出现的索引， //只是search()方法可以用正则表达式，而indexOf()只能写字符串。 var result = uname.search(/\d{5}/); var resultIndexof = uname.indexOf('10086'); alert(result); alert(resultIndexof); /* //第一个参数是分隔符，第二个参数是要返回的最大元素个数。 var result = uname.split(',', 3); alert(result.length); for (var i = 0; i < result.length; i++) { alert(result[i]); } */ /* //从索引为2的字符开始，截取3个字符，索引是从零开始的。 var result1 = uname.substr(2, 3); alert(result1); */ //从第2个索引开始截取，截取到第3个索引之前。（不包括第3个索引的字符） var result2 = uname.substring(2, 3); alert(result2);
Array对象
for遍历数组 var arr = ['张三', '李四', 12, true]; for (var i = 0; i < arr.length; i++) { alert(i+' '+arr[i]); } forin遍历数组 for (var index in arr) { alert(index+' '+arr[index]); } for in 遍历对象 function Person() { this.name = '小杨'; this.age = 18; this.gender = '男'; } var p1 = new Person(); for (var key in p1) { alert(key+' '+p1[key]); }
打开浏览器的错误提示功能
练习
===========练习1 求一个整数组中的最大值和求和。定义成函数==================== var num = [1, 2, 344, 5, 6, 7]; var res = GetMax(num); alert(res); function GetMax(nums) { var maxVal = nums[0]; for (var i = 0; i < nums.length; i++) { if (nums[i] > maxVal) { maxVal = nums[i]; } } return maxVal; } =============练习2 将一个字符串数组输出为|分割的形式，比如“梅西|卡卡|郑大世”。不要使用JavaScript中的Join函数。arr1.join(“|”)将数组用分隔符连接成一个字符串。//自定义一个myJoin函数================== var strs = ['梅西', '卡卡', '郑大世']; //var str = strs.join('|'); var str = myJoin('|', strs); alert(str); function myJoin(sep, strArray) { var result = ''; for (var i = 0; i < strArray.length - 1; i++) { result += strArray[i] + sep; } result += strArray[strArray.length - 1]; return result; } ===========练习3 将一个字符串数组的元素的顺序进行反转。["3","a","8","haha“] ["haha","8","a","3“]。不要使用JavaScript中的反转函数。提示：第i个和第length-i-1个进行交换。定义成函数。myreverse===================== var strArr = ["3", "a", "8", "haha"]; //strArr.reverse(); myReverse(strArr); for (var i = 0; i < strArr.length; i++) { document.write(strArr[i] + '<br/>'); } function myReverse(strArray) { for (var i = 0; i < strArray.length / 2; i++) { var tmp = strArray[i]; strArray[i] = strArray[strArray.length - 1 - i]; strArray[strArray.length - 1 - i] = tmp; } }
JS中的Dictionary
键值对集合也是对象json格式，同样的键值对的key也不能重复,也不能以数字开头
只要有了Array你就同时拥有了数组、List、Hashtable，它就是JavaScript中的要你命三千，价格只要998.
var arr = new Array();
arr[0] = "tom";
arr[1] = "jim";
for (var i in arr) {//打印出来的是0、1、2……证明了数组用法是Dictionary用法的一个特例而已。
alert(i+arr[i]);
}
Array的简化声明
一般写json对象的时候 键和值都是用引号引起来,字符串用引号,值如果是数字就不用了 值也可以存储函数 键值可以嵌套 ====================JSON======================== 1. var personalInfo = { "name": "周杰伦", "age": 20, "address": { "city": "beijing", "country": "China"} }; alert(personalInfo.name); alert(personalInfo.age); alert(personalInfo.address.city); alert(personalInfo.address.country); 2. var students = [{ "id": "1001", "name": "james" }, { "id": "1002", "name": "bob"}]; for (var i = 0; i < students.length; i++) { alert(students[i].id + "===>" + students[i].name); } ================Array的其他方法======================== Array.join(“连接字符串”)//将数组中的元素通过指定的“连接字符串”连接起来，返回一个字符串。 Array.reverse();//将数组中的元素反转。 Array.sort();//排序 SortByAsc(a,b){ return a-b; } Array.sort(SortByAsc);
扩展方法（*）”原型”→”prototype”
Js不是面向对象的,但是也可以通过原型来实现继承,原型利用作用域就实现了 var email = 'yhb@itcast.cn'; alert(checkEmail(email)); function checkEmail(msg) { var index = msg.indexOf('@'); return index > -1 ? true : false; =============================================下面的是自己添加的扩展方法 String.prototype.IsMaile = function () { return this.indexOf('@') > -1 ? true : false; }; var email = 'yhb@itcast.cn'; alert(email.IsMaile()); ===========================备注1=============================== 普通成员vals function Person() { this.vals = new Array(1, 2, 3); } var p1 = new Person(); p1.vals[0] += 1; p1.vals[1] += 1; p1.vals[2] += 1; var p2 = new Person(); alert(p2.vals); 通过原型添加的成员vals function Person() { } Person.prototype.vals = new Array(1, 2, 3); var p1 = new Person(); p1.vals[0] += 1; p1.vals[1] += 1; p1.vals[2] += 1; var p2 = new Person(); alert(p2.vals);
<script>
//原型：对象的类型
function Person() {
this.Age = 100;
}
var p1 = new Person();
//p1.Title = 'abc';
//访问原型
p1.__proto__.Title = 'abc';//为原型注释数据成员
//Person.prototype.Title = 'abc';//功能同上面的代码
var p2 = new Person();
alert(p2.Title);
</script>
总结
总结
javascript
js 脚本 动态语言 弱类型语言 解释型语言
数据类型
bool number string undefined null object
js注意的事项
大小写敏感
弱类型语言
声明变量用var
字符串建议用单引号
每句话结束用分号
undefined==null true
undefined===null false
转换
转整数--进制转换
转小数--
转数字--
isNaN() 判断是不是数字，返回true--不是数字,返回false--是数字
js中没有块级作用域
函数
命名函数,匿名函数
在js中没有方法的重载.
闭包-方法中还有一个方法,在里面的方法中可以访问外面方法中定义的变量
闭包通过作用域链实现,闭包延长变量的使用时间.没事不要写闭包
闭包可以模拟面向对象
函数就是对象,对象就是函数
function Person(){} var per=new Person();
js中的Array 是数组，还是集合，还是键值对
{"name":"张三"} json格式
原型 --可以添加一个系统的方法
今天的内容
DOM -文档对象模型
为什么要使用Dom 可以做什么
案例
顶级对象-win-重点
兼容的问题
window.event下面的属性或方法或事件--几乎在IE浏览器中都可以使用，在火狐浏览器几乎都不行-重点
InnerText 和InnerHTML 区别-重点
在DOM中如何去创建元素(动态)-重点
浙公网安备 33010602011771号