JavaScript初学指南

摘要：

通常情况下，JavaScript代码是以开头，并以结尾，整个代码放在和之间。这是确保一些不支持JavaScript的低版本浏览器不显示这些脚本。")外部文件是一个包含JavaScript代码并以”.js”为后缀的文本文件，注意：1.仅有4.0以上版本浏览器才能可靠地跨平台支持这种外部引用脚本的方式。write和writeln在JavaScript中，要输出文本，你必须使用write()或者writeln()，这儿给出一个例子：Welcometomysite注意：文档对象write是小写字母，JavaScript是大小写敏感的。

目录：

包含与引入(Embedding,including)

write 和 writeln

文档对象（document object）

bgColor 和 fgColor

消息框（Message Box）

变量（Variables）和条件（Conditions）

函数（Function）

onClick

onLoad

onUnload

表单（Form）

onBlur

连接（Link）

日期（Date）

窗口（window）

重新载入（Reload）

加载（Loading）

遥控窗口

开启器（opener）

框架（Frame）

包含与引入（Embedding and including）

让我们先看一个简单的例子：

<html>

<head>

<title>This is a JavaScript example</title>

<!--

document.write("Hello World!");

//-->

</script>

</head>

</html>

通常情况下，JavaScript代码是以<script language="JavaScript">开头，并以</script>结尾，整个代码放在<head> 和 </head>之间。不过有时也可以放在<body>标签中，比如：

<html>

<head></head>

<body>

<script>

.....// The code embedded in the <body> tags.

</script>

</body>

</html>

为什么我们要把代码放到注释<!—和 //-->中呢？这是确保一些不支持JavaScript的低版本浏览器不显示这些脚本。这是一种很好的做法。此外，指定语言属性也是一种选择，你必须指定特定的JavaScript版本：

<script language="JavaScript1.2">

你可以使用src 属性来包含外部JavaScript文件：

<script language="JavaScript" src="http://t.zoukankan.com/hello.js"></script>

比如,外部hello.js文件代码如下：

document.write("Hello World!")

外部文件是一个包含JavaScript代码并以 ”.js” 为后缀的文本文件，注意：

1. 仅有4.0以上版本浏览器才能可靠地跨平台支持这种外部引用脚本的方式。

2. 代码中不能包含<script language...>和 </script>等标签，否则会报错。

write 和writeln

在JavaScript中，要输出文本，你必须使用write()或者 writeln()，这儿给出一个例子：

<HTML>

<HEAD>

<TITLE> Welcome to my site</TITLE></HEAD>

<BODY>

<SCRIPT LANGUAGE="JAVASCRIPT">

<!--

document.write("Welcome to my site!");

// -->

</SCRIPT>

</BODY>

</HTML>

注意：文档对象（document object） write 是小写字母，JavaScript是大小写敏感的。write 和writeln的区别在于：write 仅仅输出文本，而writeln可以输出文本和换行符。

文档对象（document object）

文档对象是JavaScript中最重要的对象，下面是一个很简单的JavaScript代码：

document.write("Hi there.")

在代码中，document 是一个对象，write是这个对象的方法。让我们看一下文档对象所拥有的其他方法：

lastModified

你可以使用以下代码来显示你页面的最近更新日期：

<script language="JavaScript">

document.write("This page created by John N. Last update:" + document.lastModified);

</script>

在这里您需要用到document的lastModified 属性，注意我们用 “+” 号连接了” This page created by John N. Last update:” 和 “document.lastModified”.

比如显示结果为： This page created by John N. Last update: 04/28/2010 08:33:08 （译者测试）

bgColor 和fgColor

让我们试着玩一下bgColor 和 fgColor:

document.bgColor="black"

document.fgColor="#336699"

</script>

这样可以使整个页面显示为黑色背景，白色文字的效果。

消息框（Message Box）

alert

这里有三种消息框：alert，confirm，和prompt，首先让我们看第一个：

<body>

<script>

window.alert("Welcome to my site!")

</script>

</body>

你可以在引号内放任何你想要的东西。

confirm

一个confirm box的例子：

window.confirm("Are you sure you want to quit?")

此消息框可以方便用户选择确定或取消，多用于某项操作前的确认，返回值为true或false。（译者注）

prompt

prompt box 允许用户根据提示输入一些确认信息：

window.prompt("please enter user name")

以上所有的例子，我们都用了像window.alert()这样的方法。实际上，我们可以用以下简单的方法代替：

alert()

confirm()

prompt()

变量（Variables）和条件（Conditions）

让我们看个例子：

<script>

var x=window.confirm("Are you sure you want to quit")

if (x)

    window.alert("Thank you.")

else

    window.alert("Good choice.")

</script>

在此，我们应该知道几个概念。首先 var x= 是一个变量的声明。如果你想创建一个变量，你必须用var语句声明一个变量。x 将获取结果，也就是true或false。然后我们用一个条件语句if else，让脚本能从两种结果中做出选择（条件如下）。如果结果为true（用户点击了”确定”），窗口将弹出”Thank you.”消息框。如果结果是false（用户点击了”取消”）,窗口将被替换为”Good choice.”消息框。因此，我们可以用var，if和这些基本方法实现更复杂的消息框。

<script>

var y=window.prompt("please enter your name")

window.alert(y)

</script>

另一个例子：

<html><head>

<script>

var x=confirm("Are you sure you want to quit?")

if (!x)

         window.location="http://www.yahoo.com"

</script>

</head>

<body>

Welcome to my website!.

</body></html>

如果你点击了”取消”,它将带你去yahoo首页，点击”确定”将继续加载当前页面” Welcome to my website!”.

注意：if（！x）意思是：如果点击””.在JavaScript中，感叹号” ！” 表示”none”。

函数（Function）

函数是代码片段。让我们创建一个简单的函数：

function test()

   document.write("Hello can you see me?")

注意如果仅仅把这些放在<script></script>标签内，你是看不到” Hello can you see me?”的。因为函数在你调用它之前是不会自动执行的。所以我们应该这么做：

function test()

   document.write("Hello can you see me?")

test()

最后一个test()是调用函数，现在你就课可以看到” Hello can you see me?”了。

事件处理程序

事件处理程序是什么？可以认为它是事件发生时，执行JavaScript的触发器。比如点击鼠标或鼠标移动到连接上，提交表单等等。

点击(onClick)

onClick是仅当用户点击按钮，连接等时才去执行程序。让我们看个例子：

<script>

function ss()

alert("Thank you!")

</script>

<form>

<input type="button" value="Click here" onclick="ss()">

</form>

当用户点击按钮时，函数ss() 被调用。注意：事件处理程序并不会被添加到<script>标签内，但会被放入html标签中。

加载（onLoad）

onload 事件处理程序用于调用加载后的JavaScript执行程序：

<body onload="ss()">

<frameset onload="ss()">

<img src="http://t.zoukankan.com/whatever.gif" onload="ss()">

onMouseover , onMouseout

这些处理程序仅仅被用于超链接。

<a href="https://tool.4xseo.com/article/115962.html" onMouseOver="document.write('Hi, nice to see you!">Over Here!</a>

<a href="https://tool.4xseo.com/article/115962.html" onMouseOut="alert('Good try!')">Get Out Here!</a>

onUnload

当有人离开（或刷新）页面时，onunload事件执行JavaScript。比如用作感谢用户。

<body onunload="alert('Thank you for visiting us. See you soon')">

处理多种操作（Handle multiple actions）

你想怎么样使事件处理程序能调用多个函数或者多个语句呢？这很简单。你只需照常把函数嵌入到事件处理程序中即可，不过要使用分号（;）分隔它们。

<form>

<input type="button" value="Click here!" onClick="alert('Thanks

for visiting my site!');window.location='http://www.yahoo.com'">

</form>

表单（Form）

比如说，你有这样一个表单：

<form name="aa">

<input type="text" size="10" value="" name="bb"><br>

<input type="button"

value="Click Here"onclick="alert(document.aa.bb.value)">

</form>

注意我们给了表单名称和元素。因此JavaScript可以获取它们。

onBlur

（也就是当鼠标离开文本框式所触发的事件）如果你想获取用户信息并且逐一检查各项元素（即：用户名，密码，E-mail），以及警告用户纠正错误，然后重新输入时，你可以使用onBlur。让我们看看onblur是如何工作的：

function emailchk()

{

var x=document.feedback.email.value

if (x.indexOf("@")==-1)

{

alert("It seems you entered an invalid email address.")

document.feedback.email.focus()

}

</script></head><body>

<form

name="feedback">

Email:<input type="text" size="20" name="email"

onblur="emailchk()"><br>

Comment: <textarea name="comment" rows="2" cols="20"></textarea><br>

<input type="submit" value="Submit">

</form>

</body></html>

如果你输入的email地址不包含@，你将得到一个重新输入数据的警告。”x.indexOf(@)==-1”

又是什么呢？这是JavaScript的一个方法，它可以在一个字符串中逐个搜索我们想要的字符。如果它找到了，将返回该字符在原字符串中的位置。否则，将返回-1。因此，x.indexOf("@")==-1可以

等价于：”如果字符串中不包含@，然后：

alert("It seems you entered an invalid email address.")

document.feedback.email.focus()

什么是focus()呢？它是让光标回到指定文本框的方法。Onsubmit 不像 onblur ，onsubmit 处理程序只能被放在<form>标签内，其他任何元素也不行。让我们看个例子：

<!--

function validate()

{

if(document.login.userName.value=="")

{

alert ("Please enter User Name")

return false

}

if(document.login.password.value=="")

{

alert ("Please enter Password")

return false

}

//-->

</script>

<form name="login" onsubmit="return validate()">

<input type="text" size="20" name="userName">

<input type="text" size="20" name="password">

<input type="submit" name="submit" value="Submit">

</form>

注意：

if(document.login.userName.value==""). 它的意思是”如果名为login的表单中名为userName的文本框为空，然后...”.返回 false。这被用于停止提交表单。默认地，表单提交后将会返回true。返回validate()，意思是，”如果提交，那就调用function validate()"。

使用登陆包含文件

让我们先看个例子：

function checkLogin(x)

{

if ((x.id.value != "Sam")||(x.pass.value !="Sam123"))

{

alert("Invalid Login");

return false;

}

else

location="main.htm"

}

</script>

</head><body>

<form>

<p>UserID:<input type="text" name="id"></p>

<p>Password:<input type="password" name="pass"></p>

<p><input type="button" value="Login" onClick="checkLogin(this.form)"></p>

</form>

</body></html>

||意思是”或”，!= 表示”不等于”。因此我们可以这样描述脚本：”如果id不等于’Sam’，或者，密码不等于’Sam123’,然后弹出提示框（），并停止提交”。否则将打开”main.htm”页面。

连接（Link）

大多数情况下，表单可以被连接替代。

<a href="JavaScript:window.location.reload()">Click to reload!</a>

更多例子：

<a href="https://tool.4xseo.com/article/115962.html" onClick="alert('Hello, world!')">Click me to say Hello</a><br>

<a href="https://tool.4xseo.com/article/115962.html" onMouseOver="location='main.htm'">Mouse over to see Main Page</a>

日期（Date）

先让我们看个例子：

<HTML><HEAD><TITLE>Show

Date</TITLE></HEAD>

<BODY>

var x= new Date();

document.write (x);

</SCRIPT>

</BODY></HTML>

为了触发日期对象，你可以这样做：var x=new Date（）。无论何时，如果你想创建日期对象的实例，你只需在new后加上对象名（）即可。

动态显示不同页面

你可以在不同时间显示不同页面。这儿给出示例：

var banTime= new Date()

var ss=banTime.getHours()

if (ss<=12)

document.write("<img src='http://t.zoukankan.com/banner1.gif'>")

else

document.write("<img src='http://t.zoukankan.com/banner2.gif'>")

附：日期对象

方法
getDate getTime getTimezoneOffset	getDay getMonth getYear	getSeconds getMinutes getHours

窗口（window）

打开一个窗口

为了打开一个窗口，可以简单地使用”window.open(‘test.htm’)”方法：

<form>

</form>

你可以把test.htm换成其他任何地址，比如：http://www.yahoo.com

尺寸（Size），工具栏（toolbar），菜单栏（menubar），滚动条（scrollbars），位置（location），状态（status）

让我们增加一些脚本属性来控制窗口的尺寸，显示工具栏，滚动条等。增加属性的语法如下：

open("URL","name","attributes")

例如：

<form>

<input type="button" value="Click here to see"

onclick="window.open('page2.htm','win1','width=200,height=200,menubar')">

</form>

另一个例子中，除了尺寸变化外，没有启用其它属性。

<form>

<input type="button" value="Click here to see"

onclick="window.open('page2.htm','win1','width=200,height=200')">

</form>

这儿给出你可以增加的所有属性列表：

width	height	toolbar
location	directories	status
scrollbars	resizable	menubar

重新载入（Reload）

重新载入一个窗口，可以使用下面的方法：

window.location.reload()

关闭窗口

你可以使用下面任意一个实现关闭窗口：

<form>

<input type="button" value="Close Window" onClick="window.close()">

</form>

<a href="javascript:window.close()">Close Window</a>

加载（Loading）

加载新内容到窗口中的基本语法是：

window.location="test.htm"

这等价于：

<a href="http://t.zoukankan.com/test.htm>Try this </a>

让我们给出一个例子，用户可以根据弹出的确认框选择要去的地方：

<script>

<!--

function ss()

var ok=confirm('Click "OK" to go to yahoo, "CANCEL" to go to hotmail')

if (ok)

location="http://www.yahoo.com"

else

location="http://www.hotmail.com"

//-->

</script>

远程控制窗口（Remote Control Window）

比方说，你想在现有的窗口中打开一个新的窗口。然后，你想在两个窗口之间做控制。要做到这一点，我们首先要给窗口命名。请看下面的例子：

<html><head><title></title></head>

<body>

<form>

<input type="button" value="Open another page"

onClick="aa=window.open('test.htm','','width=200,height=200')">

<input type="radio" name="x" onClick="aa.document.bgColor='red'">

<input type="radio" name="x" onClick="aa.document.bgColor='green'">

<input type="radio" name="x" onClick="aa.document.bgColor='yellow'">

</form>

</body></html>

开启器（opener）

我们可以使用”opener”属性来实现从打开的窗口进入新的主窗口。

先让我们创建一个主页：

<head>

<title></title>

</head>

<body>

<form>

<input type="button" value="Open another page"

onClick="aa=window.open('test.htm','','width=100,height=200')">

</form>

</body>

</html>

然后再创建控制页。(此例中命名test.htm)

<html>

<head>

<title></title>

<script>

function remote(url){

window.opener.location=url

</script>

</head>

<body>

<p><a href="https://tool.4xseo.com/article/115962.html" onClick="remote('file1.htm')">File

1</a></p>

<p><a href="https://tool.4xseo.com/article/115962.html" onClick="remote('file2.htm')">File

2</a></p>

</body>

</html>

立刻去试一下！

框架（Frame）

在加载多个框架时，最流行的应用就是在同一时间加载和改变多个框架中的内容。比方说我们有这样一个父框架：

<html>

<frameset cols="150,*">

<frame src="http://t.zoukankan.com/page1.htm" name="frame1">

<frame src="http://t.zoukankan.com/page2.htm" name="frame2">

</frameset>

</html>

我们可以在子框架中增加一个名为”frame1”的链接，它既可以同时改变页面1和页面2的内容。接下来提供实现它的html代码：

<html>

<body>

<h2>This is page 1 </h2>

<a href="http://t.zoukankan.com/page3.htm"

onClick="parent.frame2.location='page4.htm'">Click Here</a>

</body>

</html>

注意：你应该使用"parent.frameName.location"进入另一个框架。父框架的” parent”标准包含框架集代码。

本文摘自：http://www.cnblogs.com/Joyin/archive/2010/04/29/2262126.html

相关文章

Js中清空文件上传字段(input type=file )

selenium---上传文件（非input标签）

ansible 调试 debug 一介凡人

Thymeleaf【快速入门】

js调试工具Console命令详解——转

微信小程序自定义事件

最新文章

随机推荐

思享工具箱导航

JSON工具

格式化转换

加解密编码

文本数字

网络

站长

计算

其他

对照列表