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

上一讲我们学了javascript出现在何处，看起来象什么。现在我们开始学习这种语言。本课我们将学习javascript如何存储信息，如何根据信息作决定，如何根据用户交互要求交替图片
    准备好了吗? 现在开始学习电脑编程基础。 第一讲, 变量。
    如果你学过代数，你一定见过变量。如果没学过也不要紧。变量是javascript存储信息的简单方式。例如，当你写："x=2," "x"是一个变量，它存储值为2。如果而后你又说"y=x+3,","y"将具有值“5”
    这里是一个使用变量的javascript例子。
    在本例中我们一步一步浏览源码 你将看到: 
    <script> <br/> <!-- hide me <br/> 开始的这两行我们已经见过。这是任何javascript程序都必须的序曲。 <br/> // load up some variables <br/> var secs_per_min = 60; <br/> var mins_per_hour = 60; <br/> var hours_per_day = 24; <br/> var days_per_year = 365; <br/> 第一行是一个注释。含义很明确。 <br/> 下几行是变量申明，有几样事情需注意： <br/> 当首次用一变量时，应以“var”申明。 <br/> 尽管以var 作为变量申明严格说并不必要，但这是一个好习惯。当我们讨论接下来的两课时，我们将知道为什么。 <br/>　 <br/> 变量必须以字母或强调性字符起始。 <br/> 第一个字符后，变量可以有数字。因此monkey_23即是合法的变量名。 <br/> 变量名多数是大小写敏感的，但对不同版本的javascript也不尽然。 <br/> 这意味着变量loop和loop在有些浏览器中是不同的。一般情况下，建议坚持使用一种命名习惯并保持不变。我本人 <br/>习惯使用变量间加下划线。其他人有喜欢变量间首字大写的，如secspermin。 <br/> 变量应描述其目的。 <br/> 象 x, y, 或hack_hack_hack对想要了解你的语言的人来说没有什么用。别使变量名太长以致敲起来费劲，但要长 <br/>到有一定的描述力。 <br/> 在定义变量时就可赋于其一个值，也可今后在给出。 <br/> 在该例中每个变量开始定义时就被赋于了值。不一定非如此，今后的例子中我们将看到即使我们不知道其值，我 <br/>们也可很好的定义它。 <br/>　 <br/> 语句以分号结束。 <br/> 语句是javascript的表达句，分号是结束标志。空格和空行是可被javascript编译器忽略的，他们仅是为人们读 <br/>起来方便，该例可被写成长长的一行，但即使加上注释，看起来也会极其吃力。 <br/> 结束前我要提一下有时半括弧是不必须的，你可能也注意到有的人编的语句没有分号作为结束。但加上它是个好 <br/>习惯，这不仅是由于你的程序的可读性会好的多，这也可减少空行，这些空行会塞满你的程序webmonkey的习惯是 <br/>在每一语句后加上半括弧作为结束。 <br/> // do some calculations <br/> var secs_per_day = secs_per_min * mins_per_hour * hours_per_day; <br/> var secs_per_year = secs_per_day * days_per_year; <br/> 这里我们看到了一些基本的算术。每当javascript执行了该语句，变量secs_per_year将是无论得到的什么数乘以60, 60,24, 和 365。以后，无论何时遇到变量secs_per_year，它将以这些巨大的数字替代。 <br/> // end hiding --> <br/> </script>
    这里没什么新鲜的，是一个javascript片的结束。
    这是该例中头文件中javascript的全部，当javascript执行这些代码时，上述变量将被定义。但此时这些变量尚未做任何事，这是在该例主体中要完成的事。

现在我们已经定义了变量，让我们用它来做一些事。
    <script> <br/> <!-- hide me <br/> 这里介绍如何用javascript写变量和网页。 <br/> // here&#39;s how to use javascript to write out html <br/> document.writeln("<b>the monkey dances "); <br/> document.writeln(secs_per_year); <br/> document.writeln(" seconds per year.<p>"); <br/> 这里是关于这三行的兴趣点： <br/> document.writeln() 对于网页写入插入词。 <br/> 在document.writeln()中可作大量细节之事，但到此为止你只需记住你是在<script>和</script>标签之间，必须用document.writeln("blah!")在网页中写html引号中的字符显现出来；引号外的字符被认为是变量。 
    注意在第一和第三行中，引号中的是我们想要显现的，而secs_per_year无引号。因此javascript认为它是变量并交换成变量值。幸好，在头文件中我们定义了secs_per_year是一大数，因此可被显现，否则javascript将报错。 
    引号中的任何字都被称为字符串，javascript不编译它。
    本例中使用的是双引号(")，也可使用单引号(')，二者可互换。若第二行中的是
    document.writeln("secs_per_year")，javascript
    将直接将secs_per_year显现，而不是31,536,000.
    本例和字符的区别很重要，因此在我们继续下去之前，保证你已读懂了这段。
    你可以用document.writeln() 写html语言。
    注意第一和第三行的 和  标签。 
    这即是该例的概要。我们常见的一个问题是：“通常什么出现在头文件中，什么出现在主体文件中？”
    一般这关系不大。好的习惯是把大多数javascript放在页面的头上。这是因为比主体要先读到，所以出现在主体中的变量(如secs_per_min)都在头中定义了。当secs_per_min在javascript试图执行document.writeln(secs_per_min)命令后定义则javascript会报错。
    好，现在我们准备作一个关于变量的练习，但首先再注意一下字符串。

如前一节所提，引号间的字符都称为字符串，无论单双引号。就如变量可为数字一样，它也可为字符串。因此可说：
    var nice_monkey = "the monkey smiles at you and recites shakespeare.";
    var bad_monkey = "the monkey scowls at you and burps.";
    声明变量时即给变量赋值，使它等于这些字符串，于是当你想写这些字符串时，你可写：
    document.writeln(nice_monkey);
    这里是可用字符串做事的例子。
    仔细看一看源码，你将常会发现一些新鲜，有趣的事。
    看以下新鲜之处:
    var monkey = prompt("what's the monkey's name?", "the monkey");
    这里我们称为用户反馈提示方式，当它被调用时，启动一个对话框请求用户输入信息。用户完成后敲ok返回信息。在上行中返回信息放入其变量中。 
    注意该提示方式有两个变量，且都是字符串。第一个在对话框输入区上面显示，本例中它是：“what's the monkey's name?”。本例中第二个参数"the monkey"，放置输入框的缺省值。如果你不想要缺省值，则在第二个参数加上引号，就象这样：
    var monkey = prompt("what's the monkey's name?", "");
    下一行是直接变量分配，就象此前我们看到的：
    var techy_monkey = monkey + demanding + tech;
    该行介绍了一个字符串操作器：累加标记。当两个字符串间出现累加标记时，则这两个变量出现在同一字符串中，这称为“连锁”。于是上行创造了一个新的变量称为techy_monkey含有包含上述三个变量的字符串。换一句话说，其结果即是"the monkey" + "demands, no, insists upon receiving" + "a computer that won't crash, and a homemade browser!"
    var techy_monkey = monkey + demanding + tech;
    于是也可说：
    var techy_monkey = "the monkey demands, no, insists upon receiving a computer that won't crash, and a homemade browser!";
    下面一段显示更多的使用字符串的诀窍。其工作原理是相同的，我们只看三行：
    var italic_hippy = hippy_monkey.italics();
    var shouting_hippy= hippy_monkey.touppercase();
    var red_bold_tech = bold_tech.fontcolor('red');
    第一行是说：“使该字符串包含变量以斜体显示”，这实际上即是：
    var italic_hippy = "" + hippy_monkey + "";
    但看起来要好的多！今后在javascript写document.writeln(italic_hippy)时，你得到的是斜体显示的字符。
    下一行讲述的技巧是在html中实现不了的，它使得hippy_monkey中所有字符以大写显示
    第三行显示改变字符串属性的例子。。所有的字符具有颜色，你可用string.fontcolor('new color');命令改变其颜色。也可这样作：
    var red_bold_tech = "" + bold_tech + "";
    但它阅读起来不如这样容易： 
    var red_bold_tech = bold_tech.fontcolor('red');
    本例中除本行外你还可看到其他的应用：
    document.writeln(bold_tech + "
");
    它除替代显示一字符串外，还连接两个字符串然后显示结果。也可写成两行，象这样：
    var broken_bold = bold_tech + "
";
    document.writeln(broken_bold);
    但这要创建另一个变量，并不必要的写另一行。
    现在我们已学习了所有的关于变量和字符串知识，请做一个练习
    <script> <br/> <!-- being hiding me <br/> var name = prompt("输入一个主语: ",""); <br/> var verb = prompt("输入一个谓语: ",""); <br/> var adjective= prompt("输入一个宾语: ",""); <br/> var sentence = name + " " + verb + " " + adjective + "。<p>"; <br/> document.writeln(sentence); <br/> document.writeln(sentence.bold()); <br/> document.writeln(sentence.touppercase()); <br/> document.writeln(sentence.fontcolor(&#39;red&#39;)); <br/> // end hiding me --> <br/> </script>
    当你完成该工作后，该开始if子句练习了。

"if"子句的应用可以使得程序根据用户输入的值作出不同的反应。例如你可以写一段程序使得它对你与对其他人反应不同。这里是它的基本格式：
    if (some condition is true)
    { 
        do something;
        do something;
        do something; 
    }
    本结构的重要部分: 
    以单词 "if"开始 (if 必须小写). 
    圆括弧中是条件：非真即伪。 
    如果条件为真的话执行花括弧中的语句。 
    记住：空格是唯一保持程序可读性的东西。当然你可以将整个if语句写在一行中，但它读起来就费劲了。
    这里是一个if子句的例子。
    <script> <br/> <!-- hide me <br/> var monkey_love = prompt("你喜欢网猴吗？","敲入是或否。"); <br/> if (monkey_love == "是") <br/> { <br/> alert("谢谢！很高兴您能来这儿！请往下读吧！"); <br/> } <br/> // end hide --> <br/> </script>
    如果你在即时对话框中键入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     (variable_1 != variable_2)  is true if variable_1 does not equal variable_2
    有两个方法可使你的条件更合理：
    在运行花括号中的语句前如果你想要两件事为“是”，可这样做：
    if ((variable_1 > 18) && (variable_1     {
      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练习中来! 
    <script> <br/> var color = prompt("您喜欢哪种颜色，red还是blue？",""); <br/> var adjective; <br/> var fontcolor; <br/> if (color == "red") { <br/> adjective = "活泼。"; <br/> fontcolor="red"; <br/> } else if (color == "blue") { <br/> adjective = "酷。"; <br/> fontcolor="blue"; <br/> } else { <br/> adjective = "困惑。"; <br/> fontcolor="black"; <br/> } <br/> var sentence = "您喜欢" + fontcolor + "？ 网猴认为您很" + adjective + "<p>"; <br/> document.writeln(sentence.fontcolor(fontcolor)); <br/> </script>

一旦用户点击一个链结，或将鼠标移到其上，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! <br/><br/> 这就象一个正式的定位标签，但它具有神奇的onclick=""这即说“当某人点击该链结时运行该引号中的javascript”注意在alert后有一分号。 <br/><br/> 也请注意在href=""的引号中没有东西，这表明虽然有链结，但当你点击时那儿也去不了。 <br/><br/> 下一行是： <br/><br/> <a href="#" onmouseover="alert(&#39;hee hee!&#39;);">mouse over me! <br/><br/> 这就象第一行，只是用onmouseover代替onclick。 <br/><br/> 现在我们学完了链结事件，请进入奇妙的图片交替！ <br/><br/>javascripts的一个主要应用是其具有使你移动鼠标时图片自动切换功能。 <br/><br/> 这里是一个快捷的基本的图片交换例子。 <br/><br/> <img src="button_r.gif" name="the_image" alt="JavaScript初级教程(第二课)_基础知识" > <br/> <a href="#" onmouseover="document.the_image.src=&#39;button_d.gif&#39;;">change <br/><br/> 让我们一步布的剖析这个例子， <br/><br/> 第一行是： <br/><br/> <img src="button_r.gif" name="the_image" alt="JavaScript初级教程(第二课)_基础知识" > <br/><br/> 这就象一个标准的 <img src= alt="JavaScript初级教程(第二课)_基础知识" > 标签，只是它被给了一个名字：the_image， 名字是任意取的：my_image, a_box......但不许有任何空格在里面。 <br/><br/> 下一行是： <br/><br/> <a href="#" onmouseover="document.the_image.src=&#39;button_d.gif&#39;;">change <br/><br/> 这是图片交换发生的地方。就象你以前见到的onmouseover。 <br/> 出现在onmouseover的引号中javascript主要之处是： <br/><br/> document.the_image.src=&#39;button_d.gif&#39;; <br/><br/> 该句是说：“找到叫&#39;the_image&#39;的图片并将其src 变为button_d.gif." 注意整个语句使用双引号，而&#39;button_d.gif&#39; 使用单引号。尽管二者可互换，但注意如果一组引号存在于另一组引号之中，别搞混了。你可写成" &#39;something&#39; "或&#39; "something" &#39; ，但不可写成：" &#39;something" &#39; 或 ""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 , 并开始建造我们自己的新的浏览器。