JavaScript高级教程 - 第一课

原创 2007年09月20日 09:51:00

第一页:Javascript高级教程

欢迎您继续学习Javascript高级教程。在此之前我们已经学习
Javascript5日教程。在这一阶段的学习中我们将继续学习在
上次的教程中还没有来得及谈及的问题。我还将向你们展示
Javascript的许多神奇功能,使你能够制作真正对多媒体应用
程序。

以下是我们将涉及的内容:

  • 给变量赋值
  • If-then语句
  • For和while循环
  • 编写你自己的函数
  • 打开及控制窗口
  • 读写HTML 表单
  • 应用数组
  • 控制图片转换

如果这些课题你听起来还比较陌生的话,我建议你先阅读一下
先前的Javascript5日教程。

第二页:本教程的课程计划

在上次的JavaScript教程中我们学习了JavaScript得核心内
容:一些重要得语法已经最常用得一些对象。现在我们将加深
你的JavaScript知识使你成为一个真正的JavaScript大师。以
下就是你成为一个真正的大师必须走过的路。

第1日:
介绍和理清头绪,并介绍几个小技巧,重点介绍一种新的
if-then-else语句以及变量真正含义。
第2日:
神奇的字符串处理,保存访问过你的网站得读者的信息,
并介绍一种新的数组。
第3日:
甚至网页的时间线,使不同的事件在不同的时间发生,并
且介绍如何使你的JavaScript脚本在各种浏览器上都能
运行。
第4日:
预载图象,图象映射,及JavaScript。生成你自己的对象
及使用循环快捷地找到要找的对象。
第5日:
开发和测试JavaScript的工具,以及使你的JavaScript代
码迅速运行的窍门。

学习完本次的教程之后你将对JavaScript有了比较完整地了
解。掌握了这门知识你就能够制作各种互联网应用程序了。

第三页:一个if-then-else的快捷方式

在JavaScript中最常用得语句就是if-then-else。下面是一
个奖励猴子的例子:

if (monkey_behavior == "good")

{

var toy = "videogames";

} else {

var toy = "rocks";

}

用通俗的英语翻译上面的代码意思是说:“如果猴子表现得
好,就允许他玩电子游戏,否则就扁它。”上面的例子显示
了if-then-else语句的标准格式,但是对于那些喜欢投机取
巧的人,还有一种快捷方式:

var toy = (monkey_behavior=="good") ? "videogames" : "rocks";

这个表达式和上面对语句所起的作用是完全一样的。这个条
件语句有3部分:测试条件,测试为真时返回的值,以及测试
为假时返回答值。在上面对例子中,测试条件是
(monkey_behavior=="good")。如果测试条件为真,则返回字
符串videogames;如果测试条件为假,则返回分号右边的值:
rock。

这种快捷方式在函数调用中使用时非常便利。例如,你可以用
它来做下面的事情:

var password = "open sesame";

var answer = prompt("what's the password? ","");

alert((answer == password) ? "welcome!" : "buzz off");

点击这里你就可以看到代码执行的过程。根据你所输入的字符
是否是规定单密码,你将受到“欢迎”的信息或者to是蜂鸣。

如果没有这种条件语句,则必须这样书写代码::

var password = "open sesame";

var answer = prompt("what's the password? ","");

if (answer == password) 

{

alert("welcome");

} else {

alert("buzz off");

}

显然代码长了很多,但是也更容易了解它的含义。选用何种
条件语句依每个人的喜好而定。

第四页:什么是变量  

这里是一个应用变量的例子:
var happiness = "a banana split";

alert("The monkeys think happiness is " + happiness);
这行代码声明一个叫做happiness的变量,然后在一个alert对
话框中调用这个变量。如果你看过别人的JavaScript,你可能
会注意到他们在声明变量时使用了var,这种用法可能会造成
问题。首先,可能会造成有些版本的 MSIE瘫痪,或运行不正
常。这种情况在Mac机上的MSIE最有可能发生。其次,如果你编
写很复杂的JavaScripts,你必须编写你自己的函数,所以你必
须了解变量的含义。

正如上次的JavaScript 教程: 第四天中所述,函数是被调用后
执行某特定功能的JavaScript 程序代码。最好的函数具有模块
化的特性,你可以控制输入的变量以及输出的结果。而且一旦
编好之后你就无需担心它会出问题,而且不会和别的函数发生
冲突。要使编写地函数具备这些稳定的特性,你必须确保不要
轻易改变那些作为参数传递给其他函数的变量. 下面对例子显
示了如果你不注意这些细节会造成什么后果。假设我们编写一
个程序将华氏温度转换为摄氏温度。点击华氏/摄氏来观察一下
我所指的意思。如果你转换转换华氏50度,则会出现一条信息:
“华氏50度相当于摄氏10度。”以下是代码:

function fahrenToCelsius(fare)
{
    temp = (faren - 32) * 5/9;
    return temp;
}
function convertTemp()
{
    temp = prompt("what temperature fahrenheit? ","50");
    celsius = fahrenToCelsius(temp);
    alert(temp + " degrees Fahrenheit is " +
   celsius + " degrees Celsius.");
}

这个程序很简单。一个叫做convertTemp()得函数调用另外一个
叫做fahrenToCelsius()并返回结果。如果你对本程序不是很懂,
你需要重新学习以下上次的javasript教程第4日。

关于这个例子让人困惑之处在两个函数中都有一个叫做temp得
变量,在convertTemp()函数中它的作用 是储存华氏温度
Fahrenheit值 (由用户提供)。在fahrenToCelsius()函数中,
它用于计算转换后灯摄氏温度值Celsius。这个不仅让我们感到
困惑而且也会让这个Javascript程序感到困惑。如果你试图用
变量运行这段代码就会发生下面的结果:如果你希望转换华氏
50度,则会显示下面的信息:"10 degrees Fahrenheit is 10
degrees Celsius."(华氏10度相当于摄氏10度)。为什么你输入
的是华氏50度,而程序却将其理解为你输入了10度呢?我们来
研究一下这个程序的执行过程。当我们调用函数convertTemp()
并在提示栏中输入了"50"时,我们得到temp = 50;然后"temp"
被传递给函数farenToCelsius()。在farenToCelsius()中,参
数faren被设定为50,而"temp" 被设定为(50 - 32) x 5/9, 其
结果是10。在返回结果之前,各项参数值是:

faren = 50
temp = 10

现在farenToCelsius()将10返回给变量celsius:

temp = 10
celsius = 10

现在我们得到一个错误的语句: "10 degrees Fahrenheit is 10
degrees Celsius"。如果你仔细一些,不要将两个函数中等变
量起同样的名称就可以避免这些问题。但这也不是最佳解决
方案。当你不断加入更多的函数时,很难确保你不会将函数中
的变量重名。而且如果你重复使用许多变量名例如loop,index,
count, 和the_name时,使用不同的名称实在是一个很令人头疼
的事。

最好的解决办法是让JavaScript明白在fahrenToCelsius()函数
中用到达变量temp和在convertTemp() 函数中用到的变量temp
是两码事。如果每个函数都有只应用于本函数内部的变量temp
你就无需担心不同函数中的同名变量会搅成一团。而var就是用
于这个目的。

第五页:变量的使用方法

要使JavaScript中各种同名变量不会发生混淆,你可以在声明
变量时在变量前面加上var。在一个函数内用var声明后灯的变
量叫做局部变量,它只存在于该函数内部。通常情况下你应该
尽量使用局部变量。

这里是用var声明后的正确的JavaScript代码:

function fahrenToCelsius(faren)

{

    var temp = (faren - 32) * 5 / 9;
    return temp;
}
function convertTemp()
{
    var temp = prompt("what temperature Fahrenheit? ","50");
    var celsius = badFahrenToCelsius(temp);
    alert(temp + " degrees Fahrenheit is " +
    celsius + " degrees Celsius.");
}

现在当我们输入50时,


(在convertTemp函数内部) temp = 50


temp被传递到函数fahrenToCelsius(),在函数fahrenToCelsius
()内部,参数faren现在被设定为50,然后temp 用以下代码
设定:

var temp = (faren - 32) * 5 / 9;

由于这个temp变量前面用var做了声明,所以该变量筒其他函数
中叫做temp的变量不同。执行完fahrenToCelsius()时,该函数
种的temp即告消失。所以在fahrenToCelsius()返回数值前,

faren = 50

(inside fahrenToCelsius) temp = 10

(inside convertTemp) temp = 50

fahrenToCelsius()然后返回它的变量temp值10。一旦我们
从fahrenToCelsius()函数中出来,该函数中等temp变量的作用
即告终止。当fahrenToCelsius() 返回时,它将变量的值设置
为10:

(在convertTemp内部) temp = 50
(在convertTemp内部) celsius = 10

现在显示的信息将是我们所希望的"50 degrees Fahrenheit is
10 degrees Celsius"。

《JavaScript高级程序设计 第三版》学习笔记 (十三)高级函数

1.安全的原生类型检验   js的原生类型,可以用typeof判断,但有时会失效。比如typeof array返回的不是Array,而是Object;再比如老版本IE,会将function识别为Ob...
  • sunscheung
  • sunscheung
  • 2017年04月06日 15:16
  • 590

JavaScript高级程序设计零碎知识点

1.包含在元素内部的JS代码会被从上到下依次解释,浏览器在对内部的所有代码求值完毕之前,页面中的其余内容都不会被浏览器加载或显示。 2.现代Web应用程序一般都把JavaScript的引用放到元素...
  • hellobeifeng
  • hellobeifeng
  • 2015年05月08日 15:49
  • 1077

JavaScript高级程序设计第3版学习心得(1)

语法 一、在html中加入JavaScript: 1.在html中嵌入JavaScript代码 if(1
  • u013500740
  • u013500740
  • 2017年01月03日 11:10
  • 529

《JavaScript高级程序设计(第3版)》.Nicholas.C.Zakas.扫描版.pdf

下载地址:网盘下载 内容简介 编辑 本书从最早期Netscape浏览器中的JavaScript开始讲起,直到当前它对XML和Web服务的具体支持,内容主要涉及Ja...
  • cf406061841
  • cf406061841
  • 2017年05月13日 00:13
  • 573

JavaScript-高级进阶

day03-JavaScript高级 1、js的函数定义(三种方式)  一、使用关键字  function 方法名称(参数列表) { 方法体和返回值 }          注意1:参数列表中的参...
  • tujunyong
  • tujunyong
  • 2016年11月29日 23:50
  • 1129

JavaScript里面的坑(一)——读《JavaScript高级程序设计》有感

JavaScript里面的对象&创建对象的方法
  • blankmanp
  • blankmanp
  • 2015年04月06日 23:12
  • 413

JavaScript高级程序设计(读书笔记)(一)

JavaScript高级程序设计(JS部分知识汇总)本笔记汇总了作者认为“JavaScript高级程序设计”这本书的前七章知识重点,仅供参考。第一章 JavaScript简介JavaScript发...
  • hc1025808587
  • hc1025808587
  • 2016年05月23日 22:43
  • 8970

个人笔记--JavaScript高级程序设计(第三版)--第五章

第五章 引用类型 Object类型 Array类型 Date类型 RegExp类型 Function类型 基本包装类型 单体内置对象 小结...
  • wx11408115
  • wx11408115
  • 2016年07月25日 20:03
  • 552

JavaScript高级技巧

下述内容主要讲述了《JavaScript高级程序设计(第3版)》第22章关于“高级技巧”。 一、高级函数函数是第一等公民,所有函数都是对象。1. 安全的类型检测JavaScript内置的类型检测机制并...
  • ligang2585116
  • ligang2585116
  • 2016年05月05日 21:13
  • 6025

JavaScript高级程序设计知识点汇总

前七章读书笔记详细介绍了原生JavaScript的基于ES5的全部知识点,本篇文章展示了本人绘制的后面章节内容的百度脑图,以便需要回顾知识点时能够作为一个索引,仅供参考。JavaScript相关技术B...
  • hc1025808587
  • hc1025808587
  • 2016年06月30日 11:01
  • 768
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JavaScript高级教程 - 第一课
举报原因:
原因补充:

(最多只允许输入30个字)