JavaScipt基本教程之JavaScript语言的基础

比眉伴天荒 2022-09-24 12:19 42阅读 0赞

在什么地方插入 JavaScript  
　　JavaScript 可以出现在 HTML 的任意地方。使用标记<script>…</script>，你可以在 HTML 文档的任意地方插入 JavaScript，甚至在<HTML>之前插入也不成问题。不过如果要在声明框架的网页（框架网页）中插入，就一定要在<frameset>之前插入，否则不会运行。  
基本格式

> <script>  
>   
> </script>

第二行和第四行的作用，是让不懂<script>标记的浏览器忽略 JavaScript 代码。一般可以省略，因为现在想找不懂 Script 的浏览器，恐怕就连博物馆里也没有了。第四行前边的双反斜杠“//”是 JavaScript 里的注释标号，以后将学到。  
  
另外一种插入 JavaScript 的方法，是把 JavaScript 代码写到另一个文件当中（此文件通常应该用“.js”作扩展名），然后用格式为“<script src="javascript.js"></script>”的标记把它嵌入到文档中。注意，一定要用“</script>”标记。  
参考 <script>标记还有一个属性：language（缩写lang），说明脚本使用的语言。对于 JavaScript，请用“language="JavaScript"”。  
参考 相对于<script>标记，还有一个<server>标记。<server>标记所包含的，是服务器端（Server Side）的脚本。本教程只讨论客户器端（Client Side）的 JavaScript，也就是用<script>标记包含的脚本。  
如果想在浏览器的“地址”栏中执行 JavaScript 语句，用这样的格式：  
javascript:<JavaScript语句>  
这样的格式也可以用在连接中：  
<a href="javascript:<JavaScript语句>">...</a>  
  
JavaScript 基本语法  
每一句 JavaScript 都有类似于以下的格式：  
<语句>;  
其中分号“;”是 JavaScript 语言作为一个语句结束的标识符。虽然现在很多浏览器都允许用回车充当结束符号，培养用分号作结束的习惯仍然是很好的。  
语句块 语句块是用大括号“\{ \}”括起来的一个或 n 个语句。在大括号里边是几个语句，但是在大括号外边，语句块是被当作一个语句的。语句块是可以嵌套的，也就是说，一个语句块里边可以再包含一个或多个语句块。  
  
JavaScript 中的变量  
什么是变量 从字面上看，变量是可变的量；从编程角度讲，变量是用于存储某种/某些数值的存储器。所储存的值，可以是数字、字符或其他的一些东西。  
变量的命名 变量的命名有以下要求：  
只包含字母、数字和/或下划线；  
要以字母开头；  
不能太长（其实有什么人喜欢使用又长又臭的名字呢？）；  
不能与 JavaScript 保留字（Key Words，Reserved Words，数量繁多，不能一一列出；凡是可以用来做 JavaScript 命令的字都是保留字）重复。   
而且，变量是区分大小写的，例如，variable 和 Variable 是两个不同的变量。不仅如此，大部分命令和“对象”（请参阅“对象化编程”章）都是区分大小写的。   
提示 给变量命名，最好避免用单个字母“a”“b”“c”等，而改用能清楚表达该变量在程序中的作用的词语。这样，不仅别人能更容易的了解你的程序，而且你在以后要修改程序的时候，也很快会记得该变量的作用。变量名一般用小写，如果是由多个单词组成的，那么第一个单词用小写，其他单词的第一个字母用大写。例如：myVariable 和 myAnotherVariable。这样做仅仅是为了美观和易读，因为 JavaScript 一些命令（以后将用更具体的方法阐述“命令”一词）都是用这种方法命名的：indexOf；charAt 等等。  
变量需要声明 没有声明的变量不能使用，否则会出错：“未定义”。声明变量可以用：  
  
var <变量> \[= <值>\];  
  
var 我们接触的第一个关键字（即保留字）。这个关键字用作声明变量。最简单的声明方法就是“var <变量>;”，这将为<变量>准备内存，给它赋初始值“null”。如果加上“= <值>”，则给<变量>赋予自定的初始值<值>。  
  
数据类型 变量可以用的数据类型有：  
整型 只能储存整数。可以是正整数、0、负整数，可以是十进制、八进制、十六进制。八进制数的表示方法是在数字前加“0”，如“0123”表示八进制数“123”。十六进制则是加“0x”：“0xEF”表示十六进制数“EF”。  
浮点型 即“实型”，能储存小数。有资料显示，某些平台对浮点型变量的支持不稳定。没有需要就不要用浮点型。  
字符串型 是用引号“" "”、“' '”包起来的零个至多个字符。用单引号还是双引号由你决定。跟语文一样，用哪个引号开始就用哪个结束，而且单双引号可嵌套使用：'这里是"JavaScript 教程"。' 不过跟语文不同的是，JavaScript 中引号的嵌套只能有一层。如果想再多嵌一些，你需要转义字符：  
　　转义字符 由于一些字符在屏幕上不能显示，或者 JavaScript 语法上已经有了特殊用途，在要用这些字符时，就要使用“转义字符”。转义字符用斜杠“\\”开头：\\' 单引号、\\" 双引号、\\n 换行符、\\r 回车（以上只列出常用的转义字符）。于是，使用转义字符，就可以做到引号多重嵌套：'Micro 说："这里是\\"JavaScript 教程\\"。" '  
布尔型 常用于判断，只有两个值可选：true（表“真”）和 false（表“假”）。true 和 false 是 JavaScript 的保留字。它们属于“常数”。  
对象 关于对象，在“对象化编程”一章将详细讲到。  
由于 JavaScript 对数据类型的要求不严格，一般来说，声明变量的时候不需要声明类型。而且就算声明了类型，在过程中还可以给变量赋予其他类型的值。声明类型可以用赋予初始值的方法做到：

> var aString = '';

这将把 aString 定义为具有空值的字符串型变量。

> var anInteger = 0;

这将把 anInteger 定义为值为 0 的整型。  
变量的赋值 一个变量声明后，可以在任何时候对其赋值。赋值的语法是：  
<变量> = <表达式>;  
其中“=”叫“赋值符”，它的作用是把右边的值赋给左边的变量。下一节将讨论到表达式。   
  
JavaScript常数 有下列几个：  
  
null 一个特殊的空值。当变量未定义，或者定义之后没有对其进行任何赋值操作，它的值就是“null”。企图返回一个不存在的对象时也会出现null值。  
NaN “Not a Number”。出现这个数值比较少见，以至于我们可以不理它。当运算无法返回正确的数值时，就会返回“NaN”值。NaN 值非常特殊，因为它“不是数字”，所以任何数跟它都不相等，甚至 NaN 本身也不等于 NaN 。  
true 布尔值“真”。用通俗的说法，“对”。  
false 布尔值“假”。用通俗的说法，“错”。  
  
在 Math 对象中还有一系列数学常数。这将在讨论“对象化编程”时谈到。  
  
表达式与运算符  
表达式 与数学中的定义相似，表达式是指具有一定的值的、用运算符把常数和变量连接起来的代数式。一个表达式可以只包含一个常数或一个变量。运算符可以是四则运算符、关系运算符、位运算符、逻辑运算符、复合运算符。下表将这些运算符从高优先级到低优先级排列：

<table style="margin:0px; padding:0px; word-break:break-all; border-collapse:collapse; color:rgb(51,51,51); font-family:Verdana,Helvetica,Arial,sans-serif; font-size:14.04px; line-height:25.272px; width:654px"> 
 <tbody style="margin:0px; padding:0px; word-break:break-all"> 
  <tr style="margin:0px; padding:0px; word-break:break-all"> 
   <td style="margin:0px; padding:0px; word-break:break-all">括号</td> 
   <td style="margin:0px; padding:0px; word-break:break-all">(x) [x]</td> 
   <td style="margin:0px; padding:0px; word-break:break-all">中括号只用于指明<span style="margin:0px; padding:0px; word-break:break-all; font-weight:700">数组</span>的<span style="margin:0px; padding:0px; word-break:break-all; font-weight:700">下标</span></td> 
  </tr> 
  <tr style="margin:0px; padding:0px; word-break:break-all"> 
   <td style="margin:0px; padding:0px; word-break:break-all">求反、自加、自减</td> 
   <td style="margin:0px; padding:0px; word-break:break-all">-x</td> 
   <td style="margin:0px; padding:0px; word-break:break-all">返回 x 的相反数</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; word-break:break-all"> 
   <td style="margin:0px; padding:0px; word-break:break-all">!x</td> 
   <td style="margin:0px; padding:0px; word-break:break-all">返回与 x (布尔值)相反的布尔值</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; word-break:break-all"> 
   <td style="margin:0px; padding:0px; word-break:break-all">x++</td> 
   <td style="margin:0px; padding:0px; word-break:break-all">x 值加 1，但仍返回原来的 x 值</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; word-break:break-all"> 
   <td style="margin:0px; padding:0px; word-break:break-all">x--</td> 
   <td style="margin:0px; padding:0px; word-break:break-all">x 值减 1，但仍返回原来的 x 值</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; word-break:break-all"> 
   <td style="margin:0px; padding:0px; word-break:break-all">++x</td> 
   <td style="margin:0px; padding:0px; word-break:break-all">x 值加 1，返回后来的 x 值</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; word-break:break-all"> 
   <td style="margin:0px; padding:0px; word-break:break-all">--x</td> 
   <td style="margin:0px; padding:0px; word-break:break-all">x 值减 1，返回后来的 x 值</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; word-break:break-all"> 
   <td style="margin:0px; padding:0px; word-break:break-all">乘、除</td> 
   <td style="margin:0px; padding:0px; word-break:break-all">x*y</td> 
   <td style="margin:0px; padding:0px; word-break:break-all">返回 x 乘以 y 的值</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; word-break:break-all"> 
   <td style="margin:0px; padding:0px; word-break:break-all">x/y</td> 
   <td style="margin:0px; padding:0px; word-break:break-all">返回 x 除以 y 的值</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; word-break:break-all"> 
   <td style="margin:0px; padding:0px; word-break:break-all">x%y</td> 
   <td style="margin:0px; padding:0px; word-break:break-all">返回 x 与 y 的模（x 除以y 的余数）</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; word-break:break-all"> 
   <td style="margin:0px; padding:0px; word-break:break-all">加、减</td> 
   <td style="margin:0px; padding:0px; word-break:break-all">x+y</td> 
   <td style="margin:0px; padding:0px; word-break:break-all">返回 x 加 y 的值</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; word-break:break-all"> 
   <td style="margin:0px; padding:0px; word-break:break-all">x-y</td> 
   <td style="margin:0px; padding:0px; word-break:break-all">返回 x 减 y 的值</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; word-break:break-all"> 
   <td style="margin:0px; padding:0px; word-break:break-all">关系运算</td> 
   <td style="margin:0px; padding:0px; word-break:break-all">x&lt;y x&lt;=y<br style="margin:0px; padding:0px; word-break:break-all"> x&gt;=y x&gt;y</td> 
   <td style="margin:0px; padding:0px; word-break:break-all">当符合条件时返回 true 值，否则返回 false 值</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; word-break:break-all"> 
   <td style="margin:0px; padding:0px; word-break:break-all">等于、<br style="margin:0px; padding:0px; word-break:break-all"> 不等于</td> 
   <td style="margin:0px; padding:0px; word-break:break-all">x==y</td> 
   <td style="margin:0px; padding:0px; word-break:break-all">当 x 等于 y 时返回 true 值，否则返回 false 值</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; word-break:break-all"> 
   <td style="margin:0px; padding:0px; word-break:break-all">x!=y</td> 
   <td style="margin:0px; padding:0px; word-break:break-all">当 x 不等于 y 时返回 true 值，否则返回 false 值</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; word-break:break-all"> 
   <td style="margin:0px; padding:0px; word-break:break-all">位与</td> 
   <td style="margin:0px; padding:0px; word-break:break-all">x&amp;y</td> 
   <td style="margin:0px; padding:0px; word-break:break-all">当两个数位同时为 1 时，返回的数据的当前数位为 1，其他情况都为 0</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; word-break:break-all"> 
   <td style="margin:0px; padding:0px; word-break:break-all">位异或</td> 
   <td style="margin:0px; padding:0px; word-break:break-all">x^y</td> 
   <td style="margin:0px; padding:0px; word-break:break-all">两个数位中有且只有一个为 0 时，返回 0，否则返回 1</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; word-break:break-all"> 
   <td style="margin:0px; padding:0px; word-break:break-all">位或</td> 
   <td style="margin:0px; padding:0px; word-break:break-all">x|y</td> 
   <td style="margin:0px; padding:0px; word-break:break-all">两个数位中只要有一个为 1，则返回 1；当两个数位都为零时才返回零</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; word-break:break-all"> 
   <td colspan="3" style="margin:0px; padding:0px; word-break:break-all">位运算符通常会被当作逻辑运算符来使用。它的实际运算情况是：把两个操作数（即 x 和 y）化成二进制数，对每个数位执行以上所列工作，然后返回得到的新二进制数。由于“真”值在电脑内部（通常）是全部数位都是 1 的二进制数，而“假”值则是全部是 0 的二进制数，所以位运算符也可以充当逻辑运算符。</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; word-break:break-all"> 
   <td style="margin:0px; padding:0px; word-break:break-all">逻辑与</td> 
   <td style="margin:0px; padding:0px; word-break:break-all">x&amp;&amp;y</td> 
   <td style="margin:0px; padding:0px; word-break:break-all">当 x 和 y 同时为 true 时返回 true，否则返回 false</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; word-break:break-all"> 
   <td style="margin:0px; padding:0px; word-break:break-all">逻辑或</td> 
   <td style="margin:0px; padding:0px; word-break:break-all">x||y</td> 
   <td style="margin:0px; padding:0px; word-break:break-all">当 x 和 y 任意一个为 true 时返回 true，当两者同时为 false 时返回 false</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; word-break:break-all"> 
   <td colspan="3" style="margin:0px; padding:0px; word-break:break-all">逻辑与/或有时候被称为“快速与/或”。这是因为当第一操作数（x）已经可以决定结果，它们将不去理会 y 的值。例如，false &amp;&amp; y，因为x == false，不管 y 的值是什么，结果始终是 false，于是本表达式立即返回 false，而不论 y 是多少，甚至 y 可以导致出错，程序也可以照样运行下去。</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; word-break:break-all"> 
   <td style="margin:0px; padding:0px; word-break:break-all">条件</td> 
   <td style="margin:0px; padding:0px; word-break:break-all">c?x:y</td> 
   <td style="margin:0px; padding:0px; word-break:break-all">当条件 c 为 true 时返回 x 的值（执行 x 语句），否则返回 y 的值（执行 y 语句）</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; word-break:break-all"> 
   <td style="margin:0px; padding:0px; word-break:break-all">赋值、<br style="margin:0px; padding:0px; word-break:break-all"> 复合运算</td> 
   <td style="margin:0px; padding:0px; word-break:break-all">x=y</td> 
   <td style="margin:0px; padding:0px; word-break:break-all">把 y 的值赋给 x，返回所赋的值</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; word-break:break-all"> 
   <td style="margin:0px; padding:0px; word-break:break-all">x+=y x-=y x*=y<br style="margin:0px; padding:0px; word-break:break-all"> x/=y x%=y</td> 
   <td style="margin:0px; padding:0px; word-break:break-all">x 与 y 相加/减/乘/除/求余，所得结果赋给 x，并返回 x 赋值后</td> 
  </tr> 
 </tbody> 
</table>

注意  所有与四则运算有关的运算符都不能作用在字符串型变量上。字符串可以使用 +、+= 作为连接两个字符串之用。  
  
提示  请密切注意运算的优先级。编程时如果不记得运算符的优先级，可以使用括号( )。例如：(a == 0)||(b == 0)。  
  
一些用来赋值的表达式，由于有返回的值，可以加以利用。例如，用以下语句：a = b = c = 10，可以一次对三个变量赋值。  
  
语句  
下面将开始讨论 JavaScript 基本编程命令，或者叫“语句”。  
  
注释  
  
像其他所有语言一样，JavaScript 的注释在运行时也是被忽略的。注释只给程序员提供消息。  
  
JavaScript 注释有两种：单行注释和多行注释。单行注释用双反斜杠“//”表示。当一行代码有“//”，那么，“//”后面的部分将被忽略。而多行注释是用“/\*”和“\*/”括起来的一行到多行文字。程序执行到“/\*”处，将忽略以后的所有文字，直到出现“\*/”为止。  
  
提示 如果你的程序需要草稿，或者需要让别人阅读，注释能帮上大忙。养成写注释的习惯，能节省你和其他程序员的宝贵时间，使他们不用花费多余的时间琢磨你的程序。在程序调试的时候，有时需要把一段代码换成另一段，或者暂时不要一段代码。这时最忌用 Delete 键，如果想要回那段代码怎么办？最好还是用注释，把暂时不要的代码“隐”去，到确定方法以后再删除也不迟。  
  
if 语句

> if ( <条件> ) <语句1> \[ else <语句2> \];

本语句有点象条件表达式“?:”：当<条件>为真时执行<语句1>，否则，如果 else 部分存在的话，就执行<语句2>。与“?:”不同的是，if 只是一条语句，不会返回数值。<条件>是布尔值，必须用小括号括起来；<语句1>和<语句2>都只能是一个语句，欲使用多条语句，请用语句块。  
  
注意 请看下例：

> if (a == 1)  
>   if (b == 0) alert(a+b);  
> else  
>   alert(a-b);

本代码企图用缩进的方法说明 else 是对应 if (a == 1) 的，但是实际上，由于 else 与 if (b == 0) 最相近，本代码不能按作者的想法运行。正确的代码是

> if (a == 1) \{  
>   if (b == 0) alert(a+b);  
> \} else \{  
>   alert(a-b);  
> \}

提示  一行代码太长，或者涉及到比较复杂的嵌套，可以考虑用多行文本，如上例，if (a == 1) 后面没有立即写上语句，而是换一行再继续写。浏览器不会混淆的，当它们读完一行，发现是一句未完成语句，它们会继续往下读。使用缩进也是很好的习惯，当一些语句与上面的一两句语句有从属关系时，使用缩进能使程序更易读，方便程序员进行编写或修改工作。  
  
循环体

> for (<变量>=<初始值>; <循环条件>; <变量累加方法>) <语句>;

本语句的作用是重复执行<语句>，直到<循环条件>为 false 为止。它是这样运作的：首先给<变量>赋<初始值>，然后\*判断<循环条件>（应该是一个关于<变量>的条件表达式）是否成立，如果成立就执行<语句>，然后按<变量累加方法>对<变量>作累加，回到“\*”处重复，如果不成立就退出循环。这叫做“for循环”。下面看看例子。

> for (i = 1; i < 10; i++) document.write(i);

本语句先给 i 赋初始值 1，然后执行 document.write(i)语句（作用是在文档中写 i 的值，请参越“对象化编程”一章）；重复时 i++，也就是把 i 加 1；循环直到 i<10 不满足，也就是 i>=10 时结束。结果是在文档中输出了“123456789”。  
  
和 if 语句一样，<语句>只能是一行语句，如果想用多条语句，你需要用语句块。  
  
与其他语言不同，JavaScript 的 for 循环没有规定循环变量每次循环一定要加一或减一，<变量累加方法>可以是任意的赋值表达式，如 i+=3、i\*=2、i-=j 等都成立。  
  
提示 适当的使用 for 循环，能使 HTML 文档中大量的有规律重复的部分简化，也就是用 for 循环重复写一些 HTML 代码，达到提高网页下载速度的目的。不过请在 Netscape 中重复进行严格测试，保证通过了才好把网页传上去。作者曾试过多次因为用 for 循环向文档重复写 HTML 代码而导致 Netscape“猝死”。IE 中绝对没有这种事情发生，如果你的网也是只给 IE 看的，用多多的 for 也没问题。  
  
除了 for 循环，JavaScript 还提供 while 循环。

> while (<循环条件>) <语句>;

比 for 循环简单，while 循环的作用是当满足<循环条件>时执行<语句>。while 循环的累加性质没有 for 循环强。<语句>也只能是一条语句，但是一般情况下都使用语句块，因为除了要重复执行某些语句之外，还需要一些能变动<循环条件>所涉及的变量的值的语句，否则一但踏入此循环，就会因为条件总是满足而一直困在循环里面，不能出来。这种情况，我们习惯称之为“死循环”。死循环会弄停当时正在运行的代码、正在下载的文档，和占用很大的内存，很可能造成死机，应该尽最大的努力避免。  
  
break 和 continue  
  
有时候在循环体内，需要立即跳出循环或跳过循环体内其余代码而进行下一次循环。break 和 continue 帮了我们大忙。  
  
break;  
  
本语句放在循环体内，作用是立即跳出循环。  
  
continue;  
  
本语句放在循环体内，作用是中止本次循环，并执行下一次循环。如果循环的条件已经不符合，就跳出循环。  
  
例

> for (i = 1; i < 10; i++) \{  
>   if (i == 3 || i == 5 || i == 8) continue;  
>   document.write(i);  
> \}

输出：124679。  
  
switch 语句  
  
如果要把某些数据分类，例如，要把学生的成绩按优、良、中、差分类，我们可能会用 if 语句：

> if (score >= 0 && score < 60) \{  
>   result = 'fail';  
> \} else if (score < 80) \{  
>   result = 'pass';  
> \} else if (score < 90) \{  
>   result = 'good';  
> \} else if (score <= 100) \{  
>   result = 'excellent';  
> \} else \{  
>   result = 'error';  
> \}

看起来没有问题，但使用太多的 if 语句的话，程序看起来有点乱。switch 语句就是解决这种问题的最好方法。

> switch (e) \{  
>   case r1: （注意：冒号）  
>     ...  
>     \[break;\]  
>   case r2:  
>     ...  
>     \[break;\]  
>   ...  
>   \[default:  
>     ...\]  
> \}

这一大段的作用是：计算 e 的值（e 为表达式），然后跟下边“case”后的 r1、r2……比较，当找到一个相等于 e 的值时，就执行该“case”后的语句，直到遇到 break 语句或 switch 段落结束（“\}”）。如果没有一个值与 e 匹配，那么就执行“default:”后边的语句，如果没有 default 块，switch 语句结束。  
  
上边的 if 段用 switch 改写就是：

> switch (parseInt(score / 10)) \{  
>   case 0:  
>   case 1:  
>   case 2:  
>   case 3:  
>   case 4:  
>   case 5:  
>     result = 'fail';  
>     break;  
>   case 6:  
>   case 7:  
>     result = 'pass';  
>     break;  
>   case 8:  
>     result = 'good';  
>     break;  
>   case 9:  
>     result = 'excellent';  
>     break;  
>   default:  
>     if (score == 100)  
>       result = 'excellent';  
>     else  
>       result = 'error';  
> \}

其中 parseInt()方法是以后会介绍的，作用是取整。最后 default 段用的 if 语句，是为了不把 100 分当错误论（parseInt(100 / 10) == 10）。