文稿02-htmlcssjq课程03js基础javascript

1、北京传智播客教育 JavaScript语言基础讲师：杨洪波课程分为两部分JavaScript基础语法JavaScript Dom(用JavaScript操作html页面)课前说明内容：JavaScript语言。 JavaScript语法很多和C#、Java、C等语言类似，因此本课只讲JavaScript特有的语法，不会再讲解编程的基本原理。目标：掌握JavaScript语法，为Dom编程和jQuery打基础。参考书：张孝祥JavaScript网页开发体验式学习教程在不影响听课的情况下，“见缝插针”式的练习，不要等老师说：“下面是练习时间。”什么是JavaScript(简称js)JavaScri

2、pt是一种脚本语言。脚本，一条条的文字命令。执行时由系统的一个解释器，将其一条条的翻译成机器可识别的指令，然后执行。常见的脚本：批处理脚本、T-SQL脚本、VBScript等。(.net生成的exe文件用记事本打开看不懂。)HTML只是描述网页长相的标记语言，没有计算、判断能力，如果所有计算、判断（比如判断文本框是否为空、判断两次密码是否输入一致）都放到服务器端执行的话网页的话页面会非常慢、用起来也很难用，对服务器的压力也很大，因此要求能在浏览器中执行一些简单的运算、判断。JavaScript就是一种在浏览器端执行的脚本语言。JavaScript和Java没直接的关系，唯一的关系就是JavaS

3、cript原名LiveScript，后来吸收了Java的一些特性，升级为JavaScript。JavaScript有时被简称为JS。JavaScript是解释型语言，无需编译就可以随时运行.JavaScript可以跨平台，只要有一个支持JS的浏览器即可。（Windows、Linux、Mac、Unix）JS的开发环境Visual Studio 2010（推荐）JavaScript或jQuery都直接有智能提示Visual Studio 2008（支持jQuery智能提示的方法）安装补丁后js与jQuery都有智能提示首先安装：Visual Studio 2008 SP1补丁然后再安装： /KB9

4、58502/Release/ProjectReleases.aspx?ReleaseId=1736补丁(for jQuery)使用jQuery的智能提示需要引入jQuery-1.x.x-vsdoc.js(或将该文件放在与jQuery-1.x.x.js的同目录下)JS是非常灵活的动态语言，不像C#等静态语言那样严谨，开发工具中的JS完成功能只是一个辅助、建议。“.”出来的成员调用可能不能用，“.”不出来的成员也许也能调用，因此不要因为“点儿不出来”而担心代码有问题。编写js时，自己应该清楚当前对象有些什么成员，不能依赖智能提示。VS2008的HTML编辑器中触发JavaScript自动完成：Ct

5、rl+J。JavaScript基本组成基本语法（浏览器基本都支持，有统一标准）Dom(文档对象模型)（基本都支持，但可能会有差别，有统一标准）Bom（浏览器对象，一般功能浏览器支持，但没有统一的标准）控制浏览器可见区域以外的部分（打开新窗口、关闭浏览器窗口、获取分辨率screen、XmlHttpRequest等。ajax）JavaScript语法概述大小写敏感,JavaScript严格区分大小写。(n与N是两个不同的变量。)弱类型语言（声明变量都用var），不存在int n=10;string s=“a”;的情况，所有变量都用var。因为是“动态类型”，所以下面这段代码是合法的：var n=1

6、0;n=“a”;每条语句后面以 【 ; ”分号”】结尾，虽然如果语句结束后可以不加分号（原因是浏览器在执行时会自动判断什么地方需要加分号，然后自动加上），但是建议程序员在每条语句后加”;”手动加“分号”的好处：1可以放心的做js压缩（压缩多余空白）2提高代码可读性，性能，省却了编译器加分号的步骤。Js的注释，与C#、Java的相同（/单行注释(推荐)、/* 多行注释 */（在使用正则表达式的时候会有问题）。很多语法与Java语言或C#语言类似。有Java语言或C#语言编程基础的同学学习JavaScript语法会很容易上手。补充：vs2010下，选中js代码，按下ctrl + M + TJava

7、Script入门1编写第一个JavaScript程序：显示当前时间。 var nowData = new Date(); alert(nowData.toLocaleDateString();/日期 alert(nowData.toLocaleTimeString();/时间 W3C已经不推荐使用。网页中的JavaScript代码应该放到标签中，标签可以放到、等任意位置，并且一个页面可以有不止一对标签。alert()函数是弹出一个消息窗口。new Date()创建一个Date对象，默认时间是当前时间。放到中的在body加载之前就已经运行了。写在body中的是随着页面的加载而一个个执行的。【演示

8、】JavaScript入门2导入外部JavaScript文件：除了可以在页面中声明JavaScript以外，还可以将JavaScript写到单独的js文件中，然后在页面中引入：。声明到单独的js文件的好处是多页面也可以共享、减小网络流量。js文件的CDN(*),内容分发网络。注意：不要写成否则会有问题，这是一个比较特殊的地方。()将刚才显示当前时间的js代码放到外部js文件中执行，演示。这种方式可以跨域加载js文件。可以将导入外部文件的标签写在文档最后，提高用户体验。注意：在标签中不要出现元素。JavaScript的事件JavaScript中也有“事件”的概念。单击一个按钮显示当前时间。就触发

9、了一个事件一个特殊的地方：单击一个超链接显示当前时间。热点文字只有超链接的href中的JavaScript中才需要加“javascript:”，因为它不是事件，而是把”javascript:”看成像“http:”、“ftp:”、“thunder:/”、“ed2k:/”、“mailto:”一样的网络协议，交由js解析引擎处理。只有href中这是这是一个特例。文本框失去焦点后弹出消息对话框。onblur事件【演示】超链接为“死链”时，使用#与javascript:void(0);的区别。Void0没有用的值,不会去任何地方,就没有意义了JavaScript语法JavaScript严格区分大小写弱类

10、型,声明变量用var(无论什么类型变量都用var声明)每条语句后加分号。（不是必须，但建议加上。）字符串使用单引号abc。（双引号也行。推荐；html双引号，js单引号）注释：/单行注释（推荐使用），因为在多行注释/*/中如果再包含正则表达式字符*/,则可能会出问题。/* 多行注释 */是html的注释，不是javascript的注释，可以用来注释：!- -在标签里面使用是什么意思？当某些浏览器不支持JavaScript的时候，把标签中的内容注释掉，这样就不会显示在浏览器上了。用IE1.5可以测试出效果。现在基本可以不考虑这个问题了。JavaScript语法变量声明：声明变量的时候无法：int

11、 i=0；只能通过var i=0;声明变量，和C#中的var不一样，不是C#中那样的类型推断。var test=“hello”;var test1=“hello”,age=20; var i=100; i=“hello”; var i,n,x; var i=10,n=100,s=aaa,m; 变量命名规则:以字母、下划线或$开头，中间可以包括字母、数字、下划线或$。（变量命名中多了一个$）JavaScript中即可以使用双引号声明字符串，也可以使用单引号声明字符串。主要是为了方便和html集成，避免转义符的麻烦。变量使用前可以不用var声明，这样的变量会变认为是“全局变量”（不推荐）JavaS

12、cript是动态类型，因此var i=0;i=“abc”;是合法的。JavaScript数据类型共六种：Boolean（布尔）、Number（数字）、String（字符串）、Undefined（未定义）、Null（空对象）、Object（对象类型），undefined与其他值计算得到的结果不是我们想要的，但与数据库中的null稍有区别，比如与数字计算或与字符串计算结果。出了Object是引用类型以外，其他都是基本数据类型Undefined类型、Null类型都是只有一个值的数据类型，分别为undefined与null.基本类型与引用类型的区别String也是基本类型，不能为String添加动态属

13、性，而引用类型时可以的。引用类型对象 instanceof 类型，判断某个值是否为某个类型，所有引用类型instanceof Object返回都是trueJavaScript数据类型数值、字符串、布尔、undefined、对象、函数。查看变量的类型用typeof(变量)数值：（值类型）var n1=3.1415926;/数值类型n1.toFixed(3);/四舍五入保留3位小数。字符串：（值类型，字符串不可变特性）var s1=hello;/字符串类型布尔：（值类型）var b1=true;/布尔类型undefined：（值类型）var u1;/undefined对象（object）：（引用类

14、型）var tim=new Date();/对象类型(object)var names=zs,ls,ww;/数组也是对象类型(object)var obj=null;/object函数：（引用类型）function fun() /typeof(fun);/输出结果为function,函数类型。JavaScript语法JavaScript中的null与undefined(参考资料)undefined,表示一个未知状态声明了但是没有初始化的该变量，变量的值是一个未知状态(undefined)。（访问不存在的属性或对象window.xxx）方法没有明确返回值时，返回值是一个undefined.当对未

15、声明的变量应用typeof运算符时，显示为undefined（*）null表示尚未存在的对象,null是一个有特殊意义的值。可以为变量赋值为null，此时变量的值为“已知状态”(不是undefined)，即null。（用来初始化变量，清除变量内容，释放内存）undefined=null /结果为true,但含义不同。undefined=null /false(*),先判断类型是否一致，然后判断值。=严格等于、!=严格不等于由于=会将值转换类型后再判断是否相等，有时可能会有意想不到的结果，所以推荐使用=。但注意，有些情况使用=能带来更好的效果。JavaScript语法JavaScript中判断已

16、声明变量、参数是否初始化(可用)的方法：假设已有变量x：if (typeof(x) !=undefined & x!=null) alert(可用); if(x) alert(变量可用！); else alert(变量不可用！); /null、undefined、0都认为是false当x声明但没有赋值，或x为null，或x为0时，都表示不可用！/ if(x),返回false推荐用最后一种方法。但如果x有可能没有声明，则只能用typeof判断（否则会报错）。经常会遇到的一个场景：if语句的小括号中直接写一个变量。各种值与Boolean之间的关系。JavaScript变量的作用域默认如果直接在sc

17、ript标签中定义变量，则属于“全局作用域范围”(全局执行环境)，即属于window对象。全局作用域范围的变量直到网页关闭或浏览器关闭时才释放资源一个页面中的多个标签中的变量可以互相访问。JS有垃圾回收机制，会定时对可释放资源的变量回收。将变量设置为null则表示可以被回收了。如果在某个函数内定义了变量则作用域范围属于该函数。注意声明变量时使用var与不使用var的区别。注意：JS中没有块级作用域范围。JavaScript语法JavaScript中字符串同样需要转义符 ，与C#一样。想在页面输出：c:windowsmicrosoftvs.txt，这句话，需要这样写：alert(c:window

18、smicrosoftvs.txt);不能用，只在C#中有效。常见转义符：t、n、”、在用正则表达式的时候也会遇到转义符问题。（*）if-else、for、while、do-while、switch、continue、break的用法参考c#语法。for循环稍有差异：for(var i=0;i10;i+) 注：switch判断时，是“全等于”，=类型转换parseInt(arg)/将指定的字符串，转换成整数parseFloat(arg)/将指定的字符串，转换成浮点数Number(arg)把给定的值(任意类型)转换成数字（可以是整数或浮点数）；转换的是整个值，而不是部分值。如果该字符串不能完全转换

19、为整型，则返回NaN。（Not a Number）isNaN(arg)/判断arg是否为一个非数字（NaN）,NaN与NaN也不相等。String(arg)把给定的值(任意类型)转换成字符串；Boolean(arg)把给定的值(任意类型)转换成 Boolean 型； (*)eval(codeString)/将一段字符串的js代码，计算并执行。类似于动态SQL语句。var n1 = var n=10;var n2=n+10;alert(n2);eval(n1);alert(eval(2+3);eval(alert(100););JS除错与调试(IE8直接调试或VS)如果JavaScript中的代

20、码有语法错误，浏览器会弹出报错信息，查看报错信息就能帮助排查错误。/以前调试都用alert();JavaScript的调试，使用VS可以很方便的进行JavaScript的调试，调试时需要注意几点：确保当前的默认浏览器为IE浏览器。如果使用的是IE6，确保IE6的调试选项要打开，Internet选项高级，去掉“禁用脚本调试”前的勾选。设置断点、监视变量等操作和C#一样。以调试方式运行网页。F5IE8以后可以使用“开发人员工具”“脚本调试”，可设断点。FireBug（FireFox浏览器的“开发人员工具”，报错比较准确。）、Chrome浏览器也有“开发人员工具”。（大多数浏览器的最新版本都有“开发

21、人员工具”）在高版本浏览器下也可以使用console.log(内容);来输出内容。案例：用循环语句的方法计算1到5之间整数的和。【调试】函数声明JavaScript中声明函数的方式：（无需声明返回值类型）function add(i1, i2) return i1 + i2;/如果不写return返回的是undefined int add(int i1,int i2)/C#写法不需要声明返回值类型、参数类型。函数定义以function开头。 var r = add(1, 2); alert(r); r = add(你好, tom); alert(r);JavaScript中不像C#中那样要求所

22、有路径都有返回值，没有返回值就是undefined。易错：自定义函数名不要和js内置、dom内置方法重名，比如selectAll、focus等函数名不要用。/不要与系统函数重名。(在单击事件中调用自己定义的focus方法，有问题。与系统的focus()方法重名了)函数声明时注意 的位置推荐写法：function fun()不推荐写法：function fun()一般在js中编写大括号都是直接跟在后面而不要另起一行，比如：return Name:yzk,Age:18;而不要写成：ReturnName:yzk,Age:18原因是js会在语句末尾自动增加”分号”，如果将大括号另起一行，则return

23、语句后自动增加“分号”后，返回值就变成了undefined了。arguments对象JavaScript中没有方法重载。动态为方法传递参数，类似于.net中的params关键字作用 function myFunc() for (var i = 0; i arguments.length; i+) document.write(argumentsi); document.write(); myFunc(张三, 18, 李四, 19); 看看执行结果var x=1;var y=0;var z=0;function add(n)n=n+1;return ny=add(x);function add(

24、n)n=n+3;return n;z=add(x);alert(y+ +z); /执行结果？结论：命名函数在执行之前就已经确定了。匿名函数1（函数直接量function literal）第一种：var f1=function(p1,p2) return p1+p2; ;/将函数赋值给一个变量alert(f1(1,3);匿名函数没法调用,只能赋值给一个变量,由于是赋值语句,后面要加分号应用：/document.getElementById(btn).onclick=function()第二种（*）：(function(p1,p2)alert(p1+p2);)(20,30);第三种：（*）var

25、m1=new Function(“p1”,”p2”,”p3”,”return p1+p2+p3”);alert(m1(1,2,3);性能低eval匿名函数知道即可，以后用到的时候就会发现它的好了。jQuery中大量用到了匿名函数。匿名函数2类似于C#中的匿名函数。这种匿名函数的用法在jQuery中的非常多。alert(function(i1, i2) return i1 + i2; (10,10);/直接声明一个匿名函数，立即使用。用匿名函数省得定义一个用一次就不用的函数，而且免了命名冲突的问题，js中没有命名空间的概念，因此很容易函数名字冲突。通过例子发现一旦命名冲突以最后声明的为准。尽量减

26、少文件的字节数。匿名函数的使用，在后续的学习中会有使用。看看执行结果var x=1;var y=0;var z=0;var add=function (n)n=n+1;return ny=add(x);add=function(n)n=n+3;return n;z=add(x);alert(y+-+z);/执行结果？Js中的“闭包”什么是“闭包”？在一个函数内部又定义了一个函数，内部函数函数能访问外部函数作用域范围内的变量，这时这个内部函数就叫做闭包。无论这个内部函数在哪里被调用都能访问的到外部函数作用域中的那些变量。“闭包”是怎么实现的？通过作用域链“闭包”能做什么？Js中的面向对象都是用“

27、闭包”来模拟的。JS面向对象基础1（*）函数就是对象，对象就是函数。【当函数作为对象是，每个单词首字母都大写】方法直接调用为函数，用new调用为对象。JavaScript中没有类的语法，是用函数闭包（closure）模拟出来的，下面讲解的时候还是用C#中的类、构造函数的概念，JavaScript中String、Date等“类”都被叫做“对象”，挺怪，方便初学者理解，不严谨。JavaScript中声明类（类不是类，是对象）。由于js是动态语言所以创建对象的最直接的方式：var obj=new Object();=aa;obj.age=18;/要什么加什么。但是都是object类型。无法区分不同类

28、型。Example（写一个Person对象）:function Person() /ok,就这么简单。如何使用Perosn对象？var p=new Person();/ “var p” 不是 “Person p”。p.Name=张三;/动态语言，所以可以直接写。p.Age=30;p.SayHello=function() alert(Hi); alert(p.Name);alert(pAge);/另外一种动态访问属性的方式。JS面向对象基础2（*）JavaScript同样支持this关键字构建一个带参数的Person对象。通过this关键字为对象的属性赋值。function Person(na

29、me, age) this.Name = name; this.Age = age; this.ShowInfo = function() alert(大家好，我叫 + this.Name + ，今年 + this.Age + 岁了。); var zjl = new Person(周杰伦, 20);zjl.ShowInfo();function Person(name,age)可以看做是声明构造函数，Name、Age这些属性也是使用者动态添加了。【var p1 = Person(“周杰伦, 20);/不要丢了new，否则就变成调用函数了，p1为undefined。】new 相当于创建了函数的一

30、个实例。JavaScript中的一些对象String对象(*)length属性：获取字符串的字符个数。（无论中文字符还是英文字符都算1个字符。）charAt(index)方法：获取指定索引位置的字符。（索引从0开始）indexOf(字符串,startIndex)方法：获取指定字符串第一次出现的位置。startIndex表示从第几个开始搜索。split(分隔符,limit);/根据分隔符将一个字符串返回为一个数组。limit表示要返回的数组的最大长度（可自定义）。多个分隔符使用正则表达式：var msg = abcde#f;var vals = msg.split(/|#/);alert(val

31、s);substr(startIndex,len)/从startIndex开始，截取len个字符。substring(startIndex,stopIndex)/从startIndex开始，截取到stopIndex位置（不包括stopIndex所在的字符）。toUpperCase()/转换大写、toLowerCase();/转换小写match()、replace()、search()方法，正则表达式相关（在JS Dom课程里讲）。Array对象JavaScript中的Array对象就是数组，首先是一个动态数组，而且是一个像C#中数组、ArrayList、Hashtable等的超强综合体。数组的

32、使用方式：var names = new Array();/无需初始化长度，动态names0 = tom;names1 = jerry;names2 = lily;循环遍历数组（for循环）：for (var i = 0; i names.length; i+) alert(namesi);Array对象循环遍历数组（forin循环）：类似于c#中的foreach.for (var i in names) alert(namesi);/如果直接输出i是什么？使用forin循环可以遍历对象的所有属性。【演示：遍历window对象】forin循环其实遍历的还是key.数组的其他几种声明方式：new

33、 Array(); new Array(size); new Array(element0, element0, ., elementn);var arr = China, 2008, true, Hello;(推荐。)arr0Chinaarr12008打开浏览器的错误提示功能编写JavaScript代码的时候，如果写错了有时候浏览器也不报任何错误，这是对于我们调试JavaScript代码非常不利，所以建议打开错误调试。IE：工具Internet选项高级去掉“禁用脚本调试”的；或者安装DebugBarFireFox:安装FireBug,然后启用Console(控制台)即可。Chrome：开发人员工具Console。练习求一个