BTC-CS-HTML-01-第8章-JavaScript基础知识课件

1、第8章 JavaScript基础知识本章目标了解JavaScript起源、特征掌握JavaScript程序的开发工具、运行环境、运行机制等掌握JavaScript语言规范：变量、常量、变量类型、流程处理语句、函数定义声明、对象的创建等掌握JavaScript常用的API: JavaScript函数、JavaScript对象等2 JavaScript概述 JavaScript的应用场景表单数据合法性验证。网页特效。交互式菜单。动态页面。数值计算。3 JavaScript概述 JavaScript的发展历程1997年 ECMAScript 1.0发布1998 年 6 月ECMAScript 2.0

2、发布1999 年 12 月ECMAScript 3.0发布，取得了巨大的成功，成为通行标准2007 年 10 月，ECMAScript 4.0 版草案发布2008 年 7 月，ECMA 开会决定，中止 ECMAScript 4.0 的开发发布为 ECMAScript 3.1项目代号起名为 Harmony（和谐）。会后不久，ECMAScript 3.1 就改名为 ECMAScript 5。2009 年 12 月，ECMAScript 5.0 版正式发布。4 JavaScript概述 JavaScript的发展历程2011 年 6 月，ECMAscript 5.1 版发布，并且成为 ISO 国际标

3、准（ISO/IEC 16262:2011）。2013 年 12 月，ECMAScript 6 草案发布。2015 年 6 月，ECMAScript 6 正式通过，成为国际标准。2016年，ECMAScript 7.0版正式发布。2017年，ECMAScript 8.0版正式发布。5JavaScript概述 JavaScript的特点简单性动态性跨平台性安全性6JavaScript概述 JavaScript的开发与运行选择一款好的开发工具让你事半功倍文本编辑器（如：Notepad+），IDE（如：Eclipse、DreamWeaver）JavaScript的运行环境客户端浏览器。推荐：火狐浏览器

4、（兼容性好）。将JavaScript嵌入网页使用标签将语句嵌入文档将JavaScript源文件（.js）链接到HTML文档中7JavaScript基本语法JavaScript语句和代码块JavaScript 语句是发给浏览器的命令,JavaScript语句结束使用回车，但建议使用“;”。8document.write(Hello inspur);document.write(Hello inspuruptec );JavaScript基本语法JavaScript语句和代码块JavaScript代码块是一段JavaScript代码的集合。以左花括号开始，右花括号结束。代码块用于在函数或条件语句中

5、把若干语句组合起来，作用是一并地执行语句序列。9var time = new Date().getHours();if (time=8 & time17) / 片段1document.write(您好！);document.write(当前为工作时间);document.write(浪潮欢迎您);else/ 片段2document.write(很抱歉！);document.write(当前为休息时间);document.write(请明天再来);JavaScript基本语法标识符就是给变量、函数和对象等指定的名字。标识符的命名规则：JavaScript语言区分大小写，例如：Name与name是

6、不同的标识符。标识符首字符可以是以下划线（_）、美元符($)或者字母开始，不能是数字。标识符中其它字符可以是下划线（_）、美元符($)、字母或数字组成的。标识符不能是JavaScript中的关键字10JavaScript基本语法变量变量是一个值的符号名称，可以通过名称来获取对值的引用。变量的声明：如：var name;使用等号向变量赋值：如：name=“tom”;avaScript是弱类型的语言，可以改变变量的数据类型如：name=20;11var 变量名;JavaScript基本语法变量变量的命名约定变量名必须以是合法的标识符变量名最好可以表达变量代表的实际意义或与之相关变量名称对大小写敏感

7、（比如:name和Name是不同的变量）变量的作用域程序源代码中定义变量的区域,即变量的可访问范围。局部变量定义在方法体内，只能在函数内部访问。全局变量声明在方法体外，拥有全局作用域。12JavaScript基本语法变量类型变量的数据类型：基本的数据类型有：数字型、字符串型、布尔型复杂的数据类型：数组、对象特殊的数据类型：Null、Undefined数字型：表示整数值和浮点数值数字序列就是一个十进制的整数。如：123十六进制的数字以“0 x”或“0X”开头，如：0 x25ffff浮点数，如：3.1415、0.66666、1.46783E-3213JavaScript基本语法变量类型字符串：是使

8、用单引号或双引号包起来的零个至多个字符，单引号与双引号必须成对出现，而且单双引号可嵌套使用。如：”abc”、中文。有些特殊的符号不能通过使用单引号括起来的方式赋值给一个字符串变量，需要使用转义字符“”。14字符说明b后退一格，相当于Back Space键t制表符，相当于Table键n换行f换页r接受键盘输入，相当于按下了回车键表示一个斜杠表示单引号表示双引号JavaScript基本语法变量类型布尔型：又称为逻辑类型，只有true和false两个值，分别代表逻辑中的“真”和“假”。只能用作布尔运算。特殊类型Null、Undefinednull可以认为是一种特殊的对象，它是“无值”的Undefin

9、ed是变量的一种取值，表示变量还没有初始化。15Var a=; /a是空字符串，说明a是字符串类型的变量，长度为0Var b=null; /b是等于null的变量，也可以认为它的值是“无值”Var c; /c表示是一个没有初始化的变量，访问得到Undefined。JavaScript基本语法变量类型数组：数组是值的有序集合，每个值叫做一个元素。数组的赋值非常简单，在方括号中将数组元素用逗号隔开var arr=1,2,3;数组是无类型的，数组中的元素可以是任意类型，甚至也可以是数组或对象var arr=1,true,a,3,4;数组中的每个元素都有一个位置，称为索引，索引从0开始。对数组中的元素

10、进行访问时，可以使用元素下标定位到数组中的元素。arr0表示数组中第一个位置的元素对数组中的元素进行修改，直接赋新值。arr1=false;16JavaScript基本语法表达式表达式是任意一组有效的文字、变量和运算符，按一定的语法形式通过运算符组合成的符号序列，其计算结果为一个值，用于在不同上下文中操作和计算变量。分类：算术表达式：计算结果为一个数字，例如3+2，var i =8逻辑表达式：计算结果为一个布尔值, 例如a3,b=5 字符串表达式：计算结果为一个字符串，例如a+bc17JavaScript基本语法运算符运算符指的是表示各种不同运算的符号。JavaScript中的运算符可以分为算

11、术运算符比较运算符赋值运算符逻辑运算符。18JavaScript基本语法运算符算术运算符19运算符说明示例+如果操作数都是数字时执行加法运算，如果其中的操作数有字符串时，作为字符串运算符会执行连接字符串的作用A = 5 + 8 /结果是13A =5+ 8 /结果是58-减法A = 8 5*乘法A = 8 * 5/除法A = 20 / 5%取余 - 相除之后的余数10 % 3 = 1+一元递增。此运算符只计算一个操作数，将操作数的值加1。返回的值取决于+运算符与操作数的先后顺序。+x返回递增后的x值x+返回递增前的x值 -一元递减。此运算符只计算一个操作数。返回的值取决于-运算符是位于操作数之前

12、还是位于操作数之后-x返回递减后的x值x-返回递减前的x值 -一元求反。此运算符返回操作数的相反数 a等于5，则-a =-5JavaScript基本语法运算符比较运算符20运算符说明示例= = 等于。如果两个操作数相等，则返回Truea = b!=不等于。如果两个操作数不等，则返回TrueVar2 != 5大于。如果左操作数大于右操作数，则返回TrueVar1 var2=大于或等于。如果左操作数大于或等于右操作数，返回TrueVar1 = 5Var1 = var2小于。如果左操作数小于右操作数，则返回TrueVar2 var1=小于或等于。如果左操作数小于或等于右操作数，返回TrueVar2

13、= 4Var2 = var1JavaScript基本语法运算符赋值运算符21运算符描述例子=简单赋值运算符，将右边运算数的值赋给左边运算数C = A + B 将A+B的值赋给C+=加等赋值运算符，将右边运算符与左边运算符相加并将运算结果赋给左边运算数C += A 相当于 C = C + A-=减等赋值运算符，将左边运算数减去右边运算数并将运算结果赋给左边运算数C -= A 相当于C = C - A*=乘等赋值运算符，将右边运算数乘以左边运算数并将运算结果赋给左边运算数C *= A 相当于C = C * A/=除等赋值运算符， 将左边运算数除以右边运算数并将运算结果赋值给左边运算数C /= A

14、相当于 C = C / A%=模等赋值运算符，用两个运算数做取模运算并将运算结果赋值给左边运算数C %= A 相当于 C = C % AJavaScript基本语法运算符逻辑运算符22运算符说明例子&逻辑与，左操作数与右操作数同为True时，返回Trueexpr1 & expr2|逻辑或，左操作数与右操作数有一个为True时，返回Trueexpr1 | expr2!逻辑非，操作数为True时，返回False，否则返回True!exprJavaScript基本语法流程控制语句根据作用的不同，流程控制语句分为以下三种选择语句：if.else 语句，if.else if.else语句，switch.

15、case语句迭代语句：for语句，while语句，dowhile语句跳转语句：break语句，continue语句，return语句23JavaScript基本语法流程控制语句选择语句-if语句语法说明：condition可以是一个布尔型常量、变量或表达式。值为true是执行中的语句块。24if (condition) 当条件为 true 时执行的代码 JavaScript基本语法流程控制语句选择语句-ifelse语句语法说明：condition值为true时执行if后的语句块，为false时执行else后的语句块。25if (condition) 当条件为 true 时执行的代码 else

16、当条件为 false时执行的代码 JavaScript基本语法流程控制语句Switch Case语法说明：switch语句的基本语法是给定一个判断表达式以及若干不同语句，根据表达式的值来执行这些语句。26switch (expression) case condition 1: statement(s)break; case condition 2: statement(s) break; . case condition n: statement(s) break; default: statement(s) JavaScript基本语法流程控制语句switch说明：switch语句的基本语

17、法是给定一个判断表达式以及若干不同语句，根据表达式的值来执行这些语句。case后面跟随的是数字或字符串，检查每个case是否与switch表达式的值相匹配。匹配则执行case后的语句序列。如果没有与值相匹配的，则执行缺省条件default。27JavaScript基本语法流程控制语句迭代语句：就是在满足一定条件的情况下反复执行某一个操作。所有的迭代语句都包含以下几个部分:初始化部分（initialize）：初始化迭代变量迭代条件部分（test condition）：布尔表达式，判断是否满足循环条件；迭代体部分（body statement）：需要重复执行的代码块；迭代部分（iteration

18、statement）：控制循环变量值的更改。迭代语句有：for语句, while 语句，dowhile语句28JavaScript基本语法流程控制语句For循环：是一种最简洁的循环模式，一般在脚本的运行次数已确定的情况下使用语法for 循环包括四个重要部分：initialize ：初始化表达式,初始化计数器一个初始值，在循环开始前计算初始状态。test condition ：判断条件表达式，判断给定的状态是否为真。如果条件为真，则执行循环体“”中的代码，否则跳出循环。iteration statement ：循环操作表达式，改变循环条件，修改计数器的值。body statement：需要重复执

19、行的代码块29for(initialize;test condition;iteration statement) body statement; JavaScript基本语法流程控制语句While 循环语句：最基本的循环模式，多用于已知循环控制条件的情况语法对于 while 循环，当条件表达式 expression 的返回值为真时，则执行“”中的语句，当执行完“”中的语句后，重新判断 expression 的返回值，知道表达式返回值的结果为真时，重复执行“”中的语句，否则，退出循环。30initializewhile(test condition) body statement;iterat

20、ion statement;JavaScript基本语法流程控制语句do.While 循环语句：先执行一次循环后，再判断条件是否成立。语法注意：do.while 语句在结尾处多了一个分号”;”。31initializedo body statement;iteration statement;while(test condition); JavaScript基本语法流程控制语句跳转语句：包括break、continue和return语句。Break 语句Break语句，经常用来中止switch语句的执行，或用于打破封闭的花括号，终止某个语句块的执行，或者提早退出循环。32for(var i=1

21、;i10;i+)if(i%5=0)break;document.write(i=+i+;);JavaScript基本语法流程控制语句continue语句：continue语句告诉解释器跳过本轮循环剩余的代码块，立即开始下一次迭代的循环。33for(var i=1;i10;i+)(if(i%5=0)continue;document.write(i=+i+;);JavaScript基本语法流程控制语句Return语句：是从当前方法中退出，返回到调用该方法的语句处，并从紧跟该语句的下一条语句继续程序的执行。除非用在条件语句或迭代语句内部，return语句必须用在一个方法体的最后，否则会产生编译错误

22、。34JavaScript的核心对象 String对象主要用于处理字符串。声明说明当 String() 和运算符new一起作为构造函数使用时，它返回一个新创建的 String 对象，存放的是字符串 Hello inspur!。当不用new运算符调用String() 时，它只把Hello inspur!转换成原始的字符串，并返回转换后的值。35var myString=Hello inspur!;var myString=new String(Hello inspur!);JavaScript的核心对象 String对象charAt()：返回指定位置的字符。indexOf() ：返回某个指定的字

23、符串值在字符串中首次出现的位置。指定字符串在字符串中不存在时返回-1.replace(oleStr,newStr) ：在字符串中用一些字符替换另一些字符语法。toLocaleLowerCase()：把字符串转换为小写。substring(start,stop) ：提取字符串中介于两个指定下标之间的字符,该方法返回的子串包括 start 处的字符，但不包括 stop 处的字符。36JavaScript的核心对象 Math对象Math 对象用于执行数学任务。Math对象并不像Date和 String那样是对象的类，因此没有构造函数Math().Date对象用于处理日期和时间声明37var myDa

24、te=new Date()var now = new Date();document.write(当前年份:+now.getFullYear()+);document.write(当前月份:+now.getMonth()+);document.write(当前日期:+now.getDate()+);document.write(今天星期:+now.getYear()+);document.write(当前完整时间:+now+);JavaScript的核心对象数组对象用于在单个的变量中存储多个值。声明说明第一种方式创建了一个数组对象。第二种方式规定了数组对象的大小。第三种方式在声明数组对象的同时

25、，为数组对象增加了元素。38new Array();new Array(size);new Array(element0, element1, ., elementn);JavaScript的核心对象数组对象concat()：连接两个或多个数组。join() ：把数组中的所有元素放入一个字符串。sort() ：对数组的元素进行排序。toString () ：把数组转换为字符串，并返回结果。39JavaScript的核心对象JavaScript函数函数是由事件驱动的，当它被调用时执行的可重复使用的代码块。函数的定义通常会包括一个形参列表，这些形参在函数内部作为局部变量来工作。在调用这些函数时，调

26、用者会为形参提供实参的值，函数使用它们实参的值来计算返回值，作为该函数调用表达式的值。分内置函数和自定义函数40JavaScript的核心对象内置函数eval(String) 函数常用来计算某个字符串，并执行其中的的 JavaScript 代码。isNaN(String) 函数用于检查其参数是否是非数字值。如果函数的参数是非数字值，返回的值就是 true。如果参数是数字值,则返回 false。41eval(x=10;y=20;document.write(x*y)var a=10;var b=20document.write(isNaN(a+b):+isNaN(a+b)+);document.

27、write(isNaN(a+a):+isNaN(a+a)+);JavaScript的核心对象自定义函数语法说明function关键字，紧随其后函数名，参数列表，和被花括号包围的函数体。如果函数需要有返回值，使用return语句。42funciton 函数名（参数1，参数2，）函数体；JavaScript的核心对象自定义函数函数调用格式说明43事件名=“函数名”语法规范命名规范变量的命名：变量名应能表达变量所代表的实际意义。当变量名仅由一个单词构成时，使用小写字母，如page，count等。变量名包含多个单词时，请使用驼峰命名法（单词小写，除第一个单词外其他单词首字母大写）。常量的命名：常量使用

28、全大写的格式，如PAGECOUNT等。函数的命名：方法名尽量以动词开头，使用驼峰命名法，说明方法的作用。例如：queryPerInfo,savePerModi等。44语法规范编码规范变量的声明放在方法顶部。使用高效的循环。避免隐式类型转换。格式规范缩进规范：使用tab或空格缩进。注释规范支持两种不同类型的注释：单行注释和多行注释。单行注释两个斜线开始，以行尾结束, 双斜线与注释内容之间保留一个空格。多行注释，以/*开头，*/结尾，若所有注释内容不在一行时，第一行为/*，最后行为*/，其他行以*开始，并且注释文字与*保留一个空格。45JavaScript常用API全局函数46函数说明alert(

29、)显示一个警告对话框，包括一个OK按钮。confirm()显示一个确认对话框，包括OK、Cancel按钮。escape()将字符转换成Unicode码。eval()计算表达式的结果。isNaN()测试是(true)否(false)不是一个数字。parseFloat()将字符串转换成符点数字形式。parseInt()将符串转换成整数数字形式(可指定几进制)。prompt()显示一个输入对话框，提示等待用户输入。JavaScript常用API数组函数47方法描述concat()连接两个或更多的数组，并返回结果。length()返回数组长度join()把数组的所有元素放入一个字符串。元素通过指定的分

30、隔符进行分隔。pop()删除并返回数组的最后一个元素push()向数组的末尾添加一个或更多元素，并返回新的长度。reverse()颠倒数组中元素的顺序。shift()删除并返回数组的第一个元素slice()从某个已有的数组返回选定的元素sort()对数组的元素进行排序splice()删除元素，并向数组添加新元素。toSource()返回该对象的源代码。toString()把数组转换为字符串，并返回结果。toLocaleString()把数组转换为本地数组，并返回结果。unshift()向数组的开头添加一个或更多元素，并返回新的长度。valueOf()返回数组对象的原始值JavaScript常用

31、APIBoolean对象函数48方法描述toSource()返回该对象的源代码。toString()把逻辑值转换为字符串，并返回结果。valueOf()返回 Boolean 对象的原始值。JavaScript常用APIDate对象函数49方法描述Date()返回当日的日期和时间。getDate()从 Date 对象返回一个月中的某一天 (1 31)。getDay()从 Date 对象返回一周中的某一天 (0 6)。getMonth()从 Date 对象返回月份 (0 11)。getFullYear()从 Date 对象以四位数字返回年份。getYear()请使用 getFullYear() 方

32、法代替。getHours()返回 Date 对象的小时 (0 23)。getMinutes()返回 Date 对象的分钟 (0 59)。getSeconds()返回 Date 对象的秒数 (0 59)。getMilliseconds()返回 Date 对象的毫秒(0 999)。getTime()返回 1970 年 1 月 1 日至今的毫秒数。getTimezoneOffset()返回本地时间与格林威治标准时间 (GMT) 的分钟差。parse()返回1970年1月1日午夜到指定日期（字符串）的毫秒数。JavaScript常用APIDate对象函数（续）50方法描述setDate()设置 Dat

33、e 对象中月的某一天 (1 31)。setMonth()设置 Date 对象中月份 (0 11)。setFullYear()设置 Date 对象中的年份（四位数字）。setHours()设置 Date 对象中的小时 (0 23)。setMinutes()设置 Date 对象中的分钟 (0 59)。setSeconds()设置 Date 对象中的秒钟 (0 59)。setMilliseconds()设置 Date 对象中的毫秒 (0 999)。setTime()以毫秒设置 Date 对象。toSource()返回该对象的源代码。toString()把 Date 对象转换为字符串。toTimeSt

34、ring()把 Date 对象的时间部分转换为字符串。toDateString()把 Date 对象的日期部分转换为字符串。UTC()根据世界时返回 1970 年 1 月 1 日 到指定日期的毫秒数。valueOf()返回 Date 对象的原始值JavaScript常用APIMath对象函数51方法描述abs(x)返回数的绝对值。acos(x)返回数的反余弦值。asin(x)返回数的反正弦值。atan(x)以介于 -PI/2 与 PI/2 弧度之间的数值来返回 x 的反正切值。atan2(y,x)返回从 x 轴到点 (x,y) 的角度（介于 -PI/2 与 PI/2 弧度之间）。ceil(x)对数进行上舍入。cos(x)返回数的余弦。exp(x)返回 e 的指数。floor(x)对数进行下舍入。log(x)返回数的自然对数（底为e）。max(x,y)返回 x 和 y 中的最高值。min(x,y)返回 x 和 y 中的最低值。pow(x,y)返回 x 的 y 次幂。random()返回 0 1 之间的随机数。round(x)把数四舍五入为最接近的整数。sin(x)返回数的正弦。sqrt(x)返回数的平方根。tan(x)返回角的正切。toSource()返回该对象的源代码。valueOf()返回 Mat