响应式网页开发基础教程(jQuery+Bootstrap)第2章JavaScript基础课件.ppt

1、第第2 2章章 JAVASCRIPTJAVASCRIPT基础基础1响应式网页设计基础初识JavaScriptJavaScript编程基础JavaScript事件处理JavaScript的BOM与DOM本章实训初识JavaScriptlJavaScriptJavaScript：直译式、用于直译式、用于WebWeb客户端、面向对象、解释型客户端、面向对象、解释型的程序设计语言的程序设计语言，可直接由浏览器解析执行，可直接由浏览器解析执行。3JavaScript核心（ECMAScript）浏览器对象模型（BOM）文档对象模型（DOM）初识JavaScriptlJavaScriptJavaScript

2、在网页中的引用在网页中的引用方式方式1.1.页面内嵌页面内嵌2.2.外部引用外部引用3.3.行内伪行内伪URLURL引入引入 javascript:要执行的代码4初识JavaScriptl常用的输入常用的输入/输出输出语句语句1.1.警告警告对话框对话框alertalert()()2.2.提示提示对话框对话框promptprompt()()3.3.确认确认对话框对话框confirmconfirm()()4.4.输出输出语句语句document.writedocument.write()()5JavaScript编程基础lJavaScriptJavaScript中的变量中的变量可以存放不同类型的

3、数据l在在JavaScriptJavaScript中，变量通过使用中，变量通过使用varvar关键字来关键字来声明：声明：var 变量名;l变量变量的的命名规则命名规则:（1 1）变量首字母必须使用字母、下划线（）变量首字母必须使用字母、下划线（_ _）或者美元符（）或者美元符（$）。）。（2 2）余下字母可以使用任意多个英文字母、数字，或者美元符（）余下字母可以使用任意多个英文字母、数字，或者美元符（$）组合）组合。（3 3）不能使用）不能使用JavaScriptJavaScript关键词与关键词与JavaScriptJavaScript保留关键字命名变量。保留关键字命名变量。（4 4）在）

4、在JavaScriptJavaScript中变量的命名区分大小写，如变量中变量的命名区分大小写，如变量box1box1与与Box1Box1是不一是不一样的，表示的是两个不同的变量。样的，表示的是两个不同的变量。6JavaScript编程基础lJavaScriptJavaScript是一种弱类型控制的语言，在是一种弱类型控制的语言，在JavaScriptJavaScript中一中一个变量可以根据需要存放不同类型的值，进行自动的类型个变量可以根据需要存放不同类型的值，进行自动的类型转换，而不需要另外的强制类型转换转换，而不需要另外的强制类型转换。l可用可用typeoftypeof()()检测变量检

5、测变量当前存放当前存放的数据类型的数据类型JavaScriptJavaScript的的基本基本数据类型：数据类型：stringstring（字符串类型）、（字符串类型）、numbernumber（数值类（数值类型）、型）、booleanboolean（布尔类型）、（布尔类型）、undefinedundefined（未定义类型）、（未定义类型）、nullnull（空类（空类型型）、objectobject（对象类型（对象类型）7字符串字符串描述描述stringstring字符串numbernumber数值booleanboolean布尔值undefinedundefined未定义objectob

6、ject对象或nullfunctionfunction函数JavaScript编程基础l常见的常见的运算符运算符1.1.一元运算符一元运算符：递增递增+和和递减递减2.2.算术运算符算术运算符：加（加（+）、减（）、减（-）、乘（）、乘（*）、除（）、除（/）、）、求求模（取余）模（取余）3.3.关系运算符关系运算符：小于（小于（）、小于等于（）、小于等于（=）、相等（）、相等（=）、不等（）、不等（!=!=）、全等（恒等）、全等（恒等）（）（=）、全不等（不恒等）（）、全不等（不恒等）（!=!=）4.4.逻辑运算符逻辑运算符：与（与（&）、或（）、或（|）、非（）、非（!）5.5.赋值运算符

7、赋值运算符：=6.6.三三元元运算符运算符：条件表达式?表达式1:表达式28JavaScript编程基础l流程控制语句流程控制语句l判断、循环等判断、循环等l常用的流程控制语句：常用的流程控制语句：ifif语句、语句、switch switch 语句、语句、dodowhile while 语句、语句、whilewhile语句、语句、forfor语句、语句、forforinin语句、语句、breakbreak和和continuecontinue语句、语句、withwith语句语句9JavaScript编程基础l函数函数定义：定义：function 函数名(形参1,形参2,形参n)/函数代码;l函

8、数调用：函数调用：函数名();函数使用函数使用 function function 关键字来声明关键字来声明，函数，函数声明包括函数名、声明包括函数名、参数参数列表等。函数列表等。函数可以通过可以通过returnreturn语句得到返回值，但并不语句得到返回值，但并不需要在函数声明时指定是否有返回值及返回值类型。需要在函数声明时指定是否有返回值及返回值类型。10JavaScript编程基础l常用常用JavaScriptJavaScript内置内置对象对象1.1.ArrayArray对象对象：数组：数组2.2.DateDate对象对象：时间和日期：时间和日期3.3.MathMath对象对象：数学

9、计算数学计算4.4.StringString对象对象：字符串：字符串11JavaScript编程基础lArrayArray对象对象l如果要同时储存多个数据，可以使用数组变量，一个数组如果要同时储存多个数据，可以使用数组变量，一个数组变量可以存储多个数据变量可以存储多个数据（可以是不同类型的数据）（可以是不同类型的数据）。l使用数组之前，首先要创建数组，并把数组本身赋给一个使用数组之前，首先要创建数组，并把数组本身赋给一个变量。变量。12JavaScript编程基础lArray对象的常用方法13方法描述concatconcat()()连接两个或更多的数组，并返回结果join()join()把数组

10、的所有元素放入一个字符串。元素通过指定的分隔符进行分隔pop()pop()删除并返回数组的最后一个元素push()push()向数组的末尾添加一个或更多元素，并返回新的长度reverse()reverse()颠倒数组中元素的顺序shift()shift()删除并返回数组的第一个元素slice()slice()从某个已有的数组返回选定的元素sort()sort()对数组的元素进行排序splice()splice()删除元素，并向数组添加新元素toSourcetoSource()()返回该对象的源代码toString()toString()把数组转换为字符串，并返回结果toLocaleString

11、()toLocaleString()把数组转换为本地数组，并返回结果unshift()unshift()向数组的开头添加一个或更多元素，并返回新的长度valueOf()valueOf()返回数组对象的原始值JavaScript编程基础lDateDate日期对象日期对象lDateDate类型处理时间和日期。类型处理时间和日期。DateDate类型还内置了一系列获取类型还内置了一系列获取和设置日期时间信息的方法。和设置日期时间信息的方法。l在使用日期对象之前，首先要创建在使用日期对象之前，首先要创建DateDate对象，默认以当前对象，默认以当前日期及时间创建日期及时间创建DateDate对象，也

12、可以以指定日期及时间创建对象，也可以以指定日期及时间创建14JavaScript编程基础lDateDate对象常用方法对象常用方法15方法方法描述描述Date()Date()返回当日的日期和时间getDate()getDate()从Date对象返回一个月中的某一天（131）getDay()getDay()从Date对象返回一周中的某一天（06）getMonth()getMonth()从Date对象返回月份（011）getFullYear()getFullYear()从Date对象以4位数字返回年份getHours()getHours()返回Date对象的小时（023）getMinutesget

13、Minutes()()返回Date对象的分钟（059）getSeconds()getSeconds()返回Date对象的秒数（059）getMilliseconds()getMilliseconds()返回Date对象的毫秒（0999）getTime()getTime()返回1970年1月1日至今的毫秒数getTimezoneOffset()getTimezoneOffset()返回本地时间与格林尼治标准时间（GMT）的分钟差parse()parse()返回1970年1月1日午夜到指定日期（字符串）的毫秒数setDate()setDate()设置Date对象中月的某一天（131）setMont

14、h()setMonth()设置Date对象中的月份（011）setFullYear()setFullYear()设置Date对象中的年份（4位数字）setHours()setHours()设置Date对象中的小时（023）setMinutes()setMinutes()设置Date对象中的分钟（059）JavaScript编程基础lDateDate对象常用方法对象常用方法16方法描述setSeconds()setSeconds()设置Date对象中的秒钟（059）setMilliseconds()setMilliseconds()设置Date对象中的毫秒（0999）setTime()setTi

15、me()以毫秒设置Date对象toString()toString()把Date对象转换为字符串toTimeString()toTimeString()把Date对象的时间部分转换为字符串toDateString()toDateString()把Date对象的日期部分转换为字符串toLocaleString()toLocaleString()根据本地时间格式，把Date对象转换为字符串toLocaleTimeString()toLocaleTimeString()根据本地时间格式，把Date对象的时间部分转换为字符串toLocaleDateString()toLocaleDateString(

16、)根据本地时间格式，把Date对象的日期部分转换为字符串UTC()UTC()根据世界时返回1970年1月1日到指定日期的毫秒数valueOf()valueOf()返回Date对象的原始值setSeconds()setSeconds()设置Date对象中的秒钟（059）setMilliseconds()setMilliseconds()设置Date对象中的毫秒（0999）setTime()setTime()以毫秒设置Date对象toString()toString()把Date对象转换为字符串toTimeString()toTimeString()把Date对象的时间部分转换为字符串toDate

17、String()toDateString()把Date对象的日期部分转换为字符串JavaScript编程基础lDateDate对象对象重复定时器的设置与清除：重复定时器的设置与清除：setInterval()setInterval()，clearInterval()clearInterval()一次性定时器的设置与清除：一次性定时器的设置与清除：setTimeout()setTimeout()，clearTimeout()clearTimeout()setTimeout()setTimeout()与与setInterval()setInterval()的区别在于的区别在于setInterval

18、()setInterval()是重复执行的，而是重复执行的，而setTimeout()setTimeout()只执行一次。只执行一次。17JavaScript编程基础lMathMath对象对象MathMath对象用于提供对数据的数学对象用于提供对数据的数学计算计算MathMath对象的属性对象的属性18属性属性说明说明Math.EMath.E自然对数的底数，即常量e的值Math.LN10Math.LN1010的自然对数Math.LN2Math.LN22的自然对数Math.LOG2EMath.LOG2E以2为底e的对数Math.LOG10EMath.LOG10E以10为底e的对数Math.PIM

19、ath.PI的值Math.SQRT1_2Math.SQRT1_21/2的平方根Math.SQRT2Math.SQRT22的平方根JavaScript编程基础lMathMath对象的对象的常用方法常用方法19方法描述abs(x)abs(x)返回数的绝对值ceil(x)ceil(x)对数进行上舍入cos(xcos(x)返回数的余弦exp(x)exp(x)返回e的指数floor(x)floor(x)对数进行下舍入log(x)log(x)返回数的自然对数（底为e）max(x,y)max(x,y)返回x和y中的最大值min(x,y)min(x,y)返回x和y中的最小值pow(x,y)pow(x,y)返回

20、x的y次幂random()random()返回01之间的随机数round(x)round(x)把数四舍五入为最接近的整数sin(x)sin(x)返回数的正弦sqrt(x)sqrt(x)返回数的平方根tan(x)tan(x)返回角的正切JavaScript编程基础lStringString对象对象lStringString就是字符串对象，只要定义了字符串就可以使用。就是字符串对象，只要定义了字符串就可以使用。字符串的定义只需通过单引号或双引号直接赋值即可。字符串的定义只需通过单引号或双引号直接赋值即可。20属性/方法说明Length返回字符串的长度charAt（索引）返回索引位置的字符toUpp

21、erCase()将字符串小写字母转换为大写toLowerCase()将字符串大写字母转换为小写indexOf（字符串,索引）返回某个指定的字符串值在字符串中的索引位置lastIndexOf（字符串,索引）返回某个指定的字符串值在字符串中的索引位置（反向搜索）split()字符串分割substring（开始索引,结束索引）提取字符串中介于两个指定下标之间的字符substr（开始索引,需提取长度）从字符串中提取从开始索引位置开始的指定数目的字符串 JavaScript事件处理lJavaScriptJavaScript事件一般用于浏览器和用户操作的交互。也就事件一般用于浏览器和用户操作的交互。也就是

22、当用户访问一个是当用户访问一个WebWeb页面时，用户或浏览器自身执行的某页面时，用户或浏览器自身执行的某种动作种动作l例如：点击页面上某个对象，就将触发点击事件例如：点击页面上某个对象，就将触发点击事件l响应某个事件的函数就叫作事件处理程序（也叫事件处理响应某个事件的函数就叫作事件处理程序（也叫事件处理函数、事件句柄）。函数、事件句柄）。21 JavaScript事件处理l事件事件处理程序的方式有内联模型和脚本模型两种处理程序的方式有内联模型和脚本模型两种。1 1HTMLHTML事件处理程序（内联模型）事件处理程序（内联模型）（1 1）直接在）直接在HTMLHTML中执行中执行JSJS代码代

23、码（2 2）在）在HTMLHTML中通过调用执行中通过调用执行JavaScriptJavaScript函数函数2 2脚本模型脚本模型脚本模型不同于内联模型，内联模型是事件函数和脚本模型不同于内联模型，内联模型是事件函数和HTMLHTML混写混写的，而脚本模型则实现了的，而脚本模型则实现了HTMLHTML与与JavaScriptJavaScript代码层次的代码层次的分离分离22 JavaScript事件处理lJavaScriptJavaScript中的常用事件中的常用事件23事件事件说明说明onclickonclick鼠标单击事件，当用户单击鼠标按钮触发事件onmouseoveronmouse

24、over鼠标指针经过事件，当鼠标指针移到某个对象上方时触发的事件onmouseoutonmouseout鼠标指针移开事件，当鼠标指针移出某个对象上方时触发的事件onbluronblur当焦点从对象上移开时触发的事件，指针离开事件onfocusonfocus获取焦点（指针移入事件）JavaScript的BOM与DOMlBOMBOM对象及其对象及其子对象子对象浏览器对象模型（浏览器对象模型（Browser Object ModelBrowser Object Model），简称为），简称为BOMBOM。它。它提供了独立于内容而与浏览器窗口进行交互的对象，其核心提供了独立于内容而与浏览器窗口进行交互

25、的对象，其核心对象是对象是windowwindow，常用对象还包括有，常用对象还包括有locationlocation对象，对象，historyhistory对对象，象，screenscreen对象，对象，navigationnavigation对象。对象。24JavaScript的BOM与DOMlwindowwindow对象对象windowwindow对象是对象是BOMBOM中的顶级对象，引用中的顶级对象，引用windowwindow对象的属性和方对象的属性和方法时，可以省略法时，可以省略windowwindow。25方法名作用说明open()打开新窗口返回新打开的窗口，可以继续操作该新窗口

26、moveTo(x,y)窗口移动到的位置x和y表示新位置的x和y坐标值，只适用于最外层window对象moveBy(x,y)窗口移动的尺寸x和y表示在水平和垂直方向上移动的像素数，只适用于最外层window对象resizeTo(x,y)窗口宽高尺寸x和y表示浏览器窗口的新宽度和新高度，只适用于最外层window对象resizeBy(x,y)窗口宽高变化尺寸x和y表示浏览器窗口的宽高变化尺寸，只适用于最外层window对象alert()警告框显示时包含传入的字符串和“确定”按钮confirm()确认框单击“确认”返回true，单击“取消”返回falseprompt()提示输入框“确认”按钮（返回文

27、本输入域的内容）、“取消”按钮（返回null）和文本输入域find()搜索对话框等同用浏览器菜单栏的“查找”命令打开对话框print()打印对话框等同用浏览器菜单栏的“打印”命令打开对话框setTimeOut()设置一次性定时器参数：执行函数或代码，执行前需要等待的时间clearTimeOut()清除一次性定时器参数为setTimeout()的引用setInterval()设置重复性定时器参数：执行函数或代码，循环执行代码间隔时间clearInterval()清除重复性定时器参数为setInterval()的引用JavaScript的BOM与DOMllocationlocation对象对象lo

28、cationlocation对象提供了与当前窗口中加载的文档有关的信息以对象提供了与当前窗口中加载的文档有关的信息以及导航功能，它既是及导航功能，它既是windowwindow对象的属性，同时也是对象的属性，同时也是documentdocument对象的属性对象的属性26属性和方法举例说明hrefhttp:/返回当前完整的URL地址，等同location.toString():80返回服务器名称和端口号返回服务器名称port8080返回URL中指定的端口号，如果没有则返回空字符串protocolhttp:返回页面使用的协议，通常是http:或https:reload()方法location.r

29、eload(true)重新加载当前页面assign()方法location.assign(url)立即打开新URL并在浏览器历史中生成一条记录，相当于直接设置location.href值replace()方法location.replace(url)打开新URL，但是不会生成历史记录，使用replace()之后，用户不能通过“后退”回到前一个页面JavaScript的BOM与DOMlhistoryhistory对象对象historyhistory对象保存着用户上网的历史记录，还常用于浏览器中对象保存着用户上网的历史记录，还常用于浏览器中的前进和后退功能。的前进和后退功能。27属性和方法举例说明

30、lengthhistory.length返回浏览器历史列表中的URL数量back()方法history.back()加载history列表中的前一个URLforward()方法history.forward()加载history列表中的下一个URLgo(num)方法history.go(2)加载history列表中的某个具体页面JavaScript的BOM与DOMlscreenscreen对象对象screenscreen对象用来表明客户端显示器的能力。多用于测定客户对象用来表明客户端显示器的能力。多用于测定客户端能力的站点跟踪工具中。包括浏览器窗口外部的显示器的端能力的站点跟踪工具中。包括浏览

31、器窗口外部的显示器的信息，如像素宽度和高度等信息，如像素宽度和高度等28属性说明height获得屏幕的像素高度width获得屏幕的像素宽度availHeight屏幕的像素高度减去任务栏高度之后的值availWidth屏幕的像素宽度减去任务栏宽度之后的值JavaScript的BOM与DOMlnavigatornavigator对象对象navigatornavigator对象对象用来用来描述浏览器本身，主要用于检测浏览器的描述浏览器本身，主要用于检测浏览器的版本，包括浏览器的名称、版本、语言、系统平台、用户特版本，包括浏览器的名称、版本、语言、系统平台、用户特性字符串等信息。性字符串等信息。29属

32、性说明appName返回浏览器的名称appVersion返回浏览器的平台和版本信息browserLanguage返回当前浏览器的语言online返回指明系统是否处于脱机模式的布尔值platform返回运行浏览器的操作系统平台userAgent返回由客户机发送服务器的 user-agent 头部的值JavaScript的BOM与DOMlDOMDOM对象模型对象模型documentdocument对象既是对象既是BOMBOM顶级对象的一个属性，也是顶级对象的一个属性，也是DOMDOM模型中的模型中的顶级对象顶级对象。lDOMDOM由由3 3部分组成，分别是部分组成，分别是Core DOMCore

33、DOM、XML DOMXML DOM和和HTML HTML DOMDOM1.1.Core Core DOMDOM用于任何结构化文档和标准模型。用于任何结构化文档和标准模型。2.2.XML XML DOMDOM用于用于XMLXML文档的标准模型，定义了所有文档的标准模型，定义了所有XMLXML元素的对元素的对象和属性，以及访问它们的方法。象和属性，以及访问它们的方法。3.3.HTML HTML DOMDOM用于用于HTMLHTML文档的标准模型，定义了所有文档的标准模型，定义了所有HTMLHTML元素元素的对象和属性，以及访问它们的方法。的对象和属性，以及访问它们的方法。DOMDOM将将HTML

34、HTML和和XMLXML文档映射成一个由不同节点组成的树型机构，文档映射成一个由不同节点组成的树型机构，称为称为DOMDOM树。树。30JavaScript的BOM与DOMlDOMDOM对象模型对象模型示例示例31JavaScript的BOM与DOMlHTMLHTML文档的节点文档的节点lDOMDOM下，下，HTMLHTML文档各个节点被视为各种类型的文档各个节点被视为各种类型的NodeNode对象。每对象。每个个NodeNode对象都有自己的属性和方法，利用这些属性和方法对象都有自己的属性和方法，利用这些属性和方法可以遍历整个文档树。可以遍历整个文档树。lDOMDOM定义了定义了nodeTy

35、penodeType来表示节点的类型，使用语法：来表示节点的类型，使用语法：document.nodeTypedocument.nodeType。32对象nodeType值备注Element1Element元素标签Attr2元素标签的属性Text3元素标签的文字内容Comment8注释的文本内容Document9Document对象JavaScript的BOM与DOMlDOMDOM树的根节点是树的根节点是DocumentDocument对象，该对象的对象，该对象的documentElementdocumentElement属性引用表示文档根元素的属性引用表示文档根元素的ElementEleme

36、nt对象（对于对象（对于HTMLHTML文档，文档，这个就是这个就是标记）。标记）。JavascriptJavascript操作操作HTMLHTML文档的时候，文档的时候，documentdocument即指向整个文档，即指向整个文档，、等标签节点类等标签节点类型即为型即为ElementElement。CommentComment类型的节点则是指文档的注释。类型的节点则是指文档的注释。33方法说明createAttribute()用指定的名字创建新的Attr节点createComment()用指定的字符串创建新的Comment节点createElement()用指定的标记名创建新的Elemen

37、t节点createTextNode()用指定的文本创建新的TextNode节点getElementById()返回文档中具有指定id属性的Element节点getElementsByTagName()返回文档中具有指定标记名的所有Element节点JavaScript的BOM与DOMlElementElement标签元素常用的标签元素常用的属性属性l Element Element标签元素常用的方法标签元素常用的方法34属性说明tagName元素的标记名称，比如元素为P。HTML文档返回的tabName均为大写方法说明getAttribute()以字符串形式返回指定属性的值getAttribu

38、teNode()以Attr节点的形式返回指定属性的值getElementsByTabName()返回一个Node数组，包含具有指定标记名的所有Element节点的子孙节点，其顺序为在文档中出现的顺序hasAttribute()如果该元素具有指定名字的属性，则返回trueremoveAttribute()从元素中删除指定的属性removeAttributeNode()从元素的属性列表中删除指定的Attr节点setAttribute()把指定的属性设置为指定的字符串值，如果该属性不存在则添加一个新属性setAttributeNode()把指定的Attr节点添加到该元素的属性列表中JavaScrip

39、t的BOM与DOMl操作操作DOMDOM节点对象节点对象NodeNode节点对象定义了一系列属性和方法，来方便遍历整个节点对象定义了一系列属性和方法，来方便遍历整个文档。用文档。用parentNodeparentNode属性和属性和childNodeschildNodes数组可以在文档数组可以在文档树中上下移动；通过遍历树中上下移动；通过遍历childNodeschildNodes数组或者使用数组或者使用firstChildfirstChild和和nextSiblingnextSibling属性进行循环操作，也可以使用属性进行循环操作，也可以使用lastChildlastChild和和prev

40、iousSiblingpreviousSibling进行逆向循环操作，也可以进行逆向循环操作，也可以枚举指定节点的子节点。枚举指定节点的子节点。调用调用appendChild()appendChild()、insertBefore()insertBefore()、removeChild()removeChild()、replaceChild()replaceChild()方法可以改变一个节点的子节点从而改变方法可以改变一个节点的子节点从而改变文档树文档树childNodeschildNodes的值实际上是一个的值实际上是一个NodeListNodeList对象。因此，可对象。因此，可以通过遍历

41、以通过遍历childNodeschildNodes数组的每个元素来枚举一个给定数组的每个元素来枚举一个给定节点的所有子节点；通过递归，可以枚举树中的所有节点节点的所有子节点；通过递归，可以枚举树中的所有节点35JavaScript的BOM与DOMlDOMDOM操作操作nodenode节点的常用节点的常用属性属性lDOMDOM操作操作nodenode节点的节点的常用常用方法方法36属性名称类型说明nodeNameString节点名称nodeValueString节点值nodeTypeNumber节点类型parentNodeNode父节点firstChildNode第一个子节点lastChildN

42、ode最后一个子节点childNodesNodeList所有子节点previousSiblingNode前一个节点nextSiblingNode后一个节点ownerDocumentDocument获得该节点所属的文档对象attributesMap代表一个节点的属性对象方法名称返回值说明hasChildNodes()Boolean当前节点是否有子节点appendChild(node)Node往当前节点上添加子节点removeChild(node)Node删除子节点replaceChild(oldNode,newNode)Node替换子节点insertBefore(newNode,refNode)Node在指定节点的前面插入新节点本章实训：本章实训：JavaScriptJavaScript在线上网页的应用实在线上网页的应用实例例l网页换肤网页换肤37本章实训：本章实训：JavaScriptJavaScript在线上网页的应用实在线上网页的应用实例例l在线搜索在线搜索l 百度一下百度一下38Thank you!Thank you!PPT模板下载：