3、javascript脚本语言
2016-06-15 17:03
459 查看
对应于书本第三章
总结：javascript是浏览器解释的，所以写在最简单的html里通过浏览器也可测试效果。
随着Ajax进入web开发的主流市场，JavaScript用的已越来越多。
本章介绍JavaScript基本语法、常用对象及DOM技术。
JavaScript把静态页面变成支持用户交互并响应应用事件的动态页面。
web中常见用处：数据验证、控制浏览器、生成时钟日历、时间戳文档。
基于对象；
事件驱动：直接对客户端的输入作出响应，不需经过服务器；
安全性：它不允许访问本地硬盘，不能将数据写入到服务器上，不允许对网络文档修改和删除，只能通过浏览器实现动态交互
跨平台：JavaScript依赖于浏览器而非OS，浏览器支持它就可以。
变量弱类型：定义变量时不需指出具体是int还是string，统一用var
例 var age=20;
var now=new Date();
用大括号标记代码块；
注释：//或 /* */
JavaScript数据类型：
整型：729,034,0x94B (0开头八进制，0x开头十六进制)
浮点型：3.2、1.6E5（表示1.6*pow(10,5)）
字符型：用单引号或双引号包起来的一个或多个字符，例‘a’ “a” ‘as’ “as”
布尔型：true（非0整数）false（整数0）
转义字符：
空值：null用于定义空的或不存在的引用，如果试图引用一个未定义的变量，则返回一个null值。
流程控制：
if语句、switch语句、for循环、while循环、break与continue
可以在body中或body内比如input单元中直接调用脚本中的函数
比如有很多对象，例如命令按钮、文本框、复选框等等，可以有多种操作，例如左键点击、鼠标在某个元素上移动时持续触发之类的。
过程：对某个事物的触动引起脚本代码执行
如果使用标准XHTML代码，则事件处理函数应该全部用小写”——摘自《Javascript高级程序编程》
所以写成onclick而非onClick
例子：
window对象属性有：document、location、status等
window对象方法有：alert()、open()、close()等
JavaScript允许省略window对象直接用属性或方法，
例如window.close()可直接写成close()
举例：
alert方法，弹出一个窗口
直接alert()或window.alert()，
alert的内容用单引号包着
法一：函数调用法
法二：直接写在input单元内部
close()方法：关闭页面
法一：函数调用法
法二，直接在该对象里写方法体
open()方法：打开一个新的浏览器窗口
语法：windowVar=window.open(url,windowname,[,location]);
open中的参数用单引号包住
windowVar：新窗口的句柄；
url：新窗口的url,如果url是空字符串，就是空白窗口，允许用write()方法创建动态HTML
windowname：新窗口的名称
location：新窗口的位置，可以不写
法一：函数调用法
法二：直接写
（2）String对象
（3）Date对象（P71）：时间日期等
DOM结构：树形结构
DOM树中每个节点就是那些标记，比如html、head、a、input等等
结果如下：
DOM就是对文档分析的接口！！！！
两种查找：
document.getElementById(“goal_id”); //按Id查找
document.getElementsByName(“goal_name”)[0] //用name查找返回的是一个数组，若想用name获取唯一元素，应加下标[0]
例：
Node常用方法如下：
例子：实现增加评论和删除评论的功能
效果图：
总结：DOM就是把一些东西看成节点，整个文档看成树，所有的操作都是针对节点的。
总结：javascript是浏览器解释的，所以写在最简单的html里通过浏览器也可测试效果。
是什么？
JavaScript是web中脚本语言，由客户端浏览器解释执行，可应用在JSP、PHP、ASP等网站中。随着Ajax进入web开发的主流市场，JavaScript用的已越来越多。
本章介绍JavaScript基本语法、常用对象及DOM技术。
JavaScript把静态页面变成支持用户交互并响应应用事件的动态页面。
web中常见用处：数据验证、控制浏览器、生成时钟日历、时间戳文档。
JavaScript主要特点：
解释性语言；基于对象；
事件驱动：直接对客户端的输入作出响应，不需经过服务器；
安全性：它不允许访问本地硬盘，不能将数据写入到服务器上，不允许对网络文档修改和删除，只能通过浏览器实现动态交互
跨平台：JavaScript依赖于浏览器而非OS，浏览器支持它就可以。
JavaScript语言基础：
区分大小写；变量弱类型：定义变量时不需指出具体是int还是string，统一用var
例 var age=20;
var now=new Date();
用大括号标记代码块；
注释：//或 /* */
JavaScript数据类型：
整型：729,034,0x94B (0开头八进制，0x开头十六进制)
浮点型：3.2、1.6E5（表示1.6*pow(10,5)）
字符型：用单引号或双引号包起来的一个或多个字符，例‘a’ “a” ‘as’ “as”
布尔型：true（非0整数）false（整数0）
转义字符：
空值：null用于定义空的或不存在的引用，如果试图引用一个未定义的变量，则返回一个null值。
var s="hello";
alert(s); //alert函数弹出小窗口显示
document.write("今天星期一"); //直接在网页显示文字信息
== 判断相等不考虑数据类型，"17"==17 //true
=== 判断相等考虑数据类型，"17"===17 //false
!= 判断不等不考虑数据类型，"17"!=17 //false
!== 判断不等考虑数据类型，"17"!==17 //true流程控制：
if语句、switch语句、for循环、while循环、break与continue
整个代码结构：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link href="style.css" rel="stylesheet">
<script language="javascript">
function check(){
}
}
</script>
</head>
<body>
</body>
</html>可以在body中或body内比如input单元中直接调用脚本中的函数
<script language="javascript">
function test()
{ document.write("页面直接显示");
alert('弹出窗口的提示');
}
</script>
<body onload="test()">
</body>事件处理（书本P61）
什么叫事件处理？比如有很多对象，例如命令按钮、文本框、复选框等等，可以有多种操作，例如左键点击、鼠标在某个元素上移动时持续触发之类的。
过程：对某个事物的触动引起脚本代码执行
如果使用标准XHTML代码，则事件处理函数应该全部用小写”——摘自《Javascript高级程序编程》
所以写成onclick而非onClick
例子：
<script language="javascript">
function test()
{alert('hello');}
</script>
<body>
<input name="bt_save" type="button" value="保存" onclick="test()">
</body>常用对象（P63）
（1）window对象：就是窗口对象，很重要window对象属性有：document、location、status等
window对象方法有：alert()、open()、close()等
JavaScript允许省略window对象直接用属性或方法，
例如window.close()可直接写成close()
举例：
alert方法，弹出一个窗口
直接alert()或window.alert()，
alert的内容用单引号包着
法一：函数调用法
<script language="javascript">
function test()
{alert('hello');}
</script>
<body>
<input name="bt_save" type="button" value="保存" onclick="test()">
</body>法二：直接写在input单元内部
<input name="bt_save" type="button" value="保存" onclick="alert('确认保存？');">close()方法：关闭页面
法一：函数调用法
<script language="javascript">
function closepage()
{window.open('','_self','');
window.close();}
</script>
<input type="button" name="Submit3" value="关闭" onclick="closepage()"/>法二，直接在该对象里写方法体
<input type="button" name="Submit3" value="关闭" onclick="window.open('','_self','');window.close();"/>open()方法：打开一个新的浏览器窗口
语法：windowVar=window.open(url,windowname,[,location]);
open中的参数用单引号包住
windowVar：新窗口的句柄；
url：新窗口的url,如果url是空字符串，就是空白窗口，允许用write()方法创建动态HTML
windowname：新窗口的名称
location：新窗口的位置，可以不写
法一：函数调用法
<script language="javascript">
function opennew()
{ window.open('bbs.html','BBS','width=531,height=402,top=50,left=20'); // bbs.html是自己已写好的
}
</script>
<input type="button" name="Submit3" value="打开新网页" onclick="opennew()"/>法二：直接写
<input type="button" name="Submit3" value="打开新网页" onclick="window.open('bbs.html','BBS','width=531,height=402,top=50,left=20');"/>（2）String对象
1、字符串长：例"acd".length
2、string.indexOf(subString[,startIndex]):从某个下标开始找子串
例：
var str="wgh717@sohu.com";
var index=str.indexOf('@'); //下标为6
var index2=str.indexOf('@',7); //返回-1，因为从下标7走到下标6
3、string.lastIndexOf(subString)：返回某子串最后的出现下标
例：
<script language="javascript">
var str="acdeacf";
var i1=str.indexOf('ac'); // 0
var i2=str.lastIndexOf('ac'); // 4
document.write(i1+","+i2);
</script>
4、string.substr(start[,length]):返回子串
例：
var str="acdeacf";
var substr=str.substr(2,3); // dea
5、string.substring(from[,to]):返回子串
var str="acdeacf";
var substr=str.substring(1,5); // cdea
6、string.replace(regExp,substring);
将string中与正则表达式匹配的子串都替换为想要的substring
比如，可以将"ad ce ff ad"中所有'ad'替换成'kf',也可以只替换第一个'ad'成'kf'
regExp:正则表达式，若正则表达式设置了标记g，就是替换所有与模式匹配的子串，没有g就是替换第一个匹配的子串
substring：子串替换的目标
例：去掉字符串首尾空格
var str=' de je de ';
var objExp=/(^\s*)|(\s*$)/g; //有g说明是替换全部匹配的子串
str=str.replace(objExp,"");
7、split():分割
string.split(delimiter[,limit]);
delimiter:字符串或正则表达式，就是按此分割的；
limit：可选，若写了则返回的子串数目不会大于此数，若没写默认是整个字符串都被分割而不考虑长度
例：
var str="2012-10-13";
var arr=str.split("-");//此时的arr就是存储三个元素的数组（3）Date对象（P71）：时间日期等
DOM技术
DOM：Document Object Model文档对象模型，是表示文档（如HTML文档）和访问、操作构成文档的各种元素（如HTML标记和文本串）的应用程序接口DOM结构：树形结构
DOM树中每个节点就是那些标记，比如html、head、a、input等等
例题：遍历JSP文档，获取该文档中的全部标记及标记总数
<%@ page language="java" pageEncoding="GBK"%>
<html>
<head>
<title>一个简单的文档</title>
<script language="javascript">
var elementList = ""; //全局变量，保存Element标记名，使用完毕要清空
function getElement(node) { //参数node是一个Node对象
var total = 0;
if(node.nodeType==1) { //检查node是否为Element对象
total++; //如果是，计数器加1
elementList = elementList + node.nodeName + "、"; //保存标记名
}
var childrens = node.childNodes; //获取node的全部子节点
for(var m=node.firstChild; m!=null;m=m.nextSibling) {
total += getElement(m); //对每个子节点进行递归操作
}
return total;
}
function show(){
var number=getElement(document); //document是你的当前整个文档
elementList=elementList.substring(0,elementList.length-1); //去除字符串中最后一个逗号
alert("该文档中包含："+elementList+"等"+number+"个标记！");
elementList=""; //清空全局变量
}
</script>
</head>
<body onload="show()">
欢迎访问明日科技网站！
<br>
<a href="http://www.mingribook.com"> http://www.mingribook.com</a> </body>
</html>结果如下：
DOM就是对文档分析的接口！！！！
查找文档节点：
文档中有多个对象比如button、文本框等等，想查找它们两种查找：
document.getElementById(“goal_id”); //按Id查找
document.getElementsByName(“goal_name”)[0] //用name查找返回的是一个数组，若想用name获取唯一元素，应加下标[0]
例：
<input id="Button" type="button" value="弹出" onclick="window.alert('靠，怎么还不弹出')" />
<input type="text" name="textfield" id="textfield" value="文本框"/>
<script language="javascript">
var t=document.getElementById("Button").value;
document.write(t+","); //弹出,
t=document.getElementsByName("textfield")[0].value;
document.write(t); //文本框
</script>增删替换等文档节点
DOM支持节点查询，节点创建、插入、删除、替换等，都由节点（Node）对象提供方法Node常用方法如下：
例子：实现增加评论和删除评论的功能
效果图：
在<body>内创建一个table,id为“comment”。脚本部分三个函数分别为：
<script language="javascript">
// 增加评论
function addElement() {
// 下面新创建的都是节点，而appendChild操作是在构造DOM树
//创建TextNode节点
var person = document.createTextNode(form1.person.value);
var content = document.createTextNode(form1.content.value);
//创建td类型的Element节点
var td_person = document.createElement("td");
var td_content = document.createElement("td"); //tr td tbody 就是行、列、内容的意思。
var tr = document.createElement("tr"); //创建一个tr类型的Element节点
var tbody = document.createElement("tbody"); //创建一个tbody类型的Element节点
//将TextNode节点加入到td类型的节点中
td_person.appendChild(person);
td_content.appendChild(content);
//将td类型的节点添加到tr节点中
tr.appendChild(td_person);
tr.appendChild(td_content);
tbody.appendChild(tr); //将tr节点加入tbody中
var tComment = document.getElementById("comment"); //获取table对象
tComment.appendChild(tbody); //将节点tbody加入节点尾部
form1.person.value=""; //清空评论人文本框
form1.content.value=""; //清空评论内容文本框
}
//删除第一条评论
function deleteFirstE(){
// comment是自己创建的一个存储评论的table的id
var tComment = document.getElementById("comment");
if(tComment.rows.length>1){
tComment.deleteRow(1); //删除表格的第二行，即第一条评论，因为第0行是文字“评论人”“评论内容”
}
}
//删除最后一条评论
function deleteLastE(){
var tComment = document.getElementById("comment");
if(tComment.rows.length>1){
tComment.deleteRow(tComment.rows.length-1);
}
}
</script>总结：DOM就是把一些东西看成节点，整个文档看成树，所有的操作都是针对节点的。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Javascript深度复制对象
- MyEclipse安装JS代码提示（Spket插件）
- JavaScript中function的多义性
- JavaScript中function的多义性
- amCharts图表中的JavaScript中文注释引起的浏览器兼容性问题
- JSON数据中带有HTML标签解决方法
- KnockOut.js入门示例详解
- window.open中url传递一个json
- 动画插件wow.js的使用方法
- JSON简介
- JavaScript专题（二）：深入理解iframe
- linq to js使用汇总
- js刷新页面方法大全
- JavaScript闭包--模仿块级作用域
- js中打印使用
- jstack, jstat, jmap, jinfo, 教你如何在背后偷窥你的进程^^
- javascript笔记
- js-循环执行一个函数
- [转载]HighCharts 详细使用及API文档说明
- 2016.06.15廖雪峰JS__学习笔记（浏览器对象）__P11