|
变量
还是通过一个实例来学习变量的相关语法：
| 代码如下 |
复制代码 |
|
<!--variables.html-->
[html]
[head]
[script language="JavaScript"]
<!-- hide me
// load up some variables ,定义变量
var hen_num = 3;
var eggs_per_week_each = 5;
var weeks_per_month = 4;
// do some calculations ;计算
var eggs_per_month_each = eggs_per_week_each * weeks_per_month;
var eggs_per_month_all = eggs_per_month_each * hen_num;
//here's how to use JavaScript to write out HTML
//这里介绍如何用JavaScript写变量和网页。
document.writeln("<b>我家母鸡每月生蛋 ");
document.writeln(eggs_per_month_all);
document.writeln(" 个.</b>[p]");
// end hiding -->
[/script]
[/head]
[/html]
<script type="text/javascript">
var a=100;
var b=true;
function test(){
alert(a);
alert(b);
b=false;
alert(b);
var a=200;
alert(a/2);
alert(++Math.PI);
alert(Math.PI++);
}
test();
</script>
|
学习点
①当首次用一变量时，应以“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]
[script language="JavaScript"]
<!-- hide me
var nice_monkey = "猴子对着你?,并读诗.";
var bad_monkey = "猴子对着你皱眉头.";
// 定义变量，并给变量赋值，使它等于这些字符串，于是当你想写这些字符串时，你可写：
document.writeln(nice_monkey+"");
var monkey = prompt("猴子的名字?", "傻猴");
//这里我们称为用户反馈提示方式，当它被调用时，启动一个对话框请求用户输入信息。用
//户完成后敲OK返回信息。在上行中返回信息放入其变量中。
var demanding="想要";
var tech="一台电脑!";
var techy_monkey = monkey + demanding + tech;
document.writeln(techy_monkey+"");
document.writeln(techy_monkey.fontcolor('red');
//这一句的意思是:将字符串 techy_monkey 用红色显示在屏幕上
// end hiding -->
[/script]
[/Head][/Html]
|
学习点
| 代码如下 |
复制代码 |
|
* 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] “);
* document.writeln(bad_monkey +”[br]“);
* 字符串对象：
document.writeln(techy_monkey.fontcolor(’red’);
|
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 对象 |
