JavaScript初学指南

zoukankan html css js c++ java

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>

<script language="JavaScript">



</script>

</head>

<body> Hi, man! </body>

</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="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">
```
```

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

<script>

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="whatever.gif" onload="ss()">
```
onMouseover , onMouseout

这些处理程序仅仅被用于超链接。
```
<a href="#" onMouseOver="document.write('Hi, nice to see you!">Over Here!</a>
```
```
<a href="#" 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是如何工作的：

<html><head><script>

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>标签内，其他任何元素也不行。让我们看个例子：

<script>



</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()"。

使用登陆包含文件

让我们先看个例子：

<html><head>

<SCRIPT Language="JavaScript">

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="#" onClick="alert('Hello, world!')">Click me to say Hello</a><br>
```
```
<a href="#" onMouseOver="location='main.htm'">Mouse over to see Main Page</a>
```
日期（Date）

先让我们看个例子：

<HTML><HEAD><TITLE>Show

Date</TITLE></HEAD>

<BODY>

<SCRIPT LANGUAGE="JavaScript">

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='banner1.gif'>")

else

document.write("<img src='banner2.gif'>")

附：日期对象

方法

getDate getTime getTimezoneOffset

getDay getMonth getYear

getSeconds getMinutes getHours

窗口（window）

打开一个窗口

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

<form>

<input type="button" value="Click here to see" onclick="window.open('test.htm')">

</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="test.htm>Try this </a>
```
让我们给出一个例子，用户可以根据弹出的确认框选择要去的地方：
```
<script>
```
```

```
```
</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="#" onClick="remote('file1.htm')">File
```
```
1</a></p>
```
```
<p><a href="#" onClick="remote('file2.htm')">File
```
```
2</a></p>
```
```
</body>
```
```
</html>
```
立刻去试一下！

框架（Frame）

在加载多个框架时，最流行的应用就是在同一时间加载和改变多个框架中的内容。比方说我们有这样一个父框架：
```
<html>
```
```
<frameset cols="150,*">
```
```
<frame src="page1.htm" name="frame1">
```
```
<frame src="page2.htm" name="frame2">
```
```
</frameset>
```
```
</html>
```
我们可以在子框架中增加一个名为”frame1”的链接，它既可以同时改变页面1和页面2的内容。接下来提供实现它的html代码：
```
<html>
```
```
<body>
```
```
<h2>This is page 1 </h2>
```
```
<a href="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
查看全文

相关阅读:
locate命令详解
 python 爬虫获取文件式网站资源完整版（基于python 3.6）
python 爬虫获取文件式网站资源（基于python 3.6）
利用python 获取网址中的href(基于python 3.6）
springmvc+font-awesome开发出的页面显示方框乱码的解决方法
 2017年6月短学期培训代码总结 -----springMvc
2017年6月短学期培训代码总结 -----JDBC
构建之法第十章典型用户和场景
 构建之法第九章项目经理
 构建之法第八章需求分析

原文地址：https://www.cnblogs.com/zhangwei595806165/p/2547353.html

方法
getDate getTime getTimezoneOffset	getDay getMonth getYear	getSeconds getMinutes getHours

width	height	toolbar
location	directories	status
scrollbars	resizable	menubar