导航

培训第五天---JS

Posted on 2016-07-22 14:18  endingzero  阅读(110)  评论(0)    收藏  举报 
&&与||的基础
<script type="text/javascript">
    var c = 4||3;
    alert(c);
</script>
弹出的是4；
解释：if(c=4){4}else{3}
<script type="text/javascript">
    var c = 0||3;
    alert(c);
</script>
弹出的是3；

解释：if(c=0){0}else{3}
<script type="text/javascript">
    var c = 4&&3;
    alert(c);
</script>
弹出的是3；
解释：if(c==4){if(c==3{3})}{4}
<script type="text/javascript">
    var c = 0&&3;
    alert(c);
</script>
弹出的是0；
解释：if(c==0){if(c==3{3})}{0}

拖拽效果
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #div1{width: 500px;height: 500px;border: 1px solid black;}
    </style>
    <script type="text/javascript">
        function dragStart(event){
            event.dataTransfer.setData("objectId",event.target.id);
        }
        function dragEnter(event){

        }
        function dragOver(event){
            event.preventDefault();

        }
        function drop(event){
            var objectId = event.dataTransfer.getData("objectId");
            var object = document.getElementById(objectId);

            var divObject = document.getElementById("div1");
            divObject.appendChild(object);
    }
    </script>
</head>
<body>
   <div id="div1" ondragenter="dragEnter(event);" ondragover="dragOver(event);" ondrop="drop(event);"></div>
    <img src="pic.jpg" id="myImage" draggable="true" ondragstart="dragStart(event);">
</body>
</html>

 基于类的面向对象js可以模拟面向对象中的继承、封装。

/**
 * Created by ending on 2016/7/22.
 */
//模拟封装
function BaseFunc(){
    //函数可以直接对变量赋值
    //var都是私有的
    var varBF01;
    var varFuncBF1 = function(){
        alert("");
    }
    //公有的
    this.varPubBF2 = "hello varPubBF2";
    this.varPubFunc1 = function(){
        alert("hello varPubFunc1");
    }
    //静态方法
    BaseFunc.staticFunc1 = function(){
        alert("hello staticFunc1");
    }
}
//模拟继承
//继承只继承公有
function SubFunc(){
    BaseFunc.apply(this,arguments);
    this.varPubSF1 = function(){
        alert("hello varPubSF1");
    }
}

 基于原型的面向对象通过原型来继承

/**
 * Created by ending on 2016/7/22.
 */
function Animal(){
    this.eat = function(){
        alert("animal eat!!!");
    }
    this.run = function(){
        alert("animal run!!!")
    }
}
function  Dog(){
    this.bark = function(){
        alert("wwww");
    }
}

 

 <script type="text/javascript">
        var animal = new Animal();
       // animal.eat();
        Dog.prototype = new Animal();
        var wangcai = new Dog();
       // wangcai.bark();
        wangcai.run();
    </script>