JavaScript与JAVA在语法上有些相似 但也不完全相同 主要应用与web开发中
下面有几点注意事项
1:javascript区分大小写 这一点与JAVA是相同的
2：与java不同 javascript每行结尾的分号可有可无 如果没有分号 编译器会自动添加
3：变量是弱类型的 即定义变量时用 var变量初始化为任意的值 不用非要int float 等等
4：使用大括号标记代码块
5: 注释 与java和C++相同
其余运算符、循环语句等等的使用与java c++基本相同
6：函数的定义 函数由关键字function 函数名加一组参数等等组成 语法如下
function name(参数...){ statements; return expressions; }
函数调用与java和C++类似
7：事件处理 JavaScript是事件驱动的 即可以以事件驱动的方式直接对客户端的输入作出相应 而不用经过服务器端。 常用事件如下
onabort 对象载入被中断时触发
onblur 元素或窗口本身失去焦点时触发
onclick 单机鼠标左键时触发
ondblclick 双击鼠标左键时触发
onfocus 任何元素或窗口获得焦点时触发
onkeydown 键盘上的按键被按下
在JavaScript事件处理程序的调用代码如下 首先需要获得要处理对象的引用 然后将要执行的处理函数赋值给对应的事件
<input name="bt_save" type="button" value="保存"> <script language="javascript"> var b_save=document.getElementByld("bt_save"); b_save.onclick=function(){ alert("单击了保存按钮"); } </script>
8:常用对象
window对象即浏览器窗口对象 是一个全局对象 是所有对象的顶级对象 直接使用对象名.成员的格式来访问它的属性或方法 常用属性如下
document 对窗口或框架中含有文档的Document对象的只读引用
frames 表示当前窗口中所有frame对象的集合
location 用于代表窗口或框架的location对象
length 窗口或框架包含的框架个数
name 用于存放窗口对象的名称
常用方法如下
alert() 弹出一个警告对话框
confirm() 显示一个确认对话框 单击确认按钮时返回true 否则false
prompt() 弹出一个提示对话框 并要求输入一个简单的字符串
close()关闭窗口
open()打开一个新窗口
setTimeout()在经过指定的时间后执行代码
实战效果如下
代码如下
<html> <head> <title>JavaScript脚本</title> </head> <body> <b> 应用记事本编写HTML代码 </b> </body> <form name="form1" method="post" action=""> 用户名：<input name="user" type="text" id="user"> 密码:<input name="pwd" type="text" id="pwd"> <input name="button" type="button" class="btn_grey" value="登录"> <input name="submit2" type="reset" class="btn_grey" value="重置"> </form> <script language="javascript"> function check(){ if(form1.user.value==""){ alert("请输入用户名"); form1.user.focus();return; } else if(form1.pwd.value==""){ alert("请输入密码");form1.pwd.focus();return; } else{ form1.submit(); } } </script> <input name="Button" type="button" class="btn_grey" value="登录" onclick="check()"> <script language="javascript"> var now=new Date(); var day=new.getDay(); var week; switch(day){ case 1: week="星期一"; break; case 2: week="星期二"; break; case 3: week="星期三"; break; case 4: week="星期四"; break; case 5: week="星期五"; break; case 6: week="星期六"; break; case 7: week="星期日"; break; } document.write("今天是"+week); alert("今天是"+week); </script> <form name="form2" method="post" action=""> 请输入真实姓名:<input name="realName" type="text" id="realName" size="40"> <br><br> <input name="Button" type="button" class="btn_grey" onclick="checkRealName()" value="检测"> </form> <input name="Button" type="button" class="btn_grey" onclick="checkRealName()" value="检测"> <script language="javascript"> function checkRealName(){ var str=from2.realName.value; if(srt==""){ alert("请输入真实姓名");form2.realName.focus();return; } else{ var objExp=/[\u4E00-\u9FA5]{2,}/; if(objExp.test(str==true){ alert("您输入的真实姓名正确"); } else{ alert("您输入的真实姓名不正确)"; } } } </script> </html>
第二张图片代码如下
<html> <head> <title>用户注册页面</title> </head> <form id="form4" method="post" aciton=""> <label> </label> <table width="353" height="140" border="0"> <tr> <td width="104" align="right">用户名：</td> <td width="233" align="left"><label for="textfield"></label> <input type="text" name="textfield" id="textfield"/></td> </tr> <tr> <td align="right"> 密码：</td> <td align="left"><label for="textfield2"></label> <input type="password" name="textfield2" id="textfield2"/> </td> </tr> <tr> <td align="right"> 确认密码：</td> <td align="left"><label for="textfield3"></label> <input type="password" name="textfield3" id="textfield3"/> </td> </tr> <tr> <td colspan="2" align="center"><label> <input type="submit" name="Submit" value="提交" onclick="mysubmit()"/> </label> <label> <input type="reset" name="Submit2" value="重置"/> </label> <label> <input type="button" name="Submit3" value="关闭" onclick="window.close()"/> </label></td> </tr> </table> <label><br/> </label> </form </html>
8：包括还有String对象 方法与JAVA 和C++中类似 此处不再赘述
9：Date对象 用于对日期和时间进行操作 创建Date对象语法如下
date=new Date()
10:DOM技术 DOM是文档对象模型的简称 是表示文档和访问文档的API
在DOM中 文档的层次结构以树形表示 树是倒立的 树根在上 枝叶在下 树的结点表示文档中的内容
DOM树的根节点是个Document对象
对于文档的操作最常见的是遍历文档 下列代码是遍历JSP文档 并且获取该文档中的全部标记以及标记总数
jsp文件如下
<%@page language="java" pageEncoding="GBK"%> <html> <head> <title> 一个简单的文档</title> </head> 欢迎访问明日科技网站 <br> <a href="http://www.mingribook.com">http://www.mingribook.com</a> </body> </html>
JavaScript代码如下
<html> <script language="javascript"> var elementList=""; function getElement(node){ var total=0; if(node.nodeType==1){ total++; elementList=elementList+node.nodeName+"、"; } var childrens=node.childNodes; for(var m=node.firstChild;m!=null;m=m.nextSibling){ total+=getElement(m); } return total; } function show(){ var number=getElement(document); elementList=elementList.substring(0,elementList.length-1); alert("该文档中包含"+elementList+"等"+number+"个标记"); elementList=""; } script <body onload="show()"> </html>
获取文档中的指定元素可以通过
1：getElementId通过id属性
2：getElementByName和name属性
操作文档 通过以下方法可以操作文档
insertbefore() 在现有节点之前插入新节点
replaceChild() 将子节点列表中的子节点换成新节点
removeChild() 将子节点删除
hasChildNodes() 返回一个布尔值 表示节点是否有子节点
cloneNode() 返回这个节点的副本
