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

本週分领域学习：
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...'}); 红色部分可改thisdocument.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秒后暂停