JacaScript学习笔记

来源：互联网发布：网络舆情事件举例编辑：程序博客网时间：2024/06/03 21:30

JavaScript提供脚本语言的编程与C++非常相似，它只是去掉了Ｃ语言中有关指针等容易产生的错误，并提供了功能强大的类库。

在JavaScript中四种基本的数据类型：数值（整数和实数）、字符串型（用“”号或‘’括起来的字符或数值）、布尔型（使True或False表示）和空值

在JavaScript的基本类型中的数据可以是常量，也可以变量。由于JavaScript采用弱类型的形式，因而一个数据的变量或常量不必首先作声明，而是在使用或赋值时确定其数据的类型的。当然也可以先声明该数据的类型，它是通过在赋值时自动说明其数据类型的。

         <html>

<body>

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>

</body>

</html>

4. 使用外部 JavaScript

有时，你也许希望在若干个页面中运行 JavaScript，同时不在每个页面中写相同的脚本。

为了达到这个目的，你可以将 JavaScript 写入一个外部文件之中。然后以 .js 为后缀保存这个文件。

注意：外部文件不能包含 <script> 标签。

然后把 .js 文件指定给 <script> 标签中的 "src" 属性，就可以使用这个外部文件了：

<html>

<head>

</head>

<body>

</body>

</html>

<1> 单行的注释以 // 开始

<2>多行注释以 /* 开头，以 */ 结尾。

6. 变量对大小写敏感（y 和 Y 是两个不同的变量）

变量必须以字母或下划线开始

var x=5;

var carname="Volvo";

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.

//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>

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>

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" onchange="checkEmail()">

<2>form method="post" action="xxx.htm" onsubmit="return checkForm()">

<3> onmouseover

<a href="http://www.w3school.com.cn"

onmouseover="alert('An onMouseOver event');return false">

</a>

20.try...catch:

<html>

<head>

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>

</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" onclick="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.

下面的表格列出了其余的特殊字符，这些特殊字符都可以使用反斜杠来添加到文本字符串中：

代码

输出

单引号

双引号

和号

反斜杠

换行符

回车符

制表符

退格符

换页符

26. JavaScript 对大小写敏感

27. JavaScript 会忽略多余的空格。所以您可以在代码中添加适当的空格，使得代码的可读性更强。

28.

您可以在文本字符串内部使用反斜杠对代码进行折行。下面的例子是正确的：

document.write("Hello /

World!")

29. <script type="text/javascript">

var txt="Hello World!"

document.write(txt.length)

</script>

var str="Hello world!"

document.write(str.toUpperCase())

</script>

29. 定义日期

Date 对象用于处理日期和时间。

可以通过 new 关键词来定义 Date 对象。以下代码定义了名为 myDate 的 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"，以上代码的输出将是：

<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 对象

点击以下链接，可以获得以下对象的更多信息，包括它们的集合、属性、方法以及事件。

对象

描述

Window

JavaScript 层级中的顶层对象。Window 对象表示浏览器窗口。每当 <body> 或者 <frameset> 标签出现，Window 对象就会被自动创建。

Navigator

包含客户端浏览器的信息。

Screen

包含客户端显示屏的信息。

History

包含了浏览器窗口访问过的 URL。

Location

包含了当前URL的信息。

对象

描述

Document

代表整个 HTML 文档，用来访问页面中的所有元素。

Anchor

代表 <a> 元素。

Area

代表图像地图中的 <area> 元素。

Base

代表 <base> 元素。

Body

代表图像地图中的 <body> 元素。

Button

代表 <button> 元素。

Event

代表事件的状态

Form

代表 <form> 元素

Frame

代表 <frame> 元素

Frameset

代表 <frameset> 元素

Iframe

代表 <iframe> 元素

Image

代表 <img> 元素

Input button

代表 HTML 表单中的按钮

Input checkbox

代表 HTML 表单中的选择框

Input file

代表 HTML 表单中的 fileupload 。

Input hidden

代表 HTML 表单中的隐藏域。

Input password

代表 HTML 表单中的密码域。

Input radio

代表 HTML 表单中的单选框。

Input reset

代表 HTML 表单中的重置按钮。

Input submit

代表 HTML 表单中的确认按钮。

Input text

代表 HTML 表单中的文本输入域。

Link

代表 <link> 元素

Meta

代表 <meta> 元素

Object

代表一个 <Object> 元素

Option

代表 <option> 元素

Select

代表 HTML 表单中的选择列表。

Style

代表某个单独的样式声明。

Table

代表 <table> 元素。

TableData

代表 <td> 元素。

TableRow

代表 <tr> 元素。

Textarea

代表 <textarea> 元素。

37．检测浏览器类型：

<html>

<head>

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>

</html>

38．Cookie:

<html>

<head>

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>

</html>

39.表单验证：

<html>

<head>

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>

Email: <input type="text" name="email" size="30">

</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>

function mouseOver()

{

document.b1.src ="/i/eg_mouse.jpg"

}

function mouseOut()

{

document.b1.src ="/i/eg_mouse2.jpg"

}

</script>

</head>

<body>

<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>

var c=0

var t

function timedCount()

{

document.getElementById('txt').value=c

c=c+1

t=setTimeout("timedCount()",1000)

}

</script>

</head>

<body>

<form>

</form>

</body>

</html>

<3> <html>

<head>

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>

</form>

</body>

</html>