Javascript 培训第一节 分享·学习javascript过程

41
浅浅 JavaScript -

Transcript of Javascript 培训第一节 分享·学习javascript过程

Page 1: Javascript 培训第一节 分享·学习javascript过程

浅析 JavaScript - 渔

Page 2: Javascript 培训第一节 分享·学习javascript过程

正文页文字区域

请在此区域放置文字 请在此区域放置文字 请在此区域放置文字 请在此区域放置文字

请在此区域放置文字 请在此区域放置文字 请在此区域放置文字 请在此区域放置文字

请在此区域放置文字 请在此区域放置文字 请在此区域放置文字 请在此区域放置文字

刘遵强 | [email protected]

Page 3: Javascript 培训第一节 分享·学习javascript过程
Page 4: Javascript 培训第一节 分享·学习javascript过程

为什么我总是学不会?

为什么我总是学不好?

为什么我总是遇到 BUG ?

为什么我写的代码我自己都不敢确认!

为什么我总是没有一丝的思路?

Page 5: Javascript 培训第一节 分享·学习javascript过程
Page 6: Javascript 培训第一节 分享·学习javascript过程
Page 7: Javascript 培训第一节 分享·学习javascript过程

初学者入门 入门 AJAX 非常详细 我所认为最棒的学习 JavaScript 书

看懂了这本你就能理解 Jquery 的设计模式

一定基础看 活字典 课外阅读 JS 构架师必看

Page 8: Javascript 培训第一节 分享·学习javascript过程

让 JS

变为群众手里的尖锐武

Page 9: Javascript 培训第一节 分享·学习javascript过程

学习 JS 第一步

Page 10: Javascript 培训第一节 分享·学习javascript过程
Page 11: Javascript 培训第一节 分享·学习javascript过程

学会理解 js 中字面量的含义

Page 12: Javascript 培训第一节 分享·学习javascript过程

1.setAttribute : 设置属性样式

分解单词: set( 设置 )+ Attribute [ə'tribju:t, 'ætribju:t] (属性)

2.getAttribute: 获取属性样式

分解单词 : get( 得到 )+Attribute (属性)

3. addEventListener: 监听事件,指定事件处理程序操作

分解单词 : Add: 增加 event: 事件 Listener: 监听器

4.removeEventListener: 删除事件处理程序操作

分解 :remove :删除

5.getComputedStyle: 获取外部样式表中的样式

Page 13: Javascript 培训第一节 分享·学习javascript过程
Page 14: Javascript 培训第一节 分享·学习javascript过程

小结

•初级阶段学习,看一本 JS 书,一周之内看完,粗略的看一遍,第二遍要细致 并多做书中的练习,看书的时候觉得很简单,但一定要多做书中的练习。

•学会提问题?多做笔记,把一些常用的 JS 用法记录下来

•书不要太厚,推荐-DOM 不懂先看 javascriptDOM 编程艺术 -Ajax 不懂先看 Bulletproof Ajax- 基础 不懂先看 ppk 谈 javascript ,

Page 15: Javascript 培训第一节 分享·学习javascript过程

学习 JS 第二步

Page 16: Javascript 培训第一节 分享·学习javascript过程

理解 JS 字面量,让你 JS 编程事半功倍

Page 17: Javascript 培训第一节 分享·学习javascript过程

盲人摩象 庖丁解牛

理解 JS 运行机制,如:预解析和作用域

Page 18: Javascript 培训第一节 分享·学习javascript过程
Page 19: Javascript 培训第一节 分享·学习javascript过程
Page 20: Javascript 培训第一节 分享·学习javascript过程
Page 21: Javascript 培训第一节 分享·学习javascript过程

提问:变量 a 的值??

Page 22: Javascript 培训第一节 分享·学习javascript过程

详情链接: http://www.iundefined.com/development/483.html

Page 23: Javascript 培训第一节 分享·学习javascript过程

学习 JS 第三步

Page 24: Javascript 培训第一节 分享·学习javascript过程

命名—规范的写法很重要

Page 25: Javascript 培训第一节 分享·学习javascript过程

命名•驼峰命名法 ( 如 doMoveStart())

•使用符合逻辑的单词为变量和函数命名 - 不要担心长度•变量名称应该是名词 , 使用正确的前缀- i:int 类型 o:Object 类型 s:String 类型 a:Array 类型

•函数名应该用动词开头 ( 如: getName())

•函数返回值为布尔值应该用’ is’ 开头( 如: isValid())

•避免无用的名字 , 如 foo 和临时工qbe_value

Page 26: Javascript 培训第一节 分享·学习javascript过程
Page 27: Javascript 培训第一节 分享·学习javascript过程

可扩展

利于调试适合阅读

松散耦合 Loose Coupling

Page 28: Javascript 培训第一节 分享·学习javascript过程

不要在 HTML 中写 JavaScript

Page 29: Javascript 培训第一节 分享·学习javascript过程

不要轻易的修改一个 Object假如这个对象不是你所定义的,请不要修改它

Page 30: Javascript 培训第一节 分享·学习javascript过程

定义全局函数或者变量

Page 31: Javascript 培训第一节 分享·学习javascript过程

减少全局变量污染,创建单一的全局变量,附上一些方法属性

Page 32: Javascript 培训第一节 分享·学习javascript过程

尝试扔出一些报错假如你知道函数可能会报错

Page 33: Javascript 培训第一节 分享·学习javascript过程

尝试扔出一些报错假如你知道函数可能会报错

Page 34: Javascript 培训第一节 分享·学习javascript过程

避免 null 比较

Page 35: Javascript 培训第一节 分享·学习javascript过程

避免 null 比较使用已知的一种类型比较

Page 36: Javascript 培训第一节 分享·学习javascript过程

避免 null 比较•使用 typeof 对基本类型比较数据类型有 undefined,boolean,number,string

-typeof true // boolean

-typeof undefined //undefined

-typeof 0 //number

-typeof ‘text’ //string

•使用 instanceof 对引用类型比较 object数据类型有 Object Function Array( 数组是集合的一种也是一种对象 ) null

-window instanceof Object

-var fn= new Function();fn instanceof Function

-var a=[]; a instanceof Array

Page 37: Javascript 培训第一节 分享·学习javascript过程

重述

Page 38: Javascript 培训第一节 分享·学习javascript过程

•至少看一本以上的 JS 书籍,不推荐看很厚,但一定要有看过。

•工作中学习是最快的。

•理解 JS 的运行规则,熟悉浏览器是如何单线程解析 JS , 理解基本原理,熟知编程语言

•强烈的要求:优秀的编码习惯。

•编程的时候多思考松散耦合。

•尝试学习数据结构,算法,优化。

•坚持不断的进步,至少你要保证这节课对你是有用的!

记住

Page 39: Javascript 培训第一节 分享·学习javascript过程

问题?

Page 40: Javascript 培训第一节 分享·学习javascript过程

作业1. 封装动画

2. 封装 ajax

Page 41: Javascript 培训第一节 分享·学习javascript过程

2012 年 06 月 12日