看菜鸟教程学js

阳光穿透心脏的1/2处 2022-09-09 06:57 234阅读 0赞

数组  
var cars=new Array();  
cars\[0\]=“Saab”;  
cars\[1\]=“Volvo”;  
cars\[2\]=“BMW”;

var cars=new Array(“Saab”,“Volvo”,“BMW”);

数组下标是基于零的，所以第一个项目是 \[0\]，第二个是 \[1\]，以此类推。

![在这里插入图片描述][189a188d4a1747e9b36007f58b348c35.png]JavaScript 对象

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl1bGFuZzY4_size_20_color_FFFFFF_t_70_g_se_x_16]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl1bGFuZzY4_size_20_color_FFFFFF_t_70_g_se_x_16 1]  
对象属性有两种寻址方式：  
name=person.lastname;  
name=person\[“lastname”\];

![在这里插入图片描述][aa427ae382b34e66940d7702c3c8c96c.png]  
![在这里插入图片描述][46517fe84d2a4d00965db338f5bfd29a.png]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl1bGFuZzY4_size_20_color_FFFFFF_t_70_g_se_x_16 2]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl1bGFuZzY4_size_20_color_FFFFFF_t_70_g_se_x_16 3]

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl1bGFuZzY4_size_20_color_FFFFFF_t_70_g_se_x_16 4]  
JavaScript 变量均为对象。当您声明一个变量时，就创建了一个新的对象。  
除了基本的数据类型剩下的就是对象了。

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl1bGFuZzY4_size_20_color_FFFFFF_t_70_g_se_x_16 5]

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl1bGFuZzY4_size_18_color_FFFFFF_t_70_g_se_x_16]![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl1bGFuZzY4_size_17_color_FFFFFF_t_70_g_se_x_16]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl1bGFuZzY4_size_20_color_FFFFFF_t_70_g_se_x_16 6]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl1bGFuZzY4_size_20_color_FFFFFF_t_70_g_se_x_16 7]

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl1bGFuZzY4_size_20_color_FFFFFF_t_70_g_se_x_16 8]

var a = {name:"percy"};
    var b;
    b = a;
    a.name = "zyj";
    console.log(b.name);    // zyj
    b.age = 22;
    console.log(a.age);     // 22
    var c = {
      name: "zyj",
      age: 22
    };

看代码就可以看到。

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl1bGFuZzY4_size_20_color_FFFFFF_t_70_g_se_x_16 9]不加括号就是问这个里面装的是什么，加了括号以后就是调用这个方法。

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl1bGFuZzY4_size_20_color_FFFFFF_t_70_g_se_x_16 10]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl1bGFuZzY4_size_18_color_FFFFFF_t_70_g_se_x_16 1]  
通过new Object来创建对象。

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl1bGFuZzY4_size_20_color_FFFFFF_t_70_g_se_x_16 11]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl1bGFuZzY4_size_20_color_FFFFFF_t_70_g_se_x_16 12]  
return相当于人家给你准备了这个东西，但是你需要去拿才可以拿到。

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl1bGFuZzY4_size_20_color_FFFFFF_t_70_g_se_x_16 13]

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8" />
        <title>菜鸟教程(runoob.com)</title>
      </head>
      <body>
        <button onclick="demo()">点我</button>
        <script>
          function demo() {
            alert("大叫三声我是傻逼");
          }
        </script>
      </body>
    </html>

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl1bGFuZzY4_size_20_color_FFFFFF_t_70_g_se_x_16 14]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl1bGFuZzY4_size_20_color_FFFFFF_t_70_g_se_x_16 15]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl1bGFuZzY4_size_20_color_FFFFFF_t_70_g_se_x_16 16]

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8" />
        <title>菜鸟教程(runoob.com)</title>
      </head>
      <body>
        <button id="1" onclick="demo()">点我</button>
        <script>
          function demo(a, b) {
            return a * b;
          }
          document.getElementById("1").innerHTML = demo(3, 4);
        </script>
      </body>
    </html>

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl1bGFuZzY4_size_20_color_FFFFFF_t_70_g_se_x_16 17]  
https://www.runoob.com/js/js-functions.html

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl1bGFuZzY4_size_20_color_FFFFFF_t_70_g_se_x_16 18]前端中id、name、value的区别  
https://blog.csdn.net/wem603947175/article/details/83004364?ops\_request\_misc=%257B%2522request%255Fid%2522%253A%2522163037944916780265444957%2522%252C%2522scm%2522%253A%252220140713.130102334…%2522%257D&request\_id=163037944916780265444957&biz\_id=0&utm\_medium=distribute.pc\_search\_result.none-task-blog-2allsobaiduend~default-1-83004364.first\_rank\_v2\_pc\_rank\_v29&utm\_term=id%2Cname%2Cvalue&spm=1018.2226.3001.4187

<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>做一个计算器</title>
        <style>
          td {
            width: 100px;
          }
        </style>
        <script>
          function add() {
            var firstnumber = Number(document.getElementById("first").value);
            var secondnumber = Number(document.getElementById("twice").value);
            // console.log(typeof firstnumber);
            console.log(firstnumber);
            console.log(secondnumber);
            console.log(firstnumber + secondnumber);
            document.getElementById("result").innerHTML =
              firstnumber + secondnumber;
          }
        </script>
      </head>
      <body>
        <table border="1" style="position: center">
          <tr>
            <td>第一个数</td>
            <td><input type="text" id="first" /></td>
          </tr>
          <tr>
            <td>第二个数</td>
            <td><input type="text" id="twice" /></td>
          </tr>
          <tr>
            <td></td>
            <td>
              <button onclick="add()">+</button> <button onclick="jian()">
                -</button
              > <button onclick="cheng()">*</button> <button
                onclick="chu()"
              >
                /</button
              > 
            </td>
          </tr>
          <tr>
            <td>结果</td>
            <td id="result"></td>
          </tr>
        </table>
      </body>
    </html>

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl1bGFuZzY4_size_20_color_FFFFFF_t_70_g_se_x_16 19]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl1bGFuZzY4_size_20_color_FFFFFF_t_70_g_se_x_16 20]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl1bGFuZzY4_size_20_color_FFFFFF_t_70_g_se_x_16 21]

<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <script>
          var checkAll = false;
          console.log(checkAll); //false
          function allcheck() {
            checkAll = !checkAll; //true    变为true以后checkAll本身就为true了
            console.log(checkAll);
            let inputs = document.getElementsByName("checkbox");
            for (var i = 0; i < inputs.length; i++) {
              inputs[i].checked = checkAll;
            }
          }
        </script>
      </head>
      <body>
        看书：<input type="checkbox" name="checkbox" value="1" /><br />
        写字：<input type="checkbox" name="checkbox" value="2" /><br />
        打飞机：<input type="checkbox" name="checkbox" value="3" /><br />
        玩游戏：<input type="checkbox" name="checkbox" value="4" /><br />
        <button onclick="allcheck()">全选/取消</button>
      </body>
    </html>

[189a188d4a1747e9b36007f58b348c35.png]: /images/20220829/85691f3e43ae4b56952535e49663bd75.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl1bGFuZzY4_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/e25739188ae44b868f58ec90b6a8087c.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl1bGFuZzY4_size_20_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220829/ea6e399ad90f473fbfd62914033ac867.png
[aa427ae382b34e66940d7702c3c8c96c.png]: /images/20220829/10cc754051454acea6f7aa4edab63e0e.png
[46517fe84d2a4d00965db338f5bfd29a.png]: /images/20220829/bc9b0748b0da450ca419b611f90cf297.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl1bGFuZzY4_size_20_color_FFFFFF_t_70_g_se_x_16 2]: /images/20220829/dc3190f4177f444bab2761a3eadcbf89.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl1bGFuZzY4_size_20_color_FFFFFF_t_70_g_se_x_16 3]: /images/20220829/7671ae4fb3a84f32948ed70c97f737ff.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl1bGFuZzY4_size_20_color_FFFFFF_t_70_g_se_x_16 4]: /images/20220829/944ada54024c40eeb59b761f563627d3.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl1bGFuZzY4_size_20_color_FFFFFF_t_70_g_se_x_16 5]: /images/20220829/469163e161ec492c878cedfcb1f3f0b8.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl1bGFuZzY4_size_18_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/6e878424ca584aaa9b52904303dbc613.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAbGl1bGFuZzY4,size_18,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl1bGFuZzY4_size_17_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/54a38564bb0b43a885647fe8fdf98a37.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl1bGFuZzY4_size_20_color_FFFFFF_t_70_g_se_x_16 6]: /images/20220829/720ce99318ab438ca8726e4e04d78b99.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl1bGFuZzY4_size_20_color_FFFFFF_t_70_g_se_x_16 7]: /images/20220829/e049644c811a4fe78d8b521d2849035f.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl1bGFuZzY4_size_20_color_FFFFFF_t_70_g_se_x_16 8]: /images/20220829/546f3523728a4965be1ff4e52cc3ab31.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl1bGFuZzY4_size_20_color_FFFFFF_t_70_g_se_x_16 9]: /images/20220829/65cd263be5dc4dcaa76d345efde4eed4.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl1bGFuZzY4_size_20_color_FFFFFF_t_70_g_se_x_16 10]: /images/20220829/19f4458551c8470998d540934ff85cc7.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl1bGFuZzY4_size_18_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220829/c2d89346c5694994b00770910abc3cac.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl1bGFuZzY4_size_20_color_FFFFFF_t_70_g_se_x_16 11]: /images/20220829/ebd4d694cd4e4d37aa273f56448ae3db.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl1bGFuZzY4_size_20_color_FFFFFF_t_70_g_se_x_16 12]: /images/20220829/c40973997b7f40288bf44dc0c9f0ac69.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl1bGFuZzY4_size_20_color_FFFFFF_t_70_g_se_x_16 13]: /images/20220829/2c7b8e593434470b903c9ffd8c2cd1d3.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl1bGFuZzY4_size_20_color_FFFFFF_t_70_g_se_x_16 14]: /images/20220829/0e15f96db5b542d79a377bf918c58ae7.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl1bGFuZzY4_size_20_color_FFFFFF_t_70_g_se_x_16 15]: /images/20220829/a787ee0f1efc43528731226a54e63c16.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl1bGFuZzY4_size_20_color_FFFFFF_t_70_g_se_x_16 16]: /images/20220829/3a7a6e1b432049158bec6c47c617e36b.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl1bGFuZzY4_size_20_color_FFFFFF_t_70_g_se_x_16 17]: /images/20220829/d7bb0c22f61540a499083bf589790a9d.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl1bGFuZzY4_size_20_color_FFFFFF_t_70_g_se_x_16 18]: /images/20220829/b1e069c3a64245d1b64e21afaecd98c2.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl1bGFuZzY4_size_20_color_FFFFFF_t_70_g_se_x_16 19]: /images/20220829/d9616610b3784183915b44955e4cf3bc.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl1bGFuZzY4_size_20_color_FFFFFF_t_70_g_se_x_16 20]: /images/20220829/46d645e56fbf4b04968efc0ed2a11a0f.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl1bGFuZzY4_size_20_color_FFFFFF_t_70_g_se_x_16 21]: /images/20220829/e60744eb004c4dc1a4b4cef330c43865.png