JavaScript 基础知识-CFANZ编程社区

初识`JavaScript`

JavaScript 一种脚本语言，是一种动态类型、弱类型
JavaScript通常用来操作HTML页面的
html骨架，css是样式，js是行为

`js`代码写在哪里

JavaScript代码可以写在页面的script标签里面，或者单独的js文件里面，或者标签属性里面（不推荐）
写在外部.js后缀文件里面，通过script标签引入，类似于img 的src标签引入

在引入js文件的script标签里面，一定不能再写js代码

script标签可以放置于任何位置，不同位置要注意加载顺序，如果没有什么特殊要求，通常放在body 结束之前。

如果script里面涉及到操作后面的元素，而script又非得放在前面的话，需要加上window.onload

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        div{
            width: 100px;
            height: 100px;
            background: red;
        }
    </style>
    <script>
         //如果script里面涉及到操作后面的元素，而又非得把script放在前面的话，需要加上：
        window.onload = function () {
            alert("1我是写在head里面的js");//这里再写代码（意思是：当整个页面加载完成之后，再执行这里的代码）
        };//一个页面中只能出现一次window.onload
    </script>
</head>
<body>
    <!--<div onclick="alert(1);"></div>-->
    <script src="firstJS.js"></script>
    <script>
         /*
         1.JavaScript 是一种脚本语言，是一种动态类型、弱类型
         2.JavaScript通常用来操作HTML页面的
            html骨架，css是样式，js是行为

        JS代码写在哪里：
            script标签里面
            写在外部.js后缀文件里面，通过script标签引入
            写在标签里面
        注意：在引入js文件的script里面，一定不能再写js代码
              标签里面写js代码一般情况下不推荐

         script标签的方式位置：
            head或者body里面
            要注意是否需要加上window.onload
            如果说没有什么特别的要求，一般script标签放在body结束之前
        */
         alert(1);//弹窗  用来调试代码
         console.log(2);//打印到控制台 用来调试代码
    </script>
</body>
</html>

写`js`代码需要注意什么

注释里面是没有要求的
严格区分大小写

alert()才是js本身自带的，Alert()不是自带的

语句字符都是半角字符（字符串里面可以使用任意字符）
某些完整语句后面要写分号
代码要缩进，缩进要对齐
引号里面代表字符串，字符串是没有代码的功能的，所以不需要满足上述要求。

注释

多行注释/* */
单行注释//

`js`里的系统弹窗代码

alert("内容")

`js`里的打印

console.log(1);

`js`获取元素及修改内容

其实，要操作页面，就是操作标签，JS要操作标签，就要先获取标签
独有标签的获取：

document.title   document.title
document.body    document.body.innerHTML 
                document.body.innerText 
document.head    document.head.innerHTML

其他标签的获取

通过id获取元素

document.getElementById("box");

通过class获取：（不兼容IE8及以下）

.getElementsByClassName();

通过标签名获取

.getElementsByTagName();

通过选择器的写法获取元素：（不兼容IE7及以下）

.querySelector();
.querySelectorAll();

通过name获取

.getElementsByName();

注意：除了ID获取前面必须是document之外，其他的方式，前面可以是某个元素（不能是集合）

修改页面title信息

document.title = "我要把标题改成666";

修改别的标签的内容，得用innerHTML或者innerText

innerHTML 可以识别标签
innerText 不能识别标签

获取某个确切的元素,可以直接操作这个元素

document.getElementById("box").innerHTML = "吃惊！";

获取的是一堆元素的集合，设置操作时要通过下标（索引、序号）拿到对应的某一个再用

document.getElementsByClassName("box")[0].innerHTML = "美女";

document.write()

在文档流关闭之前，给body部分新增内容,在文档流关闭之后，修改整个HTML的内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>

</head>
<body>
    <div id="box"></div>
    <p class="wrap">wrap1</p>
    <p class="wrap">wrap2</p>
    <p>ppp1</p>

    <div id="box1">
        <i class="box1">iii1</i>
        <p class="p">ppp2
            <i class="box1">iii2</i>
        </p>
       <!--#box1 .p .box1 -->
    </div>
    <script>
         /*
        那么JS如何操作页面：
            其实，要操作页面，就是操作标签，JS要操作标签，就要先获取标签

        js如何获取独有标签
            document.title
            document.head
            document.body

        其他标签的获取，id前面必须是document,其他的前面可以是某个元素(id,document)，但不能是集合
                通过id获取元素，
                    document.getElementById()
                通过className获取元素(不支持IE8及以下)
                    .getElementsByClassName()
                通过标签名获取元素
                    .getElementsByTagName()

                通过选择器的写法获取元素（不兼容IE7及以下）
                    .querySelector()
                    .querySelectorAll()
                通过name值获取
                     document.getElementsByName（）
         */
//         document.title = "我是来改变标题的";
         //修改别的标签的内容，得用innerHTML(会解析标签)，innerText（不会解析标签）
//         document.body.innerHTML = "<b><em>我想给body增加点东西</em></b>";
//        document.body.innerText = "<b><em>我想给body增加点东西</em></b>";

        //获取的是确切的某个元素，可以直接操作这个元素
        document.getElementById("box").innerHTML = "我是通过id获取的";

//获取的是一堆元素的集合，设置操作的时候要通过下标（索引、序号）拿到对应的某一个
        /*document.getElementsByClassName("wrap")[0].innerHTML = "我是通过class获取的1";
        document.getElementsByClassName("wrap")[1].innerHTML = "我是通过class获取的2";
        alert(document.getElementsByClassName("wrap").length);//length 长度*/

//        document.getElementsByTagName("p")[0].innerHTML = "我是通过标签名获取的1";
//        document.getElementsByTagName("p")[1].innerHTML = "我是通过标签名获取的2";
//        document.getElementsByTagName("p")[2].innerHTML = "我是通过标签名获取的3";

//        document.querySelector("#box1 .p .box1").innerHTML = "我是iii2";
         //获取第一个对应的元素
//        document.querySelector("#box1 .box1").innerHTML = "我是iii2";
//　　　　　var oBox = document.getElementsByClassName("box")[0]; 可以用变量来接收指定选取的元素
//　　　　　var oSpan = oBox.getElementsByTagName("span");
//　　　　  alert(oSpan.length);


        document.querySelectorAll("#box1 .box1")[1].innerHTML = "你猜我是哪一个";
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>

</head>
<body>
    <div>222</div>
    <script>
        /*
        document.write()
            在文档流关闭之前，给body部分新增内容
            在文档流关闭之后，修改整个html的内容

         */
//        document.write("我是新增加的内容");
        window.onload = function () {
            document.write("<b><em>我是新增加的内容</em></b>");
        }
    </script>
</body>
</html>

事件

用户的操作元素.事件 = 函数；
鼠标事件

onclick 左键单击
ondblclick 左键双击
onmouseenter 鼠标移入
onmouseleave 鼠标移出

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        #box{
            width: 100px;
            height: 100px;
            background: yellow;
        }
    </style>

</head>
<body>
    <div id="box"></div>
    <script>
        /*
        所谓事件，是指 JavaScript 捕获到用户的操作，并做出正确的响应。
        在事件函数里面，有一个关键字this，代表当前触发事件的这个元素
        事件：用户的操作
        元素.事件 = 函数；
        鼠标事件：
            左键单击 onclick
            左键双击 ondblclick
            鼠标移入 onmouseover/onmouseenter ***
            鼠标移出 onmouseout/onmouseleave ***
         */
        document.getElementById("box").onclick = function () {
            console.log("我被点击了");
//            document.getElementById("box").innerHTML = "哈哈";
            this.innerHTML = "嘻嘻";
            alert("哈哈");
        };
        document.getElementById("box").onmouseenter = function () {
            console.log("我被移入了");
        };
        document.getElementById("box").onmouseleave = function () {
            console.log("我被移出了");
        }
    </script>
</body>
</html>

定义变量

不能使用关键字或者保留字（js里面已经赋予它有意义的词，或者留着备用的词）
只能包含数字字母 _ $ 并且不能以数字开头
严格区分大小写
尽量见名知意
var 变量时并不要求立马赋值
用,号可以让一个var定义多个变量

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        #box{
            width: 100px;
            height: 100px;
            background: purple;
        }
    </style>

</head>
<body>
    <div id="box"></div>
    <script>
        /*
        定义变量规则：
            1.不能使用关键字或者保留字,（js里面已经赋予他有意义的词，或者留着备用的词）
            2.只能包含 数字 字母 $ _ 并且不能以数字开头
            3.严格区分大小写
            4.尽量见名知意

            用 ，号可以让一个var定义多个变量
            var变量时并不要求立马赋值
         */
//        var oBox = document.getElementById("box");
//        oBox.onclick = function () {
//            console.log("我被点击了");
//            this.innerHTML = "嘻嘻";
//        };
//        oBox.onmouseenter = function () {
//            console.log("我被移入了");
//        };
//        oBox.onmouseleave = function () {
//            console.log("我被移出了");
//        };

//        var a = 10;
//        var b = 20;
//        var a = 10 , b = 10;

        var a , b , c;
        a = 10;
        b = 10;
        c = 10;
        alert( a + b + c );
    </script>
</body>
</html>

`js`操作元素的标签属性

规范的标签属性：

. 符号直接操作(可读可写)

不规范（自定义）的标签属性：

获取getAttribute
设置setAttribute
移除removeAttribute

注意：所有的路径/颜色获取的结果不一定就是你写的内容

通过ID获取的元素赋值给变量后，假设修改了ID，这个变量还是表示这个元素

自定义标签属性的操作方式，同样可以操作符合规范的标签属性

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>

</head>
<body>
    <a href="http://www.baidu.com" id="box" class="box" xiaopo="meinv" target="_blank">链接</a>
    <script>
         /*
        js操作元素的标签属性：
            规范的标签属性：
                . 符号直接操作（可读可写）
            不规范（自定义）的标签属性：
                获取：.getAttribute
                设置：.setAttribute
                移除：.removeAttribute

          注意：
          所有的 路径、颜色 获取的结果不一定是你写的内容
          通过id获取的元素赋值给变量后，假设修改了id，这个变量还是表示这个元素
          自定义标签属性的操作方式，同样可以操作符合规范的标签属性
         */
         var oA = document.getElementById("box");
//         alert(oA.id);//可读
//         alert(oA.target);
//         alert(oA.className);//class属性 要用className
//        oA.className = "on";
//        oA.target = "_self";
//        alert(oA.xiaopo);
         alert(oA.href);
//        oA.target = "";
//        oA.id = "bbb";
//        oA.target = "_self";
//        alert(oA.getAttribute("xiaopo"));
//        alert(oA.getAttribute("id"));
//        alert(oA.getAttribute("class"));
//        oA.setAttribute("xiaopo","ccc");
//        oA.removeAttribute("xiaopo");
    </script>
</body>
</html>

控制元素的样式

行内样式标签属性：大部分情况下，js都是通过操作行内样式达到修改样式的目的
当我需要单个属性去修改的时候,我们一般都是直接 . 操作去修改元素的行内样式
操作复合属性时，要注意用驼峰写法（去掉-号，-号后面的第一个单词大写）

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        #box{
            width: 100px;
            height: 100px;
            background: red;
        }
    </style>

</head>
<body>
    <div id="box"></div>
    <script>
        /*
        行内样式标签属性：大部分情况下，js都是通过行内样式来达到修改样式的目的
         */
        var oBox = document.getElementById("box");
        //当我们需要修改单个属性的时候，我们一般都是直接.操作去修改元素的行内样式
        /*oBox.style.height = "200px";
        oBox.style.width = "200px";
        oBox.style.background = "blue";*/
        /*oBox.style.cssText = "width: 200px;height: 200px;background: blue;";*/
         // 操作复合属性时，要注意用驼峰写法（去掉-号，-号后面的第一个单词大写）
//        oBox.style.marginLeft = "150px";
        oBox.style["margin-left"] = "150px";
    </script>
</body>
</html>

数据类型

number数字
string字符串
boolean布尔值true false
function函数
underfined 未定义一个变量声明之后没有赋值就是undefined
object在js里面null属于对象类型，但是它不具有很多对象的共性，所以很多资料将它归为单独一类数据类型null

算数运算符

+ - * /

当不是数字之间的运算的时候
    + 字符串拼接
    -/*%  尽量将字符串转换成数字（隐式类型转换）

 NaN :Not a Number   number类型
     一般在非法运算的时候才会 出现NaN
 isNaN(参数) 非常讨厌数字
    首先尽量把参数转换成数字，然后
        当参数是 数字，返回 false
        当参数不是数字，返回 true

赋值运算符

+= -= *= /= %=

++ -- 两个都存在隐式类型转换，会全部转换为数字
++x x++

比较运算符

< > == <= >= != === !==

== 和 ===的区别
== 只判断值是否一样
=== 不仅仅判断值，还判断类型是否一样

逻辑运算符

针对布尔值
  &&  与 两边都为真，结果才为真，其他为假
  ||  或 两边都为假，结果才为假，其他都是真
  !   非 取反，真变假，假变真

  当逻辑运算符，两边不一定是布尔值的时候
  && 遇到假就停，但是不会进行类型转换
  || 遇到真就停，。。。
  ！ 隐式类型转换，将后面的数据先转换为布尔值再取反

循环

for循环实例一

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>

</head>
<body>
    <script>

        /*for(var i = 0;i < 10 ; i ++){
            console.log(i);
        }*/
        /*for(var i = 0 ; i < 5 ; i ++){
            for(var j = 0 ; j < 2; j ++){
                console.log(i +";"+ j);
            }
        }*/
        /*for(1;2;4){
            3;
            // 1 - 2 - 3 - 4 - 2 - 3 - 4 - 2 - 3 - 4 - 2 直到2为假
        }*/
        for(var i = 0 ; i < 10 ; i ++){
            if(i === 5){
//                break;//中断循环，终止循环，结束循环，未执行的代码不执行
                continue;//跳出本次循环
            }
            console.log(i);
        }
    </script>
</body>
</html>

for循环实例二

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        li{
            list-style: none;
            width: 50px;
            height: 50px;
            background: red;
            border-bottom: 1px solid white;
        }
    </style>
</head>
<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <script>
        var oLi = document.getElementsByTagName("li");
        var length = oLi.length;
//        alert(length);
        /*oLi[0].onclick = function () {
            alert(0);
        };
        oLi[1].onclick = function () {
            alert(1);
        };
        oLi[2].onclick = function () {
            alert(2);
        };
        oLi[3].onclick = function () {
            alert(3);
        };*/
        for(var i = 0; i < length; i ++){
            oLi[i].index = i;//index aa  bb  dd 自定义变量
//            oLi[0].index = 0;
//            alert(i);//0 1 2 3
            oLi[i].onclick = function () {
                //循环完了的i
                alert(this.index);
//                alert(i);
            }
        }
        /*for(var i = 0; i < 10; i ++){
            console.log(i);
        }
        alert(i);//10*/

    </script>
</body>
</html>

while循环实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>

</head>
<body>
    <script>
//        var i = 0;
        /*for(;i<5;i++){
            console.log(i);
        }*/
        /*while(i<6){
            console.log(i);
            i ++;
        }*/

        var i = 40;
        /*while(i<5){
            console.log(i);
            i ++;
        }*/
        do{
            console.log(i);
            i++;
        }while(i<5);

    </script>
</body>
</html>

switch

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>

</head>
<body>
    <script>
        /*var name = "55";
        if(name === "小红"){
            alert(name + "好漂亮");
        }else if(name === "小明"){
            alert(name + "超级帅");
        }else if(name === "东方"){
            alert(name + "很帅");
        }else{
            alert("你是谁");
        }*/

        //全等判断
        var name = "小红";
        switch(name){//你要判断的变量
            case "小红":
                alert(name + "好漂亮");
                break;
            case "小明":
                alert(name + "超级帅");
                break;
            case "东方":
                 alert(name + "很帅");
                 break;
            default:
                alert("你是谁");
                break;

        }
    </script>
</body>
</html>

`if`条件

当if的条件 运算完后不是布尔值的时候，会被强制性的转换为布尔值
哪些值，在转换为布尔值的时候为false
    false          boolean
    0              number
    ""             string
    null           object
    undefined      undefined
    NaN            number
 在if里面，能用布尔值做条件判断的时候，不要用其他的来代替，因为强制数据类型的转换需要耗费时间
 在两个值比较的时候，能用三等判断的时候，就用三等判断

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>

</head>
<body>
    <script>
        /*
        if ==> 布尔值
        判断符
            > < >= <= == != !== ===
            ==   只判断值是否一样
            ===  不仅仅判断值，还判断类型是否一样
        当if的条件 运算完后不是布尔值的时候 会被强制性的转换为布尔值
        哪些值，在转换为布尔值的时候为false
            0         number
            false     boolean
            ""        string
            null      object/null
            undefined undefined
            NaN       number

            NaN :Not a Number   number类型
                 一般在非法运算的时候才会 出现NaN
             isNaN(参数) 非常讨厌数字
                首先尽量把参数转换成数字，然后
                    当参数是 数字，返回 false
                    当参数不是数字，返回 true

            在if里面，能用布尔值做条件判断的时候，不要用其他的来代替，因为强制数据类型的转换需要耗费时间
        在两个值比较的时候，能用三等判断的时候，就用三等判断
         */
        /*if(3 === "3"){
             //这里的代码只有当条件为true的时候才执行
            alert("真");
        }else{
             //这里的代码只有当条件为false的时候才执行
            alert("假");
        }*/
//        if(){}else{}

        //当真语句只有一行的时候，可以去掉大括号，还可以直接写在条件的后面
        /*if(3<5){
            alert("真");
        }*/
        /*if(3<5)alert("真");*/

        /*if(5<4){
            alert(1);
        }else{
            alert(0);
        }*/
        //真语句一行，假语句一行
//        5<4?alert(1):alert(0);//条件?真语句:假语句;
//        var x;
        /*if(5<6){
            x = 10;
        }else{
            x = 20;
        }*/
        //当三目的真假语句都是给同一个变量赋值的时候，可以更近一步简写
//        x = 5 < 4?10:20;
//        alert(x);
        /*var x = 50;
        if(x>60){
            alert("x大于60");
        }else if(x > 40){
            alert("x大于40");
        }else if(x > 20){
            alert("x大于20");
        }else if(x >= 0){
            alert("x大于等于0");
        }else if(x < 0){
            alert("x小于0");
        }*/

        /*if(null){
            alert(1);
        }else{
            alert(0);
        }*/
        /*var a;
        var x = a +1;
        alert(a);
        alert(x);
        alert(typeof x);*/
        if(isNaN("5")){
            alert(1);
        }else{
            alert(0);
        }


    </script>
</body>
</html>

函数

有名函数
     有名字的函数
     可以加括号自执行，执行的位置可以在定义的前面
     可以把名字放在事件后面，充当一个事件函数，事件触发的时候执行
     fn();
     function fn() {
        alert(1);}
        
     document.getElementById("box").onclick = fn;
        function fn(){
            alert(1); }
匿名函数
     没有名字的函数
     匿名函数不能单独出现 一般充当事件函数
     window.onclick = function{
        alert( 1 );
        }

函数表达式：
 特点：可以在后面加括号立即执行
 （） + - ! ~ 可以将匿名函数变为函数表达式

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>

</head>
<body>
    <script>
        /*
        函数表达式：
            特点：可以在后面加括号立即执行
            （） + - ! ~ 可以将匿名函数变为函数表达式
         */

        /*fn();
        function fn() {
            alert(2);
        }//函数定义 可以在定义前加括号执行，也可以在定义后加括号执行
//        fn();*/

        //函数表达式
//        fn1();
        /*var fn1 = function () {//通过var 的函数，只能在后面运行
            alert(3);
        };
        fn1();*/

        /*var fn2 = function () {
            alert(4);
        }();*/

        /*!function () {
            alert(6);
        }();*/

        /*(function () {
            alert(7);
        }());*/

        /*+function () {
            alert(6);
        }();*/

        /*~function () {
            alert(6);
        }();*/

        -function () {
            alert(6);
        }();

    </script>
</body>
</html>

我们在使用函数时，加括号导致的函数执行时，可以传递参数
  形参
  实参
  不定参

实例一：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>

</head>
<body>
    <script>
        /*
        我们在使用函数时，加括号导致的函数执行时，可以传递参数
               形参
               实参
               不定参
         */
//        fn(8);//执行函数时 可以传递 实参(用已知的变量 / 具体的数据)
        /*var s = 20;
        fn(s);*/
        function fn(q) {//形参（相当于函数局部的变量，命名规则和var相同）(定义，无中生有)
//            var q;
            alert(q);
        }

        //形参 / 实参都可以有多个，用 , 隔开
        /*sum(4,5);
        function sum(a,b) {
            alert(a+b);
        }*/

        //实参和形参个数不一定非得一样，但是不一样的时候要注意一一对应的关系
        /*sum(4,5,6,7);
        function sum(a,b) {
            alert(a+b);
        }*/


        //形参多了的话，没有对应的那些形参，值就是undefined
        sum(1,2);
        function sum(a,b,c) {
//            var c;
            //给形参添加默认值
            a = a || 0;
            b = b || 0;
            c = c || 0;
            alert(c);
            alert(a+b+c);
        }



    </script>
</body>
</html>

实例二：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>

</head>
<body>
    <script>
        sum(1,2,3,4,5,6,7,8,9);
        function sum() {
            //不定参 arguments,存储着所有 实参 的集合
            // 无论有没有形参，实参都会被存在 不定参 里面
            /*alert(arguments.length);
            alert(arguments[3]);*/
            var x = 0;
            for(var i = 0,len = arguments.length; i < len; i ++){
                x += arguments[i];
            }
            alert(x);
        }
    </script>
</body>
</html>

作用域：
javascript解析顺序
    1.（定义）先解析var function 参数
        a.该步骤的var只定义变量，后面的=赋值不解析
        b.该步骤的函数只定义函数，函数的执行不解析
        c.重名的只留一个，var 和函数重名  函数优先
    2.（执行）再从上至下执行其他代码
    
    作用域：
                作用：读写
                域：范围，区域
            解析：
                从上至下
                    1 找 var 定义函数 参数
                    2 执行
实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>

</head>
<body>
    <script>
        /*
        javascript解析顺序
            1.（定义）先解析var function 参数
                a.该步骤的var只定义变量，后面的=赋值不解析
                b.该步骤的函数只定义函数，函数的执行不解析
                c.重名的只留一个，var 和函数重名  函数优先
            2.（执行）再从上至下执行其他代码

            作用域：
                作用：读写
                域：范围，区域
            解析：
                从上至下
                    1 找 var 定义函数 参数
                    2 执行
         */

        /*alert(a);
        var a = 5;
        alert(a);*/
        /*
        1 找
            a = undefined;==>a = 5;
        2 执行
            alert(a); == > a = undefined;
            a = 5;
            alert(a);== > 5
         */

        /*alert(a);
        function a() {
            alert(6);
        }
        alert(a);*/
        /*
        1 找
            a = function a() {
                    alert(6);
                }
        2 执行
            alert(a);== > 函数块
            alert(a);== > 函数块
         */

        /*alert(a);
        function a() {
            alert(6);
        }
        a();
        alert(a);*/
        /*
        1 找
            a = function a() {
                    alert(6);
                }
        2 执行
            alert(a); == >函数块
            a();函数调用 是新的作用域 只要是作用域 解析时就要分两步
                1 找
                2 执行
                    alert(6); == > 6
              alert(a);== > 函数块
         */

        /*alert(a);
        function a() {
            alert(6);
        }
        var a = 520;
        alert(a);*/
        /*
        1 找
            a = function a() {
                    alert(6);
                } == > a = 520;
            a = undefined //重名 被干掉
        2 执行
            alert(a); == >函数块
            a = 520;
            alert(a); == > 520
         */

        /*var a = 1;
        function fn() {
             alert(2);
             var a = 3;
        }
         fn();
         alert(a);*/
         /*
         1 找
            a = und; == > a = 1
            fn = function fn() {
                     alert(2);
                     var a = 3;
                 }
         2 执行
            a = 1;
            fn();函数调用
                1 找
                    a = und;==>a = 3;
                2 执行
                    alert(2); == > 2
                    a = 3;
              alert(a);==> 1
          */

         /*var a = 1;
         function fn() {
             alert(2);
             a = 3;
         }
         fn();
         alert(a);*/
         /*
         1 找
            a = und;==>a = 1;==>a = 3;
            fn = function fn() {
                     alert(2);
                     a = 3;
                 }
         2 执行
            a = 1;
            fn();
                1 找
                2 执行
                    alert(2); ==>2
                    a = 3;(此函数没有 会从里往外找 去父级的作用域)
             alert(a);== > 3
          */

        /*var a = 1;
        function fn( a ) {
            alert(2);
            a = 3;
        }
        fn();
        alert( a );*/
        /*
        1 找
            a = und；==>a = 1;
            fn = function fn( a ) {
                    alert(2);
                    a = 3;
                }
        2 执行
            a = 1;
            fn();
                1 找
                    a = und; ==>a = 3;
                2 执行
                    alert(2);==>2
                    a = 3;
            alert( a );== >1
         */

         /*var a = 1;
         function fn( a ) {
             alert(2);
             a = 3;
         }
         fn( a );
         alert( a );*/
         /*
         1 找
            a = und;==>a = 1;
            fn = function fn( a ) {
                     alert(2);
                     a = 3;
                 }
         2 执行
            a = 1;
            fn( a );=>fn(1)
                1 找
                    a = und ==>a = 1; ==>a = 3;
                2 执行
                    a = 1;
                    alert(2); ==>2
                    a = 3;
            alert( a );==>1
          */

         /*var a = function () {
            alert( 1 )
         };
         function a() {
            alert( 2 )
         }
         a();*/
         /*
         1 找
            a = und;//重名 被干掉
            a = function a() {
                    alert( 2 )
                 } == > a = function () {
                    alert( 1 )
                 };
         2 执行
            a = function () {
                    alert( 1 )
                 };
             a();
                1 找
                2 执行
                  alert( 1 )；==> 1
          */
    </script>
</body>
</html>

`number`方法

number()——参数中必须能被转换成数字，否则返回NaN
parseInt()——将参数转换为数字，整数部分遇到不是数字就停
parseFloat()——将参数转换为数字，直到小数部分遇到不是数字就停
num.toFixed()——四舍五入保留两位小数，返回字符串
NaN(Not a Number) NaN自己不等于自己

`Math`数学方法

Math.pow(16,2)——16^2 = 256
Math.round(0.52)——四舍五入（取整）
Math.ceil(0.1)——向上取整
Math.floor(0.9)——向下取整
Math.max()——取参数中最大的值
Math.min()——取参数中最小的值
Math.random()——0-1的随机数
Math.PI()—— π

`string`字符串

索引、下标、偏移值——从0开始
str[index]——通过索引取字符串
str.length——获取长度空格也算
toString——转换字符串
str.substring(2,6)——截取字符串会比较参数值小的参数在前面负数变为0
str.slice()——切片不会交换位置负数倒着数从右到左
str.split()——字符串切割返回数组
str.indexOf()——查找字符串成功返回索引反之返回-1
alert(str.indexOf("xiaopo",str.indexOf("xiaopo")+1));
str.toUpperCase()——全部转换到大写
str.toLowerCase()——全部转换到小写

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>

</head>
<body>
    <script>
        /*
        string 字符串
            索引、下标、偏移量——从0开始
            str[index];——通过索引取字符串
            str.length;——获取长度  空格也算
            value.toString();——转换字符串
            str.substring();——截取字符串 会比较参数值的大小，
             小的参数在前面,负数变为0
            str.slice()——切片,不会交换位置，负数从右到左数
            str.split()——字符串切割，返回数组
            str.indexOf——查找字符串，成功返回索引，反之返回-1
            str.toUpperCase()——全部转换大写
            str.toLowerCase()——全部到小写
         */
        /*var str = "ni shi shui";
//        alert(str.length);//可读
//        alert(str[1]);//通过下标访问子元素
        str[1] = "Y";//只能读，不能写（修改）
        console.log(str);*/

        /*var a = 456;
        alert(a.toString());
        alert(typeof a.toString());*/

        var str = "ni shi shui";
        /*console.log(str.substring(1,5));
        console.log(str.substring(8,5));
        console.log(str.substring(-2,5));*/
        /*console.log(str.slice(1,5));
        console.log(str.slice(-6,-3));*/
//        console.log(str.split("i"));
//        alert(str.indexOf("i"));
//        alert(str.indexOf("H"));
//        alert(str.indexOf("i",2));
        console.log(str.toUpperCase());
        console.log(str.toLowerCase());
    </script>
</body>
</html>

数组

主要存放数据
.push往数组后面追加
.unshift往数组前面追加
.pop删除数组最后一位
shift删除数组的第0位

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>

</head>
<body>
    <script>
        /*
            数组 主要存放数据的
               arr.length
                   查看数组的个数
               arr[]
                   可以读可写
               arr.push
                    在后面添加 能同时添加多个值
               arr.unshift()
                   在前面添加  能同时添加多个值
               arr.pop()
                   删除数组的最后一个
               arr.shift()
                   删除数组的第一个
               arr.splice()
                   (0, 1) 从第0位开始删除第一个 返回删除的那个
                   (2, 3, 'a') 从第二位开始后面三位全部替换成 a
                   (2, 0, 'a') 第二位开始前面插入 a
               arr.sort()
                   顺序来排序
               arr.reverse()
                   倒序排序
               arr.join()
                   arr.join('a')  以`a`为界限拼接字符串
        */
        /*var arr = ["xiaopo",12,true];
//        alert(arr.length);
//        alert(arr[1]);//可读
        arr[1] = "haha";//可以写（修改）
        console.log(arr);
        console.log(arr.join("你好"));
        console.log(typeof arr.join());*/

         //以创建对象的形式 创建数组
        /*var arr = new Array();
        arr[0] = "nihao0";
        arr[1] = "nihao1";
        arr[2] = "nihao2";
        arr[3] = "nihao3";
        console.log(arr);*/

        /*var arr = [[1,2,3],4,6,[4,8,9]];
//        alert(arr.length);
        alert(arr[0][1]);*/

        /*var arr = ["花花","草草","树树","木木"];
        console.log(arr);
//        arr.push("风","雨");//往数组后面 追加
//        console.log(arr);
//        arr.unshift("雷","电");//往数组前面 追加
//        arr.pop();//删除数组最后一位
//        arr.shift();//删除数组的 第0位
//        arr.splice(3);//数组的长度为3    ****
//        arr.splice(1,2);//从下标1开始 删除2位  ****
        arr.splice(0,2,"风");//从下标0开始 删除2位 添加元素  ***
        console.log(arr);*/

        var arr = [1,6,8,2,-8];
//        arr.sort();//从小到大
//        arr.sort().reverse();//从大到小
//        console.log(arr);

        arr.sort(function (a,b) {
//            return a-b;//从小到大
//            return b-a;//从大到小
//            return 1;//倒叙
            return -1;
        });
        console.log(arr);

    </script>
</body>
</html>

时间对象

.getFullYear()
.getMonth()
.getDate()
.getHours()
.getMinutes()
.getSeconds()
.getDay()

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>

</head>
<body>
    <script>
        var data = new Date();
//        var strap = data*1;
//        var strap = data.getTime();
//        alert(strap);

        var year = data.getFullYear();//获取年份
        var month = data.getMonth()+1;//获取月份 取值为0~11之间的整数
        var date = data.getDate();//获取日数 取值为1~31之间的整数
        var hour = data.getHours();//获取小时数
        var min = data.getMinutes();//获取分钟数 取值为0~59之间的整数
        var sec = data.getSeconds();// 获取秒数 取值为0~59之间的整数
        var day = data.getDay();//获取周几 取值为0~6之间的整数
        document.body.innerHTML = year + "年"+ month + "月" + date + "日" + hour +"时"+ min +"分"+ sec+"秒" + "星期"+day;

    </script>
</body>
</html>

JSON

JSON:一种交互的格式，所有的语言基本上都有字符串，可以传递
js对象:是一种js数据类型，是js特有的，无法传递交互数据

JSON语法规则：
1.json数据格式的属性（键和字符串）的值都为双引号
2.值:整数、浮点数（小数）、字符串、布尔、数组、对象（除了undefined/NaN）

JSON用js定义：
通过字符串来定义
通过js对象来定义，最后传输的时候将对象转换为字符串

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>

</head>
<body>
    <script>
        /*
            JSON:轻量级的数据交互格式，它实际在传输的时候都是字符串
            ****JSON:一种交互的格式，所有的语言基本上都有字符串，可以传递
            js对象:是一种js数据类型，是js特有的，无法传递交互数据

            JSON语法规则：
             1.json数据格式的属性（键和字符串）的值都为双引号
             2.值:整数、浮点数（小数）、字符串、布尔、数组、对象（除了undefined/NaN）

             JSON用js定义：
             通过字符串来定义
                    var obj = '{"name": "xiaopo"}';
             通过js对象来定义，最后传输的时候将对象转换为字符串
                    var obj = {"name": "xiaopo"};
                    JSON.stringify(obj)
         */
       /* var obj1= {"name": "xiaopo","sex": "woman","age": "18"};
//        var obj2 = '{"name": "xiaopo","sex": "woman","age": "18"}';
        var obj2 = JSON.stringify(obj1);
        console.log(obj1);
        console.log(typeof obj1);
        console.log(obj2);
        console.log(typeof obj2);*/

         /*JSON字符串解析js对象*/
         var obj1 = '{"name": "xiaopo","sex": "woman","age": "18"}';
         var obj2 = JSON.parse(obj1);
         console.log(obj1);
        console.log(typeof obj1);
        console.log(obj2);
        console.log(typeof obj2);
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>

</head>
<body>
    <script>
        var obj = {"name": "xiaopo","sex": "woman","age": "18"};
        /*console.log(obj);
        console.log(obj.name);
        console.log(obj.length);//undefined*/
        for(var key in obj){
            console.log(key,obj[key]);
        }//key是{}里的属性名称，obj[key] {}里面属性的值
    </script>
</body>
</html>

定时器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>

</head>
<body>
    <script>
       /* function fn() {
            console.log(1);
        }
//        fn();
//        setTimeout(fn,2000);//延迟定时器 2000毫秒后执行一次且只执行一次
        setInterval(fn,2000);//隔2000毫秒一直不停地 在执行*/

       setInterval(function () {
           console.log(2);
       },13);
//       setInterval(函数，时间)

        var x = str.split("value")
        arr.join()
    </script>
</body>
</html>

清除定时器：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        div{
            width: 300px;
            height: 200px;
            line-height: 200px;
            text-align: center;
            border: 1px solid red;
            margin: 50px auto;
            font-size: 13px;
        }
        span{
            color: red;
            font-size: 20px;
            font-weight: bold;
        }
    </style>

</head>
<body>
    <div id="box">
        <p>
            404,此页面找不到，页面将在<span id="timer">4s</span>后跳转到百度首页
        </p>
    </div>
    <script>
        var timer = document.getElementById("timer");
        var num = 4;
        var time;
        time = setInterval(function () {
            num --;
            timer.innerHTML = num + "s";
            if(num === 1){
                clearInterval(time);
                window.location.href = "http://www.baidu.com";
            }
//            console.log(num);
        },1000)
    </script>
</body>
</html>

去期待陌生，去拥抱惊喜。

初识​​JavaScript​​

​​js​​代码写在哪里

写​​js​​代码需要注意什么

注释

​​js​​里的系统弹窗代码

​​js​​里的打印

​​js​​获取元素及修改内容

事件