[微精通：網頁設計Vue + Node.js + MySQL] 2.1. JS

張貼者： 日期：
JS，JavaScript是一種程式語言，可執行在瀏覽器(Chorme、Safari、Edge)上。接下來，我們將使用JavsScript增加一些互動，讓原本靜止的網頁動起來。

 

image/svg+xml2.1. JS 殭屍網站需要 15+ 以上才可觀看，有什麼辦法呢 ? <meta charset = "utf-8" > <html> <head> <link rel = 'stylesheet' href = 'zombie.css' > </head> <body> <ul> <li class = 'red-zombie-name' > 瘋狂傑克 </li> <li class = 'red-zombie-name' > 懶懶瑪琍 </li> <li class = 'red-zombie-name' > ⼤提姆 </li> <li> 史提夫 </li> <li> 功夫李 </li> </ul> </body> < script type = " text/javascript " > < /script > </html> <meta charset = "utf-8" > <html> <head> <link rel = 'stylesheet' href = 'zombie.css' > </head> <body> <ul> <li class = 'red-zombie-name' > 瘋狂傑克 </li> <li class = 'red-zombie-name' > 懶懶瑪琍 </li> <li class = 'red-zombie-name' > ⼤提姆 </li> <li> 史提夫 </li> <li> 功夫李 </li> </ul> </body> < script type = " text/javascript " > var result = confirm ( ' 確定已滿 15+ ? ' ); < /script > </html> <meta charset = "utf-8" > <html> <head> <link rel = 'stylesheet' href = 'zombie.css' > </head> <body> <ul> <li class = 'red-zombie-name' > 瘋狂傑克 </li> <li class = 'red-zombie-name' > 懶懶瑪琍 </li> <li class = 'red-zombie-name' > ⼤提姆 </li> <li> 史提夫 </li> <li> 功夫李 </li> </ul> </body> < script type = "text/javascript" > var result = confirm ( ' 確定已滿 15+ ? ' ); if ( result == false ) { location.href =" http://www.google.com "; } </ script > </html> var result = confirm( ' 確定已滿 15+ ?' ); if (result == false ){ location.href= "http://www.google.com" ; } <meta charset = "utf-8" > <html> <head> <link rel = 'stylesheet' href = 'zombie.css' > </head> <body> <ul> <li class = 'red-zombie-name' > 瘋狂傑克 </li> <li class = 'red-zombie-name' > 懶懶瑪琍 </li> <li class = 'red-zombie-name' > ⼤提姆 </li> <li> 史提夫 </li> <li> 功夫李 </li> </ul> </body> < script type = "text/javascript" src = " home.js " >< /script > </html> 1. 在 <body> 後加入 <script> 標籤，其中的 type 指定為 'text/ JavaScript' ，表⽰使⽤的是 JavaScript 的程式語⾔。 1. 加入 <script> 標籤 2. <script> 其實沒有限定要放在哪邊，只要在 <html> 內即可。通常會放在 <body> 後以在網⾴轉入後 在執⾏ <script> 中的程式。 1. 這是我們⽬前的殭屍網站，但怎麼跟⽤⼾確認是 15+ 歲以上才可繼續觀看呢 ? w2_1_1 - home.html 2. var 變數 + con f rm() 函式，存放是否 15+ 的結果 w2_1_2 - home.html 1. 在 <script> 標籤中加上 JavaScript 程式。 2. 使⽤ confirm() 函式，確認是否為 15 歲以上，它會出現⼀個對話框詢詢問 題是否 ' 確定已滿 15+ ?' 。 3. 在 JavaScript 中， var 可以 宣告⼀個變數，變數就像⼀個容 器⼀樣可以裝入⼀些資訊。 4. 在此宣告⼀個叫 result 的變數。 5. confirm() 是 JavaScript 中的⼀個函式，執⾏後會 產⽣⼀個確認框，什麼是函式後⾯會做說明，基本上函式 加上⼩括號 (()) 即可執⾏，⼩括號 (()) 中可帶入⼀些 值，像 confirm() 函式會將帶入的值顯⽰在確認框上。 6. 最後是指派運算式 (=) ，會將右邊的從 confirm() 函式得到的值放在左邊的 result 變數中。 3. if ，依結果決定是否離開殭屍網站 w2_1_3 - home.html 1. 在 <script> 標籤中加上 JavaScript 程式。 2. 使⽤ confirm() 函式，確認是否為 15 歲以上，它會出 現⼀個對話框詢詢問題是否 ' 確定已滿 15+ ?' 。 3. 當按下的是 ' 取消 ' 時 confirm() 函式會回傳 false ，在透過 if 判 斷當 result 為 false 時這時就就執⾏ location.href="http:// www.google.com" 把網⾴導⾄ google ⾸⾴。 4. 在 JavaScript 中， if 可以決定部份 程式的執⾏， if 後放 的⼀個⼩括號 (()) ⽤來放條件式，⽽條 件式為 true 時，則 會執⾏後⾯⼤括號 ({}) 中的程式。 5. 其中的兩個等於 (==) 是⼀種關係運 算，⽤來比較左右兩 邊的值是否相等，若 是則回傳 true ，若 否則回傳 false 。 6. location 物件是表⽰網⾴所在位置的 物件，透過 href 屬性給予⼀個新的網址， 就可以讓⽬前的瀏覽器跳到此網址。其中 句點 ’.' 解釋為 ' 的 ' ，即解釋為 location.href 即 location 的 href 。 7. 取消，⾄ google ⾸⾴。 8. 確定，進入殭屍網站。 <script> 標籤，連結 .js 檔案 w2_1_4 - home.js 1. 建立⼀個 home.js 檔，它是⼀個 JavaScript 的程式檔，名字 與 home.html 相同，表⽰這是 home.html 的 js 檔。雖然也不⼀定 要相同，只是好判識。 2. 將確定已滿 15 歲的程式放入其中。 w2_1_4 - home.js 3. 使⽤ src 屬性並寫下檔名 home.js 即可在載入到這個 <script> 標籤時即會動態的將 home.js 檔的程式載入並 執⾏，如此我們就將 javascipt 外掛到 js 檔中了。

留言

張貼留言