3、javascript脚本语言
来源：互联网 发布：中山大学网络缴费 编辑：程序博客网 时间：2024/06/08 19:21
对应于书本第三章
总结：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".length2、string.indexOf(subString[,startIndex]):从某个下标开始找子串例：var str="wgh717@sohu.com";var index=str.indexOf('@'); //下标为6var index2=str.indexOf('@',7); //返回-1，因为从下标7走到下标63、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); // dea5、string.substring(from[,to]):返回子串var str="acdeacf";var substr=str.substring(1,5); // cdea6、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就是把一些东西看成节点，整个文档看成树，所有的操作都是针对节点的。
- 3、javascript脚本语言
- JavaScript脚本语言
- JavaScript脚本语言
- JavaScript脚本语言
- 为脚本语言平反-JavaScript篇（3）
- JavaScript 不只是脚本语言
- javascript 脚本语言体会
- javascript脚本语言常用事件
- document对象JavaScript脚本语言
- JavaScript脚本语言初解
- 15、javascript脚本语言
- Java调用脚本语言(JavaScript)
- AJAX与JavaScript脚本语言
- JavaScript脚本语言简介
- JavaScript脚本语言特色时钟
- Javascript脚本语言详解
- 《客户端脚本语言-JavaScript》
- JavaScript 脚本语言 重点整理
- how to access and operate a binarry file ?
- Android Studio教程从入门到精通
- ImageLoader must be init with configuration before using
- Javascript深度复制对象
- strcpy和memcpy的区别
- 3、javascript脚本语言
- android-async-http 源码流程浅析
- ajax和jquery传输数据
- C#中RestoreDirectory属性
- 13. 通用的操作系统功能库（1）
- 2016 普华永道面试题
- 看，这个工具栏能伸缩折叠——Android CollapsingToolbarLayout使用介绍
- 关于分布式事务、两阶段提交协议、三阶提交协议
- 关于H264中I帧,P帧的判断
