SSH << Previous Next >> Topic2

Javascript

學習要點:

Javascript 程式語言有甚麼特性? 如何使用?

網際內容管理與 Javascript 有何關聯?

該學習最新語法的 Javascript 嗎? 還是?

在任何一個網頁, 利用滑鼠右鍵帶出小視窗, 然後選擇"檢測", 再點選"主控台", 輸入"alert("Hello, Javascript") 後按下 Enter, 就會跳出一個小視窗列出 "Hello, Javascript". 這個意思是, 網頁瀏覽器中就自帶有 Javascript 的解譯器.

接下來, 假如你已經建立好了隨身碟中的可攜程式環境: portable_wcm2025.7z, 同時也取得 wcm2025 課程所配置的學員作業倉儲, 你就可以直接在編輯動態網頁的同時, 開啟該頁面的 Source Code (也就是該頁面的 HTML 超文件內容), 並將下列 Javascript 程式放入超文件中, 存檔後點選編輯區下方的"viewpage"按鈕, 就可以從"主控台"看到程式執行結果:

備註: 請更新上列 portable_wcm2025.7z 中的 wscite 為 5.5.5 版 (wscite_5.5.5.7z, 解開壓縮檔案後取代 5.5.4 版的 wscite 目錄)

<script>
console.log("顯示在主控台 - 紀錄區的內容")
</script>

假如編輯網頁中的 HTML 原始碼再加入下列程式段, 就可以在網頁中利用 <script type="text/python"></script>, 以 Python 語法建立程式, 而這種程式是經由採 Javascript 編寫的 Brython 解譯器轉為 Javascript 後, 直接在網頁中執行:

<!-- 導入 brython 程式庫 -->
<p>
<script src="./../cmsimde/static/brython.js"></script>
<script src="./../cmsimde/static/brython_stdlib.js"></script>
</p>
<!-- 啟動 Brython -->
<p>
<script>
window.onload=function(){
brython({debug:1, pythonpath:['./../cmsimde/static/','./../downloads/py/']});
}
</script>
<script type="text/python">
print("從 Brython 執行後看到的結果")
</script>

從上面這個範例, 可以看出較長的 Javascript 程式, 並不是直接寫在網頁上, 而是儲存在 WWW 伺服器中的特定位置後, 然後在網頁中導入執行, 例如這個範例中的 brython.js.

另外, 由於 cmsimde 網際內容管理系統程式設計的問題, 動態網頁與靜態網頁引用 Javascript 程式路徑的方式不同, 初學者必須特別注意. 下列程式就是利用 Brython 編寫的網頁版貪食蛇遊戲, 利用滑鼠按下"啟動"就可以執行, 按下"暫停"程式就會暫時停止執行.

SSH << Previous Next >> Topic2