JavaScript DOM编程艺术学习笔记

Posted 2020-08-23
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript DOM编程艺术学习笔记相关的知识，希望对你有一定的参考价值。
第二章 javascript语法

2.1 准备工作
编写JavaScript的环境:文本编辑器 + Web浏览器

用JavaScript编写的代码必须通过html/XHTML文档才能执行.有两种方式可以做到这点.

第一种是将JavaScript代码放到文档<head>便签中的<script>标签之间:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Example</title>
    <script>
        JavaScript goes here...
    </script>
</head>
<body>
  Mark-up goes here...
</body>
</html>
一种更好的方式是把JavaScript代码存为一个扩展名为.js的独立文件.典型的作法是在文档的<head>部分放一个<script>便签,并把它的src属性指向该文件:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Example</title>
    <script src="file.js"></script>
</head>
<body>
  Mark-up goes here...
</body>
</html>
但最好的作法是吧<script>标签放到HTML文档的最后,</body>便签之前:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Example</title>
</head>
<body>
  Mark-up goes here...
  <script src="file.js"></script>
</body>
</html>
       这样能使浏览器更快地加载页面.

3.  程序设计语言分为解释型和编译型两大类.

编译型:Java,C++等,需要编译器(compiler)将源代码翻译为直接在计算机上执行的文件.优点:用编译型语言编写的代码有错误,这些错误会代码编译阶段就能被发现.速度相比更快,可移植性更好.

解释型:JavaScript等,不需要编译器-----它们仅需要解释器.对于JavaScript语言,在互联网环境下,Web浏览器负责完成有关的解释和执行工作.浏览器中的JavaScript解释器将直接读入源代码并执行.浏览器中如果没有解释器,JavaScript代码就无法执行.优点:入门容易.缺点:代码中的错误,只有等到解释器执行到有关代码时才能被发现.

2.2 语法
2.2.1 语句

用JavaScript编写的脚本,与其他语言编写出来的脚本一样,都由一系列指令构成,这些指令叫做语句(statement).

良好的编程习惯:在每条语句的末尾都加上一个分号,

first statement;
second statement;


2.2.2 注释

<!-- 这是JavaScript中的注释
<!-- 这是HTML种的注释 -->
建议:用"//"来注释单行,用/*xxx*/注释多行.

2.2.3 变量

变量:把会发生变化的东西称为变量(variable).比如:年龄.

赋值:把值存入变量的操作称为赋值(assignment).一旦变量被赋值后,我们就说该变量包含这个值.

mood = "happy";
age = 33;
声明:在JavaScript脚本中,如果程序员在对某个变量赋值之前未声明,赋值操作将自动声明该变量.虽然JavaScript没有强制要求程序员必须提前声明变量,但提前声明变量是一种良好的编程习惯.

var mood,age;
mood = "happy";
age = 33;
或
var mood = "happy";
var age = 33;
或
var mood = "happy",var age = 33;
在JavaScript语言里,变量和其他语法元素的名字都是区分字母大小写的.

JavaScript语法不允许变量名中包含空格或标点符号(美元符号"$"例外).

JavaScript变量名允许包含字母、 数字 、美元符号和下划线(但第一个字符不允许是数字).另一种方式是使用驼峰格式(camel case),删除中间的空白(下划线),后面的每个新单词改用大写字母开头;通常驼峰格式是函数名、方法名和对象属性名命名的首选格式.

var myMood = "happy";
在上面这条语句中,单词"happy"是JavaScript语言中的一个字面量(literal),也就是可以直接在JavaScript代码中写出来的数据.

2.2.4 数据类型

类型声明(typing):在声明变量的同时还必须同时声明变量的数据类型,这种做法称为类型声明.

强类型(strongly typed)语言必须明确类型声明,弱类型(weakly typed)语言则不需要,JavaScript就不需要.

字符串

      字符串由零个或多个字符构成.字符包括(但不限于)字母、数字、标点符号和空格.字符串必须包在引号里,单引号或双引号都可以.下面这两条语句含义完全相同:

var mood = ‘happy‘;
var mood = "happy";
如果想用双引号来包住一个本身就包含双引号的字符串,就必须用反斜线对字符串中的双引号进行转义(escaping).在JavaScript里用反斜线对字符进行转义:

var height = "about 5‘10\" tall";
单引号同理:
var mood = ‘don\‘t ask‘;


作为一个好的良好的编程习惯,不管选择用双引号还是单引号,请在整个脚本中保持一致.推荐用双引号.

2. 数值

var age = 33.25;
3. 布尔值

布尔(boolean)数据只有两个可选值----true或false.

var sleeping = true;
2.2.5 数组

字符串、数值和布尔值都是标量(scalar).如果某个变量是标量,它在任意时刻就只能有一个值.如果想用一个变量来存储一组值,就需要使用数组(array).

1.数组是指用一个变量表示一个值得集合,集合中的每个值都是这个数组的一个元素(element).

var beatles = Array(4);
beatles[0] = "John";
beatles[1] = "Paul";
beatles[2] = "George";
beatles[3] = "Ringo;"
或

var beatles = Array("John","Paul","George","Ringo");
或

var beatles = ["John","Paul","George","Ringo"];
不要求元素类型

var lennon = ["John",1940,false];
数组元素还可以是变量:

var name = "John";
beatles[0] = name;
数组元素的值还可以是另一个数组的元素:

var names = ["Ringo","John","George","Paul"];
beatles[1] = names[3];


数组还可以包含其他的数组:数组中的任何一个元素都可以把一个数组作为它的值;

var lennon = ["John",1940,false];
var beatles = [];
beatles[0] = lennon;


2.关联数组

如果在填充数组时只给出了元素的值,这个数组就将是一个传统数组,它的各个元素的下标将被自动创建和刷新.可以通过在填充数组时为每个新元素明确地给出下标来改变这种默认的行为.在为新元素给出下标时,不必局限于使用整数数字.

var lennon = Array();
lennon["name"] = "John";
lennon["year"] = 1940;
lennon["living"] = false;
这样的数组叫做关联数组.

2.2.6 对象

与数组类似,对象也是使用一个名字表示一组值.对象的每个值都是对象的一个属性.

创建对象
{ propertyName:value,propertyName:value }
例:
var lennon = { name:"John",year:1940,living:false }
2.3 操作
算数操作符:

赋值操作符       =

加法操作符       +

减法操作符       -

乘法操作符       *

除法操作符       /

加号(+)是一个比较特殊的操作符,它既可以用于数值,也可以用于字符串.

var total = (1 + 4) * 5;
var message = "I am feeling " + "happy";

像这样把多个字符串首尾相接在一起的操作叫做拼接(concatenation).

因为JavaScript是弱语言,可以把字符串和数值拼接在一起,此时,数值将被自动转换为字符串:

var year = 2016;
var message = "The year is " + year;
如果把字符串和数值拼接在一起,其结果将是一个更长的字符串;但如果用同样的操作符来"拼接"两个数值,其结果将是那两个数值的算术和.

alert("10" + 20); //返回字符串"1020"
alert(10 + 20);//返回数值30


2.4 条件语句
if(condition) {
    statements;
}
2.4.1 比较操作符

大于                  >

小于                  <

等于                  ==

不等于                !=

大于或等于             >=

小于或等于             <=

全等操作符             ===     严格比较,不仅比较值,而且会比较变量的类型;

不等操作符             !==

var = false;
var = "";
if (a === b) {
   alert("a equals b");
}
2.4.2 逻辑操作符

逻辑与          &&

逻辑或          ||

逻辑非          !

2.5 循环语句
2.5.1 while循环

while(condition) {
   statements;
}

只要给定条件的求值结果是true,包含在花括号里的代码就将反复地执行下去



do...while循环

do {
   statements;
} while (condition);
包含在花括号里的语句至少被执行一次


2.5.2 for循环

for (initial condition;test condition;alter conditon){
   statements;
}
例:

for (var count = 1;count < 11;count ++){
  alert(count);
}


2.6 函数
定义一个函数的语法:

function name(arguments){
   statements;
}
在定义函数时,可以为它声明任意多个参数,只要用逗号把它们分隔开来就行.

function multiply(num1,num2) {
  var total = num1 * num2;
  alert(total);
}
multiply(10,2);
还可以把函数当做一种数据类型来使用,这意味着可以把一个函数的调用结果赋给一个变量:

var temp_fahrenheit = 95;
var temp_celsius = convertToCelsius(temp_fahrenheit);
alert(temp_celsius);
变量的作用域:

全局变量(global variable)可以在脚本中的任何位置被引用.一旦在某个脚本里声明了一个全局变量,就可以从这个脚本中的任何位置----包括函数内部----引用它.全局变量的作用域是整个脚本.

局部变量(local variable)只存在于声明它的那个函数的内部,在那个函数的外部是无法引用它的.局部变量的作用于仅限于某个特定的函数.

如果在某个函数中使用了var,那个变量就将被视为一个局部变量,它只存在于这个函数的上下文中;反之,如果没有使用var,那个变量就将被视为一个全局变量,如果脚本里已经存在一个与之同名的全局变量,这个函数就会改变那个全局变量的值.

例:

function square(num) {
  total = num * num;
  return total;
}
var total = 50;
var number = square(20);
alert(total);
//输出为400;全局变量total的值变成了400.
修改一下
function square(num) {
  var total = num * num;
  return total;
}
现在,全局变量total变得安全了,再怎么调动square()函数也不会影响到它.
函数在行为方面更应该像一个自给自足的脚本,在定义一个函数时,我们一定要把它内部的变量全都明确地声明为局部变量.

2.7 对象
对象(object)是一种非常重要的数据类型.对象是自包含的数据集合,包含在对象里的数据可以通过两种形式访问------属性(property)和方法(method).

属性是隶属于某个特定对象的变量;

方法是只有某个特定对象才能调用的函数.

对象就是由一些属性和方法组合在一起而构成的一个数据实体.

在JavaScript里,属性和方法都使用"点"语法来访问:

Object.property
Object.method()
2.7.1 内建对象

JavaScript提供了一系列预先定义好的对象,这些可以拿来就用的对象称为内建对象(native object).

var beatles = new Array();
2.7.2 宿主对象

除了内建对象,还可以在JavaScript脚本里使用一些已经预先定义好的其他对象.这些对象不是由JavaScript语言本身而是由它的运行环境提供的.具体到Web应用,这个环境就是浏览器.由浏览器提供的预定义对象被称为宿主对象(host object).


宿主对象包括Form、Image和Element,document等.