JavaScript 基础教程(2)

时间:2021-07-05 14:47:39

*   礁石   ---------事件

大海真不错,很美,海风吹浮着你的脸,感觉不错吧.很浪漫是吗?啊噢,天啊,发生了什么?真不感相信.我鞋掉进了大海里.我发誓,我再也不会把鞋乱放了.把鞋乱放,你是说,你有一个放鞋的动作吗?是的,是这样的.,那就得了.听着,你触发了一个事件.什么?我说你你触发了一个事件.可是什么是事件.噢天啊.就是:参考这篇http://www.csdn.net/develop/read_article.asp?id=16267,也是我写的天气预报呵呵….开个玩笑.事实上,当你把鼠标按下,某一个物体的时候,就会触发一个事件.象这样.

<script>

function  love()

{

alert("I love you baby! You’re my honey!")

}

</script>

<form>

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

</form>

 

把这段代码帖到你的页面中去,然后点下.click here 看看会发生什么?呵呵….希望你是个PLMM,哈哈如果,是男生,那就导胃口了.这里在举几个其它事件的例子,.onload 在加载的时候发生.:

 

<body onload='love()'>

…..

 

body加载的时候发生,还有比方鼠标的停靠和移开等等.当然,一个对象的事件不会只做一件事情.例如,你可以象她表白,当然,还可以送上一速鲜花.等等.,等等,我们遇上礁石了.船颠簸的厉害,看样子要找个地方靠岸…….

 

  *   避难所 -------- Form (表单)

,,,,不错啊,我找到了一个避难所.这似乎有不少东西可以来利用.可以给我们的朋友发信号.是吗?,他们来救我们,否则,我们只有等死了.

 

<form name="help">

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

<input type="button"

value="Click Here"onclick="alert(document.help.me.value)">

</form>

 

看见什么了吗?可以自己输入,信号然后给我们的朋友发.哈哈也许,你还需要把你的详细联系方式提供给你的朋友,如email 住址等等。那么你可以这样。

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

<formname="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>

 

看到这段代码,我们该注意些什么。看看if 里面,如果你的email栏目中没有填写‘@’那么将会弹出一个警告,然后焦点又回到了EMAIL栏目中。焦点就是靠focus()这个函数来完成.好吧,让我们看看可以从船上找点吃的东西吗?由于害怕,有别的什么生物闯进我们的船因此设置了密码。所以你必须先登录。口令是:yarshray 密码是:loveyarshray (嗨,你可别指望我傻到会把我的用户名和密码帖出来。我可没那么笨。哈哈。。。。)

<html>

<head>

<SCRIPT Language="JavaScript">

function checkLogin(x)

{

if ((x.id.value != "yarshray")||(x.pass.value !="loveyarshray"))

{

       alert("Invalid Login");

       return false;

}

else

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

}

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

 

试试看,如果输入正确了口令和密码,那么你将可以访问到yahoo.祝你好运。

  *   传送点 --------- Link(连接)

已经一个星期了,我想我有些绝望了.事实上,船上剩下的粮食不多了.我绝望的在海边寻找着食物,可是奇迹发生了.知道了我发现了什么吗?是传送点.我想我可以回去了.呵呵….上天对我还真不错.

<a href="#" onClick="alert('thank ones lucky stars ')">thank one's lucky stars</a>

<a href="#" onMouseOver="location='main.htm'">come back to my home</a>

第一连接,让我们感谢上天,第二个让我们可以回家.

 

  *   日历 --------- Date(日期)

回家以后我的第一件事情,那就翻日历,我想知道,我究竟去了多少日子.

 

<HTML><HEAD><TITLE>Show

Date</TITLE></HEAD>

<BODY>

<SCRIPT LANGUAGE="JavaScript">

var x= new Date();

document.write (x);

</SCRIPT>

</BODY></HTML>

 

看见了,整整是一周.因为它显示的是,现在的日期,那么很容易推算,我失踪的这段时间.在来看看,这个日历可以提供我们些什么.

getDate

getTime

getTimezoneOffset

getDay

getMonth

getYear 

getSeconds

getMinutes

getHours

 

功能还挺全面,是吗,真不错.

  *   传送卷轴---------window(窗口)

这是一个比较有趣的论题。当你安坐在家里,是否常常想,看看外面,看看新闻什么的。那么可以通过窗口。窗口对象,基本上就是你的浏览器。它的属性和方法基本上就是在操作你的浏览器。基本的操作,如open就是在完成打开操作,如同一个传送卷轴一样把我们带到

任何想去的地方。如:

<form>

<input type="button" value="try it"

onclick="window.open('http://www.csdn.net','win1','width=200,height=200')">

</form>

 

看上去象什么?一个广告是吗?是的,很多网站就是这样的。看上去真讨厌。

Open有三个参数,第一个URL地址。第二个目标,第三个样式。下面提供相关的样式属性。

width

height

toolbar

location

directories

status

scrollbars

resizable

menubar

 

如果,你想清空表单里的内容,那么你可以这样

 

 

<a href="javascript:window.location.reload()">clear form</a>

 

这里主要的是reload()方法。实际上还有很多内容,建议参考,我下面给出的连接。哪儿有你想知道的一切内容。

  *   多度空间 -------- Frame(框架)

也许,这个时候,你更想体验一下,多度空间的历险.是个好注意,而且并不冒险.也有人把它比喻成野餐拼盘.也许,你既希望一边查看CSDN的栏目,又想看看yahoo的新闻,那么,你完全可以这样:

<html>

<frameset cols="150,*">

<frame src="http://www.csdn.net" name="frame1">

<frame src="http://www.microsoft.com.cn" name="frame2">

</frameset>

</html>

一切都是那样的轻松.不是吗,没有什么可以阻止你在家里享受网络带来的快感,当然,你可以用这些来钓MM,如果你MM,我想当在有男生象你炫耀的时候,你可以对他说,”嘿走远点,这些我也会.”哈哈….好了,再见了,各位,下次见.

 

参考资料如下:

http://wp.netscape.com/eng/mozilla/3.0/handbook/javascript/

http://www.microsoft.com/china/msdn/library/