forked from ccccourse1/wp109b
-
Notifications
You must be signed in to change notification settings - Fork 0
QA.md
魏仲彥 edited this page Oct 8, 2021
·
31 revisions
Q : 可以用書籤做案按鈕變換內容嗎?
A : 可以，使用5/28教的hash
Q : requestAnimationFrame(call back)
A : 就是遞迴函式
Q : 為甚麼要寫兩個requestAnimationFrame
A : 第一個是先執行
Q : document.addEventListener("keydown",function(e){}) e是甚麼意思
A : mouse event，callback函數
Q : pingpong裡面球的 ? 和 :是什麼意思
A : 就是if...else...(?...:...)的意思
EX :
var x = 3, y = 5
function max(a, b){
return a>b ? a : b
}
console.log(x, y)//這個會印出5，因為a>b才會印出aQ :
function getMousePos(canvas, evt) {
var rect = canvas.getBoundingClientRect();//方法返回元素的大小及其相對於窗口的位置
return {
x: evt.clientX - rect.left,
y: evt.clientY - rect.top
};
}裡面的evt到底是幹嘛的?x, y為什麼沒有變數類型?
A :
Q : $代表甚麼
A : 可以代表任何一個東西，可以是變數，可以是函式，這裡代表JQuery
Q : append()//動態和一般的差在哪
A : 這個是可以不把<canvas>或是其他的物件寫在html裡面，直接利用JS去觸發。效能高一些
Q : ${i}是什麼意思?(App - blog)
A : 這是會把${裡面的東西執行後再變成字串}
Q : 裡面的router後面的函數為甚麼不用加()?
A : 因為他只是對應的格式，要對應後面的 for (let [regexp, f] of routeMap)真正觸發函式的是在後面，下面會解說
Q : window.onhashchange的funtion裡for的regexp
A : 函式長這樣
window.onhashchange = function () {
var hash = window.location.hash.trim().substring(1)//把hash標籤的空白去掉再從第2個字開始取
for (let [regexp, f] of routeMap) { //比對標籤，如果一樣就觸發那個函式
//這裡的routeMap格式就跟[regexp, f] 一樣，前面是放正規表達式
var m = hash.match(regexp) //match是專門用來和正規表達式作搭配的，後面會介紹正規表達式
if (m) {
f(m, hash)//處發函式m/*hash.match(regexp)*/
break
}
}
}Q : section的功能和div的功能
A : div可以表達所有那些section，aside，article，footer，nav，header...
不使用div就只是讓爬文的人比較難找文章內容，整體來說沒什麼差。
不過當初設計這些的目的就是讓爬蟲和搜尋引擎比較好找主文阿，標題之類的https://www.w3schools.com/html/html_layout.asp
Q : JSON是代表什麼?
A : 跟document和window都是物件，這個是用來轉物件變字串，字串變物件
Q : app-sci裡面的src.js的init()解說 & console.log.apply
A :
argument是一個關鍵字，代表目前函式所有參數的陣列(偽)
apply(f, [arg1,arg2])
call(f, 1,2)
function init() {
console.defaultLog = console.log.bind(console);//把console.log攔截，放到console.defaultLog
console.logs = [];
console.log = function(){
// default & console.log()
console.defaultLog.apply(console, arguments);//第一個console是物件會被指定為目標函式中的 this，因為是console.log.bind(console)，所以this是console，argument指定代表console.defaultLog的值
// new & array data
// console.logs.push(Array.from(arguments));//放到console.logs矩陣裡面
console.logs.push(Array.from(arguments).join(''));//把陣列(偽)轉成陣列(真)，陣列(真)才可以用join的功能(變成字串)。
}
}A : <br>
lang 是代表預設語言 <br>
charset="utf-8" , 沒寫的話有些瀏覽器會以為是別種編碼，例如 ISO8859-1，於是就會顯示錯誤，變成亂碼！ <br>
iframe 是網頁裡的一個嵌入視窗，可以嵌入顯示另一頁的內容。 <br>Q : keycode好像被淘汰了，有甚麼可以取代的??
A : https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code
把event.keycod(用數字決定按鍵)改成event.code(用Key?決定按鍵)Q : 如何控制window.requestAnimationFrame(loop, canvas);的速度??
A : 設callback變數
EX :
var fps, fpsInterval, startTime, timestamp = Date.now(), preTimestamp, progress;
function startAnimating(fps) {
fpsInterval = 1000 / fps;
preTimestamp = Date.now();
startTime = preTimestamp;
}
function MainGame(){
startAnimating(12);//設置fps
var loop = function(){
timestamp = Date.now();//調整速率
progress = timestamp - preTimestamp;
if (progress > fpsInterval)
{
//遊戲內容
}
window.requestAnimationFrame(loop, canvas);
}
window.requestAnimationFrame(loop, canvas);
}Q : 為什麼有些變數類型要用const?
A : JS最常用的3種變數類型var(可以後宣告先使用), let(宣告後使用)
const(宣告後如果是數值就會固定，如果是宣告矩陣或class，可以改裡面的值，但不可以改型態)
Q : 11.app的tex裡面的var lines = texArea.value.trim().split('\n')是幹嘛的
A : trim()代表把texArea.value裡的空白去除，而split('\n')是把裡面的每個字加入矩陣，再用\n分開
Q : element.style {}是幹嘛的
A : 指的是現在選取的網頁區域style值，可以勾選看要不要啟用
Q : =>箭頭函式是什麼
A : 箭頭基本上是函式的縮寫
EX : f1 = function(n){retrun n+3} 可以用箭頭寫成 f2 = (n) = >n+3
Q : https://developer.mozilla.org/zh-TW/docs/Web/API/window/requestAnimationFrame 裡面函式的timeStep為甚麼不用宣告?
A : window.requestAnimationFrame()他會把裡面的值傳回一個參數，所以會帶入timeStep
Q : 可不可以直接創造節點，再直接把他刪掉，用按鈕或滑鼠..
可以參考
https://developer.mozilla.org/en-US/docs/Web/API/Node/removeChild
https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement
http://tcatche.site/2018/03/dom_native_elements_and_node_modify/#document-createElement (難!)
A :
function createNew(){
//使用createElement創造節點
var newDiv = document.createElement('div');
//使用createTextNode可以輸入文字，可加可不加
var newContent = document.createTextNode("hellow world");
//使用appendChild把文字放入新建div裡面
newDiv.appendChild(newContent);
//把新建div加上class
newDiv.className = "target"
//指定在某個元素前面顯示新建div
const currentDiv = document.getElementById("div1");
document.getElementById("main").insertBefore(newDiv, currentDiv); //newDiv插在currentDiv(id為div1)的前面，指定範圍在main裡面
}
//刪掉parent 裡面的child(只能指定範圍內的第一個和最後一個)
function deletNew(){
//把要刪掉的主體的parent叫出來
let Main = document.getElementById("main");
//如果parent有child就刪掉第一個child
if (Main.firstChild) {
Main.removeChild(Main.firstChild);
}
}
//刪掉選定的那個
function Delete(){
let Main = document.querySelectorAll("#paintBoard img")[0]
if (Main) {
Main.parentNode.removeChild(Main);
}
}Q : 我的伺服器為甚麼連不到?
A : 可能是電腦問題，用deno沒辦法，但用node.js可以!!
步驟如下:
用node.js設伺服器
npm install live-server//安裝live-server(wrong)
npm install -g live-server //安裝live-server到本機(correct)
live-server 建立伺服器
如果不行，就用系統管理員身分執行下面指令
Set-ExecutionPolicy RemoteSigned
再次打live-server
A : 正規表達式以/做開頭/作結尾，通常搭配match()作使用，以下例子順便講功能:
EX(拿老師補充講解作例子)(開發人員工具) :
> var re1 = / [0-9]+/g // g 代表全域(全部)比對(對於列表，只比對[0])， [0-9]+ 代表有0~9，出現(1次以上)就顯示他
undefined
> var m= "ccc age:51 tel: 082-11111 email: xxx"
undefined
> var s = "ccc age:51 tel: 082-11111 email: xxx"
undefined
> s.match(re1)
(3) ["51", "082", "11111") //結果只出現0~9的數字
> var s2 = "51 ccc hello 77 snoopy"
undefined
> s2
"51 ccc hello 77 snoopy"
>s2.match(re1)
(2)["51","77")
> s2.match(/^[0-9]+/) // ^ 代表只比對字串開頭的字，遇到空格就停止比對
["51", index: 0, input: "51 ccc hello 77 snoopy", groups: undefined]
> s2.match(/^[0-9]+/g) // 比對全部
["51"]
>s2.match(/[a-z]+$/) // $ 代表只比對字串結尾的字
["snoopy", index: 16, input: "51 cec hello 77 snoopy", groups: undefined]
> s2.match(/[a-z]+$/g)
["snoopy"]
>s2.match(/[0-9]?/) // ?代表比對0次或1次，不是比對全域，比對到了就停
["5", index: 0, input: "51 ccc hello 77 snoopy", groups: undefined]
s2.match(/[a-z]?/) // ?代表比對0次或1次，不是比對全域，比對到了就停
["", index: 0, input: "51 ccc hello 77 snoopy", groups: undefined]
>s2.match(/[0-9]?/g) // ?代表比對0次或1次，全部慢慢比對
(23) ["5", "1", "", "", "", "", "", "", "", "", "", "", "", "7", "7", "", "", "", "", "", "", "", ""]
如果要在/裡面加上一個/，就要用\/表示/
?大多是用在那個東西在和不在都不影響程式的情況(EX: hash裡面的標籤/show或show都可以顯示，就可以這樣比對/\/?show/)
(.*) 可以表達任何字串(.是指所有字元 *是指多個)
\d 比對數字([0-9]) /w 比對字母
\s 比對空格字元 \s* 比對多個空格
. --> 所有字元
+ --> 比對一次以上
* --> 比對零次以上
? --> 比對零次和一次
{x, y} --> 比對x~y次
\符號 --> 如果符號有特殊涵意，可以用\取消他的特殊涵義，讓他變成可以比對的符號(\.)
正規表達式.exec(html) : 抓出裡面的的東西，傳回矩陣 [0] --> 全部，
[1] --> 第一個誇號裡的東西