16-2 Window 子物件 - 環境物件 - location, screen, history, 全域
Lesson: 16-2 Window 子物件 - 環境物件 - location, screen, history, 全域
16-2 Window 子物件 - 環境物件 - location, screen, history, 全域
講義
1. Window 子物件分類
- 環境物件 (BOM)：存取瀏覽器軟體或硬體資訊（如網址、螢幕解析度）。
- JavaScript 物件：JS 內建的數學、日期等工具。
- Document 物件 (DOM)：代表網頁本身的 HTML 內容。
2. location 物件：處理網址
location.href：最常用的功能。可以用來取得目前的 URL，或是賦值讓頁面跳轉到新網址（如：location.href = "https://google.com"）。location.origin：回傳網址的來源（協議 + 主機名）。
3. screen 物件：使用者螢幕資訊
- 可以用來取得使用者的螢幕寬度 (
width)、高度 (height)、可用寬高 (availWidth/availHeight) 以及顏色深度。 - 應用：常用於製作選單、偵測手機橫直向 (Orientation)。
4. navigator 物件：瀏覽器與環境資訊
userAgent：得知使用者是用哪種瀏覽器、作業系統（Mac/Windows/Android）。language：得知使用者的語系設定。geolocation：取得使用者的地理位置（需經過授權）。
5. history 物件：瀏覽器紀錄
- 安全性限制：你無法直接看到使用者去過哪些網址（會造成資安漏洞）。
- 常用功能：
history.length：此分頁的瀏覽紀錄總數。history.back()：回上一頁。history.forward()：去下一頁。
6. 全域物件概念
- 在非嚴格模式下，如果你在宣告變數時沒寫
var/let/const（如a = 5），該變數會自動掛載到window下變成全域變數。 - 重要建議：開發時應儘量避免使用全域變數，因為全域變數容易互相干擾（污染作用域），導致程式難以維護。
影片逐字稿 (AI 生成)
接著在十六之二,我們看到的是Windows的紙物件我們會看到幾個首先是環境物件JavaScript物件和Document物件環境物件主要是存取瀏覽器或使用者螢幕等資訊再來JavaScript物件是屬於JavaScript內建的物件Document是代表讀取DOM底下的物件環境物件就是要去讀比如說像Windows.location這個東西是要去讀現在URL的資訊然後它的Herv是回傳完整的URLOrigin是回傳URL協議主機名還有它的端口所以我們前幾天有做一個example就是有同學問我說老師那我在Alert的地方是不是可以轉到Yahoo的連結那在那個example裡面我們是不是就用到Windows.location.herv等於Yahoo的URL這種方法就可以讓你的Windows去跳轉跳轉到你要的網站好的我們再看一下像這邊呢我們去做Windows.location裡面它就是一個location的物件裡面我們看一下什麼有一個herv這時候我們這邊拿到的herv是不是就跟我們URL這個網站欄拿到的東西是一樣的都是這個file的這個字串代表說這是它讀的位置那origin我們可以看到噢它是file寫線寫線所以它是一個檔案那在我們檔案端看完了以後我們來看一下google.com我們也來測一下它的連結和它的originOKHTTPS跟我這邊是一樣的只是因為我這邊的我這邊它的鎖是關起來所以代表說它是HTTPS它是為了讓這個連結看起來比較美化簡潔所以它又省略了一些內容實際上如果我們把它複製起來我們把它貼起來還是HTTPS是一樣的好我們再來看一下window location.origin這時候它會跟你講說噢它是它的原本的位置是在google這個連結位置OK所以比如說有些網站它後面可能連接了很多的連結位置啊等等之類它到最後你去查它的origin其實通常都是最前面這個www.google.com斜線就是HTTPS後面斜線兩個中間這個主網域好的那如果我們用window.screen我們可以拿到訪問者的螢幕資訊我們可以拿到可以使用的高度然後它左邊是0嘛右邊是0然後它的可以使用的寬度寬度然後還有它的色深就顏色有顏色是多深大概30它這邊寫30然後還有它的高度還有寬度那現在這邊可以用的和可以用的和那個什麼這邊的寬度是一樣的好的這邊還有一個東西叫做orientation我們可以拿到的是現在我的角度是0然後我type是landscape那有些狀況是通常都是0或者是90度那有些狀況是當你如果把這個orientation之後你們可能會就是通常都是0和90如果你們有要把它寫成網頁的遊戲的話然後加上手機的陀螺儀它才有可能會是其他的角度OK 這是orientation所以這邊會用的orientation比較多和這些長寬的資訊其實比較多的會是在可能你們之後在寫boostrap的時候再寫responsive可能可以在這邊看一下就是更詳細的資訊使用者screen的一些訊息好的 在這邊用navigator我們可以看到游覽器的資訊history可以看到訪問過的URL好的 那我們這邊來看window.navigator這邊就會告訴你說你的電腦是比如說像這邊Macintosh Intel的MacOS然後版本號還有我現在使用的語言是英文的美式英文的語言那它有language和languageslanguages裡面可以看到說族語言和副語言那plusgeckogecko是一個網站engine的名稱還有user agent它是用mozilla來作為它的就看起來是用Macintosh Mozilla那這些是更詳細的一些資料那我們可以看到這邊有一個Navigator裡面有一個geolocationgeolocation我們也可以多多看一下看一下可不可以拿到它的資訊那geolocation就是主要是geolocation可以跟大家講一下就是它是一個它是一個位置它是使用者的位置是這邊它是一個object那我們想要拿到它裡面的資訊我們可以google一下查一下地理資訊好那這邊是可以拿它來看一些地理資訊的一些方法好的那我們可以看到剛剛那個geolocation裡面呢它沒有什麼東西Navigatorgeolocation裡面還有一個東西叫做watch position然後它就可以去追蹤使用者的資料那這些東西就是有點小複雜那我們現在不用立即的知道我們只要知道說我們如果今天有要做你們project如果有用到google map的話那可以使用就是geolocation然後你再去查然後你再去查就好了但是因為這方面我剛好有碰到所以覺得比較熟悉跟大家介紹一下好的再來我們看history那history它會說可以看到使用者的瀏覽器訪問過的URL那這時候我們就想要來就是模擬一下我們常常會遇到的一些狀況比如說像是我們今天可能會去Mobile01啊去看文章然後我們先可能是先google查這個網頁再來我們進來然後我們再去去看蘋果可能發了新的手機好的那喔比想像中有好感度那就點進去那這時候呢我們想要知道說我的history就是我走過哪些地方那我們就來看吧window.history看一下裡面有什麼東西它有一個5的長度它的長度是5代表說它有什麼它總共有5個過去的資料那因為因為就是隱私的關係所以window.history你只能可能去操作它往前和後退可是實際上你不能就是拿到像使用者這麼低調的資訊你只能知道說它的長度是5然後你可能上一層上一層上一層上一層那這個長度5就可以避免說你比如說你返回你返回20次然後讓它爆掉你可以去check說它的history上一頁還有幾個好的再來我們來看一下JavaScript物件那這些是沒有用var.let.const宣告時自動附加到window屬性上比如說像最簡單講一個我們昨天最後面提到的就是math這個就是一個JavaScript物件那後面我們這邊會提到就是JavaScript物件有哪些它是一個全域範疇宣告的變數那是JavaScript就是裡面就有的那在嚴格模式下就是沒有使用宣告的變數會直接錯誤OK而且也不會附上window的屬性那有時候比如說像我們可以直接在這邊比如說像A等於5像我們不是在嚴格模式下所以我比如說我現在做A等於5是可以的喔就是我可以直接這個A其實就是全域那它應該是大家可以看到window.a也是5OK因為內建的全域就是window所以你用window.a其實也可以拿到我們剛剛設定的A這個值但是這些東西就是建議就是像有時候有些網站它也會用全域然後你在用全域的時候可能會改到網頁的一些內部的就是如果有會改到互相彼此影響到所以全域變數其實慢慢的從入門開發者到越來越後面我們會越來越少用這個全域變數就是避免你的網站可能會就是使用者可能有時候要測試一下JavaScript的時候不小心改到你的網站然後可能會crash之類好的那JavaScript內的大多東西都是透過定義去出實變數來建立的物件然後J是可以作為window的子物件存在然後它就是叫一個全域物件然後這邊是16-2然後再來我們等等再看16-3謝謝謝謝
影片逐字稿largev2
接著在16-2,我們看到的是Windows的子物件我們會看到幾個首先是環境物件JavaScript物件和Document物件環境物件主要是存取瀏覽器或使用者螢幕等資訊再來JavaScript物件是屬於JavaScript內建的物件Document是代表讀取DOM底下的物件環境物件就是要去讀比如說像window.location這個東西是要去讀現在URL的資訊然後它的HERF是回傳完整的URLORIGIN是回傳URL協議、主機名還有它的端口所以我們前幾天有做一個example就是有同學問我說老師那我在Alert的地方是不是可以轉到Yahoo的連結那在那個example裡面我們是不是就用到window.location.HERF等於Yahoo的URL這種方法就可以讓你的window去跳轉跳轉到你要的網站好的我們再來看一下像這邊呢我們去做window.location裡面它就是一個location的物件裡面我們看一下有一個HERF這時候我們這邊拿到的HERF是不是就跟我們URL這個網站欄拿到的東西是一樣的都是這個file的這個字串代表說這是它讀的位置那ORIGIN我們可以看到它是file斜線斜線所以它是一個檔案那在我們檔案端看完了以後我們來看一下google.com我們也來測一下它的連結和它的ORIGINOK! https跟我這邊是一樣的只是因為我這邊的我這邊它的鎖是關起來的所以代表說它是https它是為了讓這個連結看起來比較美化簡潔所以它有省略了一些內容實際上如果我們把它複製起來我們把它貼起來還是https是一樣的好我們再來看一下window.location.origin這時候它會跟你講說它原本的位置是在google這個連結位置OK!所以比如說有些網站它後面可能連結了很多的連結位置啊等等之類它到最後你去查它的origin其實通常都是最前面這個www.google.com就是https後面斜線兩個中間這個主網域好的!那如果我們用window.screen我們可以拿到訪問者的螢幕資訊好的!我們就會拿到什麼呢?我們拿到可以使用的高度然後它左邊是0嘛!右邊是0然後它的可以使用的寬度然後還有它的色深就顏色有顏色是多深?大概30它這邊寫30然後還有它的高度還有寬度那現在這邊可以用的和可以用的和那個什麼這邊寬度是一樣的好的!這邊還有一個東西叫做orientation那我們可以拿到的是現在我的角度是0然後我的type是landscape那有些狀況是通常都是0或者是90度那有些狀況是當你如果把這個orientation之後你們可能會通常都是0和90如果你們有把它寫成網頁的遊戲的話然後加上手機的陀螺儀它才有可能會是其他的角度這是orientation所以這邊會用的orientation和這些長寬的資訊其實比較多的會是在可能你們之後在寫bootstrap的時候在寫responsive可能可以在這邊看一下更詳細的資訊使用者screen的一些訊息好的!在這邊用navigator我們可以看到瀏覽器的資訊history可以看到訪問過的URL好的!那我們這邊來看window.navigator這邊就會告訴你說你的電腦是比如說像這邊然後版本號還有我現在使用的語言是英文的美式英文的語言那還有language和languageslanguages裡面可以看到說主語言和副語言那plus是geckogecko就是一個網站engine的名稱還有user agent它是用mozilla來作為它的它看起來是用macintosh mozilla那這些是更詳細的一些資料那我們可以看到這邊有一個navigator裡面有一個geolocationgeolocation我們也可以多多看一下看一下可不可以拿到它的資訊那geolocation就是主要是geolocation可以跟大家講一下就是它是一個它是一個位置它是使用者的位置這邊那我們想要拿到它裡面的資訊我們可以google一下查一下地理資訊好那這邊是可以拿它來看一些地理資訊的一些方法好的那我們可以看到剛剛那個geolocation裡面呢它沒有什麼東西navigator geolocation裡面還有一個東西叫做watch position然後它就可以去追蹤使用者的資料那這些東西就是有點小複雜那我們現在不用立即的知道我們只要知道說我們如果今天要做你們的project如果用到google map的話那可以使用就是geolocation然後你們再去查就好了好那是因為這方面我剛好有碰到所以覺得比較熟悉跟大家介紹一下好的再來我們看history那history它會說可以看到使用者的瀏覽器訪問過的url那這時候我們就想要來就是模擬一下我們常常會遇到的一些狀況比如說像是我們今天可能會去mobile01去看文章然後我們可能是先google查這個網頁再來我們進來然後我們再去去看蘋果可能發了新的手機好的比想像中有好感度那這時候呢我們想要知道說我的history就是我走過哪些地方那我們就來看吧window.history看一下裡面有什麼東西它有一個5的長度它的長度是5代表說它有什麼它總共有5個過去的資料那因為就是隱私的關係所以window.history你只能去操作它它會往前和後退可實際上你不能拿到像使用者這麼detail的資訊你只能知道它的長度是5然後你可能上一層上一層那這個長度5就可以避免說比如說你返回你返回20次然後讓它爆掉你可以去check說它的history上一頁還有幾個好的再來我們來看一下Javascript物件那這些是沒有用var.letconst宣告時自動附加到window屬性上的比如說像最簡單講一個我們昨天最後面提到的就是math這個就是一個Javascript的物件那後面我們這邊會提到這個物件有哪些它是一個全域範疇宣告的變數那是Javascript就是裡面就有的那在嚴格模式下就是沒有使用宣告的變數會直接錯誤而且也不會附上window的屬性那有時候比如說像我們可以直接在這邊比如說像a等於5像我們不是在嚴格模式下比如說我現在做a等於5是可以的喔這個a其實就是全域那它應該是大家可以看到window.a也是5因為內建的全域就是window所以你用window.a其實也可以拿到我們剛剛設定的a這個值但是這些東西就是建議就是像有時候有些網站它也會用全域有時候可能會改到網頁的一些內部會改到互相彼此影響到所以全域變數其實慢慢的從入門開發者到越來越後面我們會越來越少用這個全域變數就是避免你的網站可能會使用者可能有時候要測試一下Javascript的時候不小心改到你的網站然後可能會crash好的那Javascript內的大多東西都是透過定義去初始變數來建立的物件然後j是可以作為window的子物件存在然後它就是叫一個全域物件這邊是16-2然後再來我們等等再看16-3