《JS与HTMLPPT课件.pptx》由会员分享，可在线阅读，更多相关《JS与HTMLPPT课件.pptx（21页珍藏版）》请在三一文库上搜索。
1、,JS与HTML,1,JS总括,JS是什么 JS大小写敏感吗 JS的用途 JAVA和JS是什么关系,2,JS的内容提要,声明变量 声明函数 JS注释 表达式 控制语句 异常控制 选择控制 循环控制 JS内置对象 JS的事件,3,JS语法,声明变量：var temp = “test”; 声明函数 function f_name 注释：同Java一样。单行/；多行/*内容*/ 表达式：,4,JS语法异常控制,异常控制语法 try /在此运行代码 catch(err) /在此处理错误 异常创建 throw（exception）该语句创建了一个异常并抛出。 提示：exception 可以是字符串、整数
2、、逻辑值或者对象。,5,JS语法选择控制,选择控制 if语句 switch语句,if(条件判断) ,if(条件判断) else ,if(条件判断) else if() else ,switch(条件判断语句) case 条件1: ； break; case 条件2: ； break; default: ； ,6,JS语法循环控制,while的两种循环方式 for的两种循环方式,while(循环条件) ,do while(循环条件),for(初始化;循环条件;循环控制) ,for( in ) ,7,JS语法JS内置对象,JS对象 具有行为和属性的封装体。 常用对象 字符串 日期 数组 逻辑 算数
3、 正则式 HTML DOM,8,JS内置对象字符串,声明String对象 var testStr = “字符串的内容”; var testStr = new String(“字符串的内容”); String对象的属性引用方式 int testStrLen = testStr.length; String对象的常用属性 length：取字符串的长度,9,JS字符串的方法,String对象的方法引用 var temp = testStr.charAt(0); String对象的方法 charAt()：返回在指定位置的字符。 indexOf()：检索字符串。 lastIndexOf()：从后向前搜索
4、字符串。 substr()：从起始索引号提取字符串中指定数目的字符。 substring()：提取字符串中两个指定的索引号之间的字符。 toLowerCase()：把字符串转换为小写。 toUpperCase()：把字符串转换为大写。 match()：找到一个或多个正在表达式的匹配。 replace()：替换与正则表达式匹配的子串。 split()：把字符串分割为字符串数组。 concat()：连接字符串。,10,JS内置对象日期,Date对象的声明 var today = new Date(); Date对象的常用方法,11,JS内置对象数组,Array对象的声明 var arrayTest
5、 = new Array(); var arrayTest = new Array(n); var mycars=new Array(Saab,Volvo,BMW); var city = “长沙”，“岳阳”，“湘潭” ，“成都”，“绵阳” ; Array的常用属性length Array的方法 pop() ：删除并返回数组的最后一个元素 push()： 向数组的末尾添加一个或更多元素，并返回新的长度。 sort() 对数组的元素进行排序。,12,JS内置对象逻辑,Boolean对象的声明 var testBool = true | false; Boolean对象的使用 if(testBoo
6、l = true) ,13,JS内置对象算数,Math对象的声明 它是一个静态对象，直接引用，如：var pi = Math.PI; Math对象的常用属性 PI：圆周率3.14159 Math对象的常用方法 abs(x)：返回数的绝对值 ceil(x)：对一个数进行上舍入。 floor(x)：对一个数进行下舍入。 max(x,y)：返回 x 和 y 中的最高值 min(x,y)：返回 x 和 y 中的最低值 random()：返回 0 1 之间的随机数 round(x)：把一个数四舍五入为最接近的整数,14,JS内置对象正则式,RegExp对象的声明 var regExp = /内容/; R
7、egExp对象的常用属性 lastIndex：一个整数，标示开始下一次匹配的字符位置。 RegExp对象的常用方法 exec：检索字符串中指定的值。返回找到的值，并确定其位置。 test：检索字符串中指定的值。返回 true 或 false。 支持正则式的String对象的方法 match：找到一个或多个正在表达式的匹配。 replace：替换与正则表达式匹配的子串。 split：把字符串分割为字符串数组。,15,Docment对象,Document的使用方式 var cookie = Document.cookie; Document .write(“内容”); Document的常见属性
8、cookie：设置或返回与当前文档有关的所有 cookie。 title：返回当前文档的标题。 URL：返回当前文档的 URL。 Document的常见方法 close()：关闭用 document.open() 方法打开的输出流，并显示选定的数据。 getElementById()：返回对拥有指定 id 的第一个对象的引用。 getElementsByName()：返回带有指定名称的对象集合。 getElementsByTagName()：返回带有指定标签名的对象集合。 open()：打开一个流，以收集来自任何 document.write() 或 document.writeln() 方法
9、的输出。 write()：向文档写 HTML 表达式 或 JavaScript 代码。 writeln()：等同于 write() 方法，不同的一个换行符。,16,Window对象,Window对象的常用属性 document：对 Document 对象的只读引用。 history：对 History 对象的只读引用。 screenLeft 、screenTop 、screenX 、screenY ：只读整数。声明了窗口的左上角在屏幕上的的 x 坐标和 y 坐标。IE、Safari 和 Opera 支持 screenLeft 和 screenTop，而 Firefox 和 Safari 支持
10、screenX 和 screenY。 Window对象的常用方法 alert()：显示带有一段消息和一个确认按钮的警告框。 close()：关闭浏览器窗口。 confirm()：显示带有一段消息以及确认按钮和取消按钮的对话框。 focus()：把键盘焦点给予一个窗口。 print()：打印当前窗口的内容。 prompt()：显示可提示用户输入的对话框。 setInterval()：按照指定的周期（以毫秒计）来调用函数或计算表达式。 setTimeout()：在指定的毫秒数后调用函数或计算表达式。,17,JS事件,事件 onchange： 用户改变域的内容 onclick ：鼠标点击某个对象 o
11、ndblclick ：鼠标双击某个对象 onfocus ：元素获得焦点 onkeydown： 某个键盘的键被按下 onkeypress 某个键盘的键被按下或按住 onkeyup ：某个键盘的键被松开 onload ：某个页面或图像被完成加载 onmousedown ：某个鼠标按键被按下 onmousemove ：鼠标被移动 onmouseout ：鼠标从某元素移开 onmouseover： 鼠标被移到某元素之上 onmouseup ：某个鼠标按键被松开 onreset ：重置按钮被点击 onselect ：文本被选定 onsubmit ：提交按钮被点击 onunload： 用户退出页面,18,HTML事件与JS,窗口事件仅在 body 和 frameset 元素中有效 表单事件仅在表单元素中有效,19,HTML事件与JS,键盘事件 在以下元素内无效：base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style, 以及 title 元素。,20,HTML事件与JS,鼠标事件 在以下元素内无效：base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style, title 元素。,21,