Day 27 (Js)

1.变数不影响他人的方式(合作时要用)

(1)把自己的计划包起来，变数执行完之后就捨弃
IIFE = Immediately Invoked Function Expression

      (function () {        //var showMsg_v3 = 删除        console.log("狗沟~~~~");      })();

(2)或是把自己的计划打包起来，包在function里面(设计闭包)

        function boss(){           // 让function拥有自己的变数            var hp = 100;            function hit(){                // 若有 "其他" function还会使用                // 变数不会消失 可以持续-1                hp = hp - 1;                console.log(`boss hp: ${hp}`);  //boss hp: 99            }              return hit;                             }        var game = boss();        game(); //99        game(); //98

2.() 是去执行

checkLength()

3.this代表什么值，取决于你在哪里使用它

(1)会把this跟butten包起来一起送出去 成为butten

    <button onclick="btnClick(this)">测试</button>      function btnClick(bunny) {        console.log(bunny);       }

(2)this单独存在就是window

      console.log(this); // window 物件      console.log(window === this); //true

(3)this在物件里是物件

        var s1 = {        html: 100,        css: 90,        getTotal: function () {          //不能改成=>函式，this 已经是另一个世界(window)不适用正常code          return this.html + this.css; //this 没有this会变成抓变数        },      };      var temp = s1.getTotal(); //190      console.log(temp);

(4)function内的function

    var num = 123456789;        function test2() {            var num = 10;            function showNum() {   //只是宣告                console.log(`20. A. num ==> ${this.num}`); //123456789 冲出去找= =?                console.log(`20. B. num ==> ${num}`); //10 抓最近的            }            showNum(); //执行        }        test2();

5.物件里面的属性 this

       function Student(sname, sage) {        // Student = {x:y}        this.StudentName = sname; //this S = x        this.StudentAge = sage; //this S = y        this.cat = function () {          console.log("喵");          console.log(this.StudentName); //物件里面的属性 this        };      }      var s2 = new Student("No2", 90); //new O      console.log(s2.StudentName); // cat      s2.cat(); //"喵"      console.log("\n\n");

更新:Jq

6.在 ＜h3＞，$("").each(function (index(第几个?), element(是谁?))
element(变数;是内容) == this

先自己做物件

          <h3>apple</h3>          <h3>bee</h3>          <h3 id="cat_1">cat</h3>

拿取
element(变数;是元素) == this

        $("h3").each(function (index, element) {          //<h3>apple</h3> <h3>bee</h3> <h3>cat</h3>=console.log(this);          console.log(element);          console.log(element == this);  //true          // 4 种  // apple bee cat          console.log($(element).text());          console.log($(this).text());          console.log(element.innerText);          console.log(this.innerText);          // 将所有 h3 元素的文字改为斜体          $(this).html(`<i>${$(this).text()}</i>`);        });

         $('#bagTop>img').on('click', function () {         console.log(this) //<img id="kutar" src="../_img/kutar3.png" />         $(this).hide(); // => display:none         })

7.在[]，$.each(list, function (index, item)内
this = string

给变数，套用Jq function

        var list = ["dog", "egg"];        // indexInArray: number, valueOfElement: T        $.each(list, function (index, item) {          console.log("--开始--");          console.log(index); // 0 1 (第几个)          console.log(item); // dog egg(谁?)          console.log(this); //string          console.log("--结束--");        });

4.执行function的方式

(1) addEventListener click

        document.getElementById("btnLogin").("click", checkLength);        //等同        btnLogin.addEventListener("click", checkLength);

(2) onclick=

  <button onclick="checkLength();checkNumber();" id="btnLogin">登入</button>

(3)

      btnLogin.onclick = checkLength;      btnLogin.onclick = checkNumber; //会后盖前      解法:         btnLogin.onclick = function(){               checkLength();               checkNumber();           }

(4) .on("click", function (){}) (点击，事件监听)

        $("#btnZoomin").on("click", function () {          $("p").css("font-size", "30px");        });

5.找event

    <input onkeypress="checkInput(event)" type="text" />      function checkInput(e) {        //event        demo.innerText = e; //[object KeyboardEvent]        console.log(e); //这是啥? 可以看看[object KeyboardEvent]内的东西 有很多        // 那我只印出这些来看看就好       demo.innerText = `charCode:${e.charCode}            code: ${e.code}            key: ${e.key}            keyCode: ${e.keyCode}            `;

6. 注意型别

parseInt
+变数
都可以强制转型变数为数字

7. this va event

this 抓本身元素

    <button class="moneyBtn" id="USD" onclick="changeMoney(this)">美金</button>        function changeMoney(ele) {       // 1. html btn 抓本身元素 id        console.log(ele.id);    }

event 绑事件 + target

 <button class="moneyBtn" id="TRY" onclick="testEvent(event)">里拉</button>       function testEvent(e){      console.log(e.target.innerText);      }

8. for迴圈可放多个变数

function showbottomTop() {    // for 可使用数个变数    // 中间判断迴圈几次    for (let i = 0, j = 0; i < 6; i += 2, j++) {       datString += `          <tr>          <td>风向 ${bottomResult(13)[4 + i]}</td>          <td>风向 ${bottomResult(13)[5 + i]}</td>        </tr>        <tr>          <td colspan="2">紫外线 ${bottomResult(9)[0 + j]}</td>        </tr>        `;    }    dayTableTop.innerHTML = datString;  }