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;
  }