Your SlideShare is downloading. ×
  • Like
Web设计 3 java_script初探(程序员与设计师的双重眼光)
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

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

  • 336 views
Published

 

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
336
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
0
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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