示例1：JavaScript乘法表
创建一个简单的乘法表，询问用户他想要的行数和列数：
<html>
<head>
<title>
Multiplication Table
</title>
<script type="text/javascript">
var rows = prompt("How many rows for your multiplication table?");
var cols = prompt("How many columns for your multiplication table?");
if(rows == "" || rows == null)
rows = 10;
if(cols== "" || cols== null)
cols = 10;
createTable(rows, cols);
function createTable(rows, cols)
{
var j=1;
var output = "<table border='1' width='500' cellspacing='0'cellpadding='5'>";
for(i=1;i<=rows;i++)
{
output = output + "<tr>";
while(j<=cols)
{
output = output + "<td>" + i*j + "</td>";
j = j+1;
}
output = output + "</tr>";
j = 1;
}
output = output + "</table>";
document.write(output);
}
</script>
</head>
<body>
</body>
</html>示例2：JS表单示例：
创建一个示例表单程序，收集用户的名字、姓氏、电子邮件、用户ID、密码和确认密码。在使用JavaScript进行验证之后，在输出中，会在出现错误的文本框旁边用红色显示正确的错误消息。 包含源代码
<html>
<head>
<title>
Form Validation
</title>
<script type="text/javascript">
var divs = new Array();
divs[0] = "errFirst";
divs[1] = "errLast";
divs[2] = "errEmail";
divs[3] = "errUid";
divs[4] = "errPassword";
divs[5] = "errConfirm";
function validate()
{
var inputs = new Array();
inputs[0] = document.getElementById('first').value;
inputs[1] = document.getElementById('last').value;
inputs[2] = document.getElementById('email').value;
inputs[3] = document.getElementById('uid').value;
inputs[4] = document.getElementById('password').value;
inputs[5] = document.getElementById('confirm').value;
var errors = new Array();
errors[0] = "<span style='color:red'>Please enter your first name!</span>";
errors[1] = "<span style='color:red'>Please enter your last name!</span>";
errors[2] = "<span style='color:red'>Please enter your email!</span>";
errors[3] = "<span style='color:red'>Please enter your user id!</span>";
errors[4] = "<span style='color:red'>Please enter your password!</span>";
errors[5] = "<span style='color:red'>Please confirm your password!</span>";
for (i in inputs)
{
var errMessage = errors[i];
var div = divs[i];
if (inputs[i] == "")
document.getElementById(div).innerHTML = errMessage;
else if (i==2)
{
var atpos=inputs[i].indexOf("@");
var dotpos=inputs[i].lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=inputs[i].length)
document.getElementById('errEmail').innerHTML = "<span style='color: red'>Enter a valid email address!</span>";
else
document.getElementById(div).innerHTML = "OK!";
}
else if (i==5)
{
var first = document.getElementById('password').value;
var second = document.getElementById('confirm').value;
if (second != first)
document.getElementById('errConfirm').innerHTML = "<span style='color: red'>Your passwords don't match!</span>";
else
document.getElementById(div).innerHTML = "OK!";
}
else
document.getElementById(div).innerHTML = "OK!";
}
}
function finalValidate()
{
var count = 0;
for(i=0;i<6;i++)
{
var div = divs[i];
if(document.getElementById(div).innerHTML == "OK!")
count = count + 1;
}
if(count == 6)
document.getElementById("errFinal").innerHTML = "All the data you entered is correct!!!";
}
</script>
</head>
<body>
<table id="table1">
<tr>
<td>
First Name:
</td>
<td>
<input id="first" onkeyup="validate();" type="text"/>
</td>
<td>
<div id="errFirst">
</div>
</td>
</tr>
<tr>
<td>
Last Name:
</td>
<td>
<input id="last" onkeyup="validate();" type="text"/>
</td>
<td>
<div id="errLast">
</div>
</td>
</tr>
<tr>
<td>
Email:
</td>
<td>
<input id="email" onkeyup="validate();" type="text"/>
</td>
<td>
<div id="errEmail">
</div>
</td>
</tr>
<tr>
<td>
User Id:
</td>
<td>
<input id="uid" onkeyup="validate();" type="text"/>
</td>
<td>
<div id="errUid">
</div>
</td>
</tr>
<tr>
<td>
Password:
</td>
<td>
<input id="password" onkeyup="validate();" type="password"/>
</td>
<td>
<div id="errPassword">
</div>
</td>
</tr>
<tr>
<td>
Confirm Password:
</td>
<td>
<input id="confirm" onkeyup="validate();" type="password"/>
</td>
<td>
<div id="errConfirm">
</div>
</td>
</tr>
<tr>
<td>
<input id="create" onclick="validate();finalValidate();" type="button" value="Create"/>
</td>
<td>
<div id="errFinal">
</div>
</td>
</tr>
</table>
</body>
</html>示例3：使用事件的弹出消息：
显示一条简单的消息“欢迎！”在演示网页上，当用户将鼠标悬停在消息上时，应该会显示一个弹出窗口，并显示一条消息“欢迎使用我的网页！”：
<html>
<head>
<title>
Event!!!
</title>
<script type="text/javascript">
function trigger()
{
document.getElementById("hover").addEventListener("mouseover", popup);
function popup()
{
alert("Welcome to my WebPage!!!");
}
}
</script>
<style>
p{
font-size:50px;
position: fixed;
left: 550px;
top: 300px;
}
</style>
</head>
<body onload="trigger();">
<p id="hover">
Welcome!!!
</p>
</body >
</html>