Web设计 3 java_script初探（程序员与设计师的双重眼光）
32
Chapter 3 JavaScript 初初 —— 初初初初初初初初初初初初
-
Upload
ziggear -
Category
Technology
-
view
506 -
download
0
Transcript of Web设计 3 java_script初探（程序员与设计师的双重眼光）
Chapter 3JavaScript 初探
—— 程序员与设计师的双重眼光
什么是我们需要的？
照片的倒影效果和阴影效果
什么是我们需要的？
实现网页上绘制 3d 图形
去试试
成为 Web 专家
头脑风暴：Web 开发者 / 浏览器厂商如何实现动态？
成为 Web 专家
JavaScript 简史• 突破 HyperText ：网景和 Sun 公司联合推
出 JavaScript
• 欧洲计算机制造商协会标准化： ECMAscript
• W3C 使 DOM 标准化，解决浏览器间冲突
JavaScript 简史• DOM: 一个与系统平台和编程语言无关的
接口，程序脚本可以通过这个接口动态地访问和修改文档内容、结构和样式。
• 标准化 DOM 语法： var xpos = document.getElementById('myelement').st
yle.left
getElementById getElementByTagName getElementByClassName
准备工作<!DOCTYPE html ><html lang="en"><head>
<meta charset="utf-8"/><title>Example</title><script>
JavaScript </script>
</head>
<body>Content
</body></html>
<!DOCTYPE html><html lang="en"><head>
<meta charset="utf-8"/><title>Example</title>
</head><body>
Content<script src="file.js"></script>
</body></html>
javascript 嵌入 HTML 文档中 javascript 有单独的 .js 文档
准备工作<!DOCTYPE html ><html lang="en"><head>
<meta charset="utf-8"/><title>Example</title><script>
alert("Hello World! ");</script>
</head>
<body><p>Content</p>
</body></html>
JavaScript 版 Hello World复制左边的代码到 EmEditor保存为 html 文件后查看效果
没有傻问题
<script> 标签是否一定要包含 type="text/javascript" 属性？
答：不一定， HTML 脚本默认类型就是 javascript
可以在 <head> 中包含 js 文件吗？
答：可以，但是最好的做法是把 <script> 标签放在 HTML 文档的最后，</body> 标签之前。
javascript 语言需要编译才能执行吗？
答： 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","Pau
l","George","Ringo");for (var count = 0 ; count < bea
tles.length; count++ ) {alert(beatles[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++ ) {
alert(beatles[count]);
}
}
JavaScript 语法对象Person.mood
Person.walk
JS 内建对象var beatles = new Array();
宿主对象浏览器、主机等运行环境决定（如 documen
t ）
DOM
• Document Object Model
DOM
• 节点：– 元素节点– 文本节点– 属性节点
• CSS
回顾…… 美化示例 2
DOM
• ID 获取元素
alert(typeof document.getElementById("purchases"));
在 index.html 中选择 ID 为 purchases 的元素P.S. 把上面的语句加入到代码中去试试
typeof 报告所选择的对象类型
DOM
• tag 获取元素
var items = document.getElementsByTagName("li");
for (var i=0; i < items.length; i++) {alert(typeof items[i]);}
在 index.html 中选择 ID 为 purchases 的元素去试试
typeof 报告所选择的对象类型
DOM
• class 获取元素
var shopping = document.getElementById("purchases");
var sales = shopping.getElementsByClassName("sale");
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
？？？ 这样的话 HTML 文档是否被修改了？
setAttribute 改变了元素的属性！
小结• JavaScript 是实现动态效果的一种途径
• 松散语法规则让你可以专注于效果本身
• DOM 可以使页面内容与 JavaScript交互
示例：简单实现图片轮播功能
![Giao trinh java_script[1]](https://static.fdocument.pub/doc/165x107/55910c0d1a28ab90548b4700/giao-trinh-javascript1.jpg)
