`
xuedong
  • 浏览: 297160 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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

阅读更多

在什么地方插入 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
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*=y
x/=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)。

 

转自:http://www.ijavascript.cn/jiaocheng/primary-tutorial-of-study-javascript-21.html

分享到:
评论

相关推荐

    JavaScript基础教程(pdf版)

    本教程旨在为初学者提供一个全面的JavaScript基础知识学习平台,帮助理解并掌握这种强大的脚本语言。 《JavaScript基础教程》首先会介绍JavaScript的历史背景和基本语法,包括变量、数据类型、操作符、流程控制...

    JavaScript基础教程 精简版

    总结,这个精简版的JavaScript基础教程涵盖了语言的基本要素,从数据类型、运算符到控制流,再到对象、函数和事件处理,为初学者提供了一个全面的入门框架。理解并熟练运用这些知识点,是成为JavaScript开发者的首要...

    Javascript基础教程版

    总之,"Javascript基础教程版"将引导你逐步掌握这门强大的编程语言,无论是网页动态效果、服务器端开发还是移动端应用,JavaScript都能为你提供丰富的可能性。通过深入学习和实践,你将能够驾驭这门语言,开启精彩的...

    Javascript基础教程.doc

    ### JavaScript基础教程核心知识点 #### 一、交互性与JavaScript的重要性 在早期互联网时代,网站的交互性往往受限于用户点击链接后跳转至新页面的简单操作,即便使用了CGI(Common Gateway Interface)语言,用户...

    JavaScript基础教程(.PDF)

    JavaScript中的函数可以作为变量赋值、作为参数传递,甚至可以作为其他函数的返回结果,这是其作为函数式编程语言的特点之一。 4. **对象**:JavaScript的对象是一组键值对,可以理解为关联数组。对象可以通过字面...

    Javascript基础教程 文字版 代码可复制

    #### 四、JavaScript语言基础 - **数据类型**:JavaScript中有基本数据类型(如字符串、数字、布尔值)和复杂数据类型(如对象、数组)。 - **变量声明**:使用`var`、`let`或`const`关键字声明变量。 - **函数定义*...

    javascript 基础教程 html版的

    JavaScript是Web开发中不可或缺的一部分,尤其对于前端开发者来说,它是实现网页动态效果和交互的核心语言。HTML(HyperText Markup Language)则是网页结构的基础,这两者的结合使得网页不仅有静态的内容,还能具有...

    JavaScript标准参考教程

    《JavaScript标准参考教程》是一本全面介绍JavaScript编程语言的书籍,其内容涵盖了从基础语法、数据类型、函数到高级特性如数组操作、错误处理、编程风格等各个方面的知识。阮一峰作为作者,将多年的经验和网络资料...

    JavaScript基础教程(第8版)源代码

    JavaScript,作为全球最广泛使用的编程语言之一,是创建交互式网页和动态应用的关键工具。《JavaScript基础教程(第8版)》的源代码提供了一个深入理解JavaScript语法和实践的宝贵资源。这个压缩包包含了该书所有...

    javascript基础实践教程

    本基础实践教程是专为初学者设计的,旨在帮助你从零开始逐步掌握JavaScript的核心概念和技术。 1. **变量与数据类型**:在JavaScript中,变量用于存储数据,你可以使用`var`, `let`或`const`关键字声明。数据类型...

    javascript基础教程源代码

    这个"javascript基础教程源代码"很可能是为了帮助初学者理解JavaScript的基本概念、语法和功能而编写的教学材料。接下来,我们将深入探讨JavaScript的基础知识。 1. **变量与数据类型**:JavaScript支持七种数据...

    JAVASCRIPT程序设计基础教程课本案例代码

    在这个"JavaScript程序设计基础教程课本案例代码"中,我们将深入探讨JavaScript的基础概念、语法特性以及实际应用,帮助初学者建立坚实的基础。 首先,JavaScript的核心知识点包括变量、数据类型、控制结构和函数。...

    javascript初学教程 多本 pdf

    2. **第2章 JavaScript语言基础**:此部分会深入到JavaScript的基础语法,包括变量声明、数据类型(如字符串、数字、布尔值、null和undefined)、操作符、流程控制(如条件语句、循环结构)以及函数的基本用法。...

    Javascript基础教程

    通过深入学习和实践这些基础概念,初学者可以逐步掌握JavaScript,进而利用它构建复杂的网页交互和应用程序。随着对JavaScript的理解加深,还可以探索更高级的主题,如面向对象编程、闭包、异步编程以及现代...

    JavaScript基础与实例教程

    本教程“JavaScript基础与实例教程”由中国电力出版社出版,旨在为初学者和有经验的开发者提供一个深入理解JavaScript核心概念和实践技巧的平台。 首先,JavaScript的核心概念包括变量、数据类型和操作符。变量是...

    javascript语言入门教程javascript语言初学教程

    这个“JavaScript语言入门教程”旨在帮助初学者掌握这门语言的基础知识,为今后深入学习和实践打下坚实基础。 教程首先会介绍JavaScript的基本语法,包括变量声明、数据类型(如字符串、数字、布尔值、null和...

    Javascript 程序设计基础教程(第2版)_习题答案

    本教程的第二版习题答案旨在帮助学习者深入理解JavaScript的基本概念、语法和功能,以提升编程技能。 首先,JavaScript的核心知识点包括变量、数据类型、运算符和控制流程。变量是存储数据的容器,JavaScript支持六...

    JavaScript基础教程

    #### 二、JavaScript基本语法 ##### 2.1 基本结构 - **脚本标签**:在HTML文档中嵌入JavaScript代码,通常使用`&lt;script&gt;`标签。 ```html &lt;script language="JavaScript"&gt; // JavaScript代码写在这里 ``` - **...

    [零基础学JavaScript.电子教程.随书光盘](附光盘动画1-2)

    描述中的"JavaScript基础"明确了这个教程主要关注的是JavaScript的基本语法、数据类型、控制结构、函数以及与HTML和CSS的交互等核心概念。对于初学者来说,这些是理解和编写JavaScript代码的基石。 在标签中同样...

Global site tag (gtag.js) - Google Analytics