JavaScript HTML DOM 核心觀念 - Front End 網頁前端工程教學

喜歡彭彭的教學影片嗎？點擊以下連結查看更多會員專屬的教學哦： • Members-only videos
1. HTML DOM 核心觀念
1.1 網頁介面產生流程
1.2 HTML DOM 扮演的角色
2. 內建 window 物件的基本操作
2.1 window 物件的屬性和方法
2.2 文件物件 document
2.3 螢幕物件 screen
-------------------
更多學習資訊，請到彭彭的課程網站：
training.pada-...

[@AK-di6xs]

感謝彭彭老師 收穫滿滿!!!! JavaScript HTML DOM 核心觀念 // 認識 window 物件 (HTML DOM 結構的最上層) console.log(window); // 取得視窗的寬度和高度 console.log(window.innerWidth, window.innerHeight); // 透過 screen 物件，取得螢幕尺寸 console.log(window.screen.width, window.screen.height); // 取得網址列的內容 console.log(window.location.href); // 更改網址列的內容 (跳轉網頁) //window.location.href="www.google.com/"; // 認識 document 物件 console.log(window.document); // 直覺化 console.dir(document); // 程式化 // 取得網頁標題 console.log(document.title); // 更改的網頁標題 document.title = "新的標題"; // 取得 Body 標籤 console.log(document.body); console.dir(document.body); // 更改網頁主畫面的內容 (Body 標籤的內文) console.log(document.body.innerHTML); document.body.innerHTML="Hello HTML DOM"; // 動態生成body內容

[@cwpeng-course]

太好了!!! :)))

[@minfeng4283]

老師解說的好白話好讚 大推👍 上片時間跟單元安排剛好都是不久前學完的內容 很適合當作複習加深印象 也能更深入理解

[@cwpeng-course]

多聽幾次真的會有些幫助，謝謝你的回饋 :))

[@winnie60731a]

謝謝彭彭老師!! 用簡單易懂的方式教學，很快就懂了👍👍

[@cwpeng-course]

讚讚，很高興對你有幫助 :)

[@TommyTommy928]

彭彭老師真滴超猛...我每次內心戲中的疑問，老師都會重輔叮嚀好多次！！讓整個影片注入老師在旁邊互動的靈魂一樣！！！！！

[@cwpeng-course]

哈哈哈，你的回饋感覺好有畫面，謝謝哪 :)

[@hermanlo7399]

謝謝彭彭老師深入淺出的講解，真的幫助好大!!!感謝感謝!!

[@cwpeng-course]

:))))

[@shuweilin1535]

請問為什麼下指令找title 就直接是document.title 不需要在head 底下？ 就像是document.body 那請問有document.head嗎？

[@cwpeng-course]

沒有 document.head，document.title 是特別的，就只是瀏覽器的內部設計，沒有道理 ~

[@楓葉-k8y]

想請問一下老師 學習JS之前 必須要會的HTML跟CSS的語法是那些呢? 記憶力有點薄弱記不太住...

[@cwpeng-course]

光是程式邏輯的學習，需要使用到的標籤不多，但實際上開發還是都需要，所以也逃不掉。 但不用記住，有需要的時候可以去 Google 找出來。

[@源M]

老师，为什么我用console.log和console.dir打印document的结果是一样的，并没有出现视频中的效果？🤔

[@ldd1358]

彭彭老師好， 從第一支影片看到現在，一直有一個疑問， 如果一行只有一個程式(指令)的話，在code的最後沒有加 ; 是不是也沒關係呢？ 因為有好幾次忘了加，最後發現也可以跑。 謝謝彭彭老師！

[@cwpeng-course]

有加分號是好習慣，沒加確實也可以跑，但不建議。

[@姚字丞]

[@cwpeng-course]

:)

[@aphgfioajpfijfapeorj]

為什麼console.log(document.body); 比 document.body.innerHTML="Hello HTML DOM"先執行document.body卻會有"Hello HTML DOM"

[@cwpeng-course]

執行的時候還沒有，不過我們在 console 去點開物件的內容時，他是當下才去抓取最新的資訊，因此我們去點開的時候是已經更新過後的 ~

[@maruchen4834]

感謝彭彭老師的解說，好像又接近了JavaScript一點了 一直學完就忘，都懷疑人生了

[@cwpeng-course]

謝謝你的回饋，恭喜又更近了一點 :) 學完就忘很正常的，通常要學完之後大量的實作，然後才會慢慢地記起來一些核心的東西 ~

[@aarontian4168]

棒

[@cwpeng-course]

謝謝 ~~~~~

[@yipo8659]

老師您好 想詢問您，在列印螢幕大小時，我印出與window.innerWidth一樣的尺寸，且能因為調整視窗而改變尺寸，而不像老師您一樣列印出1920*1080的答案 謝謝!

[@cwpeng-course]

如果你使用了開發人員工具的模擬器，那他就是模擬一個不同螢幕大小的環境，把模擬器關掉就會正常了。

[@alion688]

@@cwpeng-course 請問老師,我要如何將開發人員模擬器關閉?

[@cwpeng-course]

@@alion688 再按一次 F12 或右上角應該有個 X 的按鈕。

[@JingChenOWO]

剛剛發現自己印出來是 1536*864，查了一下發現是因為在設定中 Windows display scaling 的預設是125% 所造成，供參考

[@cwpeng-course]

@@JingChenOWO 感謝分享 :)

[@r124io2]

這邊有提到物件底下的物件所以試著建立看看: 以上次教學為例子: let Aclass=new Object(); Aclass.person=new Object(); Aclass.person.age=21; // Aclass.person.name="Allen"; Aclass.name="教學班" Aclass.talk=function(){ console.log("Hello 我是",this.person.name,"年齡",this.person.age,"屬於",this.name); }; console.log(Aclass); console.log(Aclass.person.age>20); aclass.talk(); ------------------------------JSON寫法----------------------------------------------------------------- let team={ person:{ age:15, name:"小安", }, teamname:"黑熊隊", talk:function(){ console.log("Hello 我是",this.person.name,"年齡",this.person.age,"屬於",this.teamname); } }; console.log(team); console.log(team.person); console.log(team.person.age>20); team.talk();

[@cwpeng-course]

讚讚，感謝分享 :)

[@lexa8291]

老師請問要怎麼用Javascript html css做出一個購物車的網頁

[@cwpeng-course]

只有前端還不夠，要加上後端的技術哦。

[@mick3166]

@@cwpeng-course 請問一下現在面試 前端html+css+javascript 後端要什麼會比較符合求職熱門技能?

[@cwpeng-course]

@@mick3166 後端很分散，沒有一定比較熱門的，常見的就 Node、Python、PHP、C#、Java 非常之多，原則上選其中一套深入，其他的碰到的時候再學。

[@mick3166]

@@cwpeng-course 會建議去資策會上課嗎？

[@cwpeng-course]

@@mick3166 這個你得根據自己願意投入的時間金錢和想要入行的決心來判斷哦。

[@moby7637]

又更看得懂，不懂的地方了!

[@cwpeng-course]

讚讚，很高興對你有幫助哦 :)

[@AliceXiang]

想请问彭彭可以教php吗

[@cwpeng-course]

短期间之内不会呦 ~

[@劉晏儒-c6s]

老師您好,我在寫跳轉頁面的部份雖然有成功跳轉頁面,但出現了以下error:  Error with Permissions-Policy header: Unrecognized feature: 'ch-ua-form-factor' DevTools failed to load source map: Could not load content for www.google.com/_/mss/boq-one-google/_/ss/k=boq-one-google.OneGoogleWidgetUi.N1nFA4H6Dbg.L.B1.O/am=AHM_/d=1/ed=1/rs=AM-SdHsfXk1x2oCsOt97oSsqeH7euwT0xg/chrome.css.map: HTTP 錯誤：狀態碼為 404，net::ERR_HTTP_RESPONSE_CODE_FAILURE 請問是甚麼原因呢?麻煩老師解答謝謝

[@cwpeng-course]

估計單純是你的瀏覽器安裝的擴充套件做的額外工作產生的錯誤訊息，跟你的程式行為沒有太大關係，所以直接忽略就可以了。

[@askark4767]

[@cwpeng-course]

XDDDDDD