01-互動網頁設計基本介紹

9 月 14, 2021 | 互動網頁設計

這門課程主要的內容是延續之前「網頁設計」的內容,除了會複習加強html、CSS外還會加入javascript的應用

javascript

什麼是javascript?

JavaScript(通常縮寫為JS)是一種進階的、直譯的程式語言[8]。JavaScript是一門基於原型、頭等函式的語言[9],是一門多範式的語言,它支援物件導向程式設計,指令式編程,以及函式語言程式設計。它提供語法來操控文字、陣列、日期以及正規表示式等,不支援I/O,比如網路、儲存和圖形等,但這些都可以由它的宿主環境提供支援。它已經由ECMA(歐洲電腦製造商協會)透過ECMAScript實作語言的標準化[8]。它被世界上的絕大多數網站所使用,也被世界主流瀏覽器(Chrome、IE、Firefox、Safari、Opera)支援。 -維基百科

在之前的課程裡,我們使用html以及css樣式表可以製作出基本的網頁內容,利用CSS樣式表我們作出了「滑鼠移動到元素上改變了該元素的背景色彩」的效果,這就是一個基本的互動,但是若想要在這個網頁上與使用者作更多的互動效果: 如使用者「滑動到某個區塊時播放特定的動畫」之類,或是簡單的線上心理測驗,那光靠html以及css 就比較難達到理想中的需求。早期要作到複雜的互動是利用Adobe公司的 Flash這個技術,而隨著行動裝置成為主流,互動的概念也較之前有所差異,目前網頁的互動是以javascript為主要的技術。

jQuery

什麼是jquery,他跟javascript又有何不同?

jQuery是一套跨瀏覽器的JavaScript函式庫,用於簡化HTML與JavaScript之間的操作。
-維基百科

jQuery一般稱作一個「框架」,它將不少javascript繁雜的指令包裝成簡單的語法架構,讓使用者可以更快速的取得網頁上的元素並加以利用。雖說目前更新的框架不斷的推出,但jQuery在某些時後還是可以作為入門網頁互動的選項之一,加上他還是有不少包好的資源可以讓新手們在短時間快速上手,所以在這門課的一個很大的部份我們都會使用jQuery這個框架來幫助進行。