JavaScript简明教程

这不是一个参考手册、编程指南或者全面讲解。本文假定你了解其他编程语言，然后作为一篇快速了解JavaScript的指南而存在（尽情使用ctrl+f）。JavaScript跟Java没有关系，它是一个有着类C语法的动态语言。

启用JavaScript

在HTML文件中直接嵌入JavaScript脚本：

<script>
    x = 3;
</script>

在HTML文件中引用外部JavaScript文件：

<script src="http://example.com/script.js"></script>

如果浏览器不支持JavaScript则重定向：

<noscript><meta http-equiv="refresh" content="0; URL=http://example.com/noscript.html"/></noscript>

使用变量、对象和数组

深入理解对象

var str = "Hello";                // 如果定义在函数内则为局部变量
str2 = "Hello World";             // 默认上下文中全局变量(window.str2)
str3 = 'My quote char: " ';       // 使用单引号或者双引号定义字符串
str4 = "My really really really \
really long string broken into \
multiple lines";

str = 19;                         // 赋值为整数
str = 0xfe + 2.343 + 2.5e3;       // 十六进制, 浮点数, 指数形式

var newObject = new Object();     // 构造方法
newObject = {};           // 结果同上，更简洁的方式
newObject.name = "bob"            // 动态添加属性
newObject.name = null         // 属性依然存在 (其值为null)
delete newObject.name         // 属性不存在了 (undefined)
newObject["real age"] = 33;       // 数组（哈希表）形式的属性访问

var obj = {           // 使用JSON格式创建对象
    name: "Bob",          //   又名 Javascript Object Notation
    details: {
        age: 33,
        "favorite color": "green"
    }
}
obj.name
obj.details["favorite color"]

var newArray = [];                // 没有元素的数组
newArray[3] = "hi";               // 容量动态增长
newArray[2] = 13;                 // 可以存入任意类型的数据
newArray.push(newObject);         // 添加元素
newArray.pop();               // 删除元素

比较和操作

Javascript有一些奇怪的类型及比较

/* javascript 类型 */
typeof("string") == "string"
typeof(3) == typeof(3.4) == typeof(0x34) == "number"
typeof(myObject) == typeof(myArray) == "object" // 数组是对象
typeof(true) == typeof(1 == 2) == "boolean"
typeof(Math.sin) == "function" //函数其实也是对象
typeof(notthere) == "undefined"
//还有一种类型Null，只有一个值null。使用typeof运算符返回"object"

/* 比较 */
123 == "123"                     // true => 此处有类型转换
123 === "123"                    // false => 严格比较，不进行类型转换
typeof(x) == "undefined"     // x 不存在
x == null            // x 存在，其值为null

/* 数值 */
parseInt("123")          // 以10为基数进行转化 => 123
parseInt("123", 16);         // 以16为基数进行转化 => 291
parseFloat("123.43");        // 123.43

isNaN(0/0) == true       // 不合法的数值
3/0 == Infinity          // 合法
-3/0 == -Infinity        //
isFinite(3/0) == false       // ... 不是有限大，即无限大

/* 使用正则表达式(regex)进行字符串比较 */
matches = "hello".match(/h../)   // 返回数组 ["hel"] 或 null

re = new RegExp("h..", "ig");    // 构造正则表达式对象(非斜线表示法)
matches = "hello".match(re);     // 使用上面的正则表达式

"hello".replace(/h/,"b")     // => "bello"

条件和循环

if (str == "Hello"){    // if-else
  alert("Hi");      // 弹框
}
else{
  alert("something is wrong!");
}

a = 3, b = 4;       // 多重赋值
c = a > b ? a : b;  // c 得到较大的值 (b)

switch (name){      // switch 语句
  case "Bob":
    alert("Hi Bob!")
    break
  case "Joe":
    alert("Hey Joe.")
    break
  default: alert("Do I know you?")
}

while (i < n){          // the basics
 // do something
 i++;
}

for (var i=0; i<n; i++){
  // do something else
}

for (var key in obj){
  // do something with obj[key]
}

定义函数

function foo(a,b){          // 全局函数
  return a + b;
}

var fn = function(a,b){     // 以变量形式定义函数
  return foo(a,b);
}

obj.fn = function(a,b){     // 或者作为对象的一部分
  return a + b;
}

function bar(a,b){
    var n = 1;                  // 局部变量

    function helper(x) {            // 内部函数
        return 1/Math.sqrt(x + n);  // 可以使用局部变量
    }
    return helper(input);           // 可以避免使用全局变量
}

foo(1,2) == fn(1,2) == 3;   // true

JavaScript中的Class

JavaScript没有正式class关键字，但是任然可以创建“构造器”并且添加方法。

function Person(first, last) { // 创建 "构造器"
    this.first = first;        // 公开变量 -- 引用当前对象
    this.last = last;

    var privateFn = function(first, last){  // 私有函数
    // ...
    }

    this.setName = function(first, last){ // 公开函数
        this.first = first;
        this.last = last;
    }

}

Person.prototype.fullName = function() { // 扩展原型
    return this.first + ' ' + this.last; //   即使是在运行时
}

var bob = new Person("Bob", "Smith"); // "new" 用来创建对象
bob.fullName();               // => "Bob Smith"

浏览器的文档对象模型（DOM），及GUI

查找并且修改HTML元素

alert("message");  // 弹出"OK"消息框
var choice = confirm("message");  // OK/CANCEL确认框
var input = prompt("message", "default value"); // 提示输入值; 如果取消则返回null

x = document.getElementById("foo");    // 查找元素 <div id="foo"></div>

x.style.background = "#333";           // 设置CSS样式
x.style.borderLeft = "1px solid #ccc"; // border-left => borderLeft (camelCase)

x.className = "myclass";           // 设置 CSS class
x.innerHTML = "Hello";             // 设置div中的html

y = document.getElementById("myinput"); // 输入区
y.value = "Hi";                 // 获取或者设置值

原文