2015-12-23复习之JavaScript基础一
2015-12-23 21:54
681 查看
1、JavaScript介绍
JavaScript是互联网上最流行的脚本语言,这门语言可用于web和HTML,更广泛用于,服务器,PC端和移动端。JavaScript是一种轻量级的编程语言,是可插入HTML页面的编程代码,可由所有浏览器执行。
2、JavaScript实现
HTML中脚本必须位于<script></script>中,脚本可被放置在HTML页面中的head和body中,不限制脚本数量,通常放在head中,以不干扰页面内容3、JavaScript输出
JavaScript经常用来操作HTML文档输出,document.write("<h1>你好</h1>"); document.getElementById("p").innerHTML = "你好";
4、JavaScript语法
JavaScript语句向浏览器发出的命令语句之间用分号分隔
执行顺序是按照编写顺序依次执行
JavaScript标识符必须以字母,下划线或者美元符号开始(没有数字!),不可以使用关键字
JavaScript对大小写敏感
JavaScript会忽略多余的空格
单行注释// 多行注释/**/
5、JavaScript变量
变量是用来储存信息的容器 var a = 10; var $b = "hello";6、JavaScript数据类型
字符串(string)、数字(number)、布尔(Boolean)、数组(array)、对象(object)、空(null)未定义、可以通过赋值为null的方式清除变量
7、JavaScript运算符
算术运算符:+、-、*、/、%、++、--赋值运算符:= 、+= 、-=、*=、/=、%=
比较运算符:==、!=、<、<=、>、>=、===、!===(var i=10;var j="10"; i==j/*true*/ i===j /*false*/)
逻辑运算符:&&、||、!
条件运算符:x<10?"x<10":"x>=10"
字符串操作:var i="5"; var j="5"; i+j ------>"55"
8、JavaScript条件语句
if...else -----> if(...){...}else if(...){...}else{...}switch -----> switch(i){ case 1: ... break; case 2: ... break; default : ... break;}
9、JavaScript循环语句
for---------->for(int i=0;i<2;i++){}for/in------->var i=[1,2,3]; var j; for(j in i){alert i[j];}
while-------->while(i<3){...}//先判断后执行
do...while--->do{...}while(i<3);//先执行后判断
10、JavaScript跳转语句
break------->跳出当前循环continue---->结束本次循环,继续下一次循环
return------->返回
11、JavaScript函数
了解函数的用途:函数是事件驱动的或者当它被调用时执行的可重复使用的代码块。定义函数:function 函数名(){函数体;(代码块)}
调用函数:函数定义好后不能自动执行,需要调用。在script标签内调用,在HTML文件中调用
带参数的函数:在函数的调用过程中,也可以传递值,这些值被称作参数。通过传递参数的个数及类型完成不同的功能。
带返回值的函数:有时我们需要把函数的值返回给调用它的地方,通过return执行,之后不要有任何代码。
局部变量和全局变量:局部(在函数内部声明var a=1;)全局(函数外面var b=2;或者任意地方c=3;但是如果在函数内部的话,需要先调用这个函数,这个变量才是全局变量。?)
12、JavaScript异常处理和事件处理
异常:当JavaScript引擎执行JavaScript代码时发生错误,导致程序停止运行。异常抛出:当异常产生的时候,并且将这个异常生成一个错误信息
异常捕获:try{发生异常的代码块}catch(err){错误信息处理}
throw语句:创建一个自定义错误
事件是可以被JavaScript侦测到的行为
onclick、onmouseover、onchange(文本内容改变)、onselect(文本框选中)、onfocus、onblur、onload(网页加载)、onunload(关闭网页)
13、JavaScript—DOM
当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)JavaScript能够改变页面中的所有HTML元素
JavaScript能够改变页面中的所有HTML属性
JavaScript能够改变页面中的所有CSS样式
JavaScript能够对页面中的所有事件作出反应
14、DOM操作HTML
改变HTML输出流(注意绝对不要在文档加载完成之后使用document.write(),这会覆盖该文档)通过ID或者标签名寻找到HTML元素(document.getElementById,document.getElementByTagName相同元素中第一个)
改变HTML内容,使用innerHTML
改变HTML属性,使用attribute(eg:document.getElementById(...).href="...")
15、DOM操作CSS
通过DOM对象改变CSS语法:document.getElementById(id).style.property = new style;
16、DOM-EventListener
addEventListener();//向元素添加事件句柄removeEventListener();//移除事件句柄
document.getElementById(id).addEventListener("click",funcName);
document.getElementById(id).removeEventListener("click",funcName);
17、JavaScript事件详解
事件流:描述的是在页面中接受事件的顺序事件冒泡:由最具体的元素接收,然后逐级向上传播至最不具体的元素的节点(文档)
事件捕获:最不具体的节点先接收事件,而最具体的节点应该是最后接收事件
通俗的讲就是事件被触发的顺序
18、JavaScript事件处理
HTML事件处理:直接添加到HTML结构之中(优点:简便;缺点:不便修改)<button onclick="hello()">hello</button>
DOM0级事件处理:把一个函数赋值给一个事件处理程序属性(优点:和HTML无关;缺点:会被覆盖)
document.getElementById(id).onclick=function(){};
DOM2级事件处理:(优点:不会被覆盖;)
addEventListener("事件名","事件处理函数","布尔值")(true
事件捕获,false 事件冒泡)
removeEventListener();
document.getElementById(id).addEventListener("click",funcName);
兼容解决:IE事件处理(版本小于8)
attachEvent和detachEvent
“DOM2级事件”中规定的事件流同时支持了事件捕获阶段和事件冒泡阶段,而作为开发者,我们可以选择事件处理函数在哪一个阶段被调用。
addEventListener方法用来为一个特定的元素绑定一个事件处理函数,是JavaScript中的常用方法。addEventListener有三个参数:
element.addEventListener(event, function, useCapture)
第一个参数是需要绑定的事件,第二个参数是触发事件后要执行的函数。而第三个参数默认值是false,表示在事件冒泡的阶段调用事件处理函数,如果参数为true,则表示在事件捕获阶段调用处理函数。
上面一段摘自浅谈事件冒泡与事件捕获
兼容demo
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <button id="btn">hello</button> <script> var btn = document.getElementById("btn"); if(btn.addEventListener){ btn.addEventListener("click",demo); }else if(btn.attachEvent){ btn.attachEvent("onclick",demo); }else{ btn.onclick = demo(); } function demo(){ alert("hello"); } </script> </body> </html>
19、JavaScript事件对象
在出发DOM事件的时候都会产生一个对象事件对象event:
type获取时间类型
function demo(event){alert(event.type);}//click,mouseover...
target获取事件目标 function
demo(e){console.log(e.target);}//<button
id="btn">hello</button>
stopPropagtion()阻止事件冒泡
preventDefault()阻止事件默认行为
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="div"><button id="btn">button</button></div> <script> document.getElementById("btn").addEventListener("click",showBtn); document.getElementById("div").addEventListener("click",showDiv); function showBtn(e){ alert(e.type); e.stopPropagation();//阻止事件冒泡 } function showDiv(){ alert("div"); } </script> </body> </html>当点击button按钮的时候,不仅会alert出"click",而且还会alert出"div",就是因为事件冒泡,阻止事件冒泡见上面代码注释
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <a id="a" href="http://www.baidu.com">baidu</a> <script> function showA(e){ e.preventDefault();//阻止事件默认行为(href) } </script> </body> </html>当点击a标签时,会跳转到百度首页,但是如果阻止事件默认行为,就不会跳转了。
相关文章推荐
- 详解JavaScript的函数闭包
- JSP隐含对象介绍
- 每次都觉得很神奇的JS
- json和jsonp
- JS小知识点----基本包装类型和引用类型
- canvas+js绘制饼状统计图
- JS实现表单输入Enter键转换焦点框
- cJSON源码学习总结
- javascript生成表格增删改查
- JS链接页面
- javascript 表格增删改
- (mark 笔记)json数据解析
- BZOJ 1015: [JSOI2008]星球大战starwar 并查集
- js 动态生成宽度固定的table控件
- Extjs Widget
- jstl中格式化时间戳
- JavaScript中concat不起作用
- 測试JSON RPC远程调用(JSONclient)
- 轻松学习JavaScript二十五:DOM编程学习之操作CSS样式(二)
- browserify.js 的模块加载