JavaScript 是什么?
一、 JavaScript 是一种新的描述语言,此一语言可以被钳入HTML 的文件之中。
透过JavaScript 可以做到回应使用者的需求事件(如: form 的输入) 而不用任何的网路来回传输资料,所以当一位使用者输入一项资料时,
它不用经过传给伺服端(server)处理,再传回来的过程,而直接可以被客户端(client) 的应用程式所处理。你也可以想像成有一个可执行程式在你的客端上执行一样!
目前已有一些写好的程式在Internet 上你可以连过去看看,以下有一些计算器的例子,在Nescape 上。
JavaScript 和Java 很类似,但到底并不一样! Java 是一种比JavaScript 更复杂许多的程式语言,而JavaScript 则是相当容易了解的语言。
JavaScript 创作者可以不那么注重程式技巧,所以许多Java 的特性在Java Script 中并不支援。
function getname(str) {
alert("哈罗! "+ str+"!");
}
<input type="text" name="name" onBlur="getname(this.value)" value="">
document.write(document.lastModified)
function hello() {
alert("哈罗!");
}
<a href="" onMouseOver="hello()">link</a>
function RandomNumber() {
timenow=new Date();
num=Math.abs(Math.sin(timenow.getHours()*timenow.getMinutes()*timenow.getSeconds()));
return num;
}
function WinOpen() {
msg=open("","DisplayWindow","toolbar=no,directories=no,menubar=no");
msg.document.write("<HEAD><TITLE>哈罗!</TITLE></HEAD>");
msg.document.write("<CENTER><H1>酷毙了!</H1><h2>这是<B>JavaScript</B>所开的视窗!</h2></CENTER>");
}
today = new Date()
document.write("现在时间是: ",today.getHours(),":",today.getMinutes())
document.write("<br>今天日期为: ", today.getMonth()+1,"/",today.getDate(),"/",today.getYear());
function RandomNumber() {
today = new Date();
num = Math.abs(Math.sin(today.getTime()));
return num;
}
document.write("This is a random number:", RandomNumber());
<INPUT type="button" name="Button1" value="Push me" onclick="WinOpen()">
二 、框架
1 、<FRAMESET ROWS="50%,50%">
<FRAME SRC="frtest1.html" name="fr1">
<FRAME SRC="frtest2.html" name="fr2">
</FRAMESET>
2、 <FRAMESET COLS="50%,50%">
<FRAMESET ROWS="50%,50%">
<FRAME SRC="cell.html">
<FRAME SRC="cell.html">
</FRAMESET>
<FRAMESET ROWS="33%,33%,33%">
<FRAME SRC="cell.html">
<FRAME SRC="cell.html">
<FRAME SRC="cell.html">
</FRAMESET>
</FRAMESET>
3、 <HTML>
<HEAD>
<title>Frames</title>
</HEAD>
<FRAMESET ROWS="50%,50%">
<FRAME SRC="frame1.html" name="fr1" noresize>
<FRAME SRC="frame2.html" name="fr2">
</FRAMESET>
</HTML>
以下是 frame1.html 的原始码:
<HTML>
<HEAD>
<script language="JavaScript">
<!-- Hiding
function hi() {
document.write("嗨!<br>");
}
function yo() {
document.write("呦!<br>");
}
function bla() {
document.write("啦 啦 啦<br>");
}
// -->
</script>
</HEAD>
<BODY>
这是第一个 frame!
</BODY>
</HTML>
以下是 frame2.html 的原始码:
<HTML>
<body>
这是第二个 frame!
<p>
<FORM NAME="buttonbar">
<INPUT TYPE="button" VALUE="嗨" onClick="parent.fr1.hi()">
<INPUT TYPE="button" VALUE="呦" onClick="parent.fr1.yo()">
<INPUT TYPE="button" VALUE="啦" onCLick="parent.fr1.bla()">
</FORM>
</BODY>
</HTML>
三 、状态栏
<html>
<head>
<script language="JavaScript">
<!-- Hide
function statbar(txt) {
window.status = txt;
}
// -->
</script>
</head>
<body>
<form>
<input type="button" name="look" value="写入文字" onclick="statbar('嗨! 这就是状态列(statusbar) !');">
<input type="button" name="erase" value="清除文字" onclick="statbar('');">
</form>
</body>
</html>
<html>
<head>
<script language="JavaScript">
<!-- Hide
function moveover(txt) {
window.status = txt;
setTimeout("erase()",1000);
}
function erase() {
window.status="";
}
// -->
</script>
</head>
<body>
<a href="dontclck.html" onMouseOver="moveover('瞬间即逝!');return true;">
link</a>
</body>
</html>
<html>
<head>
<script language="JavaScript">
<!-- Hide
var scrtxt="怎么样! 很酷吧! 您也可以试试."+"Here goes your message the visitors to your page will "+"look at for hours in pure fascination...";
var lentxt=scrtxt.length;
var width=100;
var pos=1-width;
function scroll() {
pos++;
var scroller="";
if (pos==lentxt) {
pos=1-width;
}
if (pos<0) {
for (var i=1; i<=Math.abs(pos); i++) {
scroller=scroller+" ";}
scroller=scroller+scrtxt.substring(0,width-i+1);
}
else {
scroller=scroller+scrtxt.substring(pos,width+pos);
}
window.status = scroller;
setTimeout("scroll()",150);
}
//-->
</script>
</head>
<body onLoad="scroll();return true;">
这里可显示您的网页 !
</body>
</html>
四 、数组
function initArray() {
this.length = initArray.arguments.length
for (var i = 0; i < this.length; i++)
this[i+1] = initArray.arguments[i]
}
function stat(txt) {
window.status = txt;
setTimeout("erase()",1500);
}
function erase() {
window.status="";
}
var Mixedup= new initArray(17,"yo",103);
document.write("Element No. 1: "+Mixedup[1]+"<br>");
document.write("Element No. 2: "+Mixedup[2]+"<br>");
document.write("Element No. 3: "+Mixedup[3]+"<br>");
一个清除视窗或frame中内容的好方法,您可以试试:
<P>
<PRE>
document.close();
document.open();
document.write("<P>");
</PRE>
<P>
<FORM NAME="buttonbar">
<INPUT TYPE="button" VALUE="Back" onClick="history.back()">
<INPUT TYPE="button" VALUE="百度" onClick="location='http://www.baidu.com'">
<INPUT TYPE="button" VALUE="Next" onCLick="history.forward()">
</FORM>
<H4>
<A href="script.htm" tppabs="http://www.baidu.com" onMouseOver="stat('回到主页'); return true">回主页</A> -
</H4>
五 、同时载入两个页面
frames2.html
<HTML>
<HEAD>
<title>Frames</title>
</HEAD>
<FRAMESET COLS="295,*">
<FRAMESET ROWS="100%,*">
<FRAME SRC="loadtwo.html" NAME="fr1">
</FRAMESET>
<FRAMESET ROWS="75%,25%">
<FRAME SRC="cell.html" NAME="fr2">
<FRAME SRC="cell.html" NAME="fr3">
</FRAMESET>
</FRAMESET>
</HTML>
第一个frame 会载入loadtwo.html 并产生一个按钮 :
loadtwo.html
<HTML>
<HEAD>
<script language="JavaScript">
<!-- Hiding
function loadtwo(page2, page3) {
parent.fr2.location.href=page2;
parent.fr3.location.href=page3;
}
// -->
</script>
</HEAD>
<BODY>
<FORM NAME="buttons">
<INPUT TYPE="button" VALUE="同时载入两份文件" onClick="loadtwo('frtest1.html',
'frtest2.html')">
</FORM>
</BODY>
</HTML>
<a href="javascript:myfunction()">My Link</a>
<a href="getfr2.html" target="fr2">
<BODY onLoad="parent.fr3.location.href='getfr3.html'; return true;">
<a href="goanywhere.html" target="Resource Window">Go!</a>
六 、表格动作
<html>
<head>
<script language="JavaScript">
<!-- Hide
function test1(form) {
if (form.text1.value == "")
alert("您没写上任何东西, 请再输入一次!")
else {
alert("嗨"+form.text1.value+"! 您已输入完成!");
}
}
function test2(form) {
if (form.text2.value == "" ||
form.text2.value.indexOf('@', 0) == -1)
alert("这不是正确的e-mail address! 请再输入一次!");
else alert("您 已 输 入 完 成 !");
}
// -->
</script>
</head>
<body>
<form name="first">
Enter your name:<br>
<input type="text" name="text1">
<input type="button" name="button1" value="输入测试" onClick="test1(this.form)">
<P>
Enter your e-mail address:<br>
<input type="text" name="text2">
<input type="button" name="button2" value="输入测试" onClick="test2(this.form)">
</body>
<FORM METHOD=POST ACTION="mailto:your_email@goes.here">
<H3>您 喜 欢 我 的 网 页 吗 ?</H3>
<INPUT NAME="choice" TYPE="RADIO" VALUE="1">一点也不喜欢。 <BR>
<INPUT NAME="choice" TYPE="RADIO" VALUE="2" CHECKED>简直浪费我的时间。 <BR>
<INPUT NAME="choice" TYPE="RADIO" VALUE="3">这简直是Net 上最烂的站台。 <BR>
<INPUT NAME="submit" TYPE="SUBMIT" VALUE="Send">
</FORM>
function setfocus() {
document.first.text1.focus();
return;
}
<body onLoad="setfocus()">
七、JavaScript的对象
The、following、objects、are、available、in、JavaScript:、anchor、applet、button、checkbox、Date、document、orm、history、link、location、Math、password、radioButton、reset、selection、string、submit、text 、textArea、window
JavaScript的对象属性
以下的属性可在、JavaScript中用到:
action、alinkColor、anchors、bgColor、checked、current、defaultChecked、defaultSelected、defaultStatus、defaultValue、E、elements、fgColor、forms、frames、hash、host、hostname、href、index、lastModified、length、linkColor、links、LN2、 LN10、loadedDate、location、method、name、options、parent、pathname、PI、port、protocol、referrer、search、selected、selectedIndex、self、SQRT1_2、SQRT2、status、target、text、title、top、value、vlinkColor、 window
JavaScript的方法
以下的一些"方法"可用在JavaScript:
abs、acos、alert、anchor、asin、assign、atan、back、big、blink、blur、bold、ceil、charAt、clear、clearTimeout、click、close、confirm、cos、eval、exp、fixed、floor、focus、 fontcolor、fontsize、forward、getDate、getDay、getHours、getMinutes、getMonth、getSeconds、getTime、getTimeZoneoffset、getYear、go、indexOf、italics、lastIndexOf、link、log、max、min、open、parse、pow、prompt、random、 round、select、setDate、setHours、setMinutes、setMonth、setSeconds、setTimeout、setTime、setYear、sin、small、sqrt、strike、sub、submit、substring、sup、tan、toGMTString、toLocaleString、toLowerCase、toString、toUpperCase、UTC、 write、writeln
事件处理
以下的事件可由、JavaScript、发生:
onBlur、onChange、onClick、onFocus、onLoad、onMouseOver、onSelect、onSubmit、onUnload、
JavaScript的语法
The、following、statements、are、available、in、JavaScript:、break、comment、continue、for、for...in、function、、if...else、return、var、while、with
Javascript的保留字
以下的保留字不可以用作变量,函数名,对象名等,其中有的保留字是为以后JAVASCRIPT扩展用的
abstract、boolean、break、byte、case、catch、char、class、const、continue、default、do、double、else、extends、false、final、finally、float、for、function、goto、if、implements、import、 in、instanceof、int、interface、long、native、new、null、package、private、protected、public、return、short、static、super、switch、synchronized、this、throw、throws、transient、true、try、var、 void、while、、with