我们可以从几个方面去说JavaScript是什么：

  • 基于对象

    • javaScript中内置了许多对象供我们使用【String、Date、Array】等等
    • javaScript也允许我们自己自定义对象
  • 事件驱动

    • 当用户触发执行某些动作的时候【鼠标单机、鼠标移动】，javaScript提供了监听这些事件的机制。当用户触发的时候，就执行我们自己写的代码。
  • 解释性语言

    • [x] javaScript代码是由浏览器解析的，并不需要编译。
  • 基于浏览器的动态交互技术

    • 既然javaScript是由浏览器解析的，那么它肯定要基于浏览器。 javaScript让网页变得更加“灵活””
  • 弱类型

    • [x] 像java、c++等编译型语言，要先定义变量，后使用。javaScript能够直接使用，不需要先定义

javaScript变量可分为三种类型：

  • 基本类型【number、string、boolean】

    • javaScript是弱类型语言，在运行的时候才知道具体的类型是什么。所有类型都用var来修饰。
  • 特殊类型【null、undefined】

    • 当定义了变量，没有任何赋值的时候，该变量就是undefined类型
  • 复合类型【数组、对象、函数】

在JavaScript中对象的类型可分为4种：

  • 内置对象【String、Math、Array】
  • 自定义对象【程序员自己创建的对象】
  • 浏览器对象【windows、document、history、status等等与浏览器相关的对象】
  • ActiveXObject（XMLHttpRequest）对象【异步对象，使用AJAX用到的对象，使用该对象与服务器进行异步交互】

函数是属于特殊类型的一种，在另外一篇博文已经讲解了创建对象、创建类的几种方式，可参考：http://blog.csdn.net/hon_3y/article/details/69362242

值得注意的是：javaScript定义函数的时候，参数的类型是不用声明的！

下面就定义了一个名称为mysum的函数

  1.         function mysum(num1,num2){
  2.             return num1 + num2;
  3.         }
  4.         var myresult = mysum(100,200);
  5.         alert("myresult="+myresult);

在JavaScript中， 一切皆是对象，函数也可以用一个对象来代表：Function，我们可以使用Function来创建对象：

函数参数全都是字符串，最后一个字符串是方法体

  2.         var youresult = new Function("num1","num2","return num1+num2");
  3.         alert( youresult(1000,2000) );

由于这种方法写起来并不好些，可读性也不太好，因此很少使用【不推荐使用】

其实这种和第一种差不多，只不过是将一个无名的函数赋值给一个变量。那么这个变量就代表了这个函数。

  3. var theyresult = function(num1,num2){
  4.                             return num1 + num2; 
  5.                          }
  6.         alert( theyresult(10000,20000) );

theyresult这个变量就代表了函数。

直接使用new Object()

  2.   var obj = new Object();

使用空的{}大括号

  1.     var obj2 = {};

这里写图片描述

我们要为创建的对象增加属性和访问属性的值！

JavaScript是弱类型的语言，可以动态的添加属性。

  2.     obj.age = 20;
  3.     obj.name = "zhongfucheng";
  4.     obj.say = function () {
  5.         alert("hello");
  6.     };

这里写图片描述

  2.     var aa = obj.age;
  3.     var bb = obj.name;

这里写图片描述

  2.     var aa = [obj["age"]];
  3.     var bb = [obj["name"]];

这里写图片描述

使用function来模拟创建类，function充当了构造函数

  2.         //测试函数
  3.         function test() {
  5.             var teacher = new Teacher();
  7.         }
  9.         //使用function来模拟类
  10.         function Teacher() {
  12.         }

这里写图片描述

上面的function来模拟类很容易和函数混淆。

我们一般这样做：用一个变量记住一个匿名的function当做是类，function充当了构造函数

  2.         function test() {
  4.             var teacher = new Teacher();
  5.             
  6.         }
  7.         var Teacher = function () {
  10.         };

这里写图片描述

使用JSON语法来创建类，也就是对象直接量定义方法

  3.         var obj = {
  4.             age: 20,
  5.             str: "zhongfucheng",
  6.             method:function () {
  7.                 alert("aaa");
  8.             }
  10.         };

这里写图片描述

我们创建公有属性应该在类中指定，创建公有方法应该使用原型对象prototype

prototype定义的属性就类似于Java的静态成员：在原型对象上定义了属性，拥有这个原型对象的function所创建的对象也拥有定义的属性！所以，我们方法中就使用prototype

  2.         var obj = function Teacher(name) {
  3.             this.name = name;
  4.             if( typeof obj._init=="undefined") {
  5.                 obj.prototype.setName = function (name) {
  6.                     this.name = name;
  7.                 };
  9.                 obj.prototype.getName = function () {
  10.                     alert(this.name);
  11.                 };
  12.             }
  14.             obj._init = true;
  15.         };

创建两个不同的Teacher对象，name属性是不一样的。而它们共享同一份setName()和getName()方法

这里写图片描述

值得注意的是：prototype定义的属性只可读的。如果你想要使用具体对象写prototype的属性，实际上并不是写，而是重新为该类定义了一个同名(和prototype同名)的属性。在读取同名属性的时候，优先读取对象上的属性，而不是prototype的。

我们在Java中，定义私有属性是通过关键字private来修饰的。。

在JavaScript中是没有这样的关键字的，我们需要这样做：定义在方法内【也就是function内部，也可以看作成构造函数】的变量，就是私有变量。

  2.         var obj = function Teacher(name) {
  4.             //这是私有属性，外界不能访问
  5.             var age = 23;
  7.             //这是公有属性，外界可以访问
  8.             this.name = name;
  9.             
  10.             //想要访问私有变量age，只能在这里编写方法来访问。其余的地方都不行！
  12.             //我们通常就是在这里编写公有方法来访问私有属性
  14.         };

在JavaScript中定义静态属性其实就是通过prototype原型对象来定义的。

定义静态的时机：

  • 当类的某个值与对象无关期望所有位置看到的结果是一样的时候，就可以定义为类静态属性。
  • 如果类的一个方法做的是和具体对象无关的操作，而是做一些工作操作的时候，就可以将这个方法定义为静态的类方法。
  1.     //静态属性TYPE
  2.     Book.TYPE = “IT”;
  4.     Book.print = function(){alert(Book.TYPE);}

在学习AJAX的时候，发现JavaScript中for in循环，这种循环对于遍历JSON是很好用的。于是写下了这篇博文

for in循环本质上是forEach循环，它主要有两个作用

  • 遍历数组
  • 遍历JavaScript对象

当使用for in来遍历数组的时候，它的循环计数器是数组元素的索引值

  2.     var a = ['a', 'b', 'c'];
  3.     for(var index in a) {
  4.         alert(index);
  5.     }

这里写图片描述

当使用for in来遍历对象的时候，它的循环计数器是对象的属性名

  2.     //对象json上，包含了两个对象a和b属性
  3.     var json = {a:{num:1},b:{num:2}};
  5.     for(var name in  json){
  6.         alert(name);
  7.     }

这里写图片描述

在B站中看见了一个JS大气球这么一个教程，才知道原来JS+HTML5+CSS3能那么有趣。但是视频中没并没有给出源码。于是在别人的博客中搜到了对应的源码以及他自己实现的思路，该博主对其进行了改编。

http://www.cnblogs.com/morang/p/7636148.html

以上的博文有源码的下载。下面我就直接贴上源码了。思路就在博文中。

  2. <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
  3. <html>
  4.     <head>
  5.         <title>气球大战</title>
  6.         <meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0">
  7.         <style>
  9.         /*CSS3能够将气球描绘出来，使用到了圆形、旋转、阴影等技术*/
  10.             body{margin:0px;padding:0px;}
  11.             #ballDiv{position: fixed;top: 0;left: 0;}
  12.             .balloon{
  13.                 width:150px;
  14.                 height:150px;
  15.                 position:absolute;
  16.                 left:0px;
  17.                 top:0px;
  18.                 background-color:#f3778d;
  19.                 border-radius:50% 50% 10% 50%;
  20.                 transform:rotate(45deg);
  21.                 box-shadow:1px 1px 20px 20px pink inset;
  22.                 z-index:10;
  23.             }
  24.             /*这里使用到了伪元素，可以不用到html中定义元素就可以实现功能了！*/
  25.             .balloon:after{
  26.                 width:20px;
  27.                 height:20px;
  28.                 content:"";
  29.                 display:block;
  30.                 background:transparent;
  31.                 position:absolute;
  32.                 right: -15px;
  33.                 bottom: -15px;
  34.                 border-left:5px solid pink;
  35.                 border-top:5px solid pink;
  36.             }
  37.             /*这里使用到了伪元素，可以不用到html中定义元素就可以实现功能了！*/
  38.             .balloon:before{
  39.                     width: 2px;
  40.                     height: 50px;
  41.                     content: "";
  42.                     display: block;
  43.                     background: #ffc0cb;
  44.                     position: absolute;
  45.                     right: -10px;
  46.                     top: 100%;
  47.                     margin-top: -16px;
  48.                     transform: rotate(-45deg);
  49.             }
  50.         </style>
  51.     </head>
  52.     <body>
  53.         <div id="gameinfo" style="transform: translateZ(360px);">
  54.             <p>
  55.                 最高连击：<span id='maxDoubleHit'>0</span>               
  56.             </p>
  57.             <p>
  58.                 本次游戏：<span id='currentDoubleHit'>0</span>               
  59.             </p>
  60.             <p id="gamemsg" style="display:none;">
  61.                 <span style="color:red;font-weight:bold;">
  62.                     Game Over
  63.                 </span>
  64.                 <button onclick="javscript:location.reload();">
  65.                     重新开始
  66.                 </button>
  67.             </p>
  68.         </div>
  69.         <div id="ballDiv">
  70.             
  71.             
  72.         </div>
  73.         <!--<div class="balloon"></div>-->
  74.         <script>
  75.             var maxDoubleHit=localStorage.getItem('eliminateCount')||0
  76.             var currentDoubleHit=0
  77.             //当做一个缓存池，优化性能的。
  78.             var bnElements=[];//存放所有气球
  79.             var random=Math.random;//随机函数
  80.             var wW=window.innerWidth;//窗口宽度
  81.             var wH=window.innerHeight;//窗口高度
  82.             var ballW=160;//气球的宽度
  83.             var ballH=300;//气球的宽度
  84.             var minSpeed=3;//最小速度，每次向上移动至少3px
  85.             var speedNum=5;//速度的定量
  86.             var defBnNumber=5;//初始化气球
  87.             var moveTimer;
  88.             var isEnd=false;            
  89.             var jindex=1;
  90.             var ballDiv=document.getElementById('ballDiv');
  91.             
  92.             //初始化           
  93.             init(defBnNumber);
  94.             //移动
  95.             move();
  96.             //绑定单击事件
  97.             bindClick();
  98.             
  99.             //游戏信息
  100.             document.getElementById('maxDoubleHit').innerText=maxDoubleHit
  101.             function record(){
  102.                 if(isEnd){
  103.                     clearTimeout(moveTimer);
  104.                     bnElements=[];
  105.                     document.getElementById('gamemsg').style.display='block';
  106.                     document.getElementById('gameinfo').style='transform: translateZ(360px);position: fixed;top:0;left:0;z-index:999';
  107.                 }
  108.                 else{
  109.                     init(1);
  110.                     document.getElementById('currentDoubleHit').innerText=++currentDoubleHit;
  111.                     if(currentDoubleHit>maxDoubleHit){
  112.                         document.getElementById('maxDoubleHit').innerText=currentDoubleHit;
  113.                         localStorage.setItem('eliminateCount',currentDoubleHit)
  114.                     }
  115.                 }
  116.             }
  117.             //初始化气球
  118.             function init(num){
  119.                 //创建一个虚拟文档节点
  120.                 var docFragment=document.createDocumentFragment();
  121.                 for(var i=0;i<num;i++){
  122.                     var bnElement=document.createElement('div');
  123.                     bnElement.className='balloon';
  124.                     //速度随机，限定最小值
  125.                     var speed=Math.max(minSpeed,~~(random()*speedNum));
  126.                     bnElement.setAttribute('speed',speed);//~~取整 移动速度
  127.                     bnElement.setAttribute('id','ball-'+jindex++);
  128.                     //分散排列
  129.                     var x=(~~(random()*wW))-ballW;
  130.                     x=Math.max(0,x);
  131.                     bnElement.style.left=x+'px';                
  132.                     bnElement.style.top=wH+'px';//露一点出来         
  133.                     
  134.                     //1.先将创建的气球放入创建的虚拟文档节点
  135.                     docFragment.appendChild(bnElement);
  136.                     bnElements.push(bnElement);
  137.                 }
  138.                 //2.将虚拟文档节点添加到body中
  139.                 ballDiv.appendChild(docFragment);
  140.             }
  142.             //使用定时器来对气球进行移动。
  143.             function move(){
  144.                 var bl=bnElements.length
  145.                 for(var i=0;i<bl;i++){
  146.                         var currentElement=bnElements[i]
  147.                         if(currentElement==null){
  148.                             continue;
  149.                         }
  150.                         var offsetTop=currentElement.offsetTop;
  151.                     if(offsetTop>0){//窗口中
  153.                             //offset就是针对窗口的位置来进行移动的。
  154.                             var speed=currentElement.getAttribute('speed');
  155.                             currentElement.style.top=offsetTop-speed+'px'
  156.                         }
  157.                         else{
  158.                             //移除dom节点
  159.                             //ballDiv.removeChild(currentElement);
  160.                             //移除数组中
  161.                             //bnElements.splice(i,1);
  162.                             //init(1);
  163.                             isEnd=true;
  164.                             record();
  165.                         }
  166.                 }
  167.                 moveTimer=setTimeout(move,1000/30);
  168.             }
  170.             //对所有的气球进行单击监听事件，不要单独为每个气球来进行监听，这样耗费性能！
  171.             function bindClick(){
  172.             
  173.                 ballDiv.addEventListener('click',clickFunc,false);
  174.                 function clickFunc(e){
  175.                     if(!isEnd && e.target.className=='balloon'){
  176.                         bnElements.splice(bnElements.lastIndexOf(e.target),1);
  178.                         //这里使用call主动调用，在boom方法中我们就可以使用this指针了。
  179.                         boom.call(e.target,function(){
  180.                             e.target.parentNode.removeChild(e.target);
  181.                             record();
  182.                         });
  183.                     }
  184.                 }
  185.             }
  186.             function boom(callback){
  187.                 //var that=this; //替换了上下文，但是没有使用this的意义.
  188.                 var speed=this.getAttribute('speed');
  189.                 this.timer=setInterval(function(){
  190.                     this.style.opacity=0.1*(speed--)
  191.                     if(speed<1){
  192.                         callback&&callback();
  193.                         clearInterval(this.timer);
  194.                     }
  195.                 }.bind(this),30);
  196.             }
  197.             
  198.         </script>
  199.     </body>
  200. </html>

看了视频也学到了之前一直没有注意的东西:

  • CSS3很厉害啊，能将方形的div转成是椭圆形的[也就是气球的形状]，还有盒子的阴影设置。
  • 使用伪元素就可以不用直接在html中设置标签了。配合CSS3也能够做出对应的样式。
  • 使用实体边框配合CSS3也可以做出不同的形状样式
  • 在生成元素的时候，可以先将要生成的元素加入到文档片段中，再使用文档片段来进行一次性添加到body上，这样性能会好很多!
  • 使用~~运算符能够取整数
  • 限定气球的边界就可以使用max和min函数来进行限定。这也是很好用的。
  • 移动气球我们需要用到定时器。

  • 使用call主动调用方法，把目标对象传递过去的话，我们就可以使用this指针了。
  • 在定时器中使用bind(this),就可以在定时器中使用this指针的，因为定时器默认是由浏览器window来进行调用的，默认是不能使用this的
  • 绑定单击事件的时候，不要使用循环来进行绑定，这样太耗费性能了，我们可以使用监听事件来进行一次绑定。
  • 在遍历元素数组的时候，条件是元素数组的长度时，我们可以先把该元素数组的长度初始化出来，那么也可以提升性能!不然就每次判断前都要去查询数据的长度!
  2. for(var i=0,len = array.length; i<len;i++){}

如果文章有错的地方欢迎指正，大家互相交流。习惯在微信看技术文章，想要获取更多的Java资源的同学，可以关注微信公众号:Java3y

版权声明：本文为Java3y原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/Java3y/p/8487892.html