这不是一个参考手册、编程指南或者全面讲解。本文假定你了解其他编程语言,然后作为一篇快速了解JavaScript的指南而存在(尽情使用ctrl+f)。JavaScript跟Java没有关系,它是一个有着类C语法的动态语言。
在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关键字,但是任然可以创建“构造器”并且添加方法。
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"
查找并且修改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"; // 获取或者设置值
原文