JavaScript HTML DOM 網頁畫面操作演練 - Front End 網頁前端工程教學

[@chiang_tzu_hsien]

實際操作幫助我好大！真的謝謝彭彭老師提供教學，幫助我這種需要講原理邏輯我才能理解的駑鈍學生‼️‼️‼️謝謝老師‼️‼️‼️

[@cwpeng-course]

讚讚！謝謝你的回饋，很棒 :)

[@Yi-JouHuang-e4n]

看影片過程中可以複習邊回想先前學到的內容真的很棒 ，看來我可以停一下回去複習啦 XD

[@cwpeng-course]

哈哈哈，有適合的學習方式很棒 :)

[@AK-di6xs]

超級感謝彭彭 上彭彭老師的課真的超好玩又學的多~~

[@cwpeng-course]

謝謝你每一部影片都認真回饋 :)

[@hsingchu7109]

請問一下老師 影片中 21:21處 HTML button tag 裡面,，我把function 命名為 click， Click ，javascript function 加入 document.body.innnerHTML="Click Tryout" 後在頁面點擊button沒有反應，但把function 換個名字就有辦法運作了，同樣的命名switch也不能，請問這是什麼原因呢？

[@cwpeng-course]

某些關鍵字被 JavaScript 程式保留，不給開發者使用，所以就換個名字就好。

[@cunningshark]

老师您好，在本节课中，我使用vscode输入下面的代码： html dom 画面操作 练习网页画面的操作 点我 doc function change(){ let elem=document.querySelector("#content"); //用querySelecctor("# xxxxx")选择id为xxxxx的元素 elem.style.fontSize="30px"; //此时，vscode 输入elem.styl以后，不会出现自动补全elem.style, elem.className="text"; //但是，如果第一步用document.getElementById("xxxxx")，下面 //elem.style就可以自动补全，这是为什么呢？ //谢谢彭彭老师解答！！！ }

[@cunningshark]

搞清楚了！ you can use JSDoc type annotations: /** @type {HTMLElement} */

[@cwpeng-course]

讚讚！

[@nnnnchjn4716]

老師請問一下 我自己練習時 我是做一個點擊不同按鈕就跳出不同照片的code 但是我用querySelector時好像跑不出來 我丟給chatgpt 他說用getElementById 想問老師這兩個語法的差別

[@cwpeng-course]

都可以，跑不出來要看細節的問題是什麼 ~

[@胖狐狸-b2x]

老師好， 我點擊學經歷會執行整個div， 我在console裡會出現 exps about 導致學經歷被覆蓋過去， 我如果將 關於我 學經歷 改成 關於我 學經歷 便能成功進行切換， 請問老師為什麼我點擊學經歷會被認為是點擊整個div區塊， 而不是像老師影片中可以自由切換。 謝謝 ----------------------------分隔線--------------------------------------- JavaScript:HTML DOM 網頁畫面操作 關於我 學經歷 大家好，我是彥成 經濟系畢業,轉職當軟體工程師 function changeToAbout(){ let aboutDiv=document.querySelector("#about"); let expsDiv=document.querySelector("#exps"); aboutDiv.style.display="block"; expsDiv.style.display="none"; console.log("about") } function changeToExps(){ // 要先取得要操作的標籤 let aboutDiv=document.querySelector("#about"); let expsDiv=document.querySelector("#exps"); // 在對標籤做操作 aboutDiv.style.display="none"; expsDiv.style.display="block"; console.log("exps") }

[@胖狐狸-b2x]

我找到解決方法了， 有遇到和我一樣問題的同學可以看一下， 【關於我】及【學經歷】中開頭與結尾的span標籤被認為是同一個， 才會導致同一區塊的問題， 我猜應該是在建置span標籤時不小心按到上下左右或甚麼鍵。

[@cwpeng-course]

讚讚，有自己解決很棒，也謝謝你的分享 :)

[@Birdy235]

很棒很詳細的內容!

[@cwpeng-course]

謝謝回饋 :)

[@apa4336]

請教一下，我明明有打放大 對特定的標籤做操作30PX 請問老師，為什麼我的VScode，網頁呈現食，字體沒有放大 ，我字體顏色有改變，但是字體 對特定的標籤做操作 沒有放大，這是什麼原因? 我VS的版本是1.70 以下是我程式碼，感謝 javascript：HTML DOM 網頁畫面操作 .text{text-decoration: underline;font-weight: bold} HTML DOM 網頁畫面操作 練習網頁畫面的操作 點我 function change(){ // 取得標籤物件 let elem=document.querySelector("#content"); // 操作標籤物件 elem.innerHTML="對特定的標籤做操作"; elem.className="text"; elem.style.fontSize="30px;"; //font-size:30px elem.style.color="red"; }

[@apa4336]

我elem.style.fontSize="30px;"; 多一個; 所以錯了。

[@cwpeng-course]

有解決就好 :)

[@shing-b9o]

let elem=document.querySelector("#content");後面的部分我要反覆觀看很多次才能懂,請問是正常的嗎...

[@cwpeng-course]

沒有所謂正不正常哦，每個人都不一樣，最後有學到就可以了 ~

[@beggar_consultant]

不知道為什麼顯示Uncaught ReferenceError: style is not defined，檢查了好多次，老師可以幫我看一下嗎 Javascript 關於我 學經歷 大家好 沒有工作 function changeToAbout(){ let aboutDiv=document.querySelector("#about"); let expsDiv=document.querySelector("#exps"); aboutDiv.style.display="block"; expsDiv,style.display="none"; } function changeToExps(){ let aboutDiv=document.querySelector("#about"); let expsDiv=document.querySelector("#exps"); aboutDiv.style.display="none"; expsDiv,style.display="block"; }

[@jessmi2]

expsDiv,style.display="none"; expsDiv,style.display="block"; 這兩個用的是, 而不是. 要用.才會顯示

[@beggar_consultant]

@@jessmi2 thank you!

[@cwpeng-course]

感謝 @JESSMI2 說明 :)

[@jessmi2]

請問一下, 如果使用了這些function進行了網頁操作,那麼我還可以針對某句話的單獨文字進行CSS 而不是一整句話進行CSS嗎? 像是 我還在"上課中"(下面加underline)這樣子的操作嗎 大家好, 我是Jessmi2 我目前還在"上課中" (這裡加underline)

[@cwpeng-course]

幫你要處理的部份額外加上標籤框起來，然後針對額外加的標籤去做操作即可。

[@jessmi2]

@@cwpeng-course 謝謝老師解答

[@u10107038]

神之教學

[@cwpeng-course]

謝謝哪，希望對你有幫助 :)

[@ztainxiang]

老師好，因為兩個function都有操作到一樣的物件，想請問實務上function裡的物件會在外面先宣告嗎? 這樣就不用在每個function都重新宣告一次。不過這樣是不是也會造成網頁一開的時候就跑user可能不會用到的js script

[@cwpeng-course]

是可以在外面先宣告的沒問題，雖然有可能實際上沒用到，但一個小指令其實沒有什麼太大影響。

[@marverick3762]

innerHTML更改的內容可以變成其他變數嗎 例如php資料庫裡的資料

[@cwpeng-course]

可以，不過是 JavaScript 的變數，要帶入 PHP 的資料，要把 PHP 的資料輸出到前端，成為 JavaScript 的語法形式。

[@chinchin-b2w]

老師好，想請問您，如果用querySelector去取得元素的class屬性，跟我另外設定一個id屬性去取得有什麼差別或好壞嗎?

[@cwpeng-course]

都可以，不過一般在網頁中，不會有兩個標籤有相同的 id，如果有相關的需求，就建議使用 class。

[@henrywu1131]

老師好，我想問這裡在進行querySelector操作時，為什麼沒有用到addEventListener呢？

[@cwpeng-course]

有需要在 JS 程式中進行事件處理的時候，才要做 addEventListener() 哦，如果沒有要做事件處理就不需要了。

[@ChouDaz]

老師，用自定義的標籤取代class跟id是可行的嗎？

[@cwpeng-course]

不行哦。就算有很勉強的可能性，大概也不會這樣做。

[@黑草草草]

老師想請問getElementById現在還會用嗎?還是已經被querySelector取代了?謝謝

[@junyen5337]

想知道+1

[@cwpeng-course]

我現在盡可能會使用 querySelector，比較新且功能強大。但 getElementById 估計也不會很快地消失。

[@ztainxiang]

查了一下，兩者功能似乎還是有差，如果網頁有動態生成元件，getElement會動態地選取，querySelector不會，只會選到當初html裡原本有的元件

[@kroger8507]

@@ztainxiang 你好，請問是如何查詢的呢？想知道方法，謝謝！

[@hjwing237]

請問老師，style的部分可以寫在css，然後用JS去抓嗎?

[@cwpeng-course]

可以，透過 class 選擇器以及用 JS 去設定 className 就可以達到你想要的效果。

[@姚字丞]

[@cwpeng-course]

:)

[@434c李元喬]

老師請問在台大開的課之後會開線上的嗎

[@cwpeng-course]

目前預計不會哦，台大我都是開實體的課程 ~

[@xujason4607]

老师，想听您讲python，谢谢！

[@cwpeng-course]

谢谢你的建议，我会尽量安排的 ~

[@moby7637]

看完彭彭老師教學覺得好簡單，為甚麼我以前都看不懂QQ

[@cwpeng-course]

一定是因為你現在比以前進步很多啦 ~~~