ECMAScrip内置对象,BOM模型和DOM模型

一.javascript-ecmascript有11个内置对象
Array（数组），String，Data，Math，Boolean,Number,Function（函数）,Global,Error,RegExp（正则）,Object（自定义）
1.Function对象
函数创建方式一

<script>
            function func1() {
                alert(123)
                return 8;
            }
            var ret=func1()//函数执行结果 123
            alert(ret) //返回值  8
</script>

函数创建方式二：

<script>
    //var func2=new Function("参数1","参数n","函数体")；
    var add=new Function("a","b","alert(a+b)")
    add(1,2)
    alert(add.length)//参数长度:2
</script>

函数创建方式三

<script>
        function fun=function () {
            alert(123)
        }
</script>

自执行函数定义

<script>
        (function (arg) {
            console.log(arg)
        })('123')
</script>

阻拦方法的返回值–Undefined

<script>
            function f() {
                return 6;
            }
            alert(f())//6
            alert(void(f()))//Undefined
</script>

全局变量和局部变量

<script>
   function f() {
      var b=6;//局部变量
      }
   f();
   alert(b);//Uncaught ReferenceError: b is not defined
   //去掉var就变成了全局变量，能够执行
</script>

<script>
    function a(a,d) {//a是一个变量
       alert(a,d)
        }
    var a=1;
    var d=2
    a(a,d);//Uncaught TypeError: a is not a function
</script>

实现1+2+3+4+5

<script>
        var ret=0;
        function add() {
            alert(arguments.length)//5
            console.log(arguments.length)//5
            console.log(arguments)//结果是数组
            for(var i in arguments){
                ret+=arguments[i];
            }
            return ret;
        }
        alert(add(1,2,3,4,5))//15
</script>

函数自定义异常

<script>
        function fun(){
            if (arguments.length!=3){
                throw new Error("param should be 3");
            }
        }
        fun(1,2,3,4,5)//参数个数是5--Uncaught Error: param should be 3
</script>

2.String对象

<script>
        //创建1
        var s="hello"
        //创建2
        var s2=new String("hello2")
        //string对象的属性
        alert(s.length);//字符串长度
        //遍历字符串
        for (var i in s){
            console.log(s[i])
        }
        //格式编排的方法
        //打印到页面
        document.write(s.bold())//加粗
        document.write("<br>")
        document.write(s.italics())//斜体
        document.write("<br>")
        document.write(s.anchor())//锚
        document.write("<br>")
        document.write(s.toUpperCase())//转换为大写
        document.write("<br>")
        document.write(s.toLowerCase())//转换为小写
        document.write("<br>")
        document.write(s.charAt(3))//根据索引位置取值
        document.write("<br>")
        document.write(s.charCodeAt())//根据索引位置取字符编码
        document.write("<br>")
        document.write(s.search("l"))//返回第一个l的索引位置
        document.write("<br>")
        document.write(s.match("l"))//返回的数组里面有所有的匹配个数---2
        document.write("<br>")
        document.write(s.replace("e","E"))//替换，不会影响原来的字符串hEllo
        document.write("<br>")
        document.write(s.split("e"))//得到一个数组,分割----h,llo
        document.write("<br>")
        document.write(s.concat("world"))//将两个字符串拼接
        document.write("<br>")
        //截取字符串
        document.write(s.substr(1,2))//el
        document.write("<br>")
        document.write(s.substring(1,4))//ell
        document.write("<br>")
        document.write(s.slice(1,-1))//ell
        document.write("<br>")
        document.write(s.indexOf("l"))//通过字符串取索引值---2
        document.write("<br>")
        document.write(s.lastIndexOf("l"))//取得最后一个字符为l的索引值---3
</script>

3.Array

<script>
        //创建方式1
        var arr=[1,2,3]
        //创建方式2
        var arr2=new Array(1,2,3)
        //如果采用初始化对象方式创建数组，如果里面只有一个值而且是一个数字，那么数字表示的是长度而不是内容
        var arr3=new Array(3);
        console.log(arr3[0])
        arr3[5]=10;
        console.log(arr3.length)//6
        //二维数组
        var arr4=new Array(5,"hello",true,[1,3])
        alert(arr4[3][1])//3
        //数组对象的方法
        //1.join方法：将数组里面的字符串拼接成为一个字符串，join方法的方法不同于在python，在js中只有Array
        s1="hello"
        s2="world"
        var ret=[s1,s2].join("+++")
        console.log(ret)//hello+++world
        //队列==先进先出  栈==后进先出
        //栈操作--shift  unshift   pop  push
        var arr5=[1,4,6]
        arr5.push(13)
        console.log(arr5)//[1, 4, 6, 13]
        arr5.push("hello",7)
        console.log(arr5)//[1, 4, 6, 13, "hello", 7]
        var ret=arr5.pop()
        console.log(ret)//按顺序删除最后一个元素7
        arr5.unshift(45)
        console.log(arr5)//[45, 1, 4, 6, 13, "hello"]首端入栈
        arr5.shift()
        console.log(arr5)//[1, 4, 6, 13, "hello"]首端出栈
        //排序
        var arr6=[1,6,3,2]
        arr6.reverse()
        console.log(arr6)//[2, 3, 6, 1]
        console.log(arr6.sort())//[1, 2, 3, 6]按aciis码排列的，想要按照大小排序必须要自定义函数
</script>

4.Date

<script>
//创建
        var date_obj1=new Date();
        alert(date_obj1.toLocaleDateString())//显示当前日期2018/1/12
        var date_obj2=new Date("2016/2/20")
        alert(date_obj2.toLocaleDateString())//2016/2/20
        var date_obj3=new Date(5000)
        alert(date_obj3.toUTCString())//Thu, 01 Jan 1970 00:00:05 GMT
        alert(date_obj1.getFullYear())//2018
        alert(date_obj1.getMonth())//1
        alert(date_obj1.getDay())//可返回表示星期的某一天的数字
        alert(date_obj1.getDate())//可返回月份的某一天。
</script>

打印2018年1月12日11:11:0星期六

<script>
        function gettime() {
            var date_obj=new Date()
            var year=date_obj.getFullYear()
            var month=date_obj.getMonth()+1
            var day=date_obj.getDate()
            var hour=date_obj.getHours()
            var minute=date_obj.getMinutes()
            var second=date_obj.getSeconds()
            var week=date_obj.getDay()
            // return year+"年"+f(month)+"月"+day+"日"+hour+":"+minute+":"+second+""+getWeek(week)
            return year+"年"+month+"月"+day+"日"+hour+":"+minute+":"+second+getWeek(week)
        }
        function getWeek(n) {
                week=["星期一","星期二","星期三","星期四","星期五","星期六","星期日"]
                return week[n]
            }
        function f(num) {//小于10的月前面要加0
            if (num < 10) {
                return "0" + num
            }
            return num
        }
        alert(gettime())
</script>

5.RegExp

<script>
        //方式一
        //new RegExp(pattern [, flags]) \
        //flag:标志可以具有以下值的任意组合
        //g 全局匹配;找到所有匹配，而不是在第一个匹配后停止
        //i 忽略大小写
        //m 多行; 将开始和结束字符（^和$）视为在多行上工作
        // （也就是，分别匹配每一行的开始和结束（由 \n 或 \r 分割），
        // 而不只是只匹配整个输入字符串的最开始和最末尾处。
        //u Unicode; 将模式视为Unicode序列点的序列
        //y 粘性匹配; 仅匹配目标字符串中此正则表达式的lastIndex
        // 属性指示的索引(并且不尝试从任何后续的索引匹配)。
        var re_obj=new RegExp("\d+","g")
        alert(re_obj.test("abcdf352"))//测试当前正则是否能匹配目标字符串。
        //方式二
        var re_obj2=/d+/g
        re_obj2.test("sgjds")
        var s="absjks45sd"
        alert(s.match(/\d+/g))//取出所有匹配内容
        alert(s.search(/\d+/g))//取出第一个匹配结果的索引值
        alert(s.split(/\d+/g))//将按照匹配内容分割
        alert(s.replace(/\d+/g,"*"))//将所有匹配内容替换
</script>

正则表达式中特殊字符的含义可以通过百度搜索
6.Math–是一个内置对象，可以直接使用，不需要实例化

<script>
        alert(Math.random())//(0,1)之间的随机数
        alert(Math.round(2.8))//近似整数  3
        //取0-100的随机数
        var num=Math.random()*100;
        num=Math.round(num)
        alert(num)
        alert(Math.pow(2,3))//2的3次方

</script>

二.BOM–浏览器对象模型
可以对浏览器窗口进行访问和操作，使用BOM开发者可以移动窗口，改变状态栏中的文本，以及执行其他和页面不相干的动作，使javascript有能力和浏览器对话
BOM有3种对象：Window对象，location对象，history对象
1.Window对象：所有的浏览器都支持window对象，一个html文档对应一个Window对象，作用是控制浏览器窗口，window对象不需要创建对象就可以直接使用。
//交互功能命令
alert():显示带有一段消息和一个按钮的警告框
confirm():显示带有一段消息以及确认按钮和取消按钮的对话框
prompt():显示可以提示用户输入的对话框
实现一个定时器功能

<script>
        function begin(){
            var start_time=gettime()//获取当前时间
            var ret=document.getElementById("clock")//在文档树中找到id为clock的标签
            ret.value=start_time//在文本框中输入时间
        }
        var ID//定义一个局部ID
        function begin_click(){
            if(ID==undefined){//第一次点击的时候没有值，假如没有这步判断多次点击start，
                // end后定时器失控--点击一次begin就会产生一个定时器，ID值会被覆盖，而定
                // 时器不会停止，最后一次clear的仅仅是最后一次的ID
            begin()//一点击就立刻执行，而不是点击后过1s执行
            ID=setInterval(begin,1000)//设置定时器,将ID修改为全局   setinterval是循环运行的
                }
        }
        function end_click() {
            clearInterval(ID)//这样才能在end_click函数中调用ID
            ID=undefined
        }

        function gettime() {
            var date_obj=new Date()
            var year=date_obj.getFullYear()
            var month=date_obj.getMonth()+1
            var day=date_obj.getDate()
            var hour=date_obj.getHours()
            var minute=date_obj.getMinutes()
            var second=date_obj.getSeconds()
            var week=date_obj.getDay()
            return year+"年"+month+"月"+day+"日"+hour+":"+minute+":"+second+getWeek(week)
        }
        function getWeek(n) {
                week=["星期一","星期二","星期三","星期四","星期五","星期六","星期日"]
                return week[n]
            }
        function f(num) {//小于10的月前面要加0
            if (num < 10) {
                return "0" + num
            }
            return num
        }


    </script>
</head>
<body>
    <input type="text" id="clock" style="width: 250px">
    <input type="button" value="begin" onclick="begin_click()">
    <input type="button" value="end" onclick="end_click()">
</body>

执行结果：点击start出现当前时间并开始计时，点击end停止计时
setTimeout方法用处比较多，通常用在页面刷新了、延迟执行了等等

<head>
<script>
function Timeout() {
            alert(123)
        }
        function fun() {
            var ID=setTimeout(Timeout,1000)//1s后触发Timeout函数--setTimeout()方法用于在指定的毫秒数后调用函数或计算表达式。setTimeout只运行一次
            // clearTimeout(ID)取消
        }
        </script>
</head>
<body>
    <input type="button" value="timeout" onclick="fun()">
</body>

2.history对象
history内部有三种方法：forward，back，go，一个属性：length
网页上的后退功能

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function fun() {
            history.back()
        }

    </script>
</head>
<body>

    <input type="button" value="back" onclick="fun()">
    <a href="history.html">lesson</a>
</body>

<body>
    #刷新页面
    <input type="button" value="重载" onclick="location.reload()">
    #跳转到新页面
    <input type="button" value="跳转" onclick="location.href='http://www.baidu.com'">
</body>

三.DOM(Document object Model)
是w3c（万维网联盟）的标准，Dom定义了访问Html和Xml的文档的标准
w3c标准被划分为3个标准
1)核心DOM针对任何结构化文档的模型
2)XML DOM针对HML文档的模型
3)HTML DOM针对HML文档的模型

导航属性：
    ele.parentNode父节点的节点
    ele.firstChild节点的第一个子元素
    ele.lastChild节点的最后一个子元素
    ele.childNodes节点的子节点
    ele.attributes节点的属性节
节点(自身)属性:
    ele.nodeType节点的类型
    ele.nodeValue节点值
    ele.nodeName节点名称
    ele.innerHTML节点的文本值

<body>
    <div id="div1">hello
        <div class="div2">hello 2</div>
        <div class="div3">hello 3</div>
        <p>hello 4</p>
    </div>
    <script>
        var ele=document.getElementById("div1")//hello hello2 hello3 hello4
        var ele2=ele.firstChild//找到第一个子元素
        alert(ele2.nodeName)//#text
        var ele_sons=ele.children//所有子元素
        alert(ele_sons.length)//3
        alert(ele_sons[0])//[object HTMLDivElement]
        for(var i=0;i<ele_sons.length;i++){
            console.log(ele_sons[i])
            // <div class="div2">hello 2</div>
            // <div class="div3">hello 3</div>
            // <p>hello 4</p>
        }
        //简写
        // var ele=document.getElementById("div").firstChild;
        var sib=ele.nextElementSibling//返回指定节点之后紧跟的节点，在相同的树层级中。
        alert(sib.nodeName)//SCRIPT
    </script>
</body>

页面查找方法–全局查找

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
    <div id="div1">hello
        <div class="div2">hello 2</div>
        <div class="div3" name="cooc">hello 3</div>
        <p>hello 4</p>
    </div>

</body>
</html>
<script>
        //通过class寻找对象
        var ele=document.getElementsByClassName("div2")[0]//取出第一个class="div2"的元素
        alert(ele.innerHTML)//hello 2
        var ele2=ele.nextElementSibling
        alert(ele2.innerHTML)//hello 3
        //通过id寻找对象
        var temp=document.getElementById("div1")
        //通过tag寻找--标签名
        var tag=document.getElementsByTagName("p")
        alert(tag[0].innerHTML)//hello 4
        //通过name属性
        var Name=document.getElementsByName("cooc")
        for(i in Name){
            console.log(Name[i].innerHTML)//hello3
        }

</script>

局部查找

<body>
    <div id="div1">hello
        <div class="div2">hello 2</div>
        <div class="div3" name="cooc">hello 3
            <p id="ppp">hello inner</p>
            <p class="ppp">hello inner2</p>
        </div>
        <p>hello p</p>
    </div>
</body>
</html>
<script>
     //局部查找可以通过tag
    var ele=document.getElementsByClassName("div3")[0]
    var ele2=ele.getElementsByTagName("p")[0]
    alert(ele2.innerHTML)
    //局部查找不可以通过id
    var ele3=ele.getElementById("ppp")
    alert(ele3.innerHTML)
     //局部查找可以通过class
    var ele4=ele.getElementsByClassName("")
    alert(ele4)
     //局部查找不可以通过name
    var ele5=ele.getElementsByName("cooc")
    alert(ele5)
</script>