一、 JavaScript
JavaScript 被设计用来向 HTML 页面添加交互行为。
JavaScript 是一种脚本语言(脚本语言是一种轻量级的编程语言)。
JavaScript 由数行可执行计算机代码组成。
JavaScript 通常被直接嵌入 HTML 页面。
JavaScript 是一种解释性语言(就是说,代码执行不进行预编译)。
二、 JavaScript用途
JavaScript是客户端的一种脚本语言,一般用来进行一些基本的数据验证,作为客户端验证,他与服务器端验证比起来,好处就是没有刷新,速度快。JS验证,空验证,合法性验证。
JavaScript 为 HTML 设计师提供了一种编程工具
HTML 创作者往往都不是程序员,但是 JavaScript 却是一种只拥有极其简单的语法的脚本语言!几乎每个人都有能力将短小的代码片断放入他们的 HTML 页面当中。
JavaScript 可以将动态的文本放入 HTML 页面
类似于这样的一段 JavaScript 声明可以将一段可变的文本放入 HTML 页面:document.write("<h1>" + name + "</h1>")
JavaScript 可以对事件作出响应
可以将 JavaScript 设置为当某事件发生时才会被执行,例如页面载入完成或者当用户点击某个 HTML 元素时。
JavaScript 可以读写 HTML 元素
JavaScript 可以读取及改变 HTML 元素的内容。
JavaScript 可被用来验证数据
在数据被提交到服务器之前,JavaScript 可被用来验证这些数据。
JavaScript 可被用来检测访问者的浏览器
JavaScript 可被用来检测访问者的浏览器,并根据所检测到的浏览器,为这个浏览器载入相应的页面。
JavaScript 可被用来创建 cookies
JavaScript 可被用来存储和取回位于访问者的计算机中的信息。
三、 JavaScript调用
页面中嵌入的js脚本
<script type="text/javascript">
...
</script>
调用外部js文件
<script src="/js/xxx.js"></script>
四、 JavaScript注释
JavaScript的注释跟C和C++一样 用//或/*……*/
五、 JavaScript变量
var 语句来声明 JavaScript 变量,而且声明的变量没有任何类型,当给变量赋值后才确定类型。
例:
var name; var x; name = 1;//是个整型 x = “李霄”;//是个字符型
var bNum; bNum = true;//是个布尔型
变量运算:只有两个都是数字变量才进行数字运算,如果其中有一个为字符,将数字自动转化为字符。
六、 JavaScript提示框函数
l 警告框
alert("文本")
l 确认框
confirm("文本")
var ret = confirm(“请您选择!”);
if(ret = true)
{……}
else
{……}
l 提示框
prompt("文本","默认值")
var name = prompt(“请输入您的名字!”,”your name”)
点击确认之后name = “用户输入的文字”
七、 JavaScript函数
函数跟C或C++中一样可以传递参数也可以有返回值
例:
<head>
function product(a,b)
{
return a*b
}
</script>
</head>//在head中现实函数实体
<body>
<script type="text/javascript">
document.write(product(6,5))//在body中调用函数
</script>
</body>
八、 JavaScript支持For……in语句
for (x in mycars)
{
document.write(mycars[x] + "<br />")
}
类似于Java中for(int x: mycars )
九、 JavaScript事件句柄
<input type="text" size="30" id="email" onchange="checkEmail()">
onmouseover="alert('An onMouseOver event');return false">
一般都是事件触发一个函数。
十、 JavaScript中try……catch用法和用onerror事件来捕捉系统异常或错误
捕捉系统异常。
try
{
adddlert("Welcome guest!")
}
catch(err)
{
txt="此页面存在一个错误。\n\n"
txt+="错误描述: " + err.description + "\n\n"
txt+="点击OK继续。\n\n"
alert(txt)
}
catch ()括号中可以使任意变量,无需定义,只是把捕捉到的错误信息赋值给该变量。
自定义异常
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")
}
自定义Err1和Err2,是抛出throw掉,在catch中可以捕捉异常。
用onerror事件捕捉系统错误或异常。
<script type="text/javascript">
onerror=handleErr
var txt=""
function handleErr(msg,url,l)
{
txt="There was an error on this page.\n\n"
txt+="Error: " + msg + "\n"
txt+="URL: " + url + "\n"
txt+="Line: " + l + "\n\n"
txt+="Click OK to continue.\n\n"
alert(txt)
return true
}
</script>
Onerror事件产生3个系统异常参数,信息、那个页面产生的异常、第几行。
十一、 JavaScript中OOP设计
JavaScript 15个系统类
Object
Function
Array
String
Boolean
Number
Date
RegExp
Error
EvalError
RangeError
ReferenceError
SyntaxError
TypeError
URIError
用户自定义类
function createCar(sColor,iDoors,iMpg) {
var oTempCar = new Object;
oTempCar.color = sColor;
oTempCar.doors = iDoors;
oTempCar.mpg = iMpg;
oTempCar.showColor = function() {
alert(this.color);
};
return oTempCar;
}
var oCar1 = createCar("red",4,23);
var oCar2 = createCar("blue",3,25);
oCar1.showColor(); //输出 "red"
oCar2.showColor();
十二、 JavaScript中$符号的用法
$就是相当于abcde这样的字符一样,但是很多程序员喜欢将$作为document.getElementById(“”);来获取页面元素句柄来用。
例:
在head中定义$为返回页面元素的句柄函数。
function $(val)
{ return document.getElementById(val);}
这样,在调用的时候$就当做document.getElementById来用。
十三、 JavaScript中String类
对象属性
对象方法
十四、 JavaScript 中RegExp对象
RegExp是用来检索字符串中字符。
其中有3个函数test()、exec() 以及 compile()。
test() 是检索到有就返回true,没有就false
exec() 是检索到一个就返回一个,一次只返回一个字符,如果要返回全部,就循环执行。
compile()是检索中没有返回true,有就false
例:
test()
var patt1=new RegExp("e");
document.write(patt1.test("The best things in life are free"));
输出:true
第二篇:js常用总结
JavaScript的内部对象:
(1) Object
(2) String
(3) Math
(4) Date
(5) toString
JavaScript 代码放在另一个单独的文件里,然后在网页(HTML文件)中使用“SRC= 此单独文件的路径/地址(URL)”来使用此单独文件里的 JavaScript 程序代码。一般将这个单独的文件保存为扩展名为 .JS 的文件:
<script src="mycode.js"></script>
JS - 常用語句
1.document.write(""); 输出语句
2.JS中的注释为//
3.传统的HTML文档顺序是:
document->html->(head,body)
4.一个浏览器窗口中的DOM顺序是:
window->(navigator,screen,history,location,document)
5.得到表单中元素的名称和值:
document.getElementById("表单中元素的ID号").name(或value)
6.一个小写转大写的JS:
document.getElementById("output").value=document.getElementById("input").value.toUpperCase();
7.JS中的值类型:
String,Number,Boolean,Null,Object,Function
8.JS中的字符型转换成数值型:
parseInt(),parseFloat()
9.JS中的数字转换成字符型:
("" 变量)
10.JS中的取字符串长度是:
(length)
11.JS中的字符与字符相连接使用号.
12.JS中的比较操作符有:
== 等于,!=不等于,>,>=,<.<=
13.JS中声明变量使用:
var 来进行声明
14.JS中的判断语句结构:
if(condition){}else{}
15.JS中的循环结构:
for([initial expression];[condition];[upadte expression]) {inside loop}
16.循环中止的命令是:
break
17.JS中的函数定义:
function functionName([parameter],...){statement[s]}
18.当文件中出现多个form表单时.可以用document.forms[0],document.forms[1]来代替.
19.窗口:
打开窗口window.open(), 关闭一个窗口:window.close(), 窗口本身:self
20.状态栏的设置:
window.status="字符";
21.弹出提示信息:
window.alert("字符");
22.弹出确认框:
window.confirm();
23.弹出输入提示框:
window.prompt();
24.指定当前显示链接的位置:
window.location.href="URL"
25.取出窗体中的所有表单的数量:
document.forms.length
26.关闭文档的输出流:
document.close();
27.字符串追加连接符: =
28.创建一个文档元素:
document.createElement(),document.createTextNode()
29.得到元素的方法:
document.getElementById()
30.设置表单中所有文本型的成员的值为空:
var form = window.document.forms[0]
for (var i = 0; i<form.elements.length;i ){
if (form.elements.type == "text"){
form.elements.value = "";
}
}
31.复选按钮在JS中判断是否选中:
document.forms[0].checkThis.checked
(checked属性代表为是否选中返回TRUE或FALSE)
32.单选按钮组(单选按钮的名称必须相同):
取单选按钮组的长度document.forms[0].groupName.length
33.单选按钮组判断是否被选中也是用checked.
34.下拉列表框的值:
document.forms[0].selectName.options[n].value
(n有时用下拉列表框名称加上.selectedIndex来确定被选中的值)
35.字符串的定义:
var myString = new String("This is lightsword");
36.字符串转成大写:
string.toUpperCase(); 字符串转成小写:string.toLowerCase();
37.返回字符串2在字符串1中出现的位置:
String1.indexOf("String2")!=-1则说明没找到.
38.取字符串中指定位置的一个字符:
StringA.charAt(9);
39.取出字符串中指定起点和终点的子字符串:
stringA.substring(2,6);
40.数学函数:
Math.PI(返回圆周率),Math.SQRT2(返回开方), Math.max(value1,value2)返回两个数中的 最在值,Math.pow(value1,10)返回value1的十次方, Math.round(value1)四舍五入函数, Math.floor(Math.random()*(n 1))返回随机数, Math.abs()取绝对值
41.定义日期型变量:
var today = new Date();
42.日期函数列表:
dateObj.getTime()得到时间,dateObj.getYear()得到年份,dateObj.getFullYear()得到四位的年份,
dateObj.getMonth()得到月份,dateObj.getDate()得到日,dateObj.getDay()得到日期几, dateObj.getHours()得到小时,dateObj.getMinutes()得到分,dateObj.getSeconds()得到秒, dateObj.setTime(value)设置时间,dateObj.setYear(val)设置年,
dateObj.setMonth(val)设置月,dateObj.setDate(val)设置日,
dateObj.setDay(val)设置星期几,dateObj.setHours设置小时,dateObj.setMinutes(val)设置分, dateObj.setSeconds(val)设置秒 [注意:此日期时间从0开始计]
43.FRAME的表示方式:
[window.]frames[n].ObjFuncVarName,frames["frameName"].ObjFuncVarName,frameName.ObjFuncVarName
44.parent代表父亲对象,top代表最顶端对象
45.打开子窗口的父窗口为:opener
46.表示当前所属的位置:this
47.当在超链接中调用JS函数时用:(javascript :)来开头后面加函数名
48.在老的浏览器中不执行此JS:<!-- //-->
49.引用一个文件式的JS:<script type="text/javascript" src="aaa.js"></script>
50.指定在不支持脚本的浏览器显示的HTML:<noscript></noscript>
51.当超链和onCLICK事件都有时,则老版本的浏览器转向a.html,否则转向b.html.
例:<a href="a.html" onclick="location.href='b.html';return false">dfsadf</a>
52.JS的内建对象有:
Array,Boolean,Date,Error,EvalError,
Function,Math,Number,Object,RangeError,ReferenceError,
RegExp,String,SyntaxError,TypeError,URIError
53.JS中的换行:\n
54.窗口全屏大小:
<script>function fullScreen(){ this.moveTo(0,0);this.outerWidth=screen.availWidth;
this.outerHeight=screen.availHeight;}window.maximize=fullScreen;</script>
55.JS中的all代表其下层的全部元素
56.JS中的焦点顺序:document.getElementByid("表单元素").tabIndex = 1
57.innerHTML的值是表单元素的值:
如<p id="para">"how are <em>you</em>"</p>,则innerHTML的值就是:how are <em>you</em>
58.innerTEXT的值和上面的一样,只不过不会把<em>这种标记显示出来.
59.contentEditable可设置元素是否可被修改,isContentEditable返回是否可修改的状态.
60.isDisabled判断是否为禁止状态.disabled设置禁止状态
61.length取得长度,返回整型数值
62.addBehavior()是一种JS调用的外部函数文件其扩展名为.htc
63.window.focus()使当前的窗口在所有窗口之前.
64.blur()指失去焦点.与FOCUS()相反.
65.select()指元素为选中状态.
66.防止用户对文本框中输入文本:
onfocus="this.blur()"
67.取出该元素在页面中出现的数量:
document.all.tags("div(或其它HTML标记符)").length
68.JS中分为两种窗体输出:模态和非模态.
window.showModaldialog(),window.showModeless()
69.状态栏文字的设置:
window.status='文字',默认的状态栏文字设置:window.defaultStatus = '文字.';
70.添加到收藏夹:
external.AddFavorite("";,"jaskdlf");
71.JS中遇到脚本错误时不做任何操作:
window.onerror = doNothing; 指定错误句柄的语法为:window.onerror = handleError;
72.JS中指定当前打开窗口的父窗口:
window.opener,支持opener.opener...的多重继续.
73.JS中的self指的是当前的窗口
74.JS中状态栏显示内容:window.status="内容"
75.JS中的top指的是框架集中最顶层的框架
76.JS中关闭当前的窗口:window.close();
77.JS中提出是否确认的框:if(confirm("Are you sure?")){alert("ok");}else{alert("Not Ok");}
78.JS中的窗口重定向:window.navigate("";);
79.JS中的打印:window.print()
80.JS中的提示输入框:window.prompt("message","defaultReply");
81.JS中的窗口滚动条:window.scroll(x,y)
82.JS中的窗口滚动到位置:window.scrollby
83.JS中设置时间间隔:setInterval("expr",msecDelay)或setInterval(funcRef,msecDelay)或setTimeout
84.JS中的模态显示在IE4 行,在NN中不行:showModalDialog("URL"[,arguments][,features]);
85.JS中的退出之前使用的句柄:
function verifyClose(){event.returnValue="we really like you and hope you will stay longer.";}} window.=verifyClose;
86.当窗体第一次调用时使用的文件句柄:onload()
87.当窗体关闭时调用的文件句柄:onunload()
88.window.location的属性:
protocol(http:),hostname(),port(80),host(:80), pathname("/a/a.html"),hash("#giantGizmo",指跳转到相应的锚记),href(全部的信息)
89.window.location.reload()刷新当前页面.
90.window.history.back()返回上一页,
window.history.forward()返回下一页,
window.history.go(返回第几页,也可以使用访问过的URL)
91.document.write()不换行的输出,document.writeln()换行输出
92.document.body.noWrap=true;防止链接文字折行.
93.变量名.charAt(第几位),取该变量的第几位的字符.
94."abc".charCodeAt(第几个),返回第几个字符的ASCii码值.
95.字符串连接:string.concat(string2),或用 =进行连接
96.变量.indexOf("字符",起始位置),返回第一个出现的位置(从0开始计算)
97.string.lastIndexOf(searchString[,startIndex])最后一次出现的位置.
98.string.match(regExpression),判断字符是否匹配.
99.string.replace(regExpression,replaceString)替换现有字符串.
100.string.split(分隔符)返回一个数组存储值.
101.string.substr(start[,length])取从第几位到指定长度的字符串.
102.string.toLowerCase()使字符串全部变为小写.
103.string.toUpperCase()使全部字符变为大写.
104.parseInt(string[,radix(代表进制)])强制转换成整型.
105.parseFloat(string[,radix])强制转换成浮点型.
106.isNaN(变量):测试是否为数值型.
107.定义常量的关键字:const,定义变量的关键字:var
添加评论Ajax技术体系简要说明
JavaScript、CSS(层叠样式表)、DOM(文档对象模型)、XMLHttpRequest是构成Ajax技术体系的四个技术基石,
其中前三者合在一起以前称为DHTML。
JavaScript是一种弱类型、解释型的、通用的脚本语言,在Ajax技术体系中,它将各个部分粘合在一起。JavaScript
定义应用业务逻辑、操作DOM改变和刷新用户界面、重绘或重新组织用户数据、处理用户交互。
CSS为Web页面元素提供了一种可重用的可视化样式的定义方法来定义应用的外观。样式表提供了集中定义各种视觉样
式的方法并方便地设置到页面元素上。样式表可以定义样式元素、定义元素相互之间的布局以及简单的用户交互功能以实现视
觉效果。HTML定义了文档的结构,定义了元素之间的包含关系,而不是外观,但它也定义了文档中可以应用样式的位置。通过
定义CSS样式来定义用户界面的样式。
DOM组织网页视图,以一组可以使用JavaScript操作的可编程对象展现出Web页面的结构。通过使用脚本修改DOM在运行
时改变用户界面,或重绘页面的某个部分。Web页面的DOM是树状结构,JavaScript引擎通过全局变量document公开当前web页面
的根节点,这个变量是所有DOM操作的起点。DOM文档与HTML表单的关系是双向的,修改DOM将会改变HTML标记。
使用XMLHttpRequest以异步方式与服务器通信。它以后台方式获取数据,使得发生异步调用的业务流畅。数据格式通常
是XML。IFrame是另外一种异步请求方式,本身作为文档布局的一部分,表现为DOM树的一个元素。样式可设置为不可见,使得以
后台方式获取数据成为可能。
CSS和DOM互为补充,为用户界面提供了清晰的编程视图,同时保持了结构和视觉样式的分离。Ajax是以这四种技术为基
础的新的交互模型。