由於疫情的关系
大家已在家学习一个月
原本想说最要克服的是自制力
但没想到事情多到
我也没时间发闲～～～

本周分领域学习：
Web-JavaScript

js笔记

引入：行内引入,内部引入,外部引入,动态引入

• JS引入

  • 行内引入→body: onload="alert('String要引号')">

  • 内部引入→window.alert('内部引入')

  • 外部引入→

  • 动态引入

    • 动态引入１→document.write('</script>');

    • 动态引入２

      <script>
          const elemHead = document.getElementsByTagName('head')[0];
          const elemScript = document.createElement('script');
          elemScript.src = './js/dynamic.js';
          elemHead.appendChild(elemScript);
        </script>
      

• DOM(document Object Model)

  • 选取

    • document.getElemenByID('idname')
    • querySelector('#idname')→缺点是如果今天抓的是有多个的class，只会抓取第一个
    • querySelectorAll(.classname)

  • 操作

    • 改变文字：textContent→document.querySelector('#id').textContent='Fanny';

    • 加入HTML：innerHTML→document.querySelector('#id').innerHTML='test';→资安疑虑，如果有放入表单输入资料，容易被攻击

    • 更改影像：src→document.querySelector('#pic').src='./img/'

    • 加入CSS：style→document.querySelector('#id').style.borderLeft='solid 2px red';

      ：document.querySelector('#pic').setAttribute('src','./img....');
      

      ：document.querySelector('#pic').setAttribute('style','border: solid..');

    • 套用格式：className→document.querySelector('#').className+=' .敲一个空格';

    • 较直观的套用格式：classList→document.querySelector('#').classList.add(' classname', 'gg'); 注意：名字就好

• event

  • click

    • document.querySelector('#id').addEventListener('click',function(){alert(''Hi)});
    • 箭头函式：document.querySelector('#id').addEvenListener('click',()⇒{});

  • mouse

    • document.querySelector('#id').addEventListener('mouseenter',function(){document.querySelector('#id').src='./img...'}); 红色部分可改this
    • document.querySelector('#id').addEventListener('mouseleave',function(){document.querySelector('#id').src='./img...'});
    • 用this不能用箭头函式，this会是window,而window他没有src属性

  • keyup

    • document.querySelector('#id').addEventListener('keyup',function(e){if(e.keycode===13){alert(this.value)}} ); this是整个表单
    • alert出来是字串！

  • 额外补充：→抓表单值抓value

  • change

    • document.querySelector('#id').addEventListener('change',function(){alert('this.value')});

  • 事件流Propagation：boxin,boxout

    • js预设冒泡→从点选对象往上层

    • 捕获→

      document.querySelector('#boxin').addEventListener('click',function()
      {console.log(this.id);
      e.stopPropagation;
      });
      

• number

  • 累加→设定button被监听到click时做++
  • 乱数→const RandNum=Math.random();
    • 10倍乱→document.querySelector('#id').textContent=RandNum*10;
    • 10倍四舍五入→document.querySelector('#id').textContent=Math.round(RandNum*10);
    • 无条件舍去→document.querySelector('#id').textContent=Math.floor(RandNum*10);
    • 无条件进位→document.querySelector('#id').textContent=Math.ceil(RandNum*10);

• String

  • const str='list';

    const str=''+'list'+<'/ul'>;

    const str='<li>list</ul>';

    const str=<ul><li>list</li></ul>

    document.querySelector('#list').innerHTML=str;

  • const age=20;

    const str=我今天${age}岁;→IE11以下不支援

• 变数型态：boolean, undefined, null

  • boolean→const isMobile=window.innerWidth≤480;

    console.log(isMobile);

  • undefined→宣告却未赋

  • null→指向空

• array&object

  • let arr=new Array();

    arr=[1,2,3,4,'book'];

  • const arr=new Array(5, 6, 7, 'hi');

  • let arr=[];

    arr=[2, 4, 5, 'go'];

  • const arr=[1, 3, 5, 'now'];

  • 物件阵列

    • const obj=new Object();

      obj.name='Fanny';

    • const obj={};

      obj.age=30;

    • const obj={

      name:'Fanny',

      age=30

      };

    • 取物件长度：

      object.keys(obj).length

• function-for/if-else

  可以独立取出来

• interval&timeout

  • 定时器interval

    let count=0;
    setInterval(function(){...},1000);//毫秒
    

  • 暂停器timeout

    let count=0;
    setTimeout(function(){...},2000);//2秒後暂停