基础 JavaScript 实例
生成文本
<code>document.write("Hello World!")</code>
生成普通文本和标签
document.write("<h1>Hello World!</h1>")
head 部分
<head>
<script type="text/javascript">
function message()
{
alert("该提示框是通过 onload 事件调用的。")
}
</script>
</head>
<body onload="message()">
</body></code>
<body>
<script type="text/javascript">
document.write("该消息在页面加载时输出。")
</script>
</body>
<body>
<script src="/js/example_externaljs.js">
</script>
<p>实际的脚本位于名为 "xxx.js" 的外部脚本中。</p>
</body>
JavaScript 语句、注释和代码块
<body>
<script type="text/javascript">
document.write("<h1>这是标题</h1>");
document.write("<p>这是段落。</p>");
document.write("<p>这是另一个段落。</p>");
</script>
</body>
<body>
<script type="text/javascript">
{
document.write("<h1>这是标题</h1>");
document.write("<p>这是段落。</p>");
document.write("<p>这是另一个段落。</p>");
}
</script>
</body>
<body>
<script type="text/javascript">
// 这行代码输出标题：
document.write("<h1>这是标题</h1>");
// 这行代码输出段落：
document.write("<p>这是段落。</p>");
document.write("<p>这是另一个段落。</p>");
</script>
</body>
<body>
<script type="text/javascript">
/*
下面的代码将输出
一个标题和两个段落
*/
document.write("<h1>这是标题</h1>");
document.write("<p>这是段落。</p>");
document.write("<p>这是另一个段落。</p>");
</script>
</body>
使用单行注释来防止执行
//document.write("<p>这是另一个段落。</p>");
使用多行注释来防止执行
/* document.write("<h1>这是标题</h1>"); document.write("<p>这是段落。</p>"); document.write("<p>这是另一个段落。</p>"); */
JavaScript 变量
<body>
<script type="text/javascript">
var firstname;
firstname="George";
document.write(firstname);
document.write("<br />");
firstname="John";
document.write(firstname);
</script>
<p>上面的脚本声明了一个变量，为其赋值，显示该值，改变该值，然后再显示该值。</p>
</body>
JavaScript 条件语句 If ... Else
<body>
<script type="text/javascript">
var d = new Date()
var time = d.getHours()
if (time < 10)
{
document.write("<b>早安</b>")
}
</script>
<p>本例演示 If 语句。</p>
<p>如果浏览器时间小于 10，那么会向您问“早安”。</p>
</body>
<body>
<script type="text/javascript">
var d = new Date()
var time = d.getHours()
if (time < 10)
{
document.write("<b>早安</b>")
}
else
{
document.write("<b>祝您愉快</b>")
}
</script>
<p>本例演示 If...Else 语句。</p>
<p>如果浏览器时间小于 10，那么会向您问“早安”，否则会向您问候“祝您愉快”。</p>
</body>
<body>
<script type="text/javascript">
var d = new Date()
var time = d.getHours()
if (time<10)
{
document.write("<b>Good morning</b>")
}
else if (time>=10 && time<16)
{
document.write("<b>Good day</b>")
}
else
{
document.write("<b>Hello World!</b>")
}
</script>
<p>本例演示 if..else if...else 语句。</p>
</body>
<body>
<script type="text/javascript">
var r=Math.random()
if (r>0.5)
{
document.write("<a href='http://www.w3school.com.cn'>学习 Web 开发！</a>")
}
else
{
document.write("<a href='http://www.microsoft.com'>访问微软！</a>")
}
</script>
</body>
JavaScript 消息框
警告框
alert("文本")
<head>
<script type="text/javascript">
function disp_alert()
{
alert("我是警告框！！")
}
</script>
</head>
<body>
<input type="button" onclick="disp_alert()" value="显示警告框" />
</body>
带有折行的警告框
alert("文本1" + '\n' + "文本2")
<head>
<script type="text/javascript">
function disp_alert()
{
alert("再次向您问好！在这里，我们向您演示" + '\n' + "如何向警告框添加折行。")
}
</script>
</head>
<body>
<input type="button" onclick="disp_alert()" value="显示警告框" />
</body>
确认框
confirm("文本")
<head>
<script type="text/javascript">
function show_confirm()
{
var r=confirm("Press a button!");
if (r==true)
{
alert("You pressed OK!");
}
else
{
alert("You pressed Cancel!");
}
}
</script>
</head>
<body>
<input type="button" onclick="show_confirm()" value="Show a confirm box" />
</body>
提示框
prompt("文本","默认值")
<head>
<script type="text/javascript">
function disp_prompt()
{
var name=prompt("请输入您的名字","Bill Gates")
if (name!=null && name!="")
{
document.write("你好！" + name + " 今天过得怎么样？")
}
}
</script>
</head>
<body>
<input type="button" onclick="disp_prompt()" value="显示提示框" />
</body>
JavaScript 函数
<head>
<script type="text/javascript">
function myfunction()
{
alert("您好！")
}
</script>
</head>
<body>
<form>
<input type="button" onclick="myfunction()" value="调用函数">
</form>
<p>通过点击这个按钮，可以调用一个函数。该函数会提示一条消息。</p>
</body>
<head>
<script type="text/javascript">
function myfunction(txt)
{
alert(txt)
}
</script>
</head>
<body>
<form>
<input type="button" onclick="myfunction('您好！')" value="调用函数">
</form>
<p>通过点击这个按钮，可以调用一个带参数的函数。该函数会输出这个参数。</p>
</body>
<head>
<script type="text/javascript">
function myFunction()
{
return ("您好，祝您愉快！")
}
</script>
</head>
<body>
<script type="text/javascript">
document.write(myFunction())
</script>
<p>body 部分中的脚本调用一个函数。</p>
<p>该函数返回一段文本。</p>
</body>
<head>
<script type="text/javascript">
function product(a,b)
{
return a*b
}
</script>
</head>
<body>
<script type="text/javascript">
document.write(product(6,5))
</script>
<p>body 部分中的脚本调用一个带有两个参数（6 和 5）的函数。</p>
<p>该函数会返回这两个参数的乘积。</p>
</body>
JavaScript 循环
<body>
<script type="text/javascript">
for (i = 0; i <= 5; i++)
{
document.write("数字是 " + i)
document.write("<br />")
}
</script>
<h1>解释：</h1>
<p>for 循环的步进值从 i=0 开始。</p>
<p>只要 <b>i</b> 小于等于 5，循环就会继续运行。</p>
<p>循环每循环一次，<b>i</b> 就会累加 1。</p>
</body>
<body>
<script type="text/javascript">
for (i = 1; i <= 6; i++)
{
document.write("<h" + i + ">这是标题 " + i)
document.write("</h" + i + ">")
}
</script>
</body>
<body>
<script type="text/javascript">
i = 0
while (i <= 5)
{
document.write("数字是 " + i)
document.write("<br />")
i++
}
</script>
<h1>解释：</h1>
<p><b>i</b> 等于 0。</p>
<p>当 <b>i</b> 小于或等于 5 时，循环将继续运行。</p>
<p>循环每运行一次，<b>i</b> 会累加 1。</p>
</body>
<body>
<script type="text/javascript">
i = 0
do
{
document.write("数字是 " + i)
document.write("<br />")
i++
}
while (i <= 5)
</script>
<h1>解释：</h1>
<p><b>i</b> 等于 0。</p>
<p>循环首先会运行。</p>
<p>每循环一次，<b>i</b> 就会累加 1。</p>
<p>当 <b>i</b> 小于或等于 5 时，循环会继续运行。</p>
</body>
<body>
<script type="text/javascript">
var i=0
for (i=0;i<=10;i++)
{
if (i==3){break}
document.write("数字是 " + i)
document.write("<br />")
}
</script>
<p>解释：循环会在 i=3 时中断。</p>
</body>
<body>
<script type="text/javascript">
var i=0
for (i=0;i<=10;i++)
{
if (i==3){continue}
document.write("数字是 " + i)
document.write("<br />")
}
</script>
<p>解释：当 i=3 时，会中断循环，并从下一个值开始继续循环。</p>
</body>
<body>
<script type="text/javascript">
var x
var mycars = new Array()
mycars[0] = "宝马"
mycars[1] = "奔驰"
mycars[2] = "宾利"
for (x in mycars)
{
document.write(mycars[x] + "<br />")
}
</script>
</body>
JavaScript 错误处理
trz 语句测试代码块的错误。 catch 语句处理错误。 throw 语句创建自定义错误。
try...catch 语句
<head>
<script type="text/javascript">
var txt=""
function message()
{
try
{
adddlert("Welcome guest!")
}
catch(err)
{
txt="本页中存在错误。\n\n"
txt+="错误描述：" + err.description + "\n\n"
txt+="点击“确定”继续。\n\n"
alert(txt)
}
}
</script>
</head>
<body>
<input type="button" value="查看消息" onclick="message()" />
</body>
<head>
<script type="text/javascript">
var txt=""
function message()
{
try
{
adddlert("Welcome guest!")
}
catch(err)
{
txt="本页中存在错误。\n\n"
txt+="点击“确定”继续查看本页，\n"
txt+="点击“取消”返回首页。\n\n"
if(!confirm(txt))
{
document.location.href="/index.html"
}
}
}
</script>
</head>
<body>
<input type="button" value="查看消息" onclick="message()" />
</body>
<body>
<script type="text/javascript">
var x=prompt("请输入 0 至 10 之间的数：","")
try
{
if(x>10)
throw "Err1"
else if(x<0)
throw "Err2"
else if(isNaN(x))
throw "Err3"
}
catch(er)
{
if(er=="Err1")
alert("错误！该值太大！")
if(er == "Err2")
alert("错误！该值太小！")
if(er == "Err3")
alert("错误！该值不是数字！")
}
</script>
</body>
<head>
<script type="text/javascript">
onerror=handleErr
var txt=""
function handleErr(msg,url,l)
{
txt="本页中存在错误。\n\n"
txt+="错误：" + msg + "\n"
txt+="URL: " + url + "\n"
txt+="行：" + l + "\n\n"
txt+="点击“确定”继续。\n\n"
alert(txt)
return true
}
function message()
{
adddlert("Welcome guest!")
}
</script>
</head>
<body>
<input type="button" value="查看消息" onclick="message()" />
</body>
高级 JavaScript 实例
<body>
<script type="text/javascript">
var browser=navigator.appName
var b_version=navigator.appVersion
var version=parseFloat(b_version)
document.write("浏览器名称："+ browser)
document.write("<br />")
document.write("浏览器版本："+ version)
</script>
</body>
<body>
<script type="text/javascript">
document.write("<p>浏览器：")
document.write(navigator.appName + "</p>")
document.write("<p>浏览器版本：")
document.write(navigator.appVersion + "</p>")
document.write("<p>代码：")
document.write(navigator.appCodeName + "</p>")
document.write("<p>平台：")
document.write(navigator.platform + "</p>")
document.write("<p>Cookies 启用：")
document.write(navigator.cookieEnabled + "</p>")
document.write("<p>浏览器的用户代理报头：")
document.write(navigator.userAgent + "</p>")
</script>
</body>
<body>
<script type="text/javascript">
var x = navigator;
document.write("CodeName=" + x.appCodeName);
document.write("<br />");
document.write("MinorVersion=" + x.appMinorVersion);
document.write("<br />");
document.write("Name=" + x.appName);
document.write("<br />");
document.write("Version=" + x.appVersion);
document.write("<br />");
document.write("CookieEnabled=" + x.cookieEnabled);
document.write("<br />");
document.write("CPUClass=" + x.cpuClass);
document.write("<br />");
document.write("OnLine=" + x.onLine);
document.write("<br />");
document.write("Platform=" + x.platform);
document.write("<br />");
document.write("UA=" + x.userAgent);
document.write("<br />");
document.write("BrowserLanguage=" + x.browserLanguage);
document.write("<br />");
document.write("SystemLanguage=" + x.systemLanguage);
document.write("<br />");
document.write("UserLanguage=" + x.userLanguage);
</script>
</body>
<head>
<script type="text/javascript">
function detectBrowser()
{
var browser=navigator.appName
var b_version=navigator.appVersion
var version=parseFloat(b_version)
if ((browser=="Netscape"||browser=="Microsoft Internet Explorer") && (version>=4))
{alert("您的浏览器够先进了！")}
else
{alert("是时候升级您的浏览器了！")}
}
</script>
</head>
<body onload="detectBrowser()">
</body>
<head>
<script type="text/javascript">
function getCookie(c_name)
{
if (document.cookie.length>0)
{
c_start=document.cookie.indexOf(c_name + "=")
if (c_start!=-1)
{
c_start=c_start + c_name.length+1
c_end=document.cookie.indexOf(";",c_start)
if (c_end==-1) c_end=document.cookie.length
return unescape(document.cookie.substring(c_start,c_end))
}
}
return ""
}
function setCookie(c_name,value,expiredays)
{
var exdate=new Date()
exdate.setDate(exdate.getDate()+expiredays)
document.cookie=c_name+ "=" +escape(value)+((expiredays==null) ? "" : "; expires="+exdate.toGMTString())
}
function checkCookie()
{
username=getCookie('username')
if (username!=null && username!="")
{
alert('Welcome again '+username+'!')
}
else
{
username=prompt('Please enter your name:',"")
if (username!=null && username!="")
{
setCookie('username',username,365)
}
}
}
</script>
</head>
<body onLoad="checkCookie()">
</body>
<head>
<script type="text/javascript">
function mouseOver()
{
document.b1.src ="/i/eg_mouse.jpg"
}
function mouseOut()
{
document.b1.src ="/i/eg_mouse2.jpg"
}
</script>
</head>
<body>
<a href="/index.html" target="_blank">
<img border="0" alt="Visit W3School!" src="/i/eg_mouse2.jpg" name="b1" onmouseover="mouseOver()" onmouseout="mouseOut()" />
</a>
</body>
<head>
<script type="text/javascript">
function writeText(txt)
{
document.getElementById("desc").innerHTML=txt
}
</script>
</head>
<body>
<img src="/i/eg_planets.jpg" border="0" usemap="#planetmap" alt="Planets" />
<map name="planetmap" id="planetmap">
<area shape="circle" coords="180,139,14" onMouseOver="writeText('直到 20 世纪 60 年代，金星一直被认为是地球的孪生姐妹，因为金星是离我们最近的行星，同时还由于两者拥有很多共同的特征。')"
href ="/example/html/venus.html" target ="_blank" alt="Venus" />
<area shape="circle" coords="129,161,10" onMouseOver="writeText('从地球上是很难研究水星的，这是由于它和太阳的距离总是很近。')"
href ="/example/html/mercur.html" target ="_blank" alt="Mercury" />
<area shape="rect" coords="0,0,110,260" onMouseOver="writeText('太阳和类似木星这样的气态行星是到目前为止太阳系中最大的物体。')"
href ="/example/html/sun.html" target ="_blank" alt="Sun" />
</map>
<p id="desc"></p>
</body>
<head>
<script type="text/javascript">
function timedMsg()
{
var t=setTimeout("alert('5 秒！')",5000)
}
</script>
</head>
<body>
<form>
<input type="button" value="显示定时的警告框" onClick = "timedMsg()">
</form>
<p>请点击上面的按钮。警告框会在 5 秒后显示。</p>
</body>
<head>
<script type="text/javascript">
function timedText()
{
var t1=setTimeout("document.getElementById('txt').value='2 秒'",2000)
var t2=setTimeout("document.getElementById('txt').value='4 秒'",4000)
var t3=setTimeout("document.getElementById('txt').value='6 秒'",6000)
}
</script>
</head>
<body>
<form>
<input type="button" value="显示计时的文本" onClick="timedText()">
<input type="text" id="txt">
</form>
<p>点击上面的按钮。输入框会显示出已经逝去的时间（2、4、6 秒）。</p>
</body>
<head>
<script type="text/javascript">
var c=0
var t
function timedCount()
{
document.getElementById('txt').value=c
c=c+1
t=setTimeout("timedCount()",1000)
}
</script>
</head>
<body>
<form>
<input type="button" value="开始计时！" onClick="timedCount()">
<input type="text" id="txt">
</form>
<p>请点击上面的按钮。输入框会从 0 开始一直进行计时。</p>
</body>
<head>
<script type="text/javascript">
var c=0
var t
function timedCount()
{
document.getElementById('txt').value=c
c=c+1
t=setTimeout("timedCount()",1000)
}
function stopCount()
{
c=0;
setTimeout("document.getElementById('txt').value=0",0);
clearTimeout(t);
}
</script>
</head>
<body>
<head>
<script type="text/javascript">
function startTime()
{
var today=new Date()
var h=today.getHours()
var m=today.getMinutes()
var s=today.getSeconds()
// add a zero in front of numbers<10
m=checkTime(m)
s=checkTime(s)
document.getElementById('txt').innerHTML=h+":"+m+":"+s
t=setTimeout('startTime()',500)
}
function checkTime(i)
{
if (i<10)
{i="0" + i}
return i
}
</script>
</head>
<body onload="startTime()">
<div id="txt"></div>
</body>
<body>
<script type="text/javascript">
personObj=new Object()
personObj.firstname="John"
personObj.lastname="Adams"
personObj.age=35
personObj.eyecolor="black"
document.write(personObj.firstname + " 的年龄是 " + personObj.age + " 岁。")
</script>
</body>
<body>
<script type="text/javascript">
function person(firstname,lastname,age,eyecolor)
{
this.firstname=firstname
this.lastname=lastname
this.age=age
this.eyecolor=eyecolor
}
myFather=new person("John","Adams",35,"black")
document.write(myFather.firstname + " 的年龄是 " + myFather.age + " 岁。")
</script>
</body>