什麼是Javascript

Andy 0

在WordPress的基礎技術當中,是以php程式碼為基底,作為底層的資料傳遞基礎,內容跟樣式上搭配HTML+CSS,而動態部分就需要仰賴javascript,在WordPress網頁設計的歷程當中,如果你要的效果超越內容或是排版樣式,例如動態效果等,那多半就是javascript的範疇。

最基礎的Javacript就是透過按鈕來達成某個事件,可以是顯示資料,抓取資料,或是送出資料。

例如我們建立一個按鈕抓取並顯示目前的時間

<button type="button"
onclick="document.getElementById('demo').innerHTML = Date()">
點我顯示時間</button>

<p id="demo"></p>

上述程式碼概念是,主要是建立一個按鈕的元件,按鈕文字為「點我顯示時間」,而下方設定一個文字區塊命名為demo,用來顯示時間。

在這裡補充一下,HTML的原件都要用<>包起來

格式如下

<元件類別 元件設定>內容</元件類別>

在HTML基礎設定有一些元素,例如div是容器,p是文字,h1~h6是標題,button是按鈕,table是表格,form是表單,這些比較常見,其他還有許多基礎定義。

回到上述的程式碼,javascript事件設定在按鈕元件設定中

type=”button” 意思是定義為按鈕

onclick 當使用者點選滑鼠的事件

“document.getElementById(‘demo’).innerHTML = Date()”

這串程式碼意思是指定「時間」這個內容,到當前檔案中id為demo的元素當中。

Date()這是javacript已經有內建的參數。

所以程式碼運作之後如下



如果程式內容很簡單,那可以直接定義在按鈕當中,但是如果程式內容比較複雜,我們就會分離出來程式碼。

寫在<script></script>之中,放在HTML的後面或是前面,不過為了網頁的載入速度,會將script區段放在HTML的後面,這樣可以先顯示內容再解讀script內容,加速內容的載入。

<p id="demo001">沒有更動過的文字.</p>

<button type="button" onclick="myFunction()">點我顯示歡迎訊息</button>

<script>
function myFunction() {
  document.getElementById("demo001").innerHTML = "哈囉,歡迎來學Javacript.";
}
</script>

程式碼運作之後如下


沒有更動過的文字.


當然,如果程式碼更多,我們可以用嵌入檔案的方式。

把<script></script>當中的程式碼,寫在一個檔案當中,副檔名命名為.js

並用指令去呼叫這個檔案出來,就可以執行檔案內的指令了

<script src=”scriptdemo.js”></script>

這是嵌入js檔案的語法。

了解JS的原理,乍看之下沒有任何作用,但是WordPress網站開發當中,JS卻是相當重要的能力,不需要背下許多程式碼,也不需要自己會憑空寫出來,運用本篇概念上網找到相關的程式碼,就能夠轉化套用到自己的網站上。

Andy

現職橡實網頁設計工程師,經歷了近十年的CMS開發經驗,走向減法思考的WordPress玩家,期望用最乾淨的程式,最少的外掛,解決最多的問題!

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *