DHTML4-JavaScript核心教程

HandsOnJavaScriptCoreHandsOn回顾什么是表单？表单有什么用？表单的常用属性？说出4个常用的表单元素及其常用属性？说出4个常用的表单元素及其常用属性？说出其余常用的表单元素及其常用属性？框架及其常用属性？可以在HTML中加入哪些多媒体？如何加入？说出display与visibility的异同点？HandsOn目标理解什么是JavaScript理解JavaScript的语法基础了解JavaScript核心熟悉JavaScript常用函数及类HandsOn澄清误解JavaScript是Java的变种吗？JavaScript确实受到了Java的启发，但是与Java本质上是不同的两者的关系类似雷锋与雷峰塔的关系JavaScript简单吗？很多人认为JavaScript是一种简单的脚本语言而非程序设计语言实际上，JavaScript是一种具有丰富功能的程序设计语言，其在执行复杂的任务将会变得非常复杂HandsOn什么是JavaScriptJavaScript是一种具有面向对象能力的，解释型的程序设计语言。在句法结构上与Java相似。是一种松散类型的语言，即变量不必有一个明确的类型。本名LiveScript，由Sun和Netscape开发，之所以叫JavaScript，是当时网景为了营销考虑与Sun公司达成协议的结果，后来ECMA对其进行了标准化，之后的官方名称为ECMAScript。HandsOnJavaScript版本HandsOnJavaScript用途JavaScript应用客户端JavaScript当把一个JavaScript解释器嵌入到Web浏览器当中这是JavaScript应用最为广泛的一个领域服务器端JavaScript嵌入到WebServer，比如微软的IIS嵌入到其他应用可以嵌入到C#语言中脚本化C#脚本化Flash的ActionScriptHandsOnJavaScript语法基础JavaScript在语法上与Java、C#语言是十分相似的：两者都遵循C系语言的语法以及书写风格两者都支持面向对象两者的标识符都区分大小写JavaScript拥有与C#大部分运算符拥有几乎相同的选择、分支、循环语句都支持异常以及其捕获都支持正则表达式HandsOn两者都遵循C系语言的语法以及书写风格，这主要体现在：使用成对的大括号划分作用域注释方式支持行尾注释和块注释标识符必须与字母_$开头，后面可以是数字字母或$_支持转义字符有保留字和关键字HandsOn不同之处JavaScript与C#也有很多不同之处，而这正是我们本节课内容的重点：JavaScript是一种解释型的动态脚本语言JavaScript是一种弱类型的语言JavaScript有一些额外的运算符JavaScript有函数JavaScript通过原型方式实现面向对象JavaScript中的数组及常用类HandsOn解释执行JavaScript是一种脚本语言，这意味着：它是解释执行的，不需要编译编程速度快，且脚本文件的大小明显小于同类C程序文件以效率为代价，运行速度与静态编译型语言相比要慢得多，而且占用更多的内存通常十分灵活，同其它语言编写的程序组件之间通信功能很强大HandsOn弱类型JavaScript是一种弱类型的语言，这意味着：变量的类型可以随需要任意转换，并且通常是自动的变量可以不需要声明类型，在运行时会自动确定变量的类型HandsOn变量声明在JavaScript中，要使用一个变量之前，要先声明它：vari;varsum;vari,sum;for(vari=0;i10;i++){//doingsomething...}如果没有声明一个变量就使用它，JavaScript将隐式声明其为全局变量HandsOnJavascript数据类型Javascript支持以下数据类型：基本数据类型：数字–所有数字都是由浮点数类型表示的–当一个算术运算产生一个未定义的结果(如0/0)，则会返回一个非数字的特殊值，NaN，有专门的函数isNaN()来检测这个值字符串–无char类型，由(’或“)扩起来的Unicode字符序列–字符串的length属性表示字符串的长度–支持substring()、charAt()、indexOf()等方法，但没有trim()方法HandsOn基本数据类型布尔型值–true|falsenull–代表”无对象“的值undefined–使用一个并未声明的变量–使用一个已经声明但还未赋值的变量–使用一个不存在的对象属性上述这三种情况会返回一个undefined值可以使用typeof运算符返回描述变量类型的字符串HandsOn函数引用数据类型：函数–类似于C#中的方法，使用function关键字定义函数，函数可以有形式参数，但是这些形式参数不能指定类型functionsquare(x){returnx*x;}等价于varsquare=function(x){returnx*x;}–JavaScript不会检查传入参数的个数，参数多的时候多余的参数会被忽略，参数不够的时候少的参数会被赋予undefinedHandsOn数组数组——有编号值的有序集合–vara=newArray();等价于vara=[];–varb=[[1,2],[3,4],[5,6]];–JavaScript中的数组可以有任意个数的元素，可以在任意时刻改变元素个数–vara=newArray(10);a[10]=10;a[tom]=15;a[-1.24]=5;–JavaScript中的数组中可以存放不同类型的元素，并且是稀疏的，这意味着下标可以不连续HandsOn对象对象——已命名值的无序集合–varempty={}–varhomer={name:张三,age:20}等价于varhomer=newObject();homer.name=张三;homer.age=20;通过homer.name可以访问属性nameHandsOn包装类三种基本数据类型分别对应有一个包装类：基本数据类型包装类数字Number字符串String布尔Boolean当一个基本数据类型调用一个方法时，这个时候基本数据类型会自动装箱成对应的包装类对象，然后调用对象的方法。HandsOn基本类型转换字符串str数字num布尔bflagstr–0;Number(str);num.toString();String(num);num+””;Boolean(num);!!num;Number(bflag);bflag-0;Boolean(str);!!str;bflag.toString();String(bflag);bflag+””;HandsOn数据类型之间的转换关系值字符串数字布尔未定义的值“undefined”NaNfalsenull“null”0false非空字符串不变数值或NaNtrue空字符串不变0false0“0”不变falseNaN“NaN”不变falsetrue“true”1不变false“false”0不变非0数字数字字符串值不变trueHandsOn额外的运算符除了C#当中的运算符外，JavaScript还包括：相等运算符(==)与等同运算符(===)==表示值相同–“1”==true===表示值相同，并且类型也相同注意：null与undefined相等但不等同对象的比较是地址的比较，只有地址相等才相等HandsOnJavaScript实现面向对象JavaScript目前版本不支持真正的类，但是JavaScript中可以定义伪类(pseudo-class)来实现面向对象，做到这一点的就是构造函数和原型对象。构造函数：设计来和new运算符一起使用的函数，此时该函数就与C#、Java当中的构造方法类似functionRectangle(w,h){this.width=w;//定义一个属性this.height=h;//定义一个方法this.area=function(){returnthis.width*this.height}}varrect1=newRectangle(3,5);vara=rect1.area();HandsOn原型上述方案有效的模拟了类，但它仍不是最优的，原因在于大多数情况下，每个对象中的属性值可能不同，但是方法一般是相同的：在上面的例子中，Rectangle类中的每个对象的area()方法应当都是相同的,但上述例子中写法会导致每一个对象都包含一个自己的area(),导致内存空间的浪费以及效率的降低。因此，我们应当想到将方法和不变的属性放在一个位置，所有对象都共同拥有它，这样以来既提高了效率，又节省了空间，那么在JavaScript中，这个位置就叫做原型。HandsOnprototype原型是这样一种对象：每个JavaScript对象当中都包含一个原型对象，每个对象都从其原型对象中继承方法和不变的属性。对于任意对象Object，其原型对象就是Object.prototype原型存在的意义：使用原型明显减少对象所需内存数量可以为已经存在的对象动态添加方法HandsOn改进Rectangle此时，Rectangle类就可以加以改进：functionRectangle(w,h){this.width=w;this.height=h;}//添加原型方法Rectangle.prototype.area=function(){returnthis.width*this.height;}varrec=newRectangle();//创建一个对象vararea=rec.area();//调用对象方法HandsOn原型应用通过原型不仅可以扩展自定义类，还可以扩展内建类型。前面提到，String类型没有trim()方法，而此方法在实际当中经常使用，我们可以扩展：String.prototype.trim=function(){returnthis.replace(/(^\s*)|(\s*$)/g,‘’);}一般情况下要慎用扩展内建类型，这样就更改了JavaScript核心不允许为Object.prototype添加属性和方法HandsOn常用函数与类HandsOn全局函数全局对象ArrayDateMathRegExpHandsOn全局函数全局函数——可以直接使用函数名称说明encodeURI()decodeURI()转义某些字符串对URI编码将转义后的字符串解码eval()计算参数中表达式的值，返回结果isNaN()如果是NaN，返回trueparseInt()从字符串解析一个整数escape()unescape()用转移序列替换某些字符来编码编码(解码)成Unicode格式HandsOnArrayArray类常用方法vararr=[1,2,3];方法名称示例说明concat()arr.concat(4,5)给数组添加元素join()arr.join(‘+’)将数组元素使用分隔符连接成字符串pop()arr.pop()删除并返回最后一个元素push()arr.push(4)添加到数组末尾并返回长度reverse()arr.reverse()颠倒数组元素顺序sort()arr.sort()数组排序HandsOnDateDate类常用方法vardate=newDate();方法名称方法说明getDate()返回一个月的第几天getDay()返回一周的第几天getFullYear()返回4位年份getTime()返回Date()对象的毫秒数toString()本地时间日期字符串toLocaleString()本地时间本地格式化日期字符串与C#中的Date相似，Date也可以根据毫秒数构建，或根据年月日时分秒构建HandsOnMathMath类常用方法方法名称方法说明max(