什么是JavaScript？
我们可以从几个方面去说JavaScript是什么：
基于对象
- javaScript中内置了许多对象供我们运用【String、Date、Array】等等
- javaScript也许可我们本身自定义对象
事宜驱动
- 当用户触发实行某些行动的时刻【鼠标单机、鼠标挪动】，javaScript供应了监听这些事宜的机制。当用户触发的时刻，就实行我们本身写的代码。
解释性言语
- [x] javaScript代码是由浏览器剖析的，并不须要编译。
基于浏览器的动态交互手艺
- 既然javaScript是由浏览器剖析的，那末它肯定要基于浏览器。 javaScript让网页变得越发“天真””
弱范例
- [x] 像java、c++等编译型言语，要先定义变量，后运用。javaScript可以直接运用，不须要先定义
JavaScript变量范例
javaScript变量可分为三种范例：
基础范例【number、string、boolean】
- javaScript是弱范例言语，在运转的时刻才晓得详细的范例是什么。统统范例都用var来润饰。
特别范例【null、undefined】
- 当定义了变量，没有任何赋值的时刻，该变量就是undefined范例
- 复合范例【数组、对象、函数】
javaScript对象的范例
在JavaScript中对象的范例可分为4种：
- 内置对象【String、Math、Array】
- 自定义对象【程序员本身建立的对象】
- 浏览器对象【windows、document、history、status等等与浏览器相干的对象】
- ActiveXObject（XMLHttpRequest）对象【异步对象，运用AJAX用到的对象，运用该对象与服务器举行异步交互】
定义函数三种体式格局
函数是属于特别范例的一种，在别的一篇博文已讲解了建立对象、建立类的几种体式格局，可参考：http://blog.csdn.net/hon_3y/article/details/69362242
值得注重的是：javaScript定义函数的时刻，参数的范例是不必声明的！
平常体式格局
下面就定义了一个名称为mysum的函数
function mysum(num1,num2){
return num1 + num2;
}
var myresult = mysum(100,200);
alert("myresult="+myresult);Function定义
在JavaScript中， 统统皆是对象，函数也可以用一个对象来代表：Function，我们可以运用Function来建立对象：
函数参数全都是字符串，末了一个字符串是要领体
var youresult = new Function("num1","num2","return num1+num2");
alert( youresult(1000,2000) );由于这类要领写起来并不好些，可读性也不太好，因而很少运用【不引荐运用】
匿名建立函数
实在这类和第一种差不多，只不过是将一个无名的函数赋值给一个变量。那末这个变量就代表了这个函数。
var theyresult = function(num1,num2){
return num1 + num2;
}
alert( theyresult(10000,20000) );
theyresult这个变量就代表了函数。
建立对象
体式格局①
直接运用new Object()
var obj = new Object();
体式格局②
运用空的{}大括号
var obj2 = {};测试
增添属性，接见属性
我们要为建立的对象增添属性和接见属性的值！
运用.操纵符增添属性
JavaScript是弱范例的言语，可以动态的增加属性。
obj.age = 20;
obj.name = "zhongfucheng";
obj.say = function () {
alert("hello");
};
测试
运用.操纵符接见属性
var aa = obj.age;
var bb = obj.name;
测试
运用[]操纵符接见属性
var aa = [obj["age"]];
var bb = [obj["name"]];
测试
建立类
体式格局①
运用function来模仿建立类，function充当了组织函数
//测试函数
function test() {
var teacher = new Teacher();
}
//运用function来模仿类
function Teacher() {
}测试
体式格局②
上面的function来模仿类很轻易和函数殽杂。
我们平常如许做：用一个变量记着一个匿名的function当作是类，function充当了组织函数
function test() {
var teacher = new Teacher();
}
var Teacher = function () {
};
测试
体式格局③
运用JSON语法来建立类，也就是对象直接量定义要领
var obj = {
age: 20,
str: "zhongfucheng",
method:function () {
alert("aaa");
}
};测试
公有属性和要领
我们建立公有属性应当在类中指定，建立公有要领应当运用原型对象prototype
prototype定义的属性就类似于Java的静态成员：在原型对象上定义了属性，具有这个原型对象的function所建立的对象也具有定义的属性！所以，我们要领中就运用prototype
var obj = function Teacher(name) {
this.name = name;
if( typeof obj._init=="undefined") {
obj.prototype.setName = function (name) {
this.name = name;
};
obj.prototype.getName = function () {
alert(this.name);
};
}
obj._init = true;
};
建立两个差别的Teacher对象，name属性是不一样的。而它们同享统一份setName()和getName()要领
值得注重的是：prototype定义的属性只可读的。假如你想要运用详细对象写prototype的属性，实际上并非写，而是从新为该类定义了一个同名(和prototype同名)的属性。在读取同名属性的时刻，优先读取对象上的属性，而不是prototype的。
私有属性
我们在Java中，定义私有属性是经由过程关键字private来润饰的。。
在JavaScript中是没有如许的关键字的，我们须要如许做：定义在要领内【也就是function内部，也可以看作成组织函数】的变量，就是私有变量。
var obj = function Teacher(name) {
//这是私有属性，外界不能接见
var age = 23;
//这是公有属性，外界可以接见
this.name = name;
//想要接见私有变量age，只能在这里编写要领来接见。其他的处所都不可！
//我们一般就是在这里编写公有要领来接见私有属性
};
静态属性和要领
在JavaScript中定义静态属性实在就是经由过程prototype原型对象来定义的。
定义静态的机遇：
- 当类的某个值与对象无关希冀统统位置看到的结果是一样的时刻，就可以定义为类静态属性。
- 假如类的一个要领做的是和详细对象无关的操纵，而是做一些事情操纵的时刻，就可以将这个要领定义为静态的类要领。
//静态属性TYPE
Book.TYPE = “IT”;
Book.print = function(){alert(Book.TYPE);}
JavaScript中的for in轮回
在进修AJAX的时刻，发明JavaScript中for in轮回，这类轮回关于遍历JSON是很好用的。因而写下了这篇博文
for in轮回本质上是forEach轮回，它主要有两个作用
- 遍历数组
- 遍历JavaScript对象
遍历数组
当运用for in来遍历数组的时刻，它的轮回计数器是数组元素的索引值
var a = ['a', 'b', 'c'];
for(var index in a) {
alert(index);
}
结果：
遍历JavaScript对象
当运用for in来遍历对象的时刻，它的轮回计数器是对象的属性名
//对象json上，包含了两个对象a和b属性
var json = {a:{num:1},b:{num:2}};
for(var name in json){
alert(name);
}
结果
JS打气球游戏
在B站中看见了一个JS大气球这么一个教程，才晓得本来JS+HTML5+CSS3能那末风趣。然则视频中没并没有给出源码。因而在他人的博客中搜到了对应的源码以及他本身完成的思绪，该博主对其举行了改编。
http://www.cnblogs.com/morang/p/7636148.html
以上的博文有源码的下载。下面我就直接贴上源码了。思绪就在博文中。
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html>
<head>
<title>气球大战</title>
<meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0">
<style>
/*CSS3可以将气球描绘出来，运用到了圆形、扭转、暗影等手艺*/
body{margin:0px;padding:0px;}
#ballDiv{position: fixed;top: 0;left: 0;}
.balloon{
width:150px;
height:150px;
position:absolute;
left:0px;
top:0px;
background-color:#f3778d;
border-radius:50% 50% 10% 50%;
transform:rotate(45deg);
box-shadow:1px 1px 20px 20px pink inset;
z-index:10;
}
/*这里运用到了伪元素，可以不必到html中定义元素就可以完成功用了！*/
.balloon:after{
width:20px;
height:20px;
content:"";
display:block;
background:transparent;
position:absolute;
right: -15px;
bottom: -15px;
border-left:5px solid pink;
border-top:5px solid pink;
}
/*这里运用到了伪元素，可以不必到html中定义元素就可以完成功用了！*/
.balloon:before{
width: 2px;
height: 50px;
content: "";
display: block;
background: #ffc0cb;
position: absolute;
right: -10px;
top: 100%;
margin-top: -16px;
transform: rotate(-45deg);
}
</style>
</head>
<body>
<div id="gameinfo" style="transform: translateZ(360px);">
<p>
最高连击：<span id='maxDoubleHit'>0</span>
</p>
<p>
本次游戏：<span id='currentDoubleHit'>0</span>
</p>
<p id="gamemsg" style="display:none;">
<span style="color:red;font-weight:bold;">
Game Over
</span>
<button onclick="javscript:location.reload();">
从新开始
</button>
</p>
</div>
<div id="ballDiv">
</div>
<!--<div class="balloon"></div>-->
<script>
var maxDoubleHit=localStorage.getItem('eliminateCount')||0
var currentDoubleHit=0
//当作一个缓存池，优化机能的。
var bnElements=[];//寄存统统气球
var random=Math.random;//随机函数
var wW=window.innerWidth;//窗口宽度
var wH=window.innerHeight;//窗口高度
var ballW=160;//气球的宽度
var ballH=300;//气球的宽度
var minSpeed=3;//最小速率，每次向上挪动最少3px
var speedNum=5;//速率的定量
var defBnNumber=5;//初始化气球
var moveTimer;
var isEnd=false;
var jindex=1;
var ballDiv=document.getElementById('ballDiv');
//初始化
init(defBnNumber);
//挪动
move();
//绑定单击事宜
bindClick();
//游戏信息
document.getElementById('maxDoubleHit').innerText=maxDoubleHit
function record(){
if(isEnd){
clearTimeout(moveTimer);
bnElements=[];
document.getElementById('gamemsg').style.display='block';
document.getElementById('gameinfo').style='transform: translateZ(360px);position: fixed;top:0;left:0;z-index:999';
}
else{
init(1);
document.getElementById('currentDoubleHit').innerText=++currentDoubleHit;
if(currentDoubleHit>maxDoubleHit){
document.getElementById('maxDoubleHit').innerText=currentDoubleHit;
localStorage.setItem('eliminateCount',currentDoubleHit)
}
}
}
//初始化气球
function init(num){
//建立一个假造文档节点
var docFragment=document.createDocumentFragment();
for(var i=0;i<num;i++){
var bnElement=document.createElement('div');
bnElement.className='balloon';
//速率随机，限制最小值
var speed=Math.max(minSpeed,~~(random()*speedNum));
bnElement.setAttribute('speed',speed);//~~取整 挪动速率
bnElement.setAttribute('id','ball-'+jindex++);
//疏散分列
var x=(~~(random()*wW))-ballW;
x=Math.max(0,x);
bnElement.style.left=x+'px';
bnElement.style.top=wH+'px';//露一点出来
//1.先将建立的气球放入建立的假造文档节点
docFragment.appendChild(bnElement);
bnElements.push(bnElement);
}
//2.将假造文档节点增加到body中
ballDiv.appendChild(docFragment);
}
//运用定时器来对气球举行挪动。
function move(){
var bl=bnElements.length
for(var i=0;i<bl;i++){
var currentElement=bnElements[i]
if(currentElement==null){
continue;
}
var offsetTop=currentElement.offsetTop;
if(offsetTop>0){//窗口中
//offset就是针对窗口的位置来举行挪动的。
var speed=currentElement.getAttribute('speed');
currentElement.style.top=offsetTop-speed+'px'
}
else{
//移除dom节点
//ballDiv.removeChild(currentElement);
//移除数组中
//bnElements.splice(i,1);
//init(1);
isEnd=true;
record();
}
}
moveTimer=setTimeout(move,1000/30);
}
//对统统的气球举行单击监听事宜，不要零丁为每一个气球来举行监听，如许消耗机能！
function bindClick(){
ballDiv.addEventListener('click',clickFunc,false);
function clickFunc(e){
if(!isEnd && e.target.className=='balloon'){
bnElements.splice(bnElements.lastIndexOf(e.target),1);
//这里运用call主动挪用，在boom要领中我们就可以运用this指针了。
boom.call(e.target,function(){
e.target.parentNode.removeChild(e.target);
record();
});
}
}
}
function boom(callback){
//var that=this; //替换了上下文，然则没有运用this的意义.
var speed=this.getAttribute('speed');
this.timer=setInterval(function(){
this.style.opacity=0.1*(speed--)
if(speed<1){
callback&&callback();
clearInterval(this.timer);
}
}.bind(this),30);
}
</script>
</body>
</html>看了视频也学到了之前一向没有注重的东西:
- CSS3很厉害啊，能将方形的div转成是椭圆形的[也就是气球的外形]，另有盒子的暗影设置。
- 运用伪元素就可以不必直接在html中设置标签了。合营CSS3也可以做出对应的款式。
- 运用实体边框合营CSS3也可以做出差别的外形款式
- 在天生元素的时刻，可以先将要天生的元素加入到文档片断中，再运用文档片断来举行一次性增加到body上，如许机能会好许多!
- 运用~~运算符可以取整数
- 限制气球的边境就可以运用max和min函数来举行限制。这也是很好用的。
- 挪动气球我们须要用到定时器。
- 运用call主动挪用要领，把目的对象通报过去的话，我们就可以运用this指针了。
- 在定时器中运用bind(this),就可以在定时器中运用this指针的，由于定时器默许是由浏览器window来举行挪用的，默许是不能运用this的
- 绑定单击事宜的时刻，不要运用轮回来举行绑定，如许太消耗机能了，我们可以运用监听事宜来举行一次绑定。
- 在遍历元素数组的时刻，前提是元素数组的长度时，我们可以先把该元素数组的长度初始化出来，那末也可以提拔机能!不然就每次推断前都要去查询数据的长度!
for(var i=0,len = array.length; i<len;i++){}假如文章有错的处所迎接斧正，人人相互交换。习气在微信看手艺文章，想要猎取更多的Java资本的同砚，可以
关注微信民众号:Java3y
