转换为语音并朗读全文 00:00 / 00:00
虽然这个基础知识很基础了,但是我还是要mark一下。

20130524142740

JavaScript语言基本知识

一、JavaScript脚本语言的特性

JavaScript脚本语言是一种面向浏览器的网页脚本编程语言。脚本语言有以下几个特性:

  1. 在客户端执行。完全在用户的计算机上运行,无须经过服务器。
  2. 面向对象。具有内置对象,也可以直接操作浏览器对象。
  3. 动态变化。可以对用户的输入作出反应,也可以直接对用户输出。
  4. 简单易用。JavaScript脚本语言虽然简单,但初学者也能快速掌握。
  5. 只能与HTML语言一起使用。要通过浏览器解释执行。

二、如何在HTML中加入JavaScript脚本

JavaScript采用的格式如下:

<script type="text/javascript" language="JavaScript">JavaScript 语句</script>

把上述语句放在HTML的<head></head>之间,也可放在<body></body>之间。
例子:在网页上显示“你好!

<html>
<body>
<Script Language="JavaScript">
alert("你好!")
</script>
</body>
</html>

三、在浏览器地址栏直接执行JavaScript脚本

可以在浏览器的地址栏中输入JavaScript语句,由浏览器直接执行。
如输入:

javascript:alert(1+1)

弹出窗口,显示结果“2”

四、调用JavaScript文件

可以将纯JavaScript的语句另外保存在一个*.js的文件中,需要时再调用。
例子:调用test.js文件,显示提示。

<html>
<body>
调用test.js文件
<script language="JavaScript" src="test.js">
</script>
</body>
</html>

test.js的文件内容如下:

alert("这是被调用的语句")

五、注释语句

<!- ... ->表示注解部分,用作说明解释,浏览器不显示出来。不要也可以。
另外,双斜线 // ,是JavaScript的注释语句,它后面的语句不被执行。

六、变量的使用

变量的声明:Var usename
变量的赋值:usename="麦田一根葱"
例子:在网页上显示“麦田一根葱最帅了!”。

<html>
<body>
<Script Language="JavaScript">
Var usename
usename="麦田一根葱"
alert(usename + "最帅了!")
</script>
</body>
</html>

七、数组

数组的定义:var name=new Array(5)new 来生成数组。
数组的赋值:name[1]="Marry"
数组的初始化:var name=new Array("Marry","Petty","Mike","Jphn")
数组的引用:name[1]
:数组的第一个素由1开始。

八、运算符与表达式

  1. 代数运算符:加(+)、减(-)、乘(*)、除(/)、取余(%)。
  2. 比较运算符:等于(==)、不等于(!=)、大于(>)、小于(<)、大于等于(>=)、小于等于(<=)。
  3. 逻辑运算符:逻辑与(&&)、逻辑或(||)、逻辑非(!)。
  4. 表达式:由变量和运算符组成的式子。如:usename + "你好!"

JavaScript控制结构和函数

 一、if 条件语句

if - else 条件语句,当条件为真时执行语句1,当条件为假时执行语句2。
其格式如下:

if (条件) 语句1
else 语句2

例子:根据时间显示“早上好!

<html>
<body>
<script language="JavaScript">
var NowTime=new Date()
NowTime=NowTime.getHours()
if (NowTime > 11 && NowTime <= 13) alert("中午好!")
else if (NowTime > 13 && NowTime <= 18) alert("下午好!")
else if (NowTime >= 0 && NowTime <= 9) alert("早上好!")
else if (NowTime > 9 && NowTime <= 11) alert("上午好!")
else alert("晚上好!")
</script>
</body>
</html>

二、switch 选择判断语句

switch 选择判断语句,当表达式的值与 case 的值相同时,执行相应的语句。
其格式如下:

switch(表达式)
{
case 标号1
语句1
break
case 标号2
语句2
break
......
default
语句3
}

例子:显示今天是星期几。

<html>
<body>
<Script Language="JavaScript">
today=new Date()
switch(today.getDay())
{
case 0:
alert("今天是星期日。")
break
case 1:
alert("今天是星期一。")
break
case 2:
alert("今天是星期二。")
break
case 3:
alert("今天是星期三。")
break
case 4:
alert("今天是星期四。")
break
case 5:
alert("今天是星期五。")
break
case 6:
alert("今天是星期六。")
break
}
</script>
</body>
</html>

三、for 循环语句

for 语句,根据循环条件,反复执行循环语句操作。
其格式如下:

for(初始化;循环条件;循环操作){操作}

例子:显示八种不同大小和颜色的字。

<html>
<body>
<script language="JavaScript">
document.write("<center>")
for (i=1; i<8; i++){
document.write("<font color="+i*1000+" size="+i+">www.yuxiaoxi.com</font><br>")
}
document.write("</center>")
</script>
</body>
</html>

四、do ... while 循环语句

do ... While 语句,内部的语句被反复执行,直到条件不符合。
其格式如下:

do
{
语句
}
while(条件)

例子:求1+2+3+...加至100的和。

<html>
<body>
<script language="JavaScript">
var n=0,i=1
do
{ n=n+i
i=i+1}
while(i<=100)
alert("总和:"+n)
</script>
</body>
</html>

五、While 循环语句

while 语句,当符合条件时,执行循环体内的语句。
其格式如下:

while(条件)
{
语句
}

例子:求1+2+3+...加至100的和。

<html>
<body>
<script language="JavaScript">
var n=0,i=1
while(i<=100)
{ n=n+i
i=i+1}
alert("总和:"+n)
</script>
</body>
</html>

六、函数的使用

  1. 函数:是用户定义的一组语句,它能完成一定的功能,有一个名字。
  2. 函数的定义:function name(参数){语句}
  3. 函数的调用:name(参数)varname=vame(参数)

例子,功能:单击按钮时,onclick事件调用函数pushbutton,显示"欢迎来到麦田一根葱的博客!"。

<html>
<head>
<script language="JavaScript">
function pushbutton() {
alert("欢迎来到麦田一根葱的博客!") }
</script>
</head>
<body>
<form>
<input type="button" value="看一眼" onclick="pushbutton()">
</form>
</body>
</html>

JavaScript表单元素和事件编程

一、HTML表单元素和它们的事件

表单元素:窗体按钮复选钮单选钮文本框密码框文本区发送按钮清除按钮选择列表

  1. onLoad事件:浏览器装入Web网页时,产生onLoad事件。
  2. onClick事件:用户用鼠标单击“按钮”等元素时,产生onClick事件。
  3. onChange事件:当文本框等元素的内容改变时,产生onChange事件
  4. onFocus事件:当文本框等元素的得到焦点时,产生onFocus事件
  5. onBlur事件:当文本框等元素的失去焦点时,产生onBlur事件
  6. onMouseOver事件:当鼠标移动到对象上面时,产生onMouseOver事件。
  7. onMouseOut事件:当鼠标离开对象时,产生onMouseOut事件。

常常将表单与事件结合起来使用,利用表单取得用户的输入,然后通过事件触发,来调用JavaScript函数来进行处理。

二、onclick事件例子,单击按钮时,onclick事件跳转到另一网页。

<html>
<body>
<form>
<input type="button" value="我要留言"
onclick="javascript:top.location='http://www.yuxiaoxi.com/guestboolk'">
</form>
</body>
</html>

三、onBlur事件例子:将文本输入框中的输入内容显示出来

<html>
<head>
<script language="JavaScript">
function getname(str) { alert("您输入的是:"+ str ); }
</script>
</head>
<body>
输入内容然后点击空白处:
<form>
<input type="text" onBlur="getname(this.value)" value="">

</form>
</body>
</html>

这个例子用<input>输入框的onBlur事件函数以取得输入字串,并将它显示在对话窗上。函数 getname(this.value) 中的
this.value 是你在文字输入格式中所输入的值。

四、利用 onMouseOver 事件调用函数 hello() ,显示当天日期。

<html>
<head>
<script language="JavaScript">
function hello() {
today=new Date()
alert("今天是:"+today.toString()) }
</script>
</head>
<body>
<a href="" onMouseOver="hello()">显示日期</a>
</body>
</html>

JavaScript内置对象及其方法

一、JavaScript内置对象

JavaScript语言内置了一些对象,利用它可以方便地实现某些复杂的功能。
内置对象有以下几种:

  1. Date:日期对象。
  2. Math:数学对象。
  3. String:字符串对象。

二、日期对象 Date

日期对象Date代表的是有关日期与时间的信息,以及处理这些信息的方法。
使用语法如下:

dataname=new date(参数)

其中参数为:Month,Day,Year,Hours:Minutes:Seconfs格式的字符串。
Date对象的几种常用方法:

  1. getDay:星期几。
  2. getHours:当前小时。
  3. getMinutes:当前分钟。
  4. getSeconds:当前秒数。
  5. toString:以字符串表示的当地日期。

例子:显示访问者浏网页时的年份。

<html>
<body>
<Script Language="JavaScript">
today=new Date()
alert("今年是:"+today.getYear()+"年。")
</script>
</body>
</html>

三、数学对象 Math

数学对象Math主要完成某些计算功能。
Math对象常用的方法有:

  1. abs():取绝对值。
  2. min():两者中取小值。
  3. max():两者中取大值。
  4. random():取1到51之间的随机数。
  5. round():取最接近该数字的整数。
  6. sqrt():取平方根。

例子:求三个数A、B、C中的最大值。

<html>
<body>
<script language="JavaScript">
A = "333"
B = "222"
C = "123"
var A,B,C,d,MAX
d=Math.max(A,B)
MAX=Math.max(d,C)
alert(MAX)
</script>
</body>
</html>

四、字符串对象 String

字符串对象最常使用,不需要用"new"语句去创建它。下面的语句创建了三个字符串对象:

  • E_mail="i@yuxiaoxi.com"
  • name="yuxiaoxi"
  • title="我的邮箱"

字符串对象的属性length,将返回字符串的长度。
字符串对象常用的方法:

  1. ToLowerCase():将字符串所有的字符转为小写形式。
  2. ToUpperCase():将字符串所有的字符转为大写形式。
  3. SubString(start,end):返回start到end的子串。
  4. Bold():相当于在字符串前后加上<b>与</b>标记。
  5. Link(URL):将字符串转换成这种格式:<a href="/blog/URL>";string</a>

字符串例子:显示文字

<html>
<body>
<script language="javascript">
function writes(names){
document.write(names+"<p>")
document.write(names.bold().fontsize(25))
}
writes("这是JavaScript脚本")
</script>
</body>
</html>

字符串例子:将用户输入的内容转换为大写形式。

<html>
<head>
<script language="JavaScript">
function texttoUp(str)
{ var result=str.toUpperCase();
document.form1.text2.value=result;}
</script>
</head>
<body>
<form name="form1">
<input type="text" name="text1" onChange="texttoUp(this.value);">
<input type="text" name="text2">
</form>
</body>
</html>

JavaScript浏览器内置对象及其方法

一、浏览器的内置对象

浏览器的内置对象主要集中在文档和窗口对象上,它包括以下几种:

  • Window:代表客户机上浏览器的窗口。
  • Location:代表当前URL的信息。
  • History:代表用户浏览器的历史记录。
  • Document:代表HTML中在<body>与</body>标记中间的部分。

二、Window对象的属性和方法

Window对象共有七个属性:

  1. defauleStatus:指定窗口状态栏中的信息。
  2. status:指定当前窗口状态栏中的信息。
  3. frames:是一个数组,其中内容是窗口中所有的框架。
  4. parent:指当前窗口的父窗口。
  5. self:指当前窗口。
  6. top:代表当前所有窗口的最顶层窗口。
  7. window:代表当前窗口。

Window对象有五个方法:

  1. alert:显示带有一个“确定”按钮的对话框。
  2. confirm:显示带有“确定”与“取消”两个按钮的对话框。
  3. prompt:显示带有输入区的对话框。
  4. open:打开一个新窗口。
  5. close:关闭用户打开的窗口。

status属性例子:在窗口状态栏显示和清除文字
单击"写入文字"按钮,在状态栏显示'这是状态栏'。按"清除文字"按钮,清除状态栏的文字。

<html>
<head>
<script language="JavaScript">
function statbar(txt) {
window.status = txt; }
</script>
</head>
<body>
<form>
<input type="button" name="look" value="写入文字" onclick="statbar('这是状态栏');">
<input type="button" name="erase" value="清除文字" onclick="statbar('');">
</form>
</body>
</html>

alert方法例子:显示“大家来学习JavaScript脚本语言。”的对话框。

<html>
<body>
<script language="JavaScript">
alert("大家来学习JavaScript脚本语言。")
</script>
</body>
</html>

Confirm方法例子:让用户选择是否进入下一页。
用confirm显示选择对话框,按“确定”进入next.html,按“取消”不进入。

<html>
<body>
<script language="JavaScript">
if(confirm("你想进入下一页吗?"))
location="next.html"
</script>
</body>
</html>

Prompt方法例子:让用户输入姓名,并将它显示出来。
用prompt显示输入对话框,让用户输入姓名,再用alert对话框显示出来。

<html>
<body>
<script language="JavaScript">
var name
name=prompt("请输入姓名","麦田一根葱")
alert("你好,"+name)
</script>
</body>
</html>

Window对象方法例子
当打开网页时,立即打开另一窗口,显示test.html

<html>
<body onload="javascript:window.open('test.html')">
</body>
</html>

三、History对象的属性和方法

History对象只有一个length属性,它表示历史对象中的链接的数目。
History对象有以下方法:

  • back:在浏览器中显示上一页。
  • forward:在浏览器中显示上下页。
  • go(int):在浏览器中载入从当前算起的第int个页面。

History例子:具有“上一页”、“下一页”按钮的页面。

<html>
<body>
<form>
<input type="button" value="上一页" onClick="history.back()">
<input type="button" value="下一页" onClick="history.forward()">
</body>
</html>

四、Document对象的属性和方法

Document对象有以下属性:

  1. alinkColor:活动链接颜色。
  2. linkColor:链接颜色。
  3. vlinkColor:已访问过的链接颜色。
  4. anchors:页内链接。
  5. bgColor:背景颜色。
  6. fgColor:前景颜色。
  7. cookie:“小甜饼“,cookie。
  8. forms:表单元素。
  9. lastModified:文档最后修改的时间。
  10. links:超链接。
  11. location:当前文档的URL。
  12. referer:在用户跟随链接移动时,包含主文档的URL字符串值。
  13. title:文档标题。

Document对象有四个方法:

  1. write:向文档输出。
  2. open:打开文档。
  3. close:关闭文档。
  4. clear:清除打开文档的内容。

Document例子:将当前窗口的背景色设为绿色。
使用document.bgColor属性设定背景色。

<html>
<body>
<script language="JavaScript">
top.document.bgColor="green"
</script>
</body>
</html>

Document例子:在当前窗口中以白前景色和绿背景色显示文字。
使用document.bgColor属性设定背景色,使用document.fgColor属性设定前景色,使用document.write方法显示文字。

<html>
<body>
<script language="JavaScript">
top.document.bgColor="green"
top.document.fgColor="white"
top.document.write("<h1>绿底白字</h1>")
</script>
</body>
</html>

Document例子:在窗口标题中显示文字

<html>
<body>
<script language="JavaScript">
top.document.title="这是标题"
</script>
</body>
</html>

Document例子:显示文件最后修改日期
当鼠标移动到表格上时,表格背景色改变!

<html>
<body>
网页内容的最后修改日期:
<script language="JavaScript">
document.write(document.lastModified);
</script>
</body>
</html>

注意:JavaScript 本身是会区分大小写的,lastmodifiedlastModified在它看来是不同的结果。

JavaScript应用实例

一、 Window对象例子1:打开一个新窗口

当打开这个网页时,利用 onload 事件,将首先自动打开一个窗口,并显示另一个文件box.html

<html>
<head>
<script language="JavaScript">
function openWindow(theURL,features)
{ window.open(theURL,"winName",features);}
</script>
</head>
<body onload="openWindow('box.html','width=550,height=100')">
</body>
</html>

二、 Window对象例子2:打开一个新窗口

当单击超链接时,利用链接指向的函数,将首先自动打开一个窗口,并显示另一个文件box.html

<html>
<head>
<script language="JavaScript">
function openWindow2(theURL,widths,heights)
{ window.open(theURL,"winName","width=" & widths & "," & "height=" &
heights);}
</script>
</head>
<body>
<a href="javascript:openWindow2('box.html','550','300')">单击这里打开新窗口</a>
</body>
</html>

三、 Window对象例子3:在一个新窗口中显示内容

打开一个新窗口,该窗口无工具栏,无地址栏,无导航条,无状态栏,无菜单、有滚动条,不能改变大小。窗口宽660,高480。

<html>
<script language="javascript">
function callpage(htmlurl){
var newwin=window.open
(htmlurl,"newWin","toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,
resizable=no,top=2,left=2,width=660,height=480");return false;}
</script>
<body>
<a href="newindex.html" onClick="return callpage(this.href);">进入麦田一根葱的博客</a>
</body>
</html>

四、产生一个新窗口并显示信息

<html>
<head>
<script language="JavaScript">
function WinOpen() {
msg=open("","DisplayWindow","toolbar=no,directories=no,menubar=no");
msg.document.write("<head><title>我是标题!</title></head>");
msg.document.write("<center><h3>这是JavaScript产生的新窗口!</h3></center>");
}
</script>
</head>
<body>
<form>
<input type="button" name="button1" value="单击" onclick="WinOpen()">
</form>
</body>
</html>

五、产生随机数

<html>
<head>
<script language="JavaScript">
function RandomNumber() {
today = new Date();
num = Math.abs(Math.sin(today.getTime()));
return num;
}
</script>
</head>
<body>
<script language="JavaScript">
document.write("这是一个随机数:", RandomNumber());
</script>
</body>
</html>

做法是以上一个例中的时间函数,它会产生一个很大的数,利用这个数再做正弦函数(sin)的运算, 得到的数再做绝对值的运算,结果可以得到一个介于 0 与 1 间的数。(时间的变化单位是毫秒。)

六.onMouseOveronMouseOut事件例子,当鼠标移动到表格上时,表格背景色改变!

<html>
<body>
<script language="javascript">
function mOvr(obj,clrOver) {
if (!obj.contains(event.fromElement)) {
obj.bgColor = clrOver; }}

function mOut(obj,clrIn) {
if (!obj.contains(event.toElement)) {
obj.bgColor = clrIn; }}
</script>
<p align="center">当鼠标移动到表格上时,表格背景色改变! </p>
<table border="1">
<tr>
<td onmouseout="mOut(this,'#00ffff');"
onmouseover="mOvr(this,'#ff0000');">这是一个表格</td>
</tr>
</table>
</body>
</html>

this是Javascript的一个关键字,代表当前的对象,可以在对象方法中来引用。

如果你觉得文章不错,可以给点小小奖励~

微信

微信

支付宝

支付宝

带符号 * 的表示必填项
  1. aTool
    aTool

    给你看一个非常牛逼的!http://www.atool.org/tetris.php

    回复
    1. 麦田一根葱
      麦田一根葱博主

      这个我也有哦,在导航的小游戏里: http://www.yuxiaoxi.com/demo/Tetris.html

      回复
  2. 梦月酱
    梦月酱

    很基础 不过慢慢来很好

    回复
  3. 黎健雄
    黎健雄

    这个必须学习。。真的,不过还没有时间看。

    回复
    1. 麦田一根葱
      麦田一根葱博主

      @黎健雄: 我最近也在学习JS :fendou: 加油

      回复