天矽科技 line

天矽部落格最新的網路趨勢資訊

網站設計趨勢

JavaScript是什麼?讓網站能互動的JavaScript基本介紹|天矽科技客製化網頁設計

部落格:JavaScript是什麼?讓網站能互動的JavaScript基本介紹|天矽科技客製化網頁設計

 

JavaScript是標準網頁技術的一項必備技能,它讓網站變得具有互動性,讓網站變得更有趣、更有用!

JavaScript 是什麼

JavaScript是一種腳本、事件驅動的程式語言,一般簡稱JS,它支援物件導向程式設計、指令編程以及函式語言程式設計,它讓網站中出現較為複雜的功能,比如動態內容、2D/3D圖形繪製、影片播放控制…等。

簡單來說就是讓網站可以有特效、效果與使用者互動,比如像是網頁上的圖塊移動、文字淡出淡入或者是按鈕點擊效果等。

JavaScript是標準網頁技術的其中之一,技術為HTML、CSS與JavaScript。

  • HTML超文本標記語言,用於組織、定義網頁裡的內容。
  • CSS階層樣式表,用來幫結構化文件(HTML/XML) 添加樣式。
  • JavaScript驅動程式語言,用來使動態更新與使用者互動。

如果要用一台車來比喻,HTML就像引擎、CSS是外觀、JavaScript是油門;用人來比喻,HTML就像是骨架、CSS是皮膚、樣貌或衣服、JavaScript則是大腦/神經。

 

延伸閱讀:
HTML是什麼?HTML基礎應用與解說
CSS是什麼?CSS階層樣式表基本介紹

 

※注意:
JavaScript跟Java是兩種不同的東西,不要搞混囉!
Java建立的應用程式可在虛擬機器或瀏覽器中執行,JavaScript程式碼則只能在瀏覽器上執行。(在此不贅述)
參考:JAVA

 

 

JavaScript介紹

JavaScript

完整的JavaScript包含以下:

  • ECMAScript:
    其實就是JavaScript或Jscript,用於描述語法和基本物件。

  • DOM(文件物件模型)
    處理可延伸標示語言的標準程式介面,描述處理網頁內容的方法跟畫面。

  • BOM(瀏覽器物件模型):
    由瀏覽器曝光的所有對象組成的表示模型,描述與瀏覽器進行互動的方法和介面。

 

JavaScript的工作

  • 嵌入動態文字
  • 對瀏覽器事件做出回應
  • 讀寫HTML元素
  • 在資料被提交到伺服器之前驗證資料
  • 檢測訪客的瀏覽器資訊
  • 控制cookie建立、修改…等

 

JavaScript怎麼工作

當瀏覽器載入網頁時,就會在瀏覽器上執行程式碼(HTML/CSS/JavaScript),概念如下圖:

瀏覽器載入網頁

檔案中的程式碼通常會以HTML→CSS→JavaScript這樣的順序來執行,如果JavaScript比前兩項還要早被載入就會發生錯誤。

 

資料來源:
維基百科
MDN Web Docs

 

 

JavaScript的作用

如果你想要用網站跟使用者來互動,就可以利用JavaScript這項技術,比如文字淡出淡入、換頁小動畫、登入帳號密碼時的互動小動畫…等,對於使用者來說,有趣的互動就會讓使用者有印象、感興趣,因此瀏覽體驗就會非常良好。

另外,也可透過JavaScript的應用來串接API,將各種資料串接到自家的網頁中,比如將Facebook、IG、Google Map放到網頁上瀏覽或是串接購物車刷卡付款的功能….等,這其實都是在基礎JavaScript技術上的應用。

 

天矽科技客製化網頁設計公司已成立超過25年,對視覺版面的設計有一定的經驗與成熟度,可以幫助您實現心中的網站畫面,除此之外,我們已有多種串接經驗,無論是金流、物流還是發票皆可以協助API串接。

 

以最新的技術與最標準的規定來架設網站,您的網站,我們架得用心、您用的放心!

回上一頁
信箱
客服
Line@