JS概述

JS概述

@(JavaScript)

语言核心

两个重要的数据类型是：

对象数组

对象：键值对集合

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

对象属性的访问

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

赋值即创造

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

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

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

var primes = [1,2,3,4]; primes[2]; // => 3 primes.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://...."

另外，之前把这句setTimeout(moveOn,60000);放到了moveOn函数里面，是不对的，这个是在全局环境下监控时间，然后调用函数执行。

通过脚本操纵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元素属性，而影响显示的属性常常是两个：

styleclass // 隐藏元素e function 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中存在这个类名 }

END.