JavaScript初级教程(第二课)_基础知识

上一讲我们学了JavaScript出现在何处，看起来象什么。现在我们开始学习这种语言。本课我们将学习JavaScript如何存储信息，如何根据信息作决定，如何根据用户交互要求交替图片
    准备好了吗? 现在开始学习电脑编程基础。 第一讲, 变量。
    如果你学过代数，你一定见过变量。如果没学过也不要紧。变量是JavaScript存储信息的简单方式。例如，当你写："x=2," "x"是一个变量，它存储值为2。如果而后你又说"y=x+3,","y"将具有值“5”
    这里是一个使用变量的JavaScript例子。
    在本例中我们一步一步浏览源码 你将看到: 
    
    这里没什么新鲜的，是一个JavaScript片的结束。
    这是该例中头文件中JavaScript的全部，当JavaScript执行这些代码时，上述变量将被定义。但此时这些变量尚未做任何事，这是在该例主体中要完成的事。

现在我们已经定义了变量，让我们用它来做一些事。
    
    当你完成该工作后，该开始if子句练习了。

"if"子句的应用可以使得程序根据用户输入的值作出不同的反应。例如你可以写一段程序使得它对你与对其他人反应不同。这里是它的基本格式：
    if (some condition is true)
    { 
        do something;
        do something;
        do something; 
    }
    本结构的重要部分: 
    以单词 "if"开始 (if 必须小写). 
    圆括弧中是条件：非真即伪。 
    如果条件为真的话执行花括弧中的语句。 
    记住：空格是唯一保持程序可读性的东西。当然你可以将整个if语句写在一行中，但它读起来就费劲了。
    这里是一个if子句的例子。
    
    如果你在即时对话框中键入yes，你将收到一个亲切的问候。若敲入别的则没有。
    这里是该语句的核心：
    var monkey_love = prompt("你喜欢网猴吗？","敲入是或否。");
    if (monkey_love == "是")
    {
    alert("谢谢！很高兴您能来这儿！请往下读吧！");
    }
    第一行你见过。它唤起一个对话框并将用户的反馈调入变量monkey_love中。但第二行就有些不同：它有个条件，即如果变量monkey_love等于值"是" ，则运行花括号中的语句。若它等于其他值，则不运行。
    注意该条件中的两个等于标记，这是人们容易搞混的地方之一。如果你只用一个标记，实际上是告诉JavaScript测试是否monkey_love等于 "是"。幸运的是，多数浏览器在你运行这些语句时会识别这些错误并警告你。但最好现在开始就注意别犯这种错误。
    其他重要的条件是：
    (variable_1 > variable_2)  is true if variable_1 is greater than variable_2
    (variable_1 < variable_2) is true if variable_1 is less than variable_2
(variable_2 <= variable_2) is true if variable_1 is less than or equal to variable_2
(variable_1 != variable_2) is true if variable_1 does not equal variable_2
有两个方法可使你的条件更合理：
在运行花括号中的语句前如果你想要两件事为“是”，可这样做：
if ((variable_1 > 18) && (variable_1 < 21)) 
    {
      document.writeln("variable_1 can vote, but can't drink.");
    }
    注意这里的两个“&&”在JavaScript中这是“与”的意思。也注意整个子句有两个部分，&&须在圆括号中。
    若想两件事之一为真，这样做：
    if ((variable_1 == "bananas") || (variable_1 == "JavaScript")) 
    { 
      document.writeln("The monkey is happy because it has " +   variable_1);
    }
    回到if练习中来! 
    

一旦用户点击一个链结，或将鼠标移到其上，JavaScript发送一个链结事件。一种链结事件叫做onClick, 当用户点击它时才发送。另一种叫onMouseOver，用户将鼠标移到上面时即发送。

    你可用这些事件来影响用户所见。

    第一个有趣的事情是没有<script> 标签。这是因为出现在onClick 和 onMouseOver引号中的任何事都是可为JavaScript理解的。事实上句末前的引号内允许你将JavaScript写成一行，你可将整个JavaScript程序放在一个onClick的引号内，但看上去会很难看。 <br><br>    请看第一行： <br><br>    <a href="#" onClick="alert(&#39;Ooo, do it again!&#39;);">Click on me!</a> <br><br>    这就象一个正式的定位标签，但它具有神奇的onClick=""这即说“当某人点击该链结时运行该引号中的JavaScript”注意在alert后有一分号。 <br><br>    也请注意在href=""的引号中没有东西，这表明虽然有链结，但当你点击时那儿也去不了。 <br><br>    下一行是： <br><br>    <a href="#" onMouseOver="alert(&#39;Hee hee!&#39;);">Mouse over me!</a> <br><br>    这就象第一行，只是用onMouseOver代替onClick。 <br><br>    现在我们学完了链结事件，请进入奇妙的图片交替！ <br><br>JavaScripts的一个主要应用是其具有使你移动鼠标时图片自动切换功能。 <br><br>    这里是一个快捷的基本的图片交换例子。 <br><br>    <img src="button_r.gif" name="the_image"> <br>    <a href="#" onMouseOver="document.the_image.src=&#39;button_d.gif&#39;;">change</a> <br><br>    让我们一步布的剖析这个例子， <br><br>    第一行是： <br><br>    <img src="button_r.gif" name="the_image"> <br><br>    这就象一个标准的 <img src= > 标签，只是它被给了一个名字：the_image， 名字是任意取的：my_image, a_box......但不许有任何空格在里面。 <br><br>    下一行是： <br><br>    <a href="#" onMouseOver="document.the_image.src=&#39;button_d.gif&#39;;">change</a> <br><br>    这是图片交换发生的地方。就象你以前见到的onMouseOver。 <br>    出现在onMouseOver的引号中JavaScript主要之处是： <br><br>    document.the_image.src='button_d.gif'; <br><br>    该句是说：“找到叫'the_image'的图片并将其src 变为button_d.gif." 注意整个语句使用双引号，而'button_d.gif' 使用单引号。尽管二者可互换，但注意如果一组引号存在于另一组引号之中，别搞混了。你可写成" 'something' "或' "something" ' ，但不可写成：" 'something" ' 或 ""something" ".明白了吗？ <br><br>    正如我没告诉你许多document.writeln() 工作细节一样，本例我也没有告诉图片交换的工作原理。你将在下一讲关于“目标导向编程”及“文件目标模块”中详述。 <br><br>    请注意！要交换的图片须和原图片尺寸一样！否则，它变形。 <br><br>    下面是两段代码。(注:感兴趣的话看看，这里没有讲解，可以跳过) <br><br>    <script language="JavaScript"> <br>    <!-- hide me <br/><br/> var temp = ""; <br/> var image1 = &#39;netteach.gif&#39;; <br/> var image2 = &#39;phtshop1.gif&#39;; <br/> var image3 = &#39;newhome.gif&#39; <br/><br/> var user_name = prompt("What&#39;s your name", ""); <br/> if (user_name == "") <br/> { <br/> user_name = "stranger"; <br/> } <br/> document.write(user_name); <br/> // end hide --> <br>    </script>

    

现在来复习一下今天所学到的。 

    变量 
    变量值可为数字或字符串。命名变量时它有一些限制和规律需记住。 
　 
    语句 
    语句以半圆括号结束。

    字符串 
    字符串是引号标记中的做法序列，引号可是单引号，也可是双引号。可用字符串作许多奇妙之事。你可用”＋“来连接两个字符串。

    document.writeln() 
    可用document.writeln() 来写文本和网页中的HTML。 

    prompt 
    你可用prompt来得到用户的输入反馈。 

    if--else 
    可用if--else子句使你的JavaScript依不同的用户反应给予不同的表现。 

    链接事件 
    在一个href中的onClick和onMouseOver可基于用户反应运行JavaScript。 

    图片变换 
    图片命名后，可用JavaScript改变所显示的图片。

    如果你感到你已经全部掌握了上面我们所讲的，那么祝贺你！
    还有许多东西要学。下一次，我们要切入JavaScript的心脏: 文档对象模型，我们也将学到如何打开并操作窗口和frames , 并开始建造我们自己的新的浏览器。