Web相关开发——JavaScript"/>
Web相关开发——JavaScript
一.概述
（1）网景(Netscape)公司开发的一种【基于对象】和【事件驱动】的脚本语言
（2）脚本语言：语言无需编译即可运行，是为了缩短传统的编写-编译-连接-运行的过程而创建的计算机编程语言
（3）基于对象：内置对象不具备面向的全部特征
（4）事件驱动：每一段JS代码都是由指定的事件调用执行的
（5）语言特点：交互性，安全性，跨平台性
二.基本语法
1.JS与Html结合方法
（1）直接在事件中写
通过每个Html标签中的事件属性
onclick = "javascript:alert('Hello World')"（2）通过<script>标签
<script type="text/javascript">JS代码书写位置
</script>（3）通过<script>标签导入本地js文件
注意：<script>标签中写入JS代码无法运行
<script type="text/javascript" src="JS文件本地位置"></script>2.ECMA核心语法
2.1 基本数据类型
（1）number：数字（整数、浮点型）
（2）string：字符串（注意：JS中有身为对象的String和基本数据类型string）
（3）boolean：布尔型
（4）undefined：变量定义了却没有赋值
（5）null：基本数据类型null，不过typeof返回的Object类型
特殊：
<1>.string类型的数据会自动转换前后数据的类型为string
<2>.【0】【""】【undefined】【NaN】【false】皆可以表示假
<3>.【true】数字的话为1，【false】【null】数字的话为0
2.2 变量
（1）用【var】来声明变量，赋值是什么类型这个变量就是什么类型
2.3 运算符
（1）【==】判断值是否相同(如：【"123"==123：true】)
（2）【===】判断值和类型是否都相同
（3）三元运算符：同java：条件表达式?值1:值2;
2.4 控制语句
（1）if语句
（2）switch语句
（3）while语句
（4）for语句
2.5 函数的定义
（1）第一种方式
function 函数名(参数名){方法体
}（2）第二种方式
注意：alert(函数名)得到的结果是等号后边的全部内容，调用通过——函数名(参数);
var 函数名 = function(参数名){方法体
}（3）第三种方式：最后一个参数时方法体
var show = new Function("参数名",...,"方法体");注意：参数名和方法体需要用引号括起
2.6 全局函数
| 函数 | 描述 |
|---|---|
| decodeURI(表达式) | 解码某个编码的 URI。解码 |
| encodeURI(表达式) | 把字符串编码为 URI。编码 |
| eval(表达式) | 计算 JavaScript 字符串，并把它作为脚本代码来执行。 |
| escape(表达式) | 对字符串进行编码。编码 |
| unescape(表达式) | 对由 escape() 编码的字符串进行解码。解码 |
| isNaN(表达式) | 检查某个值是否不是数字。 |
| parseFloat(表达式) | 解析一个字符串并返回一个浮点数。 |
| parseInt(表达式) | 解析一个字符串并返回一个整数。取整只保留整数位数字，不会四舍五入 |
2.7 常用对象
2.7.1 Array数组对象
建立数组的三种方法//方法1：动态建立
var arr1 = new Array();
arr1[0] = "daf";
arr1[2] = false;
arr1[3] = 21;//方法2：静态建立
var arr3 = new Array(21,41,41,431,1);
alert(arr3.toString());//方法3：静态建立
var arr2 = [21,33,false];
| 方法 | 描述 |
|---|---|
| join(字符) | 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。 |
| sort() | 对数组的元素进行排序 |
| reverse() | 颠倒数组中元素的顺序。 |
2.7.2 String字符串对象
| 方法 | 描述 |
|---|---|
| substr(首索引,长度) | 从起始索引号提取字符串中指定数目的字符。 |
| substring(首索引,尾索引) | 提取字符串中两个指定的索引号之间的字符。 |
2.7.3 Math数学对象
| 方法 | 描述 |
|---|---|
| floor(x) | 对一个数进行下舍入。 |
| random() | 返回 0 ~ 1 之间的随机数 |
| ceil(x) | 对一个数进行上舍入。 |
| round(x) | 把一个数四舍五入为最接近的整数 |
2.7.4 Date日期对象
| 方法 | 描述 |
|---|---|
| Date() | 返回当日的日期和时间 |
| getDate() | 从 Date 对象返回一个月中的某一天 (1 ~ 31) |
| getDay() | 从 Date 对象返回一周中的某一天 (0 ~ 6) |
| getMonth() | 从 Date 对象返回月份 (0 ~ 11) |
| toLocaleString() | 根据本地时间格式，把 Date 对象转换为字符串。 |
| toLocaleTimeString() | 根据本地时间格式，把 Date 对象的时间部分转换为字符串 |
| toLocaleDateString() | 根据本地时间格式，把 Date 对象的日期部分转换为字符串 |
2.7.5 RegExp正则表达式对象
| 方法 | 描述 |
|---|---|
| test(字符串) | 检索字符串中指定的值。返回 true 或 false。 |
| search(正则) | 检索与正则表达式相匹配的值。 |
| match | 找到一个或多个正在表达式的匹配。 |
| replace | 替换与正则表达式匹配的子串。 |
| split | 把字符串分割为字符串数组。 |
3.BOM
BOM（Browser Object Module：浏览器对象模型）
3.1 window对象
| 属性 | 描述 |
|---|---|
| closed | 返回窗口是否已被关闭。 |
| opener | 返回对创建此窗口的窗口的引用。 |
| self | 返回对当前窗口的引用。等价于 Window 属性。与iframe连用 |
| status | 设置窗口状态栏的文本。 |
| top | 返回最顶层的先辈窗口。与iframe连用 |
| parent | 返回父窗口。与iframe连用 |
| document | 对 Document 对象的只读引用。请参阅 Document 对象。 |
| history | 对 History 对象的只读引用。请参数 History 对象。 |
| location | 用于窗口或框架的 Location 对象。请参阅 Location 对象。 |
| Screen | 对 Screen 对象的只读引用。请参数 Screen 对象。 |
| Navigator | 对 Navigator 对象的只读引用。请参数 Navigator 对象。 |
| returnValue | 这个值与showModalDialog连用 |
| 集合 | 描述 |
|---|---|
| frames[] | 返回窗口中所有命名的框架。该集合是 Window 对象的数组，每个 Window 对象在窗口中含有一个框架或 <iframe>。属性 frames.length 存放数组 frames[] 中含有的元素个数。注意，frames[] 数组中引用的框架可能还包括框架，它们自己也具有 frames[] 数组。可用此方法获取全部子框架，通过frames[子框架名]的方式可获取指定子框架 |
| 方法 | 描述 |
|---|---|
| alert(消息字符串) | 显示带有一段消息和一个确认按钮的警告框。（消息提示框） |
| confirm(提示内容) | 显示带有一段消息以及确认按钮和取消按钮的对话框。（确认提示框，会返回true或false） |
| prompt(提示内容,默认值) | 显示可提示用户输入的对话框。（对话框，返回输入的值） |
| setInterval(调用的方法,间隔时间) | 按照指定的周期（以毫秒计）来调用函数或计算表达式。（可无限次运行。会有返回值，可利用此返回值清除这个定时器，方法不再运行）（调用方法时，如果用双引号括住方法名则加括号，如果不使用双引号，千万记住不要加括号，否则报错） |
| setTimeout(调用的方法,间隔时间) | 在指定的毫秒数后调用函数或计算表达式。（只执行一次，可用递归实现无限次调用。会有返回值，可利用此返回值清除这个定时器，方法不再运行）（调用方法时，如果用双引号括住方法名则加括号，如果不使用双引号，千万记住不要加括号，否则报错） |
| clearInterval(返回值标示) | 取消由 setInterval() 设置的 timeout。 |
| clearTimeout(返回值标示) | 取消由 setTimeout() 方法设置的 timeout。 |
| open(url,窗体名称,显示样式) | 打开一个新的浏览器窗口或查找一个已命名的窗口。 |
| showModalDialog(url) | 打开一个新的浏览器窗口。此方法有返回值，为returnValue的值 |
<html> <head> <title> demo6-定时器 </title> <style type="text/css"> #div1{border:1px solid green;width:200px;height:200px;} #div2{border:1px solid blue;width:200px;height:200px;} </style> </head> <body> <div id="div1">div1————setInterval</div> <div id="div2">div2————setTimeout</div> <script type="text/javascript"> /* setInterval:每个执行多长时间执行一次。两个参数，第一个是调用方法，第二个是指定间隔的时间 clearInterval:跳出循环 setTimeout:只会执行一次，第一个参数是调用的方法，第二个参数是设置在指定的毫秒数。如果想无限执行，请放在递归里面 脚本语言不是必须按照从上到下的顺序执行，不是必须前面的程序执行完毕后边的才可以执行，不是这样的。脚本语言可以调用即可运行 clearTimeot:跳出循环 注意：调用时，如果用双引号括住方法名则加括号，如果不使用双引号，千万记住不要加括号，否则报错 */ var vle = ""; function random(){ var r = parseInt(Math.random()*100); document.getElementById("div1").innerHTML += "<br />"+r; if(vle != "")//只产生一个随机数 clearInterval(vle); } vle = setInterval(random,400); //========================================================================== var to1 = "",to2 = ""; function randomTimeout(){ var r = Math.floor(Math.random()*100); document.getElementById("div2").innerHTML += "<br />"+r; to1 = setTimeout(randomTimeout,400); } randomTimeout(); if(to1!=""){ clearTimeout(to1); } </script> </body>
</html> 3.2 Location对象
| 属性 | 描述 |
|---|---|
| href | 设置或返回完整的 URL。（可用作调转地址，直接把此属性此某方法中赋值，然后事件调用方法既可） |
3.3 History对象
| 方法 | 描述 |
|---|---|
| back() | 加载 history 列表中的前一个 URL（跳转到上个界面） |
| forward() | 加载 history 列表中的下一个 URL（跳转到下个页面） |
| go(number) | 加载 history 列表中的某个具体页面（跳转到指定页面，参数是历史记录的下标，go(0)表示刷新当前页面，go(-1)===back() g(1)===forward()） |
3.4 Screen对象
| 属性 | 描述 |
|---|---|
| height | 返回显示屏幕的高度。 |
| width | 返回显示器屏幕的宽度。 |
3.5 Navigator对象
| 属性 | 描述 |
|---|---|
| appName | 返回浏览器的名称。 |
| appVersion | 返回浏览器的平台和版本信息。 |
3.6 事件
3.6.1 鼠标事件
| 属性 | 值 | 描述 |
|---|---|---|
| onclick | 脚本 | 当鼠标被单击时执行脚本 |
| ondblclick | 脚本 | 当鼠标被双击时执行脚本 |
| onmousedown | 脚本 | 当鼠标按钮被按下时执行脚本 |
| onmouseup | 脚本 | 当鼠标按钮被松开时执行脚本 |
| onmousemove | 脚本 | 当鼠标指针移动时执行脚本 |
| onmouseout | 脚本 | 当鼠标指针移出某元素时执行脚本 |
| onmouseover | 脚本 | 当鼠标指针悬停于某元素之上时执行脚本 |
3.6.2 键盘事件
| 属性 | 值 | 描述 |
|---|---|---|
| onkeydown | 脚本 | 当键盘被按下时执行脚本 |
| onkeypress | 脚本 | 当键盘被按下后又松开时执行脚本 |
| onkeyup | 脚本 | 当键盘被松开时执行脚本 |
3.6.3 窗口事件
| 属性 | 值 | 描述 |
|---|---|---|
| onload | 脚本 | 当文档被载入时执行脚本（适用于body和frameset元素，页面一打开就执行此事件） |
| onunload | 脚本 | 当文档被卸下时执行脚本（适用于body和frameset元素，页面一关闭就执行此事件） |
3.6.4 表单元素事件
| 属性 | 值 | 描述 |
|---|---|---|
| onchange | 脚本 | 当元素改变时执行脚本（<select>选择变换时调用可使用此事件） |
| onsubmit | 脚本 | 当表单被提交时执行脚本（提交事件，定义在form中，调用格式必须是return 方法名(),而且此方法必须有返回值） |
| onreset | 脚本 | 当表单被重置时执行脚本（必须定义在form中） |
| onselect | 脚本 | 当元素被选取时执行脚本 |
| onblur | 脚本 | 当元素失去焦点时执行脚本（失焦事件） |
| onfocus | 脚本 | 当元素获得焦点时执行脚本（聚焦事件） |
3.6.5 代码演示
<html><head><title>demo10-聚焦于离焦</title><script type="text/javascript">/*onfocus:聚焦事件onblur:失焦事件*/function myFocus(){document.getElementsByName("username")[0].value = "";}function regMy(tel){var text = tel.value;var reg = /^[0-9]{11}/;if(reg.test(text))alert("输入的是一个电话号码");elsealert("不是一个电话号码");}</script></head><body>姓名：<input type="text" name="username" value="哈哈哈哈" οnfοcus="myFocus()"/>电话：<input type="text" name="tel" οnblur="regMy(this)"/></body>
</html>
<html><head><title>demo11-提交重制事件</title><script type="text/javascript">/*提交重制事件onsubmit 提交事件onreset 重制事件注意：1.onsubmit和onreset都是针对表单说的，所以要在表单标签form内定义事件2.onsubmit和onreset事件调用格式必须是return方法名3.consubmit的方法必须有个返回值*/function myCheck(){var usename = document.getElementsByName("username")[0].value;var password = document.getElementsByName("password")[0].value;if(usename==""){alert("请输入用户名");return false;//表示不用往服务端发送请求}if(password==""){alert("请输入密码");return false;}return true;}</script></head><body><form action="" method="get" οnsubmit="return myCheck()">用户名：<input type="text" name="username" /><br />密码：<input type="text" name="password" /><br /><input type="submit" value="提交" /><input type="reset" value="重制" /></form></body>
</html>4.DOM
DOM（document obejct model 文档对象模型）：w3c制订的一套能够动态的访问html或者xml文档的标准 （1）概念：Dom将HTML解析成一个document对象树 （2）节点分类 元素节点，类型值为1； 文本节点，类型值为2； 属性节点，类型值为3； document节点，类型值为9； 注释，类型值为84.1 XML DOM
4.1.1 Node对象
| 属性 | 描述 |
|---|---|
| childNodes | 返回节点到子节点的节点列表。（返回的是一个数组） |
| firstChild | 返回节点的首个子节点。 |
| lastChild | 返回节点的最后一个子节点。 |
| nextSibling | 返回节点之后紧跟的同级节点。 |
| parentNode | 返回节点的父节点。 |
| previousSibling | 返回节点之前紧跟的同级节点。 |
| nodeName | 返回节点的名称，根据其类型。 |
| nodeType | 返回节点的类型。 |
| nodeValue | 设置或返回节点的值，根据其类型。 |
| 方法 | 描述 |
|---|---|
| appendChild(newChild) | 向节点的子节点列表的结尾添加新的子节点。 |
| cloneNode(布尔值) | 复制节点。（克隆节点，true为复制全部子节点，false为不复制子节点。无论true还是false，都会把属性复制） |
| insertBefore(newChild,refChild) | 在指定的子节点前插入新的子节点。 |
| removeChild(node) | 删除（并返回）当前节点的指定子节点。 |
| replaceChild(newChild,oldChild) | 用新节点替换一个子节点。（替换后newChild节点会从原来的位置消失） |
4.1.2 Document对象
| 属性 | 描述 |
|---|---|
| createElement(节点名称) | 创建元素节点。 |
| createTextNode(文本数据) | 创建文本节点。 |
4.1.3 Element对象
| 方法 | 描述 |
|---|---|
| getAttribute() | 返回属性的值。 |
| setAttribute() | 添加新属性。 |
4.2 Html DOM
4.2.1 Document对象
| 属性 | 描述 |
|---|---|
| body | 提供对 <body> 元素的直接访问。对于定义了框架集的文档，该属性引用最外层的 <frameset>。 |
| 方法 | 描述 |
|---|---|
| getElementById(id名) | 返回对拥有指定 id 的第一个对象的引用。 |
| getElementsByName(name名) | 返回带有指定名称的对象集合。 |
| getElementsByTagName(标签名) | 返回带有指定标签名的对象集合。 |
4.2.2 Table对象
| 方法 | 描述 |
|---|---|
| createCaption() | 为表格创建一个 caption 元素。 |
| insertRow(index) | 在表格中插入一个新行。（插入一行到指定位置） |
| deleteRow(rowIndex) | 从表格删除一行。（删除指定索引的一行） |
4.2.3 TableRow对象
| 属性 | 描述 |
|---|---|
| rowIndex | 返回该行在表中的位置。 |
| 方法 | 描述 |
|---|---|
| deleteCell(cellIndex) | 删除行中的指定的单元格。 |
| insertCell(index) | 在一行中的指定位置插入一个空的 <td> 元素。 |
4.2.4 TableCell对象
| 属性 | 描述 |
|---|---|
| cellIndex | 返回单元格在某行的单元格集合中的位置。 |
4.2.5 Input Checkbox对象
| 属性 | 描述 |
|---|---|
| checked | 设置或返回 checkbox 是否应被选中。返回值为true或false |
| tabIndex | 设置或返回 checkbox 的 tab 键控制次序。 |
4.2.6 Select对象
| 集合 | 描述 |
|---|---|
| options[] | 返回包含下拉列表中的所有选项的一个数组。 |
| 属性 | 描述 |
|---|---|
| length | 返回下拉列表中的选项数目。 |
| selectedIndex | 设置或返回下拉列表中被选项目的索引号。 |
| size | 设置或返回下拉列表中的可见行数。 |
| tabIndex | 设置或返回下拉列表的 tab 键控制次序。 |
| multiple | 设置或返回是否选择多个项目。 |
| 方法 | 描述 |
|---|---|
| add() | 向下拉列表添加一个选项。 |
| remove() | 从下拉列表中删除一个选项。 |
4.2.7 代码演示
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ".dtd">
<html xmlns="xmlns="><head><title>demo9-城市联动 </title></head><body><select id="factory" οnchange="selectCity()"><option>---请选择省份---</option></select><select id="city"><option>---请选择省份---</option></select><script type="text/javascript">var cityList = new Array();cityList['北京市'] = ['朝阳区','东城区','西城区', '海淀区','宣武区','丰台区','怀柔','延庆','房山'];cityList['上海市'] = ['宝山区','长宁区','丰贤区', '虹口区','黄浦区','青浦区','南汇区','徐汇区','卢湾区'];cityList['广州省'] = ['广州市','惠州市','汕头市','珠海市','佛山市','中山市','东莞市'];cityList['深圳市'] = ['福田区', '罗湖区', '盐田区', '宝安区', '龙岗区', '南山区', '深圳周边'];cityList['重庆市'] = ['俞中区', '南岸区', '江北区', '沙坪坝区', '九龙坡区', '渝北区', '大渡口区', '北碚区'];cityList['天津市'] = ['和平区', '河西区', '南开区', '河北区', '河东区', '红桥区', '塘古区', '开发区'];cityList['江苏省'] = ['南京市','苏州市','无锡市'];cityList['浙江省'] = ['杭州市','宁波市','温州市'];cityList['四川省'] = ['四川省','成都市'];cityList['海南省'] = ['海口市'];cityList['福建省'] = ['福州市','厦门市','泉州市','漳州市'];cityList['山东省'] = ['济南市','青岛市','烟台市'];cityList['江西省'] = ['江西省','南昌市'];cityList['广西省'] = ['柳州市','南宁市'];cityList['安徽省'] = ['安徽省','合肥市'];cityList['河北省'] = ['邯郸市','石家庄市'];cityList['河南省'] = ['郑州市','洛阳市'];cityList['湖北省'] = ['武汉市','宜昌市'];cityList['湖南省'] = ['湖南省','长沙市'];cityList['陕西省'] = ['陕西省','西安市'];cityList['山西省'] = ['山西省','太原市'];cityList['黑龙江省'] = ['黑龙江省','哈尔滨市'];cityList['其他'] = ['其他'];var f = document.getElementById("factory");for(var i in cityList){f.add(new Option(i,i));}function selectCity(){/*//自己的方法var city = document.getElementById("city");city.length = 1;var index = f.selectedIndex;var a = 1;for(var i in cityList){if(a==index)for(var b=0;b<cityList[i].length;b++){city.add(new Option(cityList[i][b],cityList[i][b]));}a++;}*///老师的方法var index = f.selectedIndex;var cityNode = f.options[index];var arr = cityList[cityNode.value];var city = document.getElementById("city");city.length = 1;for(var x=0; x<arr.length; x++){city.add(new Option(arr[x]));}}</script></body>
</html>更多推荐
Web相关开发——JavaScript
发布评论