index.html:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="js1.js"></script>
    <script>
    </script>
</head>
<body>

<!--js对大小写十分敏感-->
<script>
    document.write("<h1>在js语句体内中也可以输出标签~</h1>"+"<br>")
    //        在输出语句中用+号表示连接
</script>

    <p id="pid">Hello</p>
    <script>
        document.getElementById("pid").innerHTML="用这里的内容来替代pid里的内容"
        document.getElementById("pid").innerHTML="哈哈哈哈哈哈哈***"
        document.getElementById("pid").innerHTML="可以覆盖之前的内容 因为这里为最后所显示的内容"

        //声明数组
        var arr = ["hello","I","am","sb"];
        var arr = new Array("hello","I","am","sb");
        var arr = new Array();
        a[0]= null;
        a[1]= null;
        a[2]= null;//输出null
    </script>


    <!--点击反馈-->
    <p id="sumid"></p>
    <script>
        function mysum(){
            var i=5;
            var j="5";
            var m=i+j;
    //*********任何数和字符串相操作都会转化成字符串
    //*********10==10(√) "10"==10(√) "10"===10(×)三等号要完全相等
            document.getElementById("sumid").innerHTML=m;//当前界面直接输出
    //          document.write(m);//新的界面输出
        }
        function sum(a,b){
            var res=a+b;
            return res;
        }
        //alert(sum(10,"10"));//alert对话框弹出  在script内直接调用函数
        //        sum(10,10);
    </script>
    <button οnclick="mysum()">调用函数测试</button><!--在script体外调用函数-->



    <script>
        function Demo(){
            alert("执行吗");
            return "sb";
        }
        function demo(){
            var s1=Demo()+"11";
            var s2=Demo()+"22";
            alert(s1);
            alert(s2);
        }
    </script>
    <button οnclick="demo()">return语句测试</button>


    <input type="text" id="input">
    <input type="button" id="submit" οnclick="error()" value="确认提交">
    <script>
        function error(){
            try{
                var e = document.getElementById("input").value;
                document.getElementById("input").style.color="blue";
                if(e==""){
                    throw ("输入内容不能为空");
                }
            }
            catch(err){
                alert(err);
            }
        }
    </script>


    <div class="div" οnmοuseοut="onOver(this)" οnmοuseοver="onOut(this)" style="background-color: lawngreen;width: 100px;height: 100px"></div>
    <script>
        function onOver(ooj){
            ooj.innerHTML = "Before";
        }
        function onOut(ooj){
            ooj.innerHTML = "Now";
        }
    </script>
    <form>
        <input type="text" οnchange="changeDemo(this);alert('Content has changed.')" style="background-color: burlywood">
        <input type="text" οnselect="changeDemo(this)" οnfοcus="changeDemo(this)">
    </form>
    <script>
        function changeDemo(bg){
            bg.style.background="yellow";
        }
    </script>

<!--DOM EventListener事件句柄 addEventListener、removeEventlistener-->
<!--IE的事件处理句柄-->
    <button id="btn1">句柄测试</button>
    <script>
        var btn1 = document.getElementById("btn1");
        btn1.addEventListener("mouseover", function () {
            alert("句柄测试1");
        })
    </script>

<!--事件的冒泡 以及禁止冒泡-->
    <div id="buttonfather">
        <button id="btn2">句柄测试</button>
    </div>
    <script>
        document.getElementById("btn2").addEventListener("click",function(event){
            alert(event.type);
            event.stopPropagation();//阻止事件冒泡
            event.preventDefault();//阻止事件默认事件
        })
        document.getElementById("buttonfather").addEventListener("click",function(event){
            alert(event.target);
        })
    </script>

<!--JS的面向对象-->
    <script>
//        <!-- 方式1  -->
        people = new Object();
        people.name="zy";
        people.age="18";
        document.write("name:"+people.name+",age:"+people.age);
        people = {name:"zyy",age:"18"}
//        <!-- 方式2  -->
        function people1(name,age){
            this.name=name;
            this.age=age;
        }
        son=new people1("zyyy",18);
        document.write("name:"+son.name+",age:"+son.age+"</br>");

//        <!-- String -->
        var str = "hello world"
//        str.length  str.indexOf("xxx")  str.match("xxx")  str.replace("目标串","要替换成为的串")
//        str.toUpperCase()/str.toLowerCase()
        var str1 = "hello,jike,xueyuan"
        var s = str1.split(",");
        for(var i=0;i<3;i++){
            document.write(s[i]);
        }

//        <!-- Date -->
        var date = new Date();
//        date.getFullYear()  date.getTime()  date.setFullYear()
//        date,getTime() 距离时间戳1970.1.1的毫秒数


//        <!-- Array -->
//        concat()合并数组 sort()排序 push()末尾追加元素 reverse()数组元素反转


//        <!-- Math --->
//        round()四舍五入  random()随机数  max()  min()  abs()

    </script>

    <p name="pn">Hello</p>
    <p name="pn">Hello</p>
    <p name="pn">Hello</p>
    <p name="pn">Hello</p>
    <p name="pn">Hello</p>
    <a id="aid" title="得到了a标签的title" href="demo.html">hello</a><br>
    <a id="aid2">aid2</a><br>
    <button οnclick="getName()">获取name</button>
    <button οnclick="getAttr()">获取元素</button>
    <button οnclick="getSize()">获取尺寸</button>
    <script>
//        <!--getElementsByName 获取name-->
//        <!--getElementsByTagName(p、a) 获取元素-->
//        <!--getAttribute 获取元素属性-->
//        <!--setAttribute 设置元素属性-->
        function getName(){
            var count = document.getElementsByName("pn");
            alert(count.length);
            var p = count[2];
            p.innerHTML="World";
        }
        function getAttr(){
            var anode = document.getElementById("aid");
            var attr = anode.getAttribute("title");
            alert(attr);
        }
        function setAttr(){
            var anode = document.getElementById("aid2");
            anode.setAttribute("title","动态设置a的title属性");
            var attr = anode.getAttribute("title");
            alert(attr);
        }
        function addNode(){
            var div = document.getElementById("div");
            var node = document.getElementById("pid");
            var newnode = document.createElement("p");
            newnode.innerHTML = "动态添加第一个p元素";
            div.insertBefore(newnode,node);
        }
        function removeNode(){
            var div = document.getElementById("div");
            var p = div.removeChild(div.childNodes[1]);
        }
        function getSize(){
            var width = document.body.offsetWidth||document.documentElement.offsetWidth;
            var height = document.body.offsetHeight;
            alert(width+"*"+height);
        }
    </script>

<!--内置window对象-->
    <br><button οnclick="openwindow()">打开窗口</button>
    <script>
        function openwindow(){
//          window.innerWidth+window.innerHeight
            window.open("demo.html","windowname","height=200,width=200,top=100,left=100,toolbar=no,menubar=no");
            window.close();
        }
    </script>

<!--内置计时器对象-->
    <p id="ptime"></p>
    <button id="btn3" οnclick="stopTime()">停止时间</button>
    <script>
        var mytime = setInterval(function(){
            getTime();
        })
//      setInterval() 间隔指定的毫秒数不停地执行指定代码
        function getTime(){
            var d= new Date();
            var t= d.toLocaleTimeString();
            document.getElementById("ptime").innerHTML=t;
        }
//      也可以一直getTime里面一直调用自己来不断获取时间
        function stopTime(){
            clearInterval(mytime);
//      setTimeout() 暂停指定的毫秒数后执行指定的代码
        }
    </script>

<!--内置History对象-->
    <button id="btn4" οnclick="goHistory()">浏览记录</button>
    <script>
        function goHistory(){
//            history.back();返回上一级
//            history.forward();前进下一级
            history.go(1);//需要从别的界面过来 才能进入那个页面 假定本页面为0
        }
    </script>

<!--内置Location对象
location.hostname 返回web主机域名
location.pathname 返回当前页面的路径和文件名
location.port 返回web主机的端口
location.protocol 返回所使用的web协议
location.href 属性返回当前页面的url
location.assig() 方法加载新的文档
-->

<!--内置Screen对象-->
<script>
    document.write("可用高度:"+screen.availHeight+",可用宽度:"+screen.availWidth);
    document.write("高度"+screen.height+",高度:"+screen.width);
</script>
<br><button id="btn5" οnclick="fuyong()">面向对象继承、复用和调用父类</button>

</body>
</html>


js1.js

/**
 * Created by Vodka on 2017/3/14.
 */
document.write("开始学习JavaScript啦!!");

(function(){
    var n ="将Js类封装";//该n不能在类外被调用
    function Person(name){
        this.name=name;
    }
    Person.prototype={
        name:"vodka",
        age:18,
        eat:function(){
            alert(this.name+"吃东西");
        }
    }
   window.Person = Person;
}());


var p = new Person();

function Student(name){
    this.name=name;
}
//继承复用时  先继承,再重写函数
Student.prototype = new Person();
var superEat = Student.prototype.eat;
Student.prototype.eat= function () {
    alert(this.name+"子类复用吃东西");
    superEat.call(this);//调用父类的方法 通过call调用父类的元素
}
var ss = new Student("Vodka ");

function fuyong(){
    p.eat();
    ss.eat();
}

//Js当中所有东西都是对象

//function Person(){
//    var _this = {};
//    _this.sayHello = function () {
//        alert("Hello");
//    }
//    return _this;
//}//创建对象方式+1  所有东西都通过_this充当对象重载
//function Teacher(){
//    var _this = Person;
//    return _this;
//}
//var t=Teacher();
//t.sayHello();

//惰性函数
//函数柯里化
//正则表达式
var pat1="hello world";
var pat2=/world/;  //双斜杠中间加东西 表示是一个正则表达式