1.
JavaScript提供脚本语言的编程与C++非常相似,它只是去掉了C语言中有关指针等容易产生的错误,并提供了功能强大的类库。
2.
在JavaScript中四种基本的数据类型:数值(整数和实数)、字符串型(用“”号或‘’括起来的字符或数值)、布尔型(使True或False表示)和空值
在JavaScript的基本类型中的数据可以是常量,也可以变量。由于JavaScript采用弱类型的形式,因而一个数据的变量或常量不必首先作声明,而是在使用或赋值时确定其数据的类型的。当然也可以先声明该数据的类型,它是通过在赋值时自动说明其数据类型的。
1.
<html>
<body>
<script type="text/javascript">
document.write("Hello World!");
</script>
</body>
</html>
2. 位于 head 部分的脚本:
当脚本被调用时,或者当事件被触发时,脚本就会被执行。当你把脚本放置到 head 部分后,就可以确保在需要使用脚本之前,它已经被载入了。
<html>
<head>
<script type="text/javascript">
....
</script>
</head>
....
3. 位于 body 部分的脚本:
在页面载入时脚本就会被执行。当你把脚本放置于 body 部分后,它就会生成页面的内容。
<html>
<head>
</head>
<body>
<script type="text/javascript">
....
</script>
</body>
</html>
4. 使用外部 JavaScript
有时,你也许希望在若干个页面中运行 JavaScript,同时不在每个页面中写相同的脚本。
为了达到这个目的,你可以将 JavaScript 写入一个外部文件之中。然后以 .js 为后缀保存这个文件。
注意:外部文件不能包含 <script> 标签。
然后把 .js 文件指定给 <script> 标签中的 "src" 属性,就可以使用这个外部文件了:
<html>
<head>
<script src="xxx.js">....</script>
</head>
<body>
</body>
</html>
5.
<1> 单行的注释以 // 开始
<2>多行注释以 /* 开头,以 */ 结尾。
6. 变量对大小写敏感(y 和 Y 是两个不同的变量)
变量必须以字母或下划线开始
7.
var x=5;
var carname="Volvo";
8.
y=x-5;
z=y+5;
9. JavaScript 算术运算符
算术运算符用于执行变量与/或值之间的算术运算。
给定 y=5,下面的表格解释了这些算术运算符:
运算符 | 描述 | 例子 | 结果 |
+ | 加 | x=y+2 | x=7 |
- | 减 | x=y-2 | x=3 |
* | 乘 | x=y*2 | x=10 |
/ | 除 | x=y/2 | x=2.5 |
% | 求余数 (保留整数) | x=y%2 | x=1 |
++ | 累加 | x=++y | x=6 |
-- | 递减 | x=--y | x=4 |
10.
if (age<18) document.write("Too young");
11.
<script type="text/javascript">
//Write a "Good morning" greeting if
//the time is less than 10
var d=new Date()
var time=d.getHours()
if (time<10)
{
document.write("<b>Good morning</b>")
}
</script>
12. 警告框
alert("文本")
13:确认框
如果用户点击确认,那么返回值为 true。如果用户点击取消,那么返回值为 false。
confirm("文本")
14.提示框
提示框经常用于提示用户在进入页面前输入某个值。
当提示框出现后,用户需要输入某个值,然后点击确认或取消按钮才能继续操纵。
如果用户点击确认,那么返回值为输入的值。如果用户点击取消,那么返回值为 null。
语法:
prompt("文本","默认值")
15.return 语句
return 语句用来规定从函数返回的值。
因此,需要返回某个值的函数必须使用这个 return 语句。
16.函数
function prod(a,b)
{
x=a*b
return x
}
17 。for
<html>
<body>
<script type="text/javascript">
var i=0
for (i=0;i<=10;i++)
{
document.write("The number is " + i)
document.write("<br />")
}
</script>
</body>
</html>
18. 使用 for ... in 循环遍历数组。
<html>
<body>
<script type="text/javascript">
var x
var mycars = new Array()
mycars[0] = "Saab"
mycars[1] = "Volvo"
mycars[2] = "BMW"
for (x in mycars)
{
document.write(mycars[x] + "<br />")
}
</script>
</body>
</html>
19.事件:
<1><input type="text" size="30" id="email" οnchange="checkEmail()">
<2>form method="post" action="xxx.htm" οnsubmit="return checkForm()">
<3> onmouseover
<a href="http://www.w3school.com.cn"
οnmοuseοver="alert('An onMouseOver event');return false">
<img src="w3school.gif" width="100" height="30">
</a>
20.try...catch:
<html>
<head>
<script type="text/javascript">
var txt=""
function message()
{
try
{
alert("Welcome guest!")
}
catch(err)
{
txt="此页面存在一个错误。/n/n"
txt+="错误描述: " + err.description + "/n/n"
txt+="点击OK继续。/n/n"
alert(txt)
}
}
</script>
</head>
<body>
<input type="button" value="View message" οnclick="message()" />
</body>
</html>
21.
下一个例子会显示一个确认框,让用户来选择在发生错误时点击确定按钮来继续浏览网页,还是点击取消按钮来回到首页。如果 confirm 方法的返回值为 false,代码会把用户重定向到其他的页面。如果 confirm 方法的返回值为 true,那么代码什么也不会做。
<html>
<head>
<script type="text/javascript">
var txt=""
function message()
{
try
{
adddlert("Welcome guest!")
}
catch(err)
{
txt="There was an error on this page./n/n"
txt+="Click OK to continue viewing this page,/n"
txt+="or Cancel to return to the home page./n/n"
if(!confirm(txt))
{
document.location.href="http://www.w3school.com.cn/"
}
}
}
</script>
</head>
<body>
<input type="button" value="View message" οnclick="message()" />
</body>
</html>
22.
下面的实例的作用是测定变量 x 的值。如果 x 的值大于 10 或者小于 0,错误就会被抛出 (throw)。这个错误被 catch 的参数捕获后,就会显示出自定义的出错信息。
<html>
<body>
<script type="text/javascript">
var x=prompt("Enter a number between 0 and 10:","")
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")
}
</script>
</body>
</html>
23. 反斜杠用来在文本字符串中插入省略号、换行符、引号和其他特殊字符
var txt="We are the so-called /"Vikings/" from the north."
document.write(txt)
24.
document.write ("You /& me are singing!")
上面的例子会产生以下输出:
You & me are singing!
25.
下面的表格列出了其余的特殊字符,这些特殊字符都可以使用反斜杠来添加到文本字符串中:
代码 | 输出 |
/' | 单引号 |
/" | 双引号 |
/& | 和号 |
// | 反斜杠 |
/n | 换行符 |
/r | 回车符 |
/t | 制表符 |
/b | 退格符 |
/f | 换页符 |
26. JavaScript 对大小写敏感
27. JavaScript 会忽略多余的空格。所以您可以在代码中添加适当的空格,使得代码的可读性更强。
28.
您可以在文本字符串内部使用反斜杠对代码进行折行。下面的例子是正确的:
document.write("Hello /
World!")
29. <script type="text/javascript">
var txt="Hello World!"
document.write(txt.length)
</script>
<script type="text/javascript">
var str="Hello world!"
document.write(str.toUpperCase())
</script>
29. 定义日期
Date 对象用于处理日期和时间。
可以通过 new 关键词来定义 Date 对象。以下代码定义了名为 myDate 的 Date 对象:
var myDate=new Date()
var myDate=new Date()
myDate.setFullYear(2008,7,9)
var myDate=new Date()
myDate.setDate(myDate.getDate()+5)
30. 比较日期
日期对象也可用于比较两个日期。
下面的代码将当前日期与 2008 年 8 月 9 日做了比较:
var myDate=new Date();
myDate.setFullYear(2008,7,9);
var today = new Date();
if (myDate>today)
{
alert("Today is before 9th August 2008");
}
else
{
alert("Today is after 9th August 2008");
}
31. 数组
<1>var myArray=new Array()
var mycars=new Array()
mycars[0]="Saab"
mycars[1]="Volvo"
mycars[2]="BMW"
<2>
var mycars=new Array(3)
mycars[0]="Saab"
mycars[1]="Volvo"
mycars[2]="BMW"
<3>var mycars=new Array("Saab","Volvo","BMW")
document.write(mycars[0])
mycars[0]="Opel";
33.Boolean 对象
var myBoolean=new Boolean()
34.算数值
JavaScript 提供 8 种可被 Math 对象访问的算数值:
· 常数
· 圆周率
· 2 的平方根
· 1/2 的平方根
· 2 的自然对数
· 10 的自然对数
· 以 2 为底的 e 的对数
· 以 10 为底的 e 的对数
这是在 Javascript 中使用这些值的方法:(与上面的算数值一一对应)
· Math.E
· Math.PI
· Math.SQRT2
· Math.SQRT1_2
· Math.LN2
· Math.LN10
· Math.LOG2E
· Math.LOG10E
35.RegExp
var patt1=new RegExp("e");
RegExp 对象有 3 个方法:test()、exec() 以及 compile()。
<1> test()
test() 方法检索字符串中的指定值。返回值是 true 或 false。
例子:
var patt1=new RegExp("e");
document.write(patt1.test("The best things in life are free"));
由于该字符串中存在字母 "e",以上代码的输出将是:
true
<2> exec()
exec() 方法检索字符串中的指定值。返回值是被找到的值。如果没有发现匹配,则返回 null。
例子 1:
var patt1=new RegExp("e");
document.write(patt1.exec("The best things in life are free"));
由于该字符串中存在字母 "e",以上代码的输出将是:
e
<3> compile()
compile() 方法用于改变 RegExp。
compile() 既可以改变检索模式,也可以添加或删除第二个参数。
例子:
var patt1=new RegExp("e");
document.write(patt1.test("The best things in life are free"));
patt1.compile("d");
document.write(patt1.test("The best things in life are free"));
由于字符串中存在 "e",而没有 "d",以上代码的输出是:
truefalse
36.JavaScript 对象
点击以下链接,可以获得以下对象的更多信息,包括它们的集合、属性、方法以及事件。
对象 | 描述 |
JavaScript 层级中的顶层对象。Window 对象表示浏览器窗口。每当 <body> 或者 <frameset> 标签出现,Window 对象就会被自动创建。 | |
包含客户端浏览器的信息。 | |
包含客户端显示屏的信息。 | |
包含了浏览器窗口访问过的 URL。 | |
包含了当前URL的信息。 | |
对象 | 描述 |
代表整个 HTML 文档,用来访问页面中的所有元素。 | |
代表 <a> 元素。 | |
代表图像地图中的 <area> 元素。 | |
代表 <base> 元素。 | |
代表图像地图中的 <body> 元素。 | |
代表 <button> 元素。 | |
代表事件的状态 | |
代表 <form> 元素 | |
代表 <frame> 元素 | |
代表 <frameset> 元素 | |
代表 <iframe> 元素 | |
代表 <img> 元素 | |
代表 HTML 表单中的按钮 | |
代表 HTML 表单中的选择框 | |
代表 HTML 表单中的 fileupload 。 | |
代表 HTML 表单中的隐藏域。 | |
代表 HTML 表单中的密码域。 | |
代表 HTML 表单中的单选框。 | |
代表 HTML 表单中的重置按钮。 | |
代表 HTML 表单中的确认按钮。 | |
代表 HTML 表单中的文本输入域。 | |
代表 <link> 元素 | |
代表 <meta> 元素 | |
代表一个 <Object> 元素 | |
代表 <option> 元素 | |
代表 HTML 表单中的选择列表。 | |
代表某个单独的样式声明。 | |
代表 <table> 元素。 | |
代表 <td> 元素。 | |
代表 <tr> 元素。 | |
代表 <textarea> 元素。 |
37.检测浏览器类型:
<html>
<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("Your browser is good enough!")}
else
{alert("It's time to upgrade your browser!")}
}
</script>
</head>
<body οnlοad="detectBrowser()">
</body>
</html>
38.Cookie:
<html>
<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>
</html>
39.表单验证:
<html>
<head>
<script type="text/javascript">
function validate_required(field,alerttxt)
{
with (field)
{
if (value==null||value=="")
{alert(alerttxt);return false}
else {return true}
}
}
function validate_form(thisform)
{
with (thisform)
{
if (validate_required(email,"Email must be filled out!")==false)
{email.focus();return false}
}
}
</script>
</head>
<body>
<form action="submitpage.htm" οnsubmit="return validate_form(this)" method="post">
Email: <input type="text" name="email" size="30">
<input type="submit" value="Submit">
</form>
</body>
</html>
40.E_Mail验证:
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}
}
}
41. 动画:
使用 onMouseOver 事件和 onMouseOut 事件来驱动 JavaScript 函数切换图像
<html>
<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="http://www.w3school.com.cn" target="_blank">
<img border="0" alt="Visit W3School!" src="/i/eg_mouse2.jpg" name="b1"
onmouseOver="mouseOver()"
onmouseOut="mouseOut()" />
</a>
</body>
</html>
42. 计时:
在 JavaScritp 中使用计时事件是很容易的,两个关键方法是:
setTimeout()
未来的某时执行代码
clearTimeout()
取消setTimeout()
var t=setTimeout("javascript语句",毫秒)
当下面这个例子中的按钮被点击时,一个提示框会在5秒中后弹出。
<html>
<head>
<script type="text/javascript">
function timedMsg()
{
var t=setTimeout("alert('5 seconds!')",5000)
}
</script>
</head>
<body>
<form>
<input type="button" value="Display timed alertbox!" onClick="timedMsg()">
</form>
</body>
</html>
<2>实例 - 无穷循环
要创建一个运行于无穷循环中的计时器,我们需要编写一个函数来调用其自身。在下面的例子中,当按钮被点击后,输入域便从 0 开始计数。
<html>
<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="Start count!" onClick="timedCount()">
<input type="text" id="txt">
</form>
</body>
</html>
<3> <html>
<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()
{
clearTimeout(t)
}
</script>
</head>
<body>
<form>
<input type="button" value="Start count!" onClick="timedCount()">
<input type="text" id="txt">
<input type="button" value="Stop count!" onClick="stopCount()">
</form>
</body>
</html>