再探JS-基础

JavaScript如今也算的上是如日中天，学好js还是很有必要的。

JS教程

认识JavaScript

JavaScript 是脚本语言。

JavaScript 是一种轻量级的编程语言。

JavaScript 是可插入 HTML 页面的编程代码。

JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。

JavaScript 很容易学习。

特别提示

JavaScript 与 Java 是两种完全不同的语言，无论在概念还是设计上。

Java（由 Sun 发明）是更复杂的编程语言。

ECMA-262 是 JavaScript 标准的官方名称。

JavaScript 由 Brendan Eich 发明。它于 1995 年出现在 Netscape 中（该浏览器已停止更新），并于 1997 年被 ECMA（一个标准协会）采纳。

使用

HTML 中的脚本必须位于 标签之间。

脚本可位于 HTML 的 或 部分中，或者同时存在于两个部分中。
通常的做法是把函数放入 部分中，或者放在页面底部。这样就可以把它们安置到同一处位置，不会干扰页面的内容。

My Web Page

A Paragraph

Try it

外部的 JavaScript

JavaScript 文件的文件扩展名是 .js。

如需使用外部文件，请在

JavaScript 输出

操作HTML元素

document.getElementById(id)

document.getElementById("demo").innerHTML="My First JavaScript";

写到文档输出

document.write("
My First JavaScript
");

警告使用 document.write() 仅仅向文档输出写内容。如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖。

JavaScript 语句

分号

分号用于分隔 JavaScript 语句。

通常我们在每条可执行的语句结尾添加分号。

使用分号的另一用处是在一行中编写多条语句。

在 JavaScript 中，用分号来结束语句是可选的。

JavaScript 对大小写敏感。

当编写 JavaScript 语句时，请留意是否关闭大小写切换键。

函数 getElementById 与 getElementbyID 是不同的。

同样，变量 myVariable 与 MyVariable 也是不同的。

对代码行进行折行

您可以在文本字符串中使用反斜杠对代码行进行换行。

下面的例子会正确地显示：

document.write("Hello \
World!");

不过，您不能像这样折行：

document.write \
("Hello World!");

JavaScript 变量

变量以字母、$ 和 _ 符号开头（不推荐$_开头）。

变量名称对大小写敏感（y 和 Y 是不同的变量）。

声明（创建） JavaScript 变量

var 关键词来声明变量：var carname;

向变量赋值使用等号：carname="Volvo";

在声明变量时对其赋值：var carname="Volvo";

一条语句，多个变量

var name="Gates", age=56, job="CEO";

var name="Gates",
age=56,
job="CEO";

Value = undefined

在计算机程序中，经常会声明无值的变量。未使用值来声明的变量，其值实际上是 undefined。

在执行过以下语句后，变量 carname 的值将是 undefined：var carname;

重新声明 JavaScript 变量

如果重新声明 JavaScript 变量，该变量的值不会丢失：

在以下两条语句执行后，变量 carname 的值依然是 "Volvo"：

var carname="Volvo";
var carname;

JavaScript 数据类型

JavaScript 拥有动态类型

JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型。

var x                // x 为 undefined
var x = 6;           // x 为数字
var x = "Bill";      // x 为字符串

JavaScript 字符串

字符串可以是引号中的任意文本。您可以使用单引号或双引号。

var carname="Bill Gates";
var carname='Bill Gates';

您可以在字符串中使用引号，只要不匹配包围字符串的引号即可：

var answer="Nice to meet you!";
var answer="He is called 'Bill'";
var answer='He is called "Bill"';

JavaScript 数字

JavaScript 只有一种数字类型。数字可以带小数点，也可以不带：

var x1=34.00;      //使用小数点来写
var x2=34;         //不使用小数点来写

极大或极小的数字可以通过科学（指数）计数法来书写：

var y=123e5;      // 12300000
var z=123e-5;     // 0.00123

JavaScript 布尔

布尔（逻辑）只能有两个值：true 或 false。

var x=true
var y=false

JavaScript 数组

var cars=new Array();
cars[0]="Audi";
cars[1]="BMW";
cars[2]="Volvo";

var cars=new Array("Audi","BMW","Volvo");

var cars=["Audi","BMW","Volvo"];

JavaScript 对象

对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔：

var person={firstname:"Bill", lastname:"Gates", id:5566};

空格和折行无关紧要。声明可横跨多行：

var person={
firstname : "Bill",
lastname  : "Gates",
id        :  5566
};

对象属性有两种寻址方式：

name=person.lastname;
name=person["lastname"];

Undefined 和 Null

Undefined 这个值表示变量不含有值。可以通过将变量的值设置为 null 来清空变量。

cars=null;
person=null;

声明变量类型

当您声明新变量时，可以使用关键词 "new" 来声明其类型：

var carname=new String;
var x=      new Number;
var y=      new Boolean;
var cars=   new Array;
var person= new Object;

JavaScript 对象

JavaScript 中的所有事物都是对象：字符串、数字、数组、日期，等等。
在 JavaScript 中，对象是拥有属性和方法的数据。

属性和方法

属性是与对象相关的值。

方法是能够在对象上执行的动作。

JavaScript 函数

函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。

JavaScript 函数语法

function functionname()
{
这里是要执行的代码
}

调用带参数的函数

myFunction(argument1,argument2)

当您声明函数时，请把参数作为变量来声明：

function myFunction(var1,var2)
{
这里是要执行的代码
}

带有返回值的函数

function myFunction()
{
var x=5;
return x;
}

在您仅仅希望退出函数时 ，也可使用 return 语句。返回值是可选的：

function myFunction(a,b)
{
if (a>b)
  {
  return;
  }
x=a+b
}

局部 JavaScript 变量

在 JavaScript 函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它。（该变量的作用域是局部的）。
您可以在不同的函数中使用名称相同的局部变量，因为只有声明过该变量的函数才能识别出该变量。
只要函数运行完毕，本地变量就会被删除。

全局 JavaScript 变量

在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。

JavaScript 变量的生存期

JavaScript 变量的生命期从它们被声明的时间开始。

局部变量会在函数运行以后被删除。

全局变量会在页面关闭后被删除。

向未声明的 JavaScript 变量来分配值

如果您把值赋给尚未声明的变量，该变量将被自动作为全局变量声明。
这条语句：

carname="Volvo";

将声明一个全局变量 carname，即使它在函数内执行。

JavaScript 运算符

用于字符串的 + 运算符

+ 运算符用于把文本值或字符串变量加起来（连接起来）。

如果把数字与字符串相加，结果将成为字符串。

JavaScript 比较和逻辑运算符

=== 全等（值和类型）

Switch

switch(n)
{
case 1:
  执行代码块 1
  break;
case 2:
  执行代码块 2
  break;
default:
  n 与 case 1 和 case 2 不同时执行的代码
}

For

JavaScript for/in 语句循环遍历对象的属性：

var person={fname:"John",lname:"Doe",age:25};

for (x in person)
  {
  txt=txt + person[x];
  }

While

do/while 循环

do/while 循环是 while 循环的变体。该循环会执行一次代码块，在检查条件是否为真之前，然后如果条件为真的话，就会重复这个循环。

do
  {
  需要执行的代码
  }
while (条件);

JavaScript Break 和 Continue 语句

break 语句用于跳出循环。
continue 用于跳过循环中的一个迭代。

JavaScript 错误 - Throw、Try 和 Catch

try 语句测试代码块的错误。
catch 语句处理错误。
throw 语句创建自定义错误。

try
  {
  //在这里运行代码
  }
catch(err)
  {
  //在这里处理错误
  }

实例：

My First JavaScript
Please input a number between 5 and 10:

Test Input

JavaScript表单验证

必填（或必选）项目

Email: 
 

E-mail 验证

    


    

        Email:
        
        
    

JS HTML DOM

HTML DOM （文档对象模型）:当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。HTML DOM 模型被构造为对象的树。

• JavaScript 能够改变页面中的所有 HTML 元素
• JavaScript 能够改变页面中的所有 HTML 属性
• JavaScript 能够改变页面中的所有 CSS 样式
• JavaScript 能够对页面中的所有事件做出反应

简介

查找 HTML 元素

• 通过 id 找到 HTML 元素 var x=document.getElementById("intro");
• 通过标签名找到 HTML 元素

查找 id="main" 的元素，然后查找 "main" 中的所有

元素：

var x=document.getElementById("main");
var y=x.getElementsByTagName("p");

• 通过name找到 HTML 元素 getElementsByName()

DOM HTML

HTML DOM 允许 JavaScript 改变 HTML 元素的内容。

改变 HTML 输出流

document.write() 

可用于直接向 HTML 输出流写内容

示例：

绝不要使用在文档加载之后使用 document.write()。这会覆盖该文档。

改变 HTML 内容

document.getElementById(id).innerHTML=new HTML

示例：

改变 HTML 属性

document.getElementById(id).attribute=new value

示例：

DOM CSS

HTML DOM 允许 JavaScript 改变 HTML 元素的样式。

改变 HTML 样式

document.getElementById(id).style.property=new style

示例：

document.getElementById("p2").style.color="blue";

DOM 事件

onload 和 onunload 事件

onload 和 onunload 事件会在用户进入或离开页面时被触发。

onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。

onload 和 onunload 事件可用于处理 cookie。

示例：

onchange 事件

onchange 事件常结合对输入字段的验证来使用。

onmouseover 和 onmouseout 事件

onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。

onmousedown、onmouseup 以及 onclick 事件

onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。

DOM 元素（节点）

创建新的

元素：

var para=document.createElement("p");

创建文本节点：

var node=document.createTextNode("这是新段落。");

向

元素追加这个文本节点:

para.appendChild(node);

从父元素中删除子元素：

parent.removeChild(child);

常用的解决方案：找到您希望删除的子元素，然后使用其 parentNode 属性来找到父元素：

var child=document.getElementById("p1");
child.parentNode.removeChild(child);

JavaScript对象

JavaScript 中的所有事物都是对象：字符串、数值、数组、函数...
此外，JavaScript 允许自定义对象。

JavaScript 提供多个内建对象，比如 String、Date、Array 等等。
对象只是带有属性和方法的特殊数据类型。

访问对象的属性

objectName.propertyName

示例：

var message="Hello World!";
var x=message.length;

访问对象的方法

objectName.methodName()

示例：

var message="Hello world!";
var x=message.toUpperCase();

Number 对象

JavaScript 数字

JavaScript 数字可以使用也可以不使用小数点来书写：

var pi=3.14;    // 使用小数点
var x=34;       // 不使用小数点

极大或极小的数字可通过科学（指数）计数法来写：

var y=123e5;    // 12300000
var z=123e-5;   // 0.00123

八进制和十六进制

如果前缀为 0，则 JavaScript 会把数值常量解释为八进制数，如果前缀为 0 和 "x"，则解释为十六进制数。

var y=0377;
var z=0xFF;

提示：绝不要在数字前面写零，除非您需要进行八进制转换。

JS Window

浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器“对话”。

Window 对象

Window 对象
所有浏览器都支持 window 对象。它表示浏览器窗口。
所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
全局变量是 window 对象的属性。
全局函数是 window 对象的方法。