猪窝

2007-12-06

了解javascript-JavaScript学习笔记

Filed under: JavaScript — admin @ 11:31 pm

第一章:JavaScript简史

本章内容:

  • JavaScript的起源
  • 浏览器之争
  • DOM的演变史
  1. JavaScript的起源

BOM:浏览器对象模型

DOM:文档对象模型

什么是DOM?

简单的说,DOM是一套对文档的内容进行抽象和概念化的方法。

因为”image”和”forms”都是程序员已经理解了的”抽象化概念”,所以我们才能像下面这样在JavaScript脚本里引用”文档中第三个图像”或”文档中名为’details’”的表单:

document.image[2]

document.forms[’details’]

  1. 浏览器之争

    1. DHTML

DHTML是”dynamic HTML”的简称。DHTML的背后含义是:

  • 利用HTML把网页标记为各种元素;
  • 利用CSS设计各有关元素的排版样式并确定它们在窗口中的显示位置
  • 利用JavaScript实时的操控和改变有关样式

辅助了解:什么是 SHTML

使用SSI(Server Side Include)的html文件扩展名,SSI(Server Side Include),通常称为”服务器端嵌入”或者叫”服务器端包含”,是一种类似于ASP的基于服务器的网页制作技术。

  1. 浏览器之间的冲突

Netscape公司的DOM使用了专有的元素,称为层(layer)。这些层有唯一的ID,需要这样使用:

document.layer[’myelement’]

而在微软公司的DOM中,这个元素必须像下面这样声明

document.all[’myelement’]

这两种DOM在细节方面的差异并不止于这一点。假设你想找出myelement元素的left位置并把它赋值给变量xpos,那么netscape浏览器里必须这么做:

var xpos = document.layers[’myelement’].left

而在IE 4中,需要如下使用

var xpos = document.all[’myelement’].leftpos;

DHTML已经没落了:DHTML打开了一扇通往新世界的大门,但进入这个大门的人们发现这条路并不好走。

  1. 制定标准

新的标准化DOM的工作模式范例:

var xpos = document.getElementById(’myelement’).style.left

W3C推出的标准化DOM可以让任何一种程序设计语言对使用任何一种标记语言编写出来的任何一份文档进行操控。

  1. 浏览器以外的考虑

DOM是一种API(应用编程接口)。简单的说,API就是一组已经得到有关各方共同认可的基本约定。

W3C对DOM的定义是:”一个与系统平台和编程语言无关的接口,程序和脚本可以通过这个接口动态的对文档的内容,结构和样式进行访问和修改。”

第二章: JavaScript语法

  • 语句
  • 变量和数组
  • 操作符
  • 条件语句和循环语句
  • 函数与对象

2.1 准备工作

两种使用JS的方法:

代码插入文档<head>部分的<script>标签间

<html>

<head>

<script type=”text/javascript”>

</script>

</head>

</html>

更好的方法是先把js代码存入一个文件,建议.js作为这种文件的文件名,再利用<script>标签的src属性指向该文件

<html>

<head>

<script type=”text/javascript” src=”file.js”>

</script>

</head>

</html>

程序设计语言分为解释型和编译型两大类。Java或C++语言需要一个编译器,编译器是一种能够把用Java等高级语言编写出来的源代码翻译为直接在计算机上执行的二进制可执行文件的程序。

解释型程序设计语言不需要编译器—它们仅需要解释器。

与解释型程序设计语言相比,编译型程序设计语言往往速度更快,可移植性也更好,但它们的学习曲线往往相当陡峭。

2.2 语法

语法指语句结构方面的各项规则

2.3 语句

语句是任何一个脚本的基本构成单位。

将每条语句独占一行,并用分号作为结尾,是良好的习惯,同时更利于跟踪JS脚本的执行流程。

注释://为注释符,只对一行内的语句有效。

或使用/* */ 这种注释符号。

2.4 变量

JS对变量赋值的语法:

mood = “happy”;

age = “33″;

把值赋给变量后,该变量即包含这个值,我们可以通过其他的方式使用这些变量。

JS允许程序员直接对变量进行赋值而无需提前对它们做出声明。但提前对变量做出声明是一个良好的编程习惯

var mood, age;

var mood=”happy”;

var age = 33;

var mood = “happy”, age = 33;

JS中,变量和其他语法元素的名字是区分大小写的。不允许变量的名字中包含空格或标点符号。允许包含字母,数字,美元符号和下划线字符。

var my_mood = “happy”;

其中,happy是一个字面量,也就是可以在JS代码中直接写出来的数据内容。

2.4.1 数据类型

变量mood的值是一个字符串类型的字面量,变量age的值则是一个数值类型的字面量

类型声明

强类型

弱类型

  1. 字符串

字符串由零个或多个字符构成。包括字母,数字,标点符号和空格。字符串必须放在引号里。

如果字符串本身包括双引号,则最好放在单引号中,如字符串本身包括单引号,则最好放在双引号中。

字符转义: \符号为字符转义符号。

  1. 数值

比较随意

  1. 布尔值

布尔值只有两种: true或false

布尔值的两种状态不可能同时出现,千万不要把布尔值用引号括起来,否则就编程字符串类型的数据。

2.4.2 数组

字符串,数值和布尔值都属于离散值,如果某个变量是离散的,它在任意时刻就只能有一个值,如果想用一个变量来存储一组值,就需要数组(array)

var beatles = Array(4);

声明的同时,规定了这个数组的长度。

可以在声明数组时不给出明确具体的元素个数

var beatles = Array();

向数组中添加元素的操作称为填充。填充数组时,不仅需要给出新元素的值,还需要在数组中为新元素指定存放位置,这个位置要通过下标(index)指出。

array[index] = element;

var beatles = Array(4);

beatles[0] = “John”;

beatles[1]= “Paul”;

beatles[2] = “George”;

beatles[3] = “Ringo”;

数组第一个元素的下标是0

var beatles = Array(”John”, “Paul”, “George”, “Ringo”);

var lennon = Array(”John”, 1940, false);

数组元素可以是变量:

var name = “John”;

beatles[0] = name;

数组元素的值可以是另外一个数组的元素。

var names = Array(”Ringo”, “John”, “George”, “Paul”);

beatles[1] = names[3];

数组还可以包含其他数组

var lennon = Array(”John”, 1940, false);

var beatles = Array();

beatles[0] = lennon;

读取多重数组中的值 beatles[0][0]

关联数组

数组的下标可以是字符串:

var lennon = Array();

lennon[”name”] = “John”;

lennon[”year”] = 1940;

lennon[”living”] = false;

关联数组可以大大提高数组的可读性。

2.5 操作

算术操作符

+, -, *, /

变量可以包含操作

操作可以对变量进行

+也可以用作拼接,针对字符串。如果把数值与字符串拼接,则得到的还是字符串。

+=: 可以一次完成”加法和赋值”或拼接和赋值

var year = 2005;

var message = “This year is”;

message += year;

1 Comment »

  1. 481bc5f139…

    481bc5f139…

    Trackback by 481bc5f139 — 2008-05-03 @ 9:55 am

RSS feed for comments on this post. TrackBack URL

Leave a comment

Powered by WordPress