4.JavaScript 脚本语言分析

网博课程研发第四课：JAVASCRIPT脚本语言网博课程研发本章主要内容HTMLDOM模型Javascript概述Javascript基础知识JS基于对象的概念网博课程研发JavaScript概述什么是JavaScriptJavaScript是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言。同时也是一种广泛用于客户端Web开发的脚本语言，常用来给HTML网页添加动态功能，比如响应用户的各种操作JavaScript特点由数行可执行计算机代码组成是一种脚本语言（脚本语言是一种轻量级的编程语言）是一种解释性语言（就是说，代码执行不进行预编译）通常被直接嵌入HTML页面被设计用来向HTML页面添加交互行为网博课程研发JavaScript概述在打开页面的时候，让用户和页面进行交互，这些静态HTML是无法完成的，只有依靠JavaScript简称JS网博课程研发JavaScript概述JavaScript和JAVA的区别在概念和设计方面，Java和JavaScript是两种完全不同的语言Java由太阳微系统公司开发很强大，同时也是更复杂的编程语言，就像同级别的C和C++JavaScript它不是什么java的脚本(Script)，跟java毫无关系，是一门独立的前端脚本语言，用来做前端HTML开发的就比如：微软和微博有什么关系吗？网博课程研发JavaScript概述JavaScript能做什么它为HTML设计师提供了一种编程工具，可以操作HTML动态的给一个表格增加行、删除行也可以操作CSS样式，动态的改变HTML中的样式动态的给表格添加背景色可以根据用户的要求和HTML进行交互，获取数据修改数据动态的获取输入文本框中的数据和修改文本框中的数据网博课程研发JavaScript基础知识JavaScript基本语法JS是前端脚本，那它首先要存放在文件中，它可以放在html代码的任意位置，但是为了保证执行率（在网络传输中可以导致文件没有完全传输到客户端，无法执行JS）所以一般放在html的head标签中scripttype=text/javascriptalert(HelloWorld!);/script网博课程研发JavaScript基础知识JavaScript脚本的引用放在script/script标签中间，前面的示例就是这样scripttype=text/javascript…/script可以将脚本单独放到一个文件中，类似于CSS文件一样，推荐此种用法scriptlanguage=javascripttype=text/javascriptsrc=...将脚本直接放到html元素中，作为属性值inputtype=“buttonid=“..onclick=alert('helloworld!')/网博课程研发JavaScript基础知识开始学习JavaScript类型转换注释控制语句运算符号变量基本语法网博课程研发JavaScript基础知识JavaScript标识符一切从名字开始，JavaScript标识符就是JS中使用的名字，它可以使用数字，大小写字母，下划线，美元符号构成，标识不能以数字开头以下为合法的标识符user_namepassword_username$username以下为非法的标识符33Hellowolrdfalse网博课程研发JavaScript基础知识JavaScript关键字abstractfinallypackagedoublethrowsbooleanfloatprivateelsetransientbreakforprotectedextendstruebytefunctionpublicfalsetrycasegotoreturnfinalvarcatchifshortwhiledefaultcharimplementsstaticlongdoclassimportsupernativeintconstinswitchnewinterfacecontinueinstanceofsynchronizednullthrowvoidwiththis注意:关键字不能用于标识符网博课程研发JavaScript基础知识JavaScript类型、变量类型：所有变量都有类型，在JS中变量是弱类型变量（由值决定），统一用var定义变量：就是JS中标识符的值会随着用户的定义有所变化注意事项：可以不定义直接使用，但极不推荐变量对大小写敏感（y和Y是两个不同的变量）变量必须以字母或下划线开始可以不用分号结束，推荐用分号网博课程研发JavaScript基础知识varcount;count=5;定义变量赋值var－用于声明变量的关键字count－变量名varx,y,z=10;varcount=10;同时声明和赋值变量声明多个变量网博课程研发JavaScript基础知识JavaScript调试功能JavaScript中的变量是弱类型的，它不像JAVA语言，可以通过编译查看有没有语法等错误，JS代码如果有错误在运行中才能发现，但是也找不到具体的错误，所以调试很重要，通过调试检查代码目前很多主流的浏览器都支持JS调试，我们使用谷歌浏览器网博课程研发JavaScript基础知识JavaScript中的注释主要有两种单行注释//这是单行注释多行注释/*这是多行注释*//*这也是多行注释*/网博课程研发JavaScript基础知识JS的运算符与Java几乎一样根据所执行的运算，运算符可分为以下类别：算术运算符：赋值运算符：比较运算符：逻辑运算符：三目运算符：位移运算符：运算符同样具有和Java一样的运算优先级网博课程研发JavaScript基础知识算术运算符运算符描述例子结果+加x=y+2x=7-减x=y-2x=3*乘x=y*2x=10/除x=y/2x=2.5%求余数(保留整数)x=y%2x=1++累加x=++yx=6--递减x=--yx=4网博课程研发JavaScript基础知识赋值运算符运算符例子等价于结果=x=yx=5+=x+=yx=x+yx=15-=x-=yx=x-yx=5*=x*=yx=x*yx=50/=x/=yx=x/yx=2%=x%=yx=x%yx=0网博课程研发JavaScript基础知识比较运算符运算符描述例子==等于x==8为false===全等（值和类型）x===5为true；x===5为false!=不等于x!=8为true大于x8为false小于x8为true=大于或等于x=8为false=小于或等于x=8为true网博课程研发JavaScript基础知识逻辑运算符运算符描述例子&&and(x10&&y1)为true||or(x==5||y==5)为false!not!(x==y)为true网博课程研发JavaScript基础知识三目运算符运算符描述例子?:boolean_expression?true_value:false_valuetrue?1:0值为1网博课程研发JavaScript基础知识位移运算符运算符描述例子&与按位计算|或按位计算~取反基本相当于取负减一，如~3运算结果为-4右移右移一位相当于除以2再取整31值为1左移左移一位相当于乘以231为6网博课程研发JavaScript基础知识数据类型虽然JS是弱类型的，但是和java中一样也有数据类型的，它只定义了6种基本数据类型，任何变量或值的基本类型都可以使用typeof运算符来获取，比如typeof“hello”基本数据类型说明undefined表示一个未声明的变量，或已声明但没有赋值的变量，或一个并不存在的对象属性可以为变量赋值为undefinednull空、无。表示不存在，当为对象的属性赋值为null，表示无值number数值。最原始的数据类型，表达式计算的载体NaN非数字保留字，一般用isNaN()方法做判断i=100*”a”string字符串。最抽象的数据类型，信息传播的载体boolean布尔值。最机械的数据类型，逻辑运算的载体object对象。面向对象的基础，引用类型注意：null==undefined和null===undefined的值？网博课程研发JavaScript基础知识数据类型自动转换JavaScript是一种弱类型语言，在声明变量时无须指定数据类型，同时JavaScript能够自动转换变量的数据类型值（value）字符串操作环境数字运算环境逻辑运算环境对象操作环境undefinedundefinedNaNfalseErrornullnull0falseError非空字符串不转换字符串对应的数字值NaNtrueString空字符串不转换0falseString00不转换falseNumberNaNNaN不转换falseNumberfalsefalse0不转换Booleantruetrue1不转换Boolean对象toString()valueOf()或toString()或NaNtrue不转换网博课程研发JavaScript基础知识表达式中的数据类型转换在javaif表达式中，首先将条件表达式转换为bool类型，表达式为真值则执行if中的逻辑，否则跳过，但是javascript返回值不一定是true或者false下面我们来分析“&&”、“||”两个表达式“&&”运算符运算法则如下：如果&&左侧表达式的值为真值，则返回右侧表达式的值；否则返回左侧表达式的值“||”运算符的运算法则如下：如果||左侧表达式的值为真值，则返回左侧表达式的值；否则返回右侧表达式的值网博课程研发JavaScript基础知识JavaScript控制语句在程序中要控制程序的执行，叫做控制语句，在JS中控制语句有条件语句if/else多分支语句switch/case循环语句for、while三目运算？：网博课程研发JavaScript基础知识JavaScript条件语句在您编写代码时，经常需要根据不同的条件完成不同的行为。可以在代码中使用条件语句来完成这个任务在JavaScript中，我们可以使用下面几种条件语句：if语句在一个指定的条件成立时执行代码if...else语句在指定的条件成立时执行代码，当条件不成立时执行另外的代码if...elseif....else语句使用这个语句可以选择执行若干块代码中的一个网博课程研发JavaScript基础知识JavaScript分支语句如果希望选择执行若干代码块中的一个，你可以使用switch语句switch(n){case1:执行代码块1break;case2:执行代码块2break;default:如果n即不是1也不是2，则执行此代码;}switch后面的(n)可以是表达式，也可以（并通常）是变量。然后表达式中的值会与case中的数字作比较，如果与某个case相匹配，那么其后的代码就会被执行。break的作用是防止代码自动执行到下一行网博课程研发JavaScript基础知识JavaScript循环控制在编写代码时，你常常希望反复执行同一段代码。我们可以使用循环来完成这个功能，这样就用不着重复地写若干行相同的代码JavaScript有两种不同种类的循环for将一段代码循环执行指定的次数while当指定的条件为true时循环执行代码网博课程研发JavaScript基础知识JavaScriptFOR循环控制基本语法for(变量=开始值;变量=结束值;变量=变量+步进值){需执行的代码}或者for(变量in集合){需执行的代码注意这边的“变量”是“集合”的“key”要取值就要用varvalue=集合[变量]}网博课程研发JavaScript基础知识JavaScriptwhile循环控制while循环也有两种格式利用while循环在指定条件为true时来循环执行代码利用do...while循环在指定条件为true时来循环执行代码。在即使条件为false时，这种循环