2015-12-23复习之JavaScript基础一
来源:互联网 发布:爱知世博会 编辑:程序博客网 时间:2024/06/10 10:48
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标签时,会跳转到百度首页,但是如果阻止事件默认行为,就不会跳转了。
- 2015-12-23复习之JavaScript基础一
- javascript基础复习(一)
- Javascript基础复习(一)
- Javascript的基础复习(一)
- javascript基础复习之常用对象
- 2015-12-06复习之HTML基础
- javascript复习1:基础
- javascript基础复习
- 复习javascript基础 (1)
- Linux复习一1-Linux基础之基础~_~
- javascript复习笔记一
- JavaScript(复习版一)
- javascript复习(一)
- Java基础复习(一)
- javascript基础复习之函数,定时器,erval函数
- 2015-12-09复习之CSS(3)基础
- Android之基础复习2D图形一
- (一)、Java复习笔记之语言基础
- Swift实用技巧:如何正确地定义一个类变量和类常量
- Android MediaProvider数据库模式说明
- git下载时Xcode版本不一致的解决方法
- unity3d easytouch计算摇杆旋转角度以及摇杆八方向控制角色
- 史上最详细的Android Studio系列教程四--Gradle基础
- 2015-12-23复习之JavaScript基础一
- Android 之 去除 Jar 包中 META-INF/DEPENDENCIES.txt
- Photoshop基础
- PowerDesigner生成SQL语句时不使用Domain
- windows下linux内核源代码阅读 Source Insight3.5工具
- 本人git上的一些demo
- ORA-19809: 超出了恢复文件数的限制故障处理实例
- oracle 合并多行记录
- C++继承:公有,私有,保护