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

479 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
479
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

  1. 1. Chapter 3 JavaScript 初探—— 程序员与设计师的双重眼光
  2. 2. 什么是我们需要的? 基于 js 的 Lightbox 插件可以点击图片后弹出覆盖层进行浏览去试试
  3. 3. 什么是我们需要的? 照片的倒影效果和阴影效果
  4. 4. 什么是我们需要的? 实现网页上绘制 3d 图形去试试
  5. 5. 成为 Web 专家 头脑风暴: Web 开发者 / 浏览器厂 商 如何实现动态?
  6. 6. 成为 Web 专家
  7. 7. JavaScript 简史• 突破 HyperText :网景和 Sun 公司联合推 出 JavaScript• 欧洲计算机制造商协会标准化: ECMAscript• W3C 使 DOM 标准化,解决浏览器间冲突
  8. 8. JavaScript 简史• DOM: 一个与系统平台和编程语言无关的 接口,程序脚本可以通过这个接口动态地访 问和修改文档内容、结构和样式。• 标准化 DOM 语法: var xpos = document.getElementById(myelement).style.left getElementById getElementByTagName getElementByClassName
  9. 9. 准备工作<!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 文档
  10. 10. 准备工作<!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>
  11. 11. 没有傻问题<script> 标签是否一定要包含 type="text/javascript" 属性? 答:不一定, HTML 脚本默认类型就是 javascript javascript 代码放在最后可以在 <head> 中包含 js 文件吗? 会被延迟执行吗 去试试 答:可以,但是最好的做法是把 <script> 标签放在 HTML 文档的最后, </body> 标签之前。javascript 语言需要编译才能执行吗? 答: javascript 是解释型语言,他需要浏览器中的解释器读入源码并执行。
  12. 12. JavaScript 语法语句first statement;second statement;注释// 普通注释/* 多行的 <!— 、— !> 颜色为什么不一样? 注释 */<!— — JavaScript 的 HTML 风格注释,不推荐 — — !>
  13. 13. JavaScript 语法变量var mood = "happy";var mood; mood = "happy";数据类型弱类型:程序员可以在任何阶段改变变量的数据类型
  14. 14. JavaScript 语法数组var beatles = Array(4);beatles[0] = "John";beatles[1] = "Paul";beatles[2] = "George";beatles[3] = "Ringo";var beatles = Array( "John", "Paul", "George", "Ringo" );
  15. 15. JavaScript 语法关联数组var lennon = Array();lennon["name"] = "John";lennon["year"] = 1940;lennon["living"] = false; 使用关联数组增加了代码可读性, 实质上是创建了 Array 对象的属性
  16. 16. JavaScript 语法对象var lennon = Object();lennon.name = "John";lennon.year = 1940;lennon.living = false;拼接操作var year = 2005;var message = "The year is " + year;
  17. 17. JavaScript 语法拼接操作去试试:比较 alert ("10" + 20);和 alert (10 + 20);的执行结果
  18. 18. JavaScript 语法条件语句if (1 > 2) {alert("The world has gone mad!");} else {alert("All is well with the world");}
  19. 19. 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]); }
  20. 20. JavaScript 语法var beatles = Array("John","Paul","George", "Ringo");for (var count = 0 ; count < beatles.length; count++ ) { alert(beatles[count]); } 上下两部分语句 执行结构有何不同?var beatles = Array("John","Paul","George", "Ringo"); alert(beatles);
  21. 21. JavaScript 语法函数function shout() {var beatles = Array("John","Paul","George","Ringo" );for (var count = 0 ; count < beatles.length; count++ ) { alert(beatles[count]); }}
  22. 22. JavaScript 语法对象Person.moodPerson.walkJS 内建对象 var beatles = new Array();宿主对象 浏览器、主机等运行环境决定(如 document )
  23. 23. DOM• Document Object Model
  24. 24. DOM• 节点: – 元素节点 – 文本节点 – 属性节点• CSS 回顾…… 美化示例 2
  25. 25. DOM• ID 获取元素 typeof 报告所选择的对象类型alert(typeof document.getElementById("purchases") );在 index.html 中选择 ID 为 purchases 的元素P.S. 把上面的语句加入到代码中去试试
  26. 26. DOM• tag 获取元素 typeof 报告所选择的对象类型var items = document.getElementsByTagName("li");for (var i=0; i < items.length; i++) {alert(typeof items[i]);}在 index.html 中选择 ID 为 purchases 的元素去试试
  27. 27. DOM• class 获取元素var shopping = document.getElementById("purchases") ;var sales = shopping.getElementsByClassName("sal e");
  28. 28. DOM• 获取和设置属性通过刚才的 getElementBy... ,获取了的元素 可以使用 getAttribute setAttribute 来获取和设置元素的属性
  29. 29. DOMgetAttributevar 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 对话框
  30. 30. DOMsetAttributevar shopping = document.getElementById("purchases");alert(shopping.getAttribute("title"));shopping.setAttribute("title","a list of goods");alert(shopping.getAttribute("title"));P.S. 把上面的语句加入到示例 2 代码中
  31. 31. DOMsetAttribute 改变了元素的属性! ??? 这样的话 HTML 文档是否被修改了?
  32. 32. 小结• JavaScript 是实现动态效果的一种途径• 松散语法规则让你可以专注于效果本身• DOM 可以使页面内容与 JavaScript 交互 示例:简单实现图片轮播功能

×