JS概述

JS概述

@(JavaScript)

语言核心

两个重要的数据类型是：
+ 对象
+ 数组

对象：键值对集合

var book = {    topic:"Javascript",    fat:true};

对象属性的访问

book.topic // Way 1book["fat"] // Way 2

赋值即创造

这个在其他语言环境中是不常见的，目前只在JS中见过。

book.author = "Flanagan"; // 创建了新的属性book.contents = {}; // 添加新的空对象作为book对象的属性

数组 : 与其他语言几乎相同

var primes = [1,2,3,4];primes[2]; // => 3primes.length; // => 4, 元素个数primes[4] = 9; // 赋值即创造

强大的动态性

这个标题下，我准备强调的是数组和对象中都可以包含另一个对象或数组。

复习到这里，想到JSON文件格式，和这个特性完美契合。

JS类型的函数

函数可以多次调用。

最普通的定义函数方法：

function plus(x){    return x++;}

变量型的定义法

var square = function(x){    return x * x;}; // 注意这里要有分号square(4); // => 16

在JavaScript世界里，所有事物都是一个Object。

对象身上的函数也叫method。

一般数组对象本身已经定义了一些方法。

var a = [];a.push(1,2,3); // 添加三个元素a.reverse(); //翻转数组

为对象添加自定义函数

var points = [{x:0,y:0},{x:1,y:1}];points.dist = function(){    var p1 = this[0];    var p2 = this[1];    var a = p2.x - p1.x;    var b = p2.y - p1.y;    return Math.sqrt(a * a + b * b);};//调用points.dist(); // 返回两点之间距离

这里有三个点需要单独拿出来说：

• 赋值即创造：points.dist是新加属性
• 函数可以赋予变量
• this关键字表示当前的对象

小总结：JavaScript是面向对象的语言。

但是，这个面向对象与其他主流语言的面向对象有很大的不同。牵涉到JS核心的类和模块相关的知识理解。也需要进一步研究原型链相关的知识。

以最简单的例子来看这种思路：

// 定义一个构造函数初始化一个新的Point对象function Point(x,y){    this.x = x; // this指代初始化的实例    this.y = y; // 赋值即创造-->属性}var p = new Point(1,1); // 使用new关键字创建实例

原型链这个需要单独拿出来说：

Point.prototype.r = function(){    var res = Math.sqrt(this.x * this.x + this.y * this.y);    return res;};p.r(); // 对象实例可以调用方法

这个示例显示的是通过给构造函数的prototype对象赋值，可以给Point对象定义方法。

客户端JS

通过尖刀标签<script></script>在HTML中引入JS。

<script>function moveOn(){    var answer = confirm("Ready?");    if(answer) window.location = "http://taobao.com"; //跳转到链接    setTimeout(moveOn,60000); // 1分钟后执行函数}</script>

注意到如何在JS中设定跳转URL的方法：

window.location = "http://...."

通过脚本操纵HTML元素

这是JS里非常核心的内容，即我们常说的DOM操作。

可以做到：

• 为HTML设置属性
• 修改元素内容
• 给HTML文档添加新结点:document.createElement

展示一个例子：

function debug(msg){    var log = document.getElementById("debuglog");    if(!log) // log为空时    {        log = document.createElement("div");        log.id = "debuglog";        log.innerHTML = "<h1>Debug log</h1>";        document.body.appendChild(log); //加到文档末尾    }    var pre = document.createElement("pre");    var text = document.createTextNode(msg);    pre.appendChild(text);    log.appendChild(pre); //pre被添加到log}

通过JS操作CSS

大的范畴仍然是通过JS操作HTML元素属性，而影响显示的属性常常是两个：

• style
• class

// 隐藏元素efunction hide(e,reflow){    if(reflow)    {        e.style.display = "none";     }    else    {        e.style.visibility = "hidden";     }}function highlight(e){    if(!e.className) e.className = "hilite"; //    else e.className += "hilite"; //假设CSS中存在这个类名}