变量
还是通过一个实例来学习变量的相关语法:
代码如下 | 复制代码 |
<!--variables.html--> [html] <script type="text/javascript"> |
学习点
①当首次用一变量时,应以“var”申明。 尽管以var 作为变量申明严格说并不必要,但这是一个好习惯。
②变量名对大小写敏感
③可用document.writeln() 来写文本和网页中的HTML
document.writeln()属于Document 对象的方法,详情请见w3school中文网 HTML DOM教程
为什么第一个alert为undefined,而第二个为true。这问题也可以延伸为——alert(b)时怎么就会找外部的b,而alert(a)时就不会往外面找?!
我们都明白局部变量的优先级大于全局变量,或者说内围作用域的变量的优先级比外围的高。当JS引擎在当前作用域找不到此变量时,它就往外围的作用域找。不过,在这之前,有一个严肃的问题是,究竟当前作用域存不存在这个变量。像javascript这样的解释型语言,基本分为两个阶段,编译期(下面为符合大多数语言的称呼习惯,改叫预编译)与运行期。在预编译阶段,它是用函数来划分作用域,然后逐层为其以 var 声明的变量(下略称为var变量)与函数定义开辟内存空间,再然后对var变量进行特殊处理,统统赋初始值为undefined
变量字符串
别小看JavaScript中字字符串,它的使用相当灵活:
代码如下 | 复制代码 |
<!--string.html--> [html][head]
|
学习点
代码如下 | 复制代码 |
* var secs_per_min = 60; * var bad_monkey = “The monkey scowls at you and burps.”; * var techy_monkey = monkey + demanding + tech; * var monkey = prompt(”What’s the monkey’s name?”, “The monkey”); * document.writeln(”[b]The monkey dances[/b] “); |
prompt ( )属于Window 对象的方法,详情请见w3school中文网的HTML DOM教程
条件语句
If 语句
if (条件) {
条件成立时执行代码
}
If…else 语句
if (条件){
条件成立时执行此代码
}
else{
条件不成立时执行此代码
}
If…else if…else 语句
if (条件1){
条件1成立时执行代码
}
else if (条件2){
条件2成立时执行代码
}
else{
条件1和条件2均不成立时执行代码
}
实例:
代码如下 | 复制代码 |
<!--if_then.html--> [html] [head] [title]If Then Exercise[/title] [script language = "JavaScript"] var color = prompt("What color do you prefer, red or blue? ",""); var adjective; if (color == "red") { adjective = "lurid."; }else if (color == "blue") { adjective = "cool."; }else { adjective = "confused." } var sentence = "You like " + color + "? The monkey thinks you're " +adjective + "[p]"; // stop hiding me --> [/script] [/head] [body] [script language = "JavaScript"] <!-- begin hiding me document.writeln(sentence.fontcolor(color)); // end hiding --> [/script] [/body] [/html] |
链接事件
用户点击一个链结,或将鼠标移到其上,JavaScript发送一个链结事件。
一种链结事件叫做onClick,当用户点击它时才发送。
另一种叫onMouseOver,用户将鼠标移到上面时即发送。
代码如下 | 复制代码 |
[html] [head] [/head] [body] <A onclick="alert('Ooo, do it again!');" href="#">Click on me!</A> <A onmouseover="alert('Hee hee!');" href="#">Mouse over me!</A> [/body] [/html] |
学习点
onClick, onMouseOver
拓展
事件:事件是可以被 JavaScript 侦测到的行为如(鼠标点击;页面或图像载入;鼠标悬浮于页面的某个热点之上;在表单中选取输入框;确认表单;键盘按键)
常用事件
onClick
onload 和 onUnload
onFocus, onBlur 和 onChangeonSubmit
onMouseOver 和 onMouseOut
更详细的内容,请见HTML DOM Event 对象
图片交换
JavaScripts的一个主要应用是其具有使你移动鼠标时图片自动切换功能。
代码如下 | 复制代码 |
[html] [head] [title]图片交换[/title] [/head] [body] <IMG name=the_image src="image/monkey.gif"> <!--这就象一个标准的 <img src= > 标签,只是它被给了一个名字:the_image, 名字是任意取的--> <A onmouseover="document.the_image.src='image/thau.gif';" href="#"> change</A> <!--document.the_image.src='button_d.gif'; 该句是说:“找到叫'the_image'的图片并将其src 变为button_d.gif."--> [/body] [/html] |
再来一个稍复杂的实例。
这个实例要完成这样的一个功能:页面上有两张图片(一上一下),当将鼠标移到下面的图片上是,图片变化,每移动一回,都会变,当点击鼠标时,上面的图片也变成了和下面一样的图片。这样的效果不错吧:
代码如下 | 复制代码 |
<!--image_swapping_2--> [html] [head] [script language="JavaScript"] <!-- hide me var temp = ""; var image1 = 'image/thau.gif'; var image2 = 'image/sky.gif'; var image3 = 'image/monkey.gif' var user_name = prompt("What's your name", ""); if (user_name == ""){ user_name = "流浪人"; } // end hide --> [/script] [/head] [body] [p]<IMG name=brand_image src="image/monkey.gif">[/p] <H3>Browser Configuration</H3> <B>你好, <SCRIPT language=JavaScript> <!-- hide me document.write(user_name); // end hide --> </SCRIPT> </B> [p]将移到下面的图片上,直到找到你喜欢的图片,然后点击它。[/p] [p]<A onmouseover="temp=image1; image1=image2; image2=image3; image3=temp; document.the_image.src=image1;" onclick=document.brand_image.src=image1; href="#"> <IMG border=0 name=the_image src="image/monkey.gif"></A> [/body] [/html] |
学习点
Document.imageObject.src
Document.imageObject.src(只写imageObject.src也行) : HTML DOM Image 对象