Web相关开发——JavaScript
来源：互联网 发布：手机淘宝自定义链接 编辑：程序博客网 时间：2024/06/10 19:30
一.概述
（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 全局函数
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];
2.7.2 String字符串对象
2.7.3 Math数学对象
2.7.4 Date日期对象
2.7.5 RegExp正则表达式对象
3.BOM
BOM（Browser Object Module：浏览器对象模型）
3.1 window对象
<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对象
3.3 History对象
3.4 Screen对象
3.5 Navigator对象
3.6 事件
3.6.1 鼠标事件
3.6.2 键盘事件
3.6.3 窗口事件
3.6.4 表单元素事件
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="哈哈哈哈" onfocus="myFocus()"/>电话：<input type="text" name="tel" onblur="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" onsubmit="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；
注释，类型值为8
4.1 XML DOM
4.1.1 Node对象
4.1.2 Document对象
4.1.3 Element对象
4.2 Html DOM
4.2.1 Document对象
4.2.2 Table对象
4.2.3 TableRow对象
4.2.4 TableCell对象
4.2.5 Input Checkbox对象
4.2.6 Select对象
4.2.7 代码演示
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html xmlns="xmlns=http://www.w3.org/1999/xhtml"><head> <title>demo9-城市联动 </title> </head><body><select id="factory" onchange="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> 0 0
- Web相关开发——JavaScript
- Javascript—Web开发笔试面试题
- Web开发的新势力——服务端JavaScript开发
- 相关 web 开发 收集：
- Web开发相关
- Web 开发相关总结
- Web开发相关知识
- Web开发相关收藏
- Web前端开发相关
- Web开发相关网站
- Web开发相关问题
- web开发及相关
- web开发相关
- JavaScript web开发技术
- Web开发JavaScript组件
- 【Web开发】JavaScript
- JavaScript---- 移动Web开发
- Web开发JavaScript实用技巧
- Python MySQL(MySQLdb)
- hibernate组件映射
- Python网络编程(Socket)
- [Telerik]RadDocking第01篇 初步介绍RadDocking布局控件
- ｐｈｐ面向对象－－psr-0规范
- Web相关开发——JavaScript
- Python发送邮件(Email SMTP)
- 超强、超详细Redis数据库入门教程
- 黑马程序员——Jave面向对象二
- Python多线程
- 超强、超详细Redis数据库入门教程
- LeetCode Gas Station 两个特性，两种方法完美解答-更新证明方法
- Python 扩展C
- Python XML操作处理
