Web设计 3 java_script初探（程序员与设计师的双重眼光）

Chapter 3
JavaScript 初探
—— 程序员与设计师的双重眼光

什么是我们需要的？
基于 js 的 Lightbox 插件可以点击图片后弹出覆盖层进行浏览

去试试


照片的倒影效果和阴影效果


实现网页上绘制 3d 图形

去试试

成为 Web 专家

头脑风暴：
Web 开发者 / 浏览器厂
商
如何实现动态？

JavaScript 简史
• 突破 HyperText ：网景和 Sun 公司联合推
出 JavaScript

• 欧洲计算机制造商协会标准化：
ECMAscript

• W3C 使 DOM 标准化，解决浏览器间冲突

JavaScript 简史
• DOM: 一个与系统平台和编程语言无关的
接口，程序脚本可以通过这个接口动态地访
问和修改文档内容、结构和样式。

• 标准化 DOM 语法：
var xpos =
document.getElementById('myelement').style.left

getElementById
getElementByTagName
getElementByClassName

准备工作
<!DOCTYPE html > <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"/> <meta charset="utf-8"/>
<title>Example</title> <title>Example</title>
<script> </head>
JavaScript <body>
</script> Content
</head> <script src="file.js"></script>
</body>
<body> </html>
Content
</body>
</html>

javascript 嵌入 HTML 文档中 javascript 有单独的 .js 文档

准备工作
<!DOCTYPE html >
<html lang="en">
<head>
<meta charset="utf-8"/> JavaScript 版 Hello World
<title>Example</title> 复制左边的代码到 EmEditor
<script> 保存为 html 文件后查看效果
alert("Hello World!
");
</script>
</head>

<body>
<p>Content</p>
</body>
</html>

没有傻问题

<script> 标签是否一定要包含 type="text/javascript" 属性？

答：不一定， HTML 脚本默认类型就是 javascript

javascript 代码放在最后
可以在 <head> 中包含 js 文件吗？会被延迟执行吗去试试

答：可以，但是最好的做法是把 <script> 标签放在 HTML 文档的最后，
</body> 标签之前。

javascript 语言需要编译才能执行吗？

答： javascript 是解释型语言，他需要浏览器中的解释器读入源码并执行。

JavaScript 语法
语句
first statement;
second statement;

注释
// 普通注释
/* 多行的
<!— 、— !> 颜色为什么不一样？
注释 */
<!— — JavaScript 的 HTML 风格注释，不推荐 — —
!>

JavaScript 语法
变量
var mood = "happy";

var mood; mood = "happy";

数据类型
弱类型：程序员可以在任何阶段改变变量的数据类型

JavaScript 语法
数组
var beatles = Array(4);
beatles[0] = "John";
beatles[1] = "Paul";
beatles[2] = "George";
beatles[3] = "Ringo";

var beatles = Array( "John", "Paul",
"George", "Ringo" );

JavaScript 语法
关联数组
var lennon = Array();
lennon["name"] = "John";
lennon["year"] = 1940;
lennon["living"] = false;

使用关联数组增加了代码可读性，
实质上是创建了 Array 对象的属性

JavaScript 语法
对象
var lennon = Object();
lennon.name = "John";
lennon.year = 1940;
lennon.living = false;

拼接操作
var year = 2005;
var message = "The year is " + year;

JavaScript 语法
拼接操作

去试试：
比较 alert ("10" + 20);
和 alert (10 + 20);
的执行结果

JavaScript 语法
条件语句
if (1 > 2) {
alert("The world has gone mad!");
} else {
alert("All is well with the world");
}

JavaScript 语法
循环语句
var count = 1;
do {
alert (count);
count++;
} while (count < 11);

var beatles = Array("John","Paul","George","Ringo");
for (var count = 0 ; count < beatles.length; count+
+ ) {
alert(beatles[count]);
}

JavaScript 语法
var beatles =
Array("John","Paul","George",
"Ringo");
for (var count = 0 ; count <
beatles.length; count++ ) {
}
上下两部分语句
执行结构有何不同？
var beatles =
Array("John","Paul","George",
"Ringo");

alert(beatles);

JavaScript 语法
函数
function shout() {
var beatles =
Array("John","Paul","George","Ringo"
);
for (var count = 0 ; count <
beatles.length; count++ ) {
}
}

JavaScript 语法
对象
Person.mood
Person.walk

JS 内建对象
var beatles = new Array();
宿主对象
浏览器、主机等运行环境决定（如
document ）

DOM
• 节点：
– 元素节点
– 文本节点
– 属性节点

• CSS
回顾…… 美化示例 2

DOM
• ID 获取元素
typeof 报告所选择的对象类型

alert(typeof
document.getElementById("purchases")
);

在 index.html 中选择 ID 为 purchases 的元素
P.S. 把上面的语句加入到代码中
去试试

DOM
• tag 获取元素
typeof 报告所选择的对象类型

var items =
document.getElementsByTagName("li");
for (var i=0; i < items.length; i++) {
alert(typeof items[i]);
}

在 index.html 中选择 ID 为 purchases 的元素
去试试

DOM
• class 获取元素

var shopping =
document.getElementById("purchases")
;
var sales =
shopping.getElementsByClassName("sal
e");

DOM
• 获取和设置属性
通过刚才的 getElementBy... ，获取了的元素
可以使用
getAttribute
setAttribute
来获取和设置元素的属性

DOM
getAttribute

var paras = document.getElementsByTagName("p");
for (var i=0; i< paras.length; i++) {
var title_text = paras[i].getAttribute("title");
if (title_text != null) {
alert(title_text);
}
}

如果获得的 title 属性非空，则弹出 alert 对话框

DOM
setAttribute

var shopping = document.getElementById("purchases");
alert(shopping.getAttribute("title"));
shopping.setAttribute("title","a list of goods");
alert(shopping.getAttribute("title"));

P.S. 把上面的语句加入到示例 2 代码中

DOM

setAttribute 改变了元素的属性！

？？？
这样的话 HTML 文档是否被修改了？

小结
• JavaScript 是实现动态效果的一种途径

• 松散语法规则让你可以专注于效果本身

• DOM 可以使页面内容与 JavaScript 交互

示例：简单实现图片轮播功能

Web设计 3 java_script初探（程序员与设计师的双重眼光）

Recommended

More Related Content

What's hot (19)

Viewers also liked (20)

Similar to Web设计 3 java_script初探（程序员与设计师的双重眼光） (20)

Web设计 3 java_script初探（程序员与设计师的双重眼光）