1 / 23

JAvascript

5110379069 干祯超. JAvascript. 几个方面. 发展历史 内置对象 Hello world 程序 函数 面向对象 DOM 操作 风靡全球. 简介 -- 与其说我爱 Javascript ，不如说我恨它。它是 C 语 言和 Self 语言一夜 情的产物 by Brendan Eich. 借鉴 C 语言的 基本语法 借鉴 Java 语言的数据类型和内存 管理 借鉴 Scheme 语言，将函数提升 到 “ 第一等公民 ”( first class) 的 地位 借鉴 Self 语言，使用基于原型 (prototype) 的继承 机制

leonard-townsend
Télécharger la présentation

JAvascript

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 5110379069 干祯超 JAvascript

  2. 几个方面 • 发展历史 • 内置对象 • Hello world程序 • 函数 • 面向对象 • DOM操作 • 风靡全球

  3. 简介--与其说我爱Javascript，不如说我恨它。它是C语言和Self语言一夜情的产物 by Brendan Eich • 借鉴C语言的基本语法 • 借鉴Java语言的数据类型和内存管理 • 借鉴Scheme语言，将函数提升到“第一等公民”(first class)的地位 • 借鉴Self语言，使用基于原型(prototype)的继承机制 Javascript语言实际上是两种语言风格的混合产物----(简化的)函数式编程+(简化的)面向对象编程

  4. 发展历史 • 90年代初，浏览器与用户交互的问题 • 1992年，Nombas开发C--,又命名为ScriptEase • 1995年，网景和Sun合作开发JavaScript • 不久，微软进军，Jscript，三足鼎立 • 1997年，开始标准化工作

  5. 内置对象 • String var x = “maodashi”; • Date var date = new Date(); • Array • Boolean • Math • RegExp • Number var y = 1;

  6. Hello World • document.getElementById("demo").innerHTML="Hello World"; • window.alert(“Hello World”); • console.log(“Hello World”); • DOM操作添加

  7. 函数－first class • function myFunction(params){ //执行的语句 } • varmyFunction = function (params){ //执行的语句 }

  8. 函数 • factorial function factorial(n) { if (n === 0) { return 1; } return n * factorial(n - 1); }

  9. 函数 • 匿名函数 window.addEventListener('load',function(){ //执行的语句 },false); Closure vardisplayClosure = function() { var count = 0; returnfunction () { return ++count; }; } varinc = displayClosure(); inc(); // returns 1 inc(); // returns 2 inc(); // returns 3

  10. 函数－Immediately-invoked function expressions (function(){ /* code */ }()); ***************************************************************** var v, getValue; v = 1; getValue = function() { return v; }; v = 2; getValue(); // 2 ***************************************************************** var v, getValue; v = 1; getValue = (function(x) { returnfunction() { return x; }; }(v)); v = 2; getValue(); // 1

  11. 函数－Immediately-invoked function expressions var counter = (function(){ var i = 0; return { get: function(){ return i; }, set: function( val ){ i = val; }, increment: function() { return ++i; } }; }()); // 'counter' is an object with properties, which in this case happen to be // methods. counter.get(); // 0 counter.set( 3 ); counter.increment(); // 4 counter.increment(); // 5

  12. 函数－Variadicfunction in C • 最著名的printf ****************************************************************** #include <stdarg.h> double average(int count, ...) { va_listap; int j; double sum = 0; va_start(ap, count); /* Requires the last fixed parameter (to get the address) */ for (j = 0; j < count; j++) { sum += va_arg(ap, double); /* Increments ap to the next argument. */ } va_end(ap); return sum / count; }

  13. 函数－Variadicfunction in js varsum = function() { var i, x = 0; for (i = 0; i < arguments.length; ++i) { x += arguments[i]; } return x; } sum(1, 2, 3); // returns 6

  14. 函数－currying • function add(x, y) { •     return x + y; • } • document.write("add(3, 4) == " + add(3, 4)); • ----------------------------------------------------------------------------------------------------- • function add(x, y) { • if(x != null && y != null) return x + y; // 如果x,y都不为null.则返回x + y; • else if(x != null && y == null) { • return function(y) { • return x + y; • } • }else if(x == null && y != null){ • return function(x) { • return x + y; • } • } • } • document.write("add(3, 4) == " + add(3, 4) + "<br/>"); • document.write("add(3)(4) == " + add(3)(4) + "<br/>");// add(3)得到的是一个add的科里化函数

  15. 面向对象1－原型 function Cat() { this.name= “毛大师"; } 生成实例的时候，使用new关键字 var cat1 = new Cat(); alert(cat1.name); // 毛大师 类的属性和方法，还可以定义在构造函数的prototype对象之上。 Cat.prototype.makeSound= function(){ alert(“档次啊喵"); }

  16. 面向对象2－create var Cat = { name: “毛大师", makeSound: function(){ alert(“档次啊喵"); } }; var cat1 = Object.create(Cat); alert(cat1.name); // 毛大师 cat1.makeSound(); // 档次啊喵

  17. 面向对象3－继承 • call • apply

  18. DOM－Brower对象 • Window JavaScript 层级中的顶层对象，表示浏览器窗口。 • Navigator 包含客户端浏览器的信息。 • Screen 包含客户端显示屏的信息。 • History 包含了浏览器窗口访问过的 URL。 • Location 包含了当前 URL 的信息。

  19. HTML－DOM • document.getElementById()    根据Id获取元素节点 • document.getElementsByName()   • document.getElementsByTagName()    根据HTML标签名获取元素节点 • document.getElementsByClassName()    根据class获取元素节点 • var node = document.querySelector(“#div1 > p”); CSS选择器 • 文档遍历 1、parentNode获取该节点的父节点    2、childNodes获取该节点的子节点数组
    3、firstChild获取该节点的第一个子节点
    4、lastChild获取该节点的最后一个子节点
    5、nextSibling获取该节点的下一个兄弟节点等等 • 创建插入删除节点，修改Attr等许多方法

  20. 风靡全球－库 • JQuery • $ • 封装ajax • Dojo • three.js • 压缩工具 • YUI Compressor

  21. 风靡全球－新技术 • HTML5 • Canvas(webgl) • WebService • LocalStorage • ……

  22. 风靡全球－应用 • 网站 • 客户端脚本技术 • Unity游戏引擎 • Node.js • 服务器

  23. 谢谢观看

More Related