web前端学习之JavaScript
JavaScript 是世界上最流行的编程语言。这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。
JavaScript 是脚本语言
JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码。
JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。
通过这段时间对js的学习，越来越发现js的强大与重要性。
1、
语言特性、功能、简介：
JavaScript 是世界上最流行的编程语言。
这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。
插入HTML页面中后由所有现代浏览器进行执行。
功能是在HTML页面中为所欲为。
2、
变量、数据类型：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
var a=5;
var b="hi,javascript";
var c=true;
var d=["one","two","three"];
/**
* 注意，script里面的type写不写都不要紧，因为H5中已经将JS认定为默认的脚本语言
* var 是定义变量的前缀，可以用来表示各种数据类型，如字符串（要双引号引起来）,整型，浮点型，字符型，数组等多种类型，一个var就能声明，因为JavaScript是弱引用型语言，var不是必须的，但是建议使用，当变量声明的时候赋初值，就不用使用var，如果只是声明，不加var会报错。
* JS对变量的大小写敏感
*/
</script>
</head>
<body>
</body>
</html>
3、
流程控制：
JS中的流程控制包括if…else，switch，for，while，break等，
这些流程控制的内容与其他语言的流程控制基本一样，包括变量的内容等详解见W3school网站http://www.w3school.com.cn/js/js_if_else.asp
本文主要介绍剩下的三个模块，面向对象，和函数，JavaScript对DOM和BOM的操纵。
4、
JS面向对象，和函数：
函数：
<script type="text/javascript"> function test(){ var show="my name is csdn"; document.write(show); } </script>
上面代码就创建了一个函数test，用来向浏览器显示一个字符串，在整个页面中都可以对这个函数进行调用。
当有多个变量时：
function myFunction(var1,var2)
{
这里是要执行的代码
}
面向对象：
因为JavaScript是个轻量级脚本语言，所以它本身并没有很复杂的面向对象的机制，所谓的面向对象，是通过函数进行模拟出来的。
* 关于对对象的理解：如Java，c++是面向对象的编程，严格来讲，JavaScript并没有达到那些复杂语言的标准，所以被称为基于对象的标准。
JavaScript支持多种对象，由程序员定义的对象，核心内置的对象，浏览器对象（BOM），文档对象（DOM）
object对象是JavaScript的原始对象，所有其他对象都是从该对象衍生出来的。
* 对象的创建：使用构造函数创建对象，通过new可以创建一个对象，即使用构造函数创建对象，为了与普通的函数区别开来，构造函数在命名时通常是首字母大写。
如：var cat=new object();这样就创建了一个对象cat，new之后，对象的引用被返回赋给一个变量。
关于对new的补充：上面的例子，可以通过运算符new创建对象的实例，函数名写在new之后，new就会将该函数视为构造函数，这个函数可以是JavaScript的内置的构造函数，也可以是用户自定义的构造函数，JavaScript内置的构造函数有：object(),array(),date(),regexp()等。
* 对象的属性：属性是用来描述对象的，且属性只能通过其所属的对象进行访问，如：
<script type="text/javascript"> var toy=new Object();//使用构造函数创建对象。 toy.name="hello";//给对象的属性赋值，其中属性也是自己自定义的。 toy.wode="nihao"; </script>
调用 ：
document.write(toy.name+" "+toy.wode);
补充：
window是浏览器对象模型的顶层对象，它是所有父节点的父节点，由于document是window的子节点，所以它不仅仅是一个对象，同时还是window对象的属性，背景颜色bgcolor虽然是document对象的一个属性，但它本身并不是对象（它就是一个形容词，因为它是用来描述document的）。
* 对象的方法：对象的方法类似于函数，唯一的区别在于函数是一段独立的程序单元，而方法是依附对象的，能且只能用this关键字引用的方式来通过对象访问它，共同点就是都需要有参数并都可以返回值，如：
<script type="text/javascript">
var toy=new Object();
toy.name="hello";
toy.wode="nihao";
toy.display=pritn;//把一个函数名赋值给属性，表示这个属性将作为对象的一个方法使用，
function pritn(){
document.write("i love you!!");
}
</script>
这是一种构建方法的方法，直接简单点如下：
<script type="text/javascript"> var test=new Object(); test.display=function( a){ document.write(a+"hello!!!!...."); } </script>
* JavaScript中的类：在JS中函数名当做对象的类名称，函数体定义其属性和方法。
一个简单例子：
//关于类的定义 function book(){ this.title="love";//其中this被用来为刚创建的对象设置属性，在类体中，this指向当前的对象。 this.author="bin"; }
调用：
var test=new book(); alert(book.title);
* 关于内联或匿名函数作为对象的方法：首先理一下
function book(){//这是构造方法，但是也是一个类。
this.title="love";
this.author="bin";
}
前面我们方法中，我们把一个函数作为方法使用都是把这个函数放在构造函数之外定义的，如：
<script type="text/javascript">
var toy=new Object();
toy.name="hello";
toy.wode="nihao";
toy.display=pritn;//把一个函数名赋值给属性，表示这个属性将作为对象的一个方法使用，
function pritn(){
document.write("i love you!!");
}
</script>
然后当我们在函数的构造方法(类的定义)中写入匿名函数，如：
function distance(r,t){ this.rate=r; this.time=t; this.calculate=function(){ return r*t;} }
这样做的好处是：实现了对该方法的封装，即只有distance类的对象才可以访问该方法。而之前的方法，那些函数可以被任何类调用。
* with关键字：作用：可以通过简洁的代码来引用对象的属性和方法，但是需要更长的运行时间，这是由于JavaScript需要对with块中的每个变量作检查，看它们是否是当前对象的属性，如：
function book(title,author,publisher){ this.title=title; this.author=author; this.publisher=publisher; this.show=show;//定义一个方法 } function show(){ with(this){ var info="the title is"+title;//即使用with关键字可在引用对象属性时省略对象名和点，或者是this关键字。 } }
* 关于for/in循环：可以遍历对象属性或者数组元素，对于对象中的每个属性（或者数组中的每个元素），依次获得属性名（元素名）并针对该属性（元素）执行后面语句块中的语句。是一种操作对象属性的常见方式，如：
<script>
var test=new Object();
test.a="hello";
test.b="fang";
for(var js in test){
document.write(test[js]+"<br />");
}
</script>
存放在第一个参数中的内容是属性名，而不是具体的属性内容。
* 关于通过原型扩展对象：JavaScript中任何构造函数都带有一个原型对象，原型对象中包含的属性可以被所有的对象继承。
1. 使用prototype属性为对象添加属性：在Java和c++这种面向对象的编程语言中，对象的属性和方法是封装在一个容器中的，这个容器就是类，通过对类的继承可以实现对类的功能的重用和扩展，但是在JavaScript中没有类的机制，我们通过在其中使用构造函数和new关键字来模拟生成类，那么在实现继承时候，可以通过原型扩展的方法实现。
每个由类创建的对象都有两个属性，constructor:对创建对象函数的引用。
prototype：对原型对象的引用，如：
var test1=new Object(); var test2=new Object(); test1.show="hello"; domcument.write(test1.show);//调用对象的方法 domcument.write(test2.show);//不存在这个原型。
如何将属性扩展到类的所有的实例中呢？如：
var test1=new Object(); var test2=new Object(); Object.prototype.show="hello"; domcument.write(test1.show); domcument.write(test2.show);
实现了扩展也就实现了继承，这就是JavaScript中对继承的模拟。
2.原型查找链：
当JavaScript要获取一个属性的值的时候，发现属性并没有直接在构造函数中定义，于是检查book原型是否定义了该属性，如果没有，继续向链条的顶部搜索，最后到达Object对象。所以顺序是：构造函数->原型->Object
3.使用原型为对象添加方法：
如上：
Object.prototype.test=function test(){ return 100; }
5、JS对DOM的操纵：
DOM全称是，文档对象模型
当一个网页被加载的时候，浏览器会创建页面的文档对象模型，即DOM
通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。
HTML DOM树如下：
通过可编程的对象模型，JavaScript获得了足够的能力创建动态的HTML
具体的有如下的功能：
JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应
也即是JS通过DOM可以对HTML页面的元素进行更改，对样式进行更改，对事件进行定义
那么首先是，要通过DOM找到我们需修改的那一部分内容
那么有如下三个方法去找：
通过 id 找到 HTML 元素 使用getElementById("id")方法
通过标签名找到 HTML 元素 使用getElementsByTagName("")方法
通过类名找到 HTML 元素 使用getElementsByClassName()方法，这个方法具体使用见下文通过id=test找元素，如果找到该元素，则该方法将以对象的形式返回该元素，如果没有找到该元素，X将包含null
HTML DOM 允许 JavaScript 改变 HTML 元素的内容。
在 JavaScript 中，document.write() 可用于直接向 HTML 输出流写内容。
<div id="main">
<p id="test">old</p>
</div>
<script type="text/javascript">
var element=document.getElementById("test");
//通过id获得对象返回给element
element.innerHTML="new";
//通过对象对文档内容改写
//上面两句也可以写为：document.getElementById("test").innerHTML="new";
</script>
对样式进行修改：
document.getElementById("p2").style.color="blue";将p2节点隐藏起来
document.getElementById("p2").style.display="none";上面这两个都通过DOM对页面样式进行改动
与事件进行配合使用：
onclick:点击事件
onload：进入页面时候被触发
onunload：离开页面时候被触发
onchange：事件常结合对输入字段的验证来使用
有代码如下：
<!DOCTYPE html> <html> <head> <script> function myFunction() { var x=document.getElementById("fname"); x.value=x.value.toUpperCase(); } </script> </head> <body> 请输入英文字符：<input type="text" id="fname" onchange="myFunction()"> <p>当您离开输入字段时，会触发将输入文本转换为大写的函数。</p> </body> </html>
onmouseover和onmouseout事件：鼠标移至元素上方或移出时触发函数
有示例：
<!DOCTYPE html> <html> <body> <div onmouseover="mOver(this)" onmouseout="mOut(this)" style="width:120px;height:20px;padding:40px;color:#ffffff;">把鼠标移到上面</div> <script> function mOver(obj) { //其中传过来的this指明的是当前的标签，数据类型是一个对象，通过对象的方法，innerHTML可以具体的访问到标签的内容 obj.innerHTML="谢谢" } function mOut(obj) { obj.innerHTML="把鼠标移到上面" } </script> </body> </html>
onmousedown、onmouseup 以及 onclick 事件
onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。
