JavaScript实例
JavaScript实例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Javas cript1</title>
</head>
<body>
<s cript>
document.write("Hello\9bb1qw115 World!<br/>");
document.write("<b>Javas cript：写入 HTML 输出</b>");
document.write("<h1>This is a heading</h1>");
document.write("<p>This is a paragraph</p>");
</s cript>
<button type="button" onclick="alert('Welcome!')">点击弹出窗</button>
<p id="demo">Javas cript 能改变 HTML 元素的内容。</p>
<s cript>
function myFunction(){
x=document.getElementById("demo"); // 找到元素
x.innerHTML="Hello Javas cript!"; // 改变内容
}
</s cript>
<button type="button" onclick="myFunction()">点击改变内容</button>
<br /><br />
<p id="demoa">Javas cript 能改变 HTML 元素的样式。</p>
<s cript>
function amyFunction(){
x=document.getElementById("demoa") // 找到元素
x.style.color="#ff0000"; // 改变样式
}
</s cript>
<button type="button" onclick="amyFunction()">点击这里改变文字的样式</button>
<br /><br />
<s cript>
function changeImage()
{element=document.getElementById('myimage')
if(element.src.match("bulbon"))
{element.src="i/eg_bulboff.gif";}
else{element.src="i/eg_bulbon.gif";}}
</s cript>
<img id="myimage" onclick="changeImage()" src="i/eg_bulboff.gif">
<p>点击灯泡来点亮或熄灭这盏灯</p>
<br /><br />
<p>请输入数字。如果输入值不是数字，浏览器会弹出提示框。</p>
<s cript>
function bmyFunction(){var x=document.getElementById("demob").value;if(x==""||isNaN(x)){alert("输入错误");}}
</s cript>
<input id="demob" type="text">
<button type="button" onclick="bmyFunction()">点击这里</button>
<br /><br />
<p id="democ">提示：我们把 Javas cript 放到了页面代码的底部，这样就可以确保在 p 元素创建之后再执行脚本。<button type="button" onclick="cmyFunction()">Try it</button></p>
<s cript>function cmyFunction(){document.getElementById("democ").innerHTML="document.getElementById括号双引号id双引号括号.innerHTML";}</s cript>
<br />
<h1 style=" color:#F00">Javas cript 变量++++++++++++++++++</h1>
<p id="ddemo">空格</p>
<p id="edemo">点击这里来创建变量，并显示结果。</p><button onclick="dmyFunction()">点击这里</button>
<s cript>
function dmyFunction(){
var pi=3.14;
var name="Bill Gates";
var answer='Yes I am!';
var carname="Volvo";
document.getElementById("ddemo").innerHTML=carname;
document.getElementById("edemo").innerHTML=(pi+name+answer+"<br>");}
</s cript>
<br /><br />
<p>假设 y=5，计算 x=y+2，并显示结果。</p>
<button onclick="fmyFunction()">计算结果</button>
<p id="fdemo"></p>
<s cript>
function fmyFunction()
{
var y=5;
var x=y+2;
var demoP=document.getElementById("fdemo")
demoP.innerHTML="计算结果：x=" + x;
}
</s cript>
<br /><br />
<h1 style=" color:#F00">Javas cript 数据类型""''0000000000000000.00000000000000000001</h1>
<s cript>
document.write("字符串"+"<br>")
var carname1="Bill Gates";
var carname2='Bill Gates';
var answer1="Nice to meet you!";
var answer2="He is called 'Bill'";
var answer3='He is called "Bill"';
document.write(carname1 + "<br>")
document.write(carname2 + "<br>")
document.write(answer1 + "<br>")
document.write(answer2 + "<br>")
document.write(answer3 + "<br>")
document.write("<br>"+"数字"+"<br>")
var x1=36.00;
var x2=36;
var y=123e5;
var z=123e-5;
document.write(x1 + "<br />")
document.write(x2 + "<br />")
document.write(y + "<br />")
document.write(z + "<br />")
document.write("<br>"+"数组"+"<br>")
var i;
var cars = new Array();
cars[0] = "Audi";
cars[1] = "BMW";
cars[2] = "Volvo";
for (i=0;i<cars.length;i++)
{document.write(cars[i] + "<br>");}
document.write("<br>"+"对象"+"<br>")
var person={
firstname : "Bill",
lastname : "Gates",
id : 5566
};
document.write(person.lastname + "<br />");
document.write(person["lastname"] + "<br />");
document.write("<br>"+"Undefined(没有内容) 和 Null（有内容但被清空）"+"<br>")
var persona;
var cara="Volvo";
document.write(persona + "<br />");
document.write(cara + "<br />");
var cara=null
document.write(cara + "<br />");
</s cript>
<h1 style=" color:#F00">Javas cript 对象</h1>
<s cript>
document.write("<br>"+"创建名为personb的对象，并为其添加了四个属性："+"<br>")
personb=new Object();
personb.firstname="Bill";
personb.lastname="Gates";
personb.age=56;
personb.eyecolor="blue";
document.write(personb.firstname + " is " + personb.age + " years old.");
</s cript>
<h1 style=" color:#F00">Javas cript 函数</h1>
<p>点击这个按钮，来调用带参数的函数。</p>
<button onclick="gmyFunction('Bill Gates','CEO')">点击弹出框alert这里</button>
<s cript>
function gmyFunction(nameg,jobg)
{alert("Welcome " + nameg + ", the " + jobg);}
</s cript>
<p>本例调用的函数会执行一个计算a*b，然后返回结果：<span id="demoh"></span></p>
<s cript>
function hmyFunction(a,b){return a*b;}
document.getElementById("demoh").innerHTML=hmyFunction(4,3);
</s cript>
<h1 style=" color:#F00">Javas cript 运算符++++++++++-------------*************///////////////</h1>
<s cript type="text/javas cript">
xa=5+5;
document.write(xa);
document.write("<br />");
xa="5"+"5";
document.write(xa);
document.write("<br />");
xa=5+"5";
document.write(xa);
document.write("<br />");
xa="5"+5;
document.write(xa);
document.write("<br />");
</s cript>
<h3>规则是：<strong>如果把数字与字符串相加，结果将成为字符串。</strong></h3>
<h1 style=" color:#F00">Javas cript 比较和逻辑运算符</h1>
<p>比较运算符<br />
给定 x=5，下面的表格解释了比较运算符：<br />
运算符 描述 例子<br />
== 等于 x==8 为 false<br />
=== 全等（值和类型） x===5 为 true；x==="5" 为 false<br />
!= 不等于 x!=8 为 true<br />
> 大于 x>8 为 false<br />
< 小于 x < 8 为 true<br />
>= 大于或等于 x>=8 为 false<br />
<= 小于或等于 x<=8 为 true<br />
</p>
<p>逻辑运算符<br />
给定 x=6 以及 y=3，下表解释了逻辑运算符：<br />
运算符 描述 例子<br />
&& and (x < 10 && y > 1) 为 true<br />
|| or (x==5 || y==5) 为 false<br />
! not !(x==y) 为 true<br />
</p>
<h1 style=" color:#F00">Javas cript If...Else 语句If...ElseIf...ElseIf...ElseIf...ElseIf...ElseIf...ElseIf...ElseIf...ElseIf...ElseIf...ElseIf...ElseIf...ElseIf...ElseIf...ElseIf...ElseIf...Else/</h1>
<p>如果时间早于 20:00，会获得问候 "Good day"。</p>
<button onclick="kmyFunction()">点击这里</button>
<p id="demok"></p>
<s cript>
function kmyFunction()
{
var xk="";
var time=new Date().getHours();
if (time<20)
{
xk="Good day";
}
document.getElementById("demok").innerHTML=xk;
}
</s cript>
<br /><br />
<p>点击这个按钮，获得基于时间的问候。</p>
<button onclick="lmyFunction()">点击这里</button>
<p id="demol"></p>
<s cript>
function lmyFunction()
{
var xl="";
var time=new Date().getHours();
if (time<20)
{
xl="Good day";
}
else
{
xl="Good evening";
}
document.getElementById("demol").innerHTML=xl;
}
</s cript>
<br /><br />
<p>点击这个按钮，获得基于时间的问候。</p>
<button onclick="omyFunction()">点击这里</button>
<p id="demoo"></p>
<s cript>
function omyFunction()
{
var xo="";
var time=new Date().getHours();
if (time<10)
{
xo="Good morning";
}
else if (time<20)
{
xo="Good day";
}
else
{
xo="Good evening";
}
document.getElementById("demoo").innerHTML=xo;
}
</s cript>
<h1 style=" color:#F00">Javas cript Switch 语句</h1>
<p>点击下面的按钮来显示今天是周几：</p>
<button onclick="pmyFunction()">点击这里</button>
<p id="demop"></p>
<s cript>
function pmyFunction()
{
var xp;
var dp=new Date().getDay();
switch (dp)
{
case 0:
xp="Today it's Sunday";
break;
case 1:
xp="Today it's Monday";
break;
case 2:
xp="Today it's Tuesday";
break;
case 3:
xp="Today it's Wednesday";
break;
case 4:
xp="Today it's Thursday";
break;
case 5:
xp="Today it's Friday";
break;
case 6:
xp="Today it's Saturday";
break;
}
document.getElementById("demop").innerHTML=xp;
}
</s cript>
<p>点击下面的按钮，会显示出基于今日日期的消息：</p>
<button onclick="qmyFunction()">点击这里</button>
<p id="demoq"></p>
<s cript>
function qmyFunction()
{
var xq;
var dq=new Date().getDay();
switch (dq)
{
case 6:
xq="Today it's Saturday";
break;
case 0:
xq="Today it's Sunday";
break;
default:
xq="Looking forward to the Weekend";
}
document.getElementById("demoq").innerHTML=xq;
}
</s cript>
<s cript>
carsq=["BMW","Volvo","Saab","Ford"];
for (var i=0;i<carsq.length;i++)
{
document.write(carsq[i] + "<br>");
}
</s cript>
<p>点击下面的按钮，将代码块循环五次：</p>
<button onclick="rmyFunction()">点击这里</button>
<p id="demor"></p>
<s cript>
function rmyFunction()
{
var xr="";
for (var i=0;i<5;i++)
{
xr=xr + "The number is " + i + "<br>";
}
document.getElementById("demor").innerHTML=xr;
}
</s cript>
<s cript>
carst=["BMW","Volvo","Saab","Ford"];
var i=2,len=carst.length;
for (; i<len; i++)
{
document.write(carst[i] + "<br>");
}
</s cript>
<br /><br />
<s cript>
carsw=["BMW","Volvo","Saab","Ford"];
var i=0,len=carsw.length;
for (; i<len; )
{
document.write(carsw[i] + "<br>");
i++;
}
</s cript>
<p>点击下面的按钮，循环遍历对象 "persony" 的属性。</p>
<button onclick="ymyFunction()">点击这里</button>
<p id="demoy"></p>
<s cript>
function ymyFunction()
{
var xy;
var txty="";
var persony={fname:"Bill",lname:"Gates",age:56};
for (xy in persony)
{
txty=txty + persony[xy];
}
document.getElementById("demoy").innerHTML=txty;
}
</s cript>
<p>点击下面的按钮，只要 i 小于 5 就一直循环代码块。</p>
<button onclick="umyFunction()">点击这里</button>
<p id="demou"></p>
<s cript>
function umyFunction()
{
var xu="",i=0;
while (i<5)
{
xu=xu + "The number is while" + i + "<br>";
i++;
}
document.getElementById("demou").innerHTML=xu;
}
</s cript>
<p>点击下面的按钮，只要 i 小于 5 就一直循环代码块。</p>
<button onclick="vmyFunction()">点击这里</button>
<p id="demov"></p>
<s cript>
function vmyFunction()
{
var xv="",i=0;
do
{
xv=xv + "The number is do" + i + "<br>";
i++;
}
while (i<5)
document.getElementById("demov").innerHTML=xv;
}
</s cript>
<h2>比较 for 和 while</h2>
<s cript>
carsaa=["while","while","Saab","Ford"];
var i=0;
while (carsaa[i])
{
document.write(carsaa[i] + "<br>");
i++;
}
</s cript>
<s cript>
carsbb=["for","for","Saab","Ford"];
var i=0;
for (;carsbb[i];)
{
document.write(carsbb[i] + "<br>");
i++;
}
</s cript>
<h1 style=" color:#F00">Javas cript Break 和 Continue 语句</h1>
<p>点击按钮，测试带有 break 语句的循环。for+if</p>
<button onclick="ccmyFunction()">点击这里</button>
<p id="democc"></p>
<s cript>
function ccmyFunction()
{
var xcc="",i=0;
for (i=0;i<10;i++)
{
if (i==3)
{
break;
}
xcc=xcc + "The number is " + i + "<br>";
}
document.getElementById("democc").innerHTML=xcc;
}
</s cript>
<button onclick="ddmyFunction()">点击这里js代码有简化</button>
<p id="demodd"></p>
<s cript>
function ddmyFunction()
{
var xdd="",i=0;
for (i=0;i<10;i++)
{
if (i==3) break;
xdd=xdd + "The number is " + i + "<br>";
}
document.getElementById("demodd").innerHTML=xdd;
}
</s cript>
<p>点击下面的按钮来执行循环，该循环会跳过 i=3 的步进。</p>
<button onclick="eemyFunction()">点击这里</button>
<p id="demoee"></p>
<s cript>
function eemyFunction()
{
var xee="",i=0;
for (i=0;i<10;i++)
{
if (i==3)
{
continue;
}
xee=xee + "The number is " + i + "<br>";
}
document.getElementById("demoee").innerHTML=xee;
}
</s cript>
<s cript>
carsff=["BMW","Volvo","Saab","Ford"];
list:
{
document.write("break 语句可用于跳出任何 Javas cript 代码块(只显示break前的三个)"+ "<br>"+carsff[0] + "<br>");
document.write(carsff[1] + "<br>");
document.write(carsff[2] + "<br>");
break list;
document.write(carsff[3] + "<br>");
document.write(carsff[4] + "<br>");
document.write(carsff[5] + "<br>");
}
</s cript>
<input type="button" value="查看消息" onclick="messageoo()" />
<s cript>
var txt1="";
function messageoo()
{
try
{
adddlert("Welcome guest!");//adddlert是错误的
}
catch(err)
{
txt1="本页有一个错误。\n";
txt1+="错误描述：" + err.message + "\n\n";
txt1+="点击确定继续。\n\n";
alert(txt1);
}
}
</s cript>
<br /><br />
<s cript>
function ggmyFunction()
{
try
{
var xgg=document.getElementById("demogg").value;
if(xgg=="") throw "值为空";
if(isNaN(xgg)) throw "不是数字";
if(xgg>10) throw "太大";
if(xgg<5) throw "太小";
}
catch(err)
{
var ygg=document.getElementById("messgg");
ygg.innerHTML="错误：" + err + "。";
}
}
</s cript>
<p>请输入 5 到 10 之间的数字：</p>
<input id="demogg" type="text">
<button type="button" onclick="ggmyFunction()">测试输入值</button>
<p id="messgg"></p>
<h1 style=" color:#F00">Javas cript 表单验证</h1>
<form action="HTMLCSS1/index.html" onsubmit="return validate_form(this)" method="post">
Email: <input type="text" name="email" size="30">
<input type="submit" value="Submit">
</form>
<s cript type="text/javas cript">
function validate_email(field,alerttxt)
{
with (field)
{
apos=value.indexOf("@")
dotpos=value.lastIndexOf(".")
if (apos<1||dotpos-apos<2)
{alert(alerttxt);return false}
else {return true}
}
}
function validate_form(thisform)
{
with (thisform)
{
if (validate_email(email,"Not a valid e-mail address!")==false)
{email.focus();return false}
}
}
</s cript>
</body>
</html>
