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


Posted in Javascript onJanuary 16, 2008

在什么地方插入 JavaScript

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

<script>
<!--
...
(JavaScript代码)
...
//-->
</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 对象中还有一系列数学常数。这将在讨论“对象化编程”时谈到。

表达式与运算符
表达式 与数学中的定义相似,表达式是指具有一定的值的、用运算符把常数和变量连接起来的代数式。一个表达式可以只包含一个常数或一个变量。运算符可以是四则运算符、关系运算符、位运算符、逻辑运算符、复合运算符。下表将这些运算符从高优先级到低优先级排列:

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

注意 所有与四则运算有关的运算符都不能作用在字符串型变量上。字符串可以使用 +、+= 作为连接两个字符串之用。

提示 请密切注意运算的优先级。编程时如果不记得运算符的优先级,可以使用括号( )。例如:(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)。
Javascript 相关文章推荐
用正则表达式 动态创建/增加css style script 兼容IE firefox
Mar 10 Javascript
腾讯的ip接口 方便获取当前用户的ip地理位置
Nov 25 Javascript
基于jquery实现的文字淡入淡出效果
Nov 14 Javascript
常用的JavaScript验证正则表达式汇总
Nov 26 Javascript
TinyMCE提交AjaxForm获取不到数据的解决方法
Mar 05 Javascript
axios基本入门用法教程
Mar 25 Javascript
浅谈jquery中ajax跨域提交的时候会有2次请求的问题
Nov 10 jQuery
jQuery实现浏览器之间跳转并传递参数功能【支持中文字符】
Mar 28 jQuery
JS实现获取word文档内容并输出显示到html页面示例
Jun 23 Javascript
VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法
Nov 28 Javascript
Makefile/cmake/node-gyp中区分判断不同平台的方法
Dec 18 Javascript
vue input输入框关键字筛选检索列表数据展示
Oct 26 Javascript
JavaScipt基本教程之前言
Jan 16 #Javascript
JavaScript中Math对象使用说明
Jan 16 #Javascript
语义化 H1 标签
Jan 14 #Javascript
javascript flash下fromCharCode和charCodeAt方法使用说明
Jan 12 #Javascript
[原创]用javascript实现检测指定目录是否存在的方法
Jan 12 #Javascript
解读IE和firefox下JScript和HREF的执行顺序
Jan 12 #Javascript
img的onload的另类用法
Jan 10 #Javascript
You might like
用PHP实现的生成静态HTML速度快类库
2007/03/31 PHP
PHP nl2br函数 将换行字符转成 &amp;lt;br&amp;gt;
2009/08/21 PHP
Thinkphp和onethink实现微信支付插件
2016/04/13 PHP
laravel通过创建自定义artisan make命令来新建类文件详解
2017/08/17 PHP
PHP实现的基于单向链表解决约瑟夫环问题示例
2017/09/30 PHP
js分页代码分享
2014/04/28 Javascript
玩转方法:call和apply
2014/05/08 Javascript
Nodejs极简入门教程(二):定时器
2014/10/25 NodeJs
做web开发 先学JavaScript
2014/12/12 Javascript
jQuery中offset()方法用法实例
2015/01/16 Javascript
js简单实现竖向tab选项卡的方法
2015/05/04 Javascript
js实现跨域的多种方法
2015/12/25 Javascript
jQuery获取字符串中出现最多的数
2016/02/22 Javascript
jquery获取所有选中的checkbox实现代码
2016/05/26 Javascript
基于JavaScript实现点击页面任何位置返回
2016/08/31 Javascript
js实现上传图片预览方法
2016/10/25 Javascript
vue中vee validate表单校验的几种基本使用
2018/06/25 Javascript
vue-cli3脚手架的配置及使用教程
2018/08/28 Javascript
Vuex 使用及简单实例(计数器)
2018/08/29 Javascript
JS 事件机制完整示例分析
2020/01/15 Javascript
详解python上传文件和字符到PHP服务器
2017/11/24 Python
在Python 中同一个类两个函数间变量的调用方法
2019/01/31 Python
python将pandas datarame保存为txt文件的实例
2019/02/12 Python
详解Django-channels 实现WebSocket实例
2019/08/22 Python
python3.6环境下安装freetype库和基本使用方法(推荐)
2020/05/10 Python
Python基于codecs模块实现文件读写案例解析
2020/05/11 Python
使用CSS3的font-face字体嵌入样式的方法讲解
2016/05/13 HTML / CSS
解决CSS3 transition-delay 属性默认值0不带单位失效的问题
2020/10/29 HTML / CSS
Steiff台湾官网:德国金耳釦泰迪熊
2019/12/26 全球购物
个人简历的自荐信
2013/10/23 职场文书
优良学风班申请材料
2014/02/13 职场文书
公司员工奖惩制度
2015/08/04 职场文书
周一给客户的问候语
2015/11/10 职场文书
Python绘制分类图的方法
2021/04/20 Python
使用CSS设置滚动条样式
2022/01/18 HTML / CSS
Python软件包安装的三种常见方法
2022/07/07 Python