HTML基礎架構介紹
head 主要是網頁一開始載入會定義的一些設定
像是css樣式表會在這裡引入
※css就是決定網頁的介面長怎樣
body就是網頁的內容
網頁的功能是靠JavaScript
網頁前端主要就是由這三個組成
HTML架構+CSS外觀+JavaScript功能
JavaScript簡稱JS 他的檔案和CSS一樣可以在head引入
不過網頁越來越大的話 JS程式碼塞得越多 載入的越久
而head載入完才會開始載入body 網頁才有畫面
使用者會覺得網頁跑得很久
為了使用者的良好體驗 畫面可以先出來 功能再慢慢載入
所以現在JS通常放在body的最底下
會等body的畫面載入完畢才開始載入js
而css 一樣放head 因為他也是畫面
接下來 在body底下打這行
載入一個js檔案 記得養成隨時ctrl+s儲存好習慣
再來ctrl+n 新增檔案
右下角選Javascript > javascript
設定好後先儲存在剛剛放html的資料夾內
名字就打剛剛引入的hello.js
然後把整個資料夾拖曳進sublime 旁邊會出現一個目錄
再來開始編寫程式碼 在hello.js檔案裡面寫
var就是宣告一個變數
宣告a = 一個字串 字串可以用'或是"
※沒有差別 但有些情況會要打字串裡面的字串
這時候要讓系統不搞錯 外面用" 裡面用'
最後要加上; 通常是一個陳述結束要加入 之後會慢慢抓到時機
現在要把這個字串在網頁內呈現出來
那網頁內要有一個東西給他裝這個字串
先在剛剛的HTML內 body內 js前面輸入 div#hello 再按tab
這也是emmet的用法 意思是建立一個div標籤 id是hello
回到js 下面繼續打
document就是取得整個網頁樹狀結構
網頁內是樹狀結構組成的
例如一個註冊帳號的畫面 就是一個容器底下包著幾個輸入文字方塊
document.getElementById('hello') 意思是從網頁樹狀結構裡面藉由id取得元素
這時候就可以得到剛剛寫的<div id="hello"></div> 這個div元素
.innerHTML = a; 意思是在這個元素裡面塞入HTML語法
這邊我們沒有寫語法 只是寫一個字串 所以就只是塞入那個字串到div裡面
這時候理論上應該能在網頁上看到hello world
要看結果的話直接用chrome打開剛剛的html檔案就好
打開chrome發現是白畫面
這時候可以按下F12 點console 看看是什麼錯誤
這意思是他找不到那個JS檔案 這時候可以知道路徑有問題
回去把
刪掉之後就可以了 由此可知相同目錄最前面不用加上/
現在能看成是輸出的結果了 接下來練基本語法
留言列表
