05js课件-4 .javascript基础第1章

启奥-Web前端培训教程JavaScript

基础主要内容：JavaScript基本语法、客户端JavaScript、事件编程、DOM基本操作、Web常用JS开发实例。总课程量

（5章）JavaScript

基础启奥-Web前端培训教程第1章授课目标：认识JavaScript掌握JavaScript的语法结构

数据类型

变量&表达式&运算符&控制语句认识JavaScript启奥-Web前端培训教程JavaScript是什么？启奥-Web前端培训教程JavaScript：一种客户端脚本语言（简称JS）与Java的关系：JS由Netscape公司发布，原名叫做LiveScript属于解释型语言，属于脚本语言包含3部分主要内容：ECMAScript、BOM、DOM将JS解释器嵌入浏览器，是目前最普遍的JS变体——客户端JS。

当人们提到JS，通常所指就是客户端JS，而我们所需要学习的，也

是如此。ECMAScript是什么？启奥-Web前端培训教程ECMA：欧洲计算机制造商协会ECMAScript：是由ECMA所定制的一套脚本程序设计语言ECMAScrip最新版本V5，相当于JavaScript1.5ECMAScript包含两个扩展：JavaScript和JScript我们通常所说的JavaScript语法部分，其实就是由ECMAScript所

规范定制。记住这个东西面试的时候可能被问到哦。客户端JavaScript启奥-Web前端培训教程BOM：浏览器对象模型（BrowserObjectModel）DOM：文档对象模型（DocumentObjectModel）DHTML：动态HTML（DynamicHTML）神奇的魔法代码JavaScript语法特点启奥-Web前端培训教程大小写敏感：在JS中，Shinow和shinow表示不同含义分号可选：JS用“；”来区分代码，不同行中的代码“；”可以省略，但是我们最好不要这样操作注释：Js中用“//”表示单行注释，用“/*被注释的内容*/”表示多行注释<script>document.write("这是我的第一个JS实例");alert("helloworld");</script>JavaScript语法结构启奥-Web前端培训教程标识符启奥-Web前端培训教程标识符：标识符就是我们用来定义变量或函数的名称，如a=30中的a义标识符的时候，我们需要遵循一定的规则：第一个字母必须是字母、下划线（_）或者$接下来可以是字母、数字、下划线或者$，不允许出现其他特殊字符标识符命名：Pascal式、驼峰式、匈牙利式关键字[保留字]：JS语言中被保留的单词，尽量避免用这些单词作为标识符，如if、do等Pascal式：词组中，每个单词首字母都大写，如：TestArray驼峰式：词组中，第一个单词首字母小写，后面所有单词首字母大写，如：testFirstArray匈牙利式：数据类型+Pascal式，具体数据类型声明见备注变量启奥-Web前端培训教程变量：一个和数值相关的名字，通常我们会说：变量"存储"了某个值，然后我们就可以通过这个"名字"来操作这个值。JS中变量的特点：弱类型每个变量因为所“存储”的值的类型不同，自身也变成了不同的类型当变量的值发生变化，变量的类型也会跟着变化First=100;Second=First*2;变量的声明启奥-Web前端培训教程声明方法：var变量名重复声明同一个变量，第二次声明等于赋值可以不使用var直接声明变量，JS会将此变量定义为全局变量（解释见“变量的作用域”）变量的类型：值类型、引用型值类型：占有空间固定，保存和复制都是值的本身，存于栈中引用型：占用空间不固定，保存和复制都是值的一个指针，存于堆中应用到变量中，采用值类型方式存储的，被称为基本类型变量；采用引用型方式存储的，被称为引用类型变量。此处所说的变量类型与前一页变量值的类型是两个不同的概念，变量的类型是指变量本身的存储类型，而值的类型又称为“数据类型”变量的作用域启奥-Web前端培训教程作用域：指变量在代码中的有效范围，变量的作用域分为两种：全局变量：在函数体外定义或在函数体内没有使用var定义的变量局部变量：在函数体内使用var定义或函数的参数变量作用域链全局变量在任意位置都有效外层函数不能访问内层函数的局部变量内层函数可以访问外层函数的局部变量回收机制：JS无需手动释放内存，它采用一种称为垃圾回收的方法管理内存垃圾回收：JS的解释器可以检测到何时程序不再使用一个对象，当它确定一个对象是无用的时候，会自动把这个对象所占用的内存释放vara="Hello",b=0;a=b;JavaScript数据类型启奥-Web前端培训教程数据类型启奥-Web前端培训教程数据类型：计算机程序是通过操作"值"

来运行的，在一种程序设计语言中，能够表示操作的值的类型的，称作——数据类型基本类型：数值，字符串，布尔引用类型：对象，数组，函数特殊类型：undefined，null其他类型：Date，RegExp，Error基本类型启奥-Web前端培训教程数值启奥-Web前端培训教程数值型包含：整形（十进制、八进制、十六进制），浮点型JS数值格式允许精确的表示-9007199254740992到9007199254740992（-253

到253），超出此范围，尾数将会变得不准确特殊数值：Infinity，NaN±Infinity：当数值范围超出可表示范围，则JS用无穷大来表示，这里包括两种情况：Infinity（正无穷大）和–Infinity（负无穷大）NaN：当我们进行一些错误运算的时候（如：分母为0），计算会产生错误，最终得出一个特殊数值NaN（非数值）我们的二代身份证号为18位数字，已经超出JS数值所允许的精确范围，如果用数值来表示身份证号，如：将会变为判断某个数值是否为NaN，可用函数isNaN（123）来检测判断某个数值是否为无穷大，可用函数isFinite（123）来检测字符串启奥-Web前端培训教程字符串：在代码中，凡是被

单引号或者双引号包裹起来的内容都属于字符串单引号和双引号都可以用来定义字符串，但它们必须成对出现如果希望字符串中包含双引号，可以用单引号定义字符串如果希望字符串中出现双引号，可以用单引号定义字符串字符串的转意：如果字符串中包含我们想要输出能被JS识别的内容，可以用"

\"（转义符）进行转义操作"如果这样定义"字符串"，会出现什么结果呢？""如果这样定义\"字符串\"，会出现什么结果呢？"字符串的使用启奥-Web前端培训教程把两个字符串连接起来，可以使用加号（+）运算符msg="hello"+"world";思考：要把两个字符变量串连接起来应该怎么做思考：要把一个变量加入到一个字符串之间，应该怎么做vara="我是一个变量";varb="我也是一个变量";varc=?vara="我是需要显示在括号里的内容";varb="如何把a显示在（）里面？";字符串的使用启奥-Web前端培训教程要确定一个字符串长度（它包含的字符数），可以使用length

属性s="abcde";alert(s.length);要获取字符串中第一个字符，可以使用charAt(index)函数s.charAt(0);思考：如何获取最后一个字符？要获取字符串中某一个区间的字符串，可以使用slice(star,end)

s.slice(1,3);//从第2个字符开始，到第4个字符结束，不包含第4个要获取字符串中某个字符出现的位置，可以使用indexOf(find)s.indexOf("c");vara="如何将（这里面的内容）截取出来";varb=？//如何从a中截取到括号中的内容？字符串与数值之间的相互转换启奥-Web前端培训教程数值到字符串num.toString();//正规转换String(num);//强制转换num+"";//简易转换字符串到数值parseInt(str);//正规转换parseFloat(str);//浮点转换，保留一位小数

Number(str);//强制转换str–0;//简易转换思考：如果用str+0会出现什么结果？在运算符操作中，字符串运算的优先级高于数值运算，如：32+"24"，结果为3224，而不是56布尔型启奥-Web前端培训教程布尔值只包含两种值：true

和false，多用于判断语句中1+1=21+1==21+1=="2";1+1==="2";truetruefalse有时候，我们可以通过布尔值制作一个“开关”，用于判断程序中的某一种状态。比如两个人下棋的时候，下一步该谁来走，我们可以设定一个布尔变量next，如果next值为true，则该甲走，否则该乙走，不论谁走了一步之后，都把next的值反转一下在JS程序中"="表示赋值操作，即把等号右边的值，传递给等号左边的变量，赋值操作可以在两个变量之间进行，但等号左边只能是变量，不能是直接量布尔值与其他类型之间的转换启奥-Web前端培训教程布尔到其他类型在数值环境中：true代表1，false代表0在字符串环境中：true代表"true"，false代表"false"其他类型到布尔数值0和NaN代表false，其他代表true空字符串代表false，其他代表trueBoolean(xxx);//强制转换

!!xxx;//非运算转换1+(1==1)//结果为2"is"+(2==1)//结果为isfalse引用类型启奥-Web前端培训教程引用类型（复合型数据类型）启奥-Web前端培训教程引用类型数据包含：对象、数组、函数对象：一组值的集合，包含两种形式，一种表示为已命名的无序集合；另一种表示为有编号值的有序集合，后者被称为“数组”

数组：看上面函数：是具有可执行代码的对象，函数的行为与其他类型的对象都不同，因此也可以将函数看作独立于对象和数组的数据类型对象启奥-Web前端培训教程已命名的数据的集合。这些已命名的数据，通常被称作对象的属性。对象的属性值可以是任意数据类型，如果某个属性值的数据类型为function（函数），那么这个函数相对于对象来说，被称作对象的"方法"。对象的创建方式：空对象：varobj=newObject();设置属性：="测试对象";设置方法：obj.test=function(){alert("测试测试");}对象的直接量：创建对象的另一种方式，也是对象存在的另一种方式varobj={name:"测试对象",test:function(){alert("测试测试")}};数组启奥-Web前端培训教程和对象一样，都是数值的集合。不同的是对象中的每个数值都有一个名字，而数组的每个数值都有一个数字编号，或者说是下标(index)。特点：数组中可以存放任意一种JS的数据类型（包括对象或数组）数组可分为一维数组和多维数组（数组的值是另一个数组）属性：通过length属性，可获得数组的长度，如：arr.length创建方式：空数组：vararr=new

Array();指定长度：vararr=newArray(

3

);指定元素：vararr=newArray("元素1","元素2","元素3");数组赋值：arr[0

]=“元素1”;//数组的下标从0开始数组的直接量：vararr=["元素1","元素2","元素3"];函数启奥-Web前端培训教程是一段可执行代码，我们可以通过多次调用某个函数，来多次执行这段代码。我们可以把函数看做一个计算公式，比如：Math.sin(),这是一个计算正弦值的函数我们还可以把函数看做一个行为，比如：functionjiayi(

x

){returnx+1;}参数：形参：定义函数时使用的参数，如上面的x实参：调用函数时传递给函数的实际参数，如调用上面的函数jiayi(4)特点：函数中存在一个名为this

的指针，用来表示当前操作的对象创建方式：传统函数：functionfn()

{alert("测试");}

函数的直接量：varfn=function(){alert("测试");}vararr=newFunction("","alert('测试');");//注意函数体的双引号特殊类型启奥-Web前端培训教程特殊类型启奥-Web前端培训教程JS中包含两个特殊的小数据类型：null

和undefined。这两种数据类型都只包含一个值，就是它们自身。null：空、无值、无对象undefined：未定义、未赋值比较：null表示空的对象；undefined表示未赋值或不存在的null属于Object类型；undefined属于undefined类型null==undefined；null!==undefined运算时null和undefined都可以转换成false，但不等于false对着一个没有钱的人要100块钱//null对着空气要100块钱//undefined其他类型启奥-Web前端培训教程内部数据对象启奥-Web前端培训教程除了以上集中数据类型，JS还为我们提供了3种用于处理特殊数据类型的内部对象Date对象：日期时间类型正则表达式对象：处理正则表达式Error对象：处理错误类型表达式&运算符启奥-Web前端培训教程表达式&运算符启奥-Web前端培训教程表达式是JS的一个"短语"，它可以是一个变量名，一个直接量，一个对象，一个公式，或者一个函数，我们在代码中看到的任意一个东西，都属于表达式的范畴。运算符：用于连接表达式的符号或者关键字根据运算符需要运算数的个数对运算符分类，可分为：一元运算符、二元运算符和三元运算符vara,b;b=10;a=b;b=a+5;运算符启奥-Web前端培训教程一元运算符：只有一个运算数，将一个表达式转换为另一个表达式，如-3二元运算符：有两个运算数，将两个表达式合并成一个表达式，如1+2三元运算符：将三个表达式合并成一个表达式a==2？a=3：a=2运算数的类型：运算符因运算数的类型不同，所代表的意义也不同1+"2"中的+

为字符串连接符1+2中的+

为加计算运算符的优先级：运算符的优先级决定操作执行的顺序9-8+7*6+(5==4)+"3"数学运算符启奥-Web前端培训教程设y=5：赋值运算符启奥-Web前端培训教程设x=10，y=5：比较运算符启奥-Web前端培训教程设x=5：逻辑运算符启奥-Web前端培训教程设x=3，y=6：语句&控制语句启奥-Web前端培训教程语句&控制语句启奥-Web前端培训教程s="hello"+"world";//这既是一个表达式，也是一条语句表达式就是最简单的语句，不过一般来讲，表达式什么都不做。要使事件发生，我们就需要一个完整的句子或命令来完成它。多个句子之间用"；"分割，这就是语句。语句就是一个和计算机对话的过程用于控制某个命令的执行的语句，通常我们称之为控制语句条件语句if启奥-Web前端培训教程if：语句是最基本的控制语句，依靠条件来判定语句的执行if

(a==2)

{alert("a等于2");}else：if语句的一部分，用于表示判断预期之外的结果if(a==2){alert("a等于2");}else

{alert("a不等于2")；}elseif：如果我们希望通过多种判断预期执行多条结果，就需要用到elseifif(a==2){alert("a等于2");}

elseif(

a==3

){alert("a等于3");

}else{alert("a不等于2也不等于3");}条件语句swtich启奥-Web前端培训教程如果判断存在多条分支，需要用到好多的elseif，我们就可以使用switch

来代替if

switch(a){

case1:alert("a等于1");

break;

case2:alert("a等于2");

break;

case3:alert("a等于3");

break;

case4:alert("a等于4");

break;

default:alert("a不等于1234中的任何一个");

break;

}条件语句while启奥-Web前端培训教程与if语句一样，通过条件判断来执行，不同的是while

可以重复的执行同一个动作，直到判断不成立while

是个循环式判断语句，当参数返回值为true

时执行循环体，当参数返回false

执行while

之后的语句如果while

的判断永远为true，则循环会无休止的执行下去，这就是传说中的死循环

varcount=0;while(count<10){

document.write("count="+count+"<br/>");count++;}条件语句dowhile启奥-Web前端培训教程与while非常相似，唯一区别在于while语句只有当判断为true时才会执行，而dowhile

则是先执行，然后再去判断。这样即使while判断为false，语句也会至少执行一次。实际应用中，dowhile

并不像while应用广泛，因为需要限制性一次再判断的情况并不多见

varcount=10;

do{document.write("count="+count+"<br/>");count++;

}

while(count<10);循环语句for启奥-Web前端培训教程for

语句同样为我们提供了一个循环结构，很多时候它比while更灵活，更方便在for

的条件参数中，共分为3部分，以；分隔开varcount=0：语句中用于循环计数的参数变量，for

语句的循环次数就是由这个变量来决定的count<10：语句中的条件判断，当判断为false

时，结束for

循环count++：与while一样的条件变更（否则将形成死循环），只不过这个过程从while的循环体中拿到了参数中

for(varcount=0;count<10;count++)

{document.write("count="+count);

}循环语句forin启奥-Web前端培训教程for

语句的另外一种用法，用于遍历循环对象的属性遍历：沿着某条搜