J2EE复习(三)JavaScript(上)--基础篇
<!--正文-->开篇的话
就我个人在学习和使用JavaScript过程中，感觉该语言逻辑很混乱，有时会出现莫名其妙的错误，并且没有很好的开发工具，调试起来很是费神费时，然而在web开发中JavaScript充当着很重要的角色，令我很是苦恼，希望可以通过长期的学习和编码积累经验从而得到进步。
JavaScript简介
JavaScript是一种基于对象的脚本语言，用于开发基于客户端和基于服务器的Internet应用程序
可用于创建客户端脚本和服务器端脚本
由Sun Microsystems 和 Netscape 开发，是从 Netscapes 的 Livescript 发展而来的
JavaScript数据类型
数字型 (Number) 整数或实数
逻辑型或布尔型 (boolean) true或false
字符串型(String) 如“Hello World”，“123.4”
空型 (null) 表示空值的特殊关键字
算术运算符
加+ 减- 乘* 除/ 取余% 一元递增++ 一元递减--
比较运算符
等于：== 全等：=== 不等：!= 大于：> 大于等于：>= 小于：< 小于等于：<=
PS：全等=== 比较的是数据类型和值，只有两个都相等时才返回true。
逻辑运算符
逻辑与：&& 逻辑或：|| 逻辑非：!
PS：JavaScript中没有&逻辑运算符
求值运算符
条件运算符：(condition) ? trueVal : falseVal ；例子：status = (age >= 18) ? "adult" : "minor"
typeof运算符：typeof 运算符返回字符串，该字符串代表操作数的类型；
JavaScript数组
有两种向数组赋值的方法（你可以添加任意多的值，就像你可以定义你需要的任意多的变量一样）。
var mycars=new Array()
mycars[0]="Saab"
mycars[1]="Volvo"
mycars[2]="BMW"
也可以使用一个整数自变量来控制数组的容量：
var mycars=new Array(3)
mycars[0]="Saab"
mycars[1]="Volvo"
mycars[2]="BMW"
还有一种定义方式
var mycars=new Array("Saab","Volvo","BMW")
在访问数组是同java一样的，mycars[0]，下标也是从0开始。
数组方法和属性
使用concat() 方法来合并两个数组。
使用join() 方法将数组的所有元素组成一个字符串。
使用sort() 方法从字面上或数值上对数组进行排序。
JavaScript数组有length属性
JavaScript多维数组
MyArray = new Array(5,5);
MyArray[0, 0] = "Ryan Dias";
MyArray[0, 1] = 1;
MyArray[1, 0] = "Mike Donne";
MyArray[1, 1] = 2;
JavaScript try...catch throw使用
<html>
<body>
<script type="text/javascript">
var x=prompt("Enter a number between 0 and 10:","")
try
{
if(x>10)
throw "Err1"
else if(x<0)
throw "Err2"
}
catch(er)
{
if(er=="Err1")
alert("Error! The value is too high")
if(er == "Err2")
alert("Error! The value is too low")
}
</script>
</body>
</html>如果 x 的值大于 10 或者小于 0，错误就会被抛出 (throw)。这个错误被 catch 的参数捕获后，就会显示出自定义的出错信息。
JavaScript for...in语句使用
for … in语句用于在对象的各个属性，或数组的各个元素之间循环
<HTML>
<BODY>
<SCRIPT LANGUAGE = "JavaScript">
color = new Array("红色","蓝色","绿色");
for (var prop in color){
var record = "color " ;
record+=prop+"="+color[prop] + "<BR>";
document.write(record);
}
</SCRIPT>
</BODY>
</HTML>
JavaScript new语句使用
new操作符用于新建对象类型实例。
<HTML>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
function employee(name, code, designation) {
this.name = name
this.code = code
this.designation = designation
}
newemp = new employee("John Dias", "A001", "职员");
document.write("雇员姓名：" + newemp.name + "<BR>");
document.write("雇员代号：" + newemp.code + "<BR>");
document.write("头衔：" + newemp.designation);
</SCRIPT>
</BODY>
</HTML>
JavaScript with语句使用
with语句用于执行一组语句，所有这些语句都假定引用指定的对象。
<HTML>
<BODY>
<SCRIPT LANGUAGE ="JavaScript">
var a, b, c;
var r=10;
with (Math) {
a = PI * r * r;
b = r * cos(PI);
c = r * sin(PI/2);
}
document.write (a +"<BR>");
document.write (b +"<BR>");
document.write (c +"<BR>");
</SCRIPT>
</BODY>
</HTML>
-----------------
J2EE复习(三)JavaScript(下)--实战应用
本人在学习和做项目中常用的js函数汇总.
一、用js做的表格动态增删查改
工具JavaScript：util.js
1
2//全选反选
3function checkAll(boxName) {
4 var checkBox = document.getElementsByName(boxName);
5 for (i = 0; i < checkBox.length; i++) {
6 var checked = checkBox[i].checked;
7 if (checked) {
8 checkBox[i].checked = false;
9 } else {
10 checkBox[i].checked = true;
11 }
12 }
13}
14//多选验证
15function multiCheck(idArray)
16{
17 //var idArray = document.getElementsByName(boxName);
18 var count = 0;
19 for(i=0;i<idArray.length;i++)
20 {
21 if(idArray[i].checked)
22 {
23 count++;
24 }
25 }
26 return count;
27}
28
29
30//回车切换焦点
31function toNext(next)
32{
33 if(event.keyCode==13)
34 {
35 next.focus();
36 }
37}
38
39//打开右键菜单
40function openShortCutMenu(oRow)
41{
42 // 选中当前行
43 SelectRow(oRow);
44 aOpenPopMenu("ShortCutMenu");
45 event.cancelBubble = true;
46 event.returnValue = false;
47}
48//关闭右键菜单
49function CloseShortCutMenu(){
50 aClosePopMenu("ShortCutMenu");
51}
52//显示右键菜单
53function aOpenPopMenu(MenuId){
54 if (document.all(MenuId)){
55 document.all(MenuId).style.left = event.clientX + document.body.scrollLeft;
56 document.all(MenuId).style.top = event.clientY + document.body.scrollTop;
57 document.all(MenuId).style.display = "";
58 }
59}
60//隐藏右键菜单
61function aClosePopMenu(MenuId){
62 if (document.all(MenuId)){
63 document.all(MenuId).style.display = "none";
64 }
65}
学生信息管理主页studentInfo.html
1<html>
2 <head>
3 <title>学生信息</title>
4 <script type="text/javascript" src="util.js"></script>
5 <script>
6 //显示更新学生信息模态窗体
7 function showDialog()
8 {
9 var result = window.showModalDialog("dialog.html",null,"dialogWidth=400px;dialogHeight=400px;");
10 if(result&&result.length!=0&&result[0]!="")
11 {
12 addRow(result);
13 }
14 }
15 //添加一行学生信息
16 function addRow(result)
17 {
18 var doc = window.listFrame.document;//内嵌框架的document对象
19 var tb = doc.getElementById("stuTable");//学生信息表格
20 var tbody = doc.getElementById("mytbody");
21 //创建新的行
22 var tr = doc.createElement("<tr onClick='SelectRow(this)' οndblclick='update();' οncοntextmenu='openShortCutMenu(this)' title='右键修改'>");
23 //创建行的第一个单元格中的多选框
24 var check = document.createElement("<input name='idArray' type='checkbox'>");
25 var td = document.createElement("td");
26 td.appendChild(check);
27 tr.appendChild(td);
28 //将模式窗体传过来的值添加到新行中
29 for(i=0;i<result.length;i++)
30 {
31 var td = document.createElement("td");
32 td.appendChild(document.createTextNode(result[i]));
33 tr.appendChild(td);
34 }
35 tbody.appendChild(tr);
36 }
37 //删除学生信息
38 function delStudent()
39 {
40
41 var checks = window.listFrame.document.getElementsByName("idArray");
42 var count = multiCheck(checks);
43 if(count==0) {alert("未选中任何选项！"); return;}
44 if(window.confirm("确定要删除这"+count+"条信息吗？"))
45 {
46 while(count>0)
47 {
48 var tb = window.listFrame.document.getElementById("stuTable");
49 var checks = window.listFrame.document.getElementsByName("idArray");
50 for(i=0;i<checks.length;i++)
51 {
52 if(checks[i].checked)
53 {
54 tb.deleteRow(checks[i].parentElement.parentElement.rowIndex);
55 count--;
56 break;
57 }
58 }
59 }
60 }
61
62 }
63 //修改学生信息
64 function update()
65 {
66 var CurrRow = window.listFrame.CurrRow;
67 if(CurrRow&&CurrRow.cells.length>0)
68 {
69 var values = new Array();
70 for(i=0;i<CurrRow.cells.length-1;i++)
71 {
72 values[i] = CurrRow.cells[i+1].innerText;
73 }
74 values[values.length] = CurrRow;//将修改的当前行传给模式窗体进行修改
75 var result = window.showModalDialog("dialog.html",values,"dialogWidth=400px;dialogHeight=400px;");
76 }else
77 {
78 alert("请选中要修改的行");
79 }
80 }
81 </script>
82 </head>
83
84 <body bgcolor="#FFFFFF" text="#000000" onselectstart="return false;">
85 <table border="0" cellpadding="0" cellspacing="0" width="100%"
86 height="95%">
87 <tr>
88 <td width="100%" height="100%" valign="top">
89 <IFRAME width="100%" id="listFrame" height="100%" border=0
90 frameBorder=1 name="listFrame" src="list.html"></IFRAME>
91 </td>
92 </tr>
93 <tr>
94 <td width="100%" align="center" colspan="2">
95 <input class="btn_70" type="button" value="刷 新" id="btRefresh"
96 οnclick="listFrame.location.reload();">
97   
98 <input class="btn_70" type="button" value="删 除" id="btDel"
99 οnclick="delStudent();">
100   
101 <input class="btn_70" type="button" value="添 加" id="btAdd"
102 οnclick="showDialog();">
103   
104 <input type="button" Class="btn_70" value="修 改" name="btModify"
105 οnclick="update();">
106   
107 </td>
108 </tr>
109 </table>
110 </body>
111</html>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
