《JavaScript與jQuery網(wǎng)頁前端開發(fā)與設計-第2版》 第01章教案-緒論

《JavaScript與jQuery網(wǎng)頁前端開發(fā)與設計-第2版》教案第1章緒論一、教學目標：了解JavaScript的概念與特點；了解jQuery的概念與特點；掌握任意一款Web開發(fā)工具。二、教學重點和難點：重點：了解JavaScript的概念與特點；難點：了解jQuery的概念與特點。三、教學方法與手段：采取互動式教學方法，理論教學使用多媒體投影教室。四、課程簡介：本章是全書的緒論部分，主要介紹JavaScript、jQuery概述以及Web開發(fā)工具的選擇。JavaScript和HTML、CSS一起被稱為是Web開發(fā)的三大核心技術，當今所有瀏覽器都支持JavaScript，無需額外安裝第三方插件。而jQuery是一個輕量級的跨平臺JavaScript函數(shù)庫，它化簡了JavaScript代碼復雜度，其語法能用讓用戶更方便地選取和操作HTML元素、處理各類事件、實現(xiàn)JavaScript特效與動畫，并且能為不同類型的瀏覽器提供更便捷的API用于AJAX交互。五、教學基本內容：JavaScript概述JavaScript簡介JavaScript是一種輕量級的直譯式編程語言，基于ECMAScript標準（注:一種由ECMA國際組織通過ECMA-262標準化的腳本程序語言）。通常在HTML網(wǎng)頁中使用JavaScript為頁面增加動態(tài)效果和功能。JavaScript和HTML、CSS一起被稱為是Web開發(fā)的三大核心技術，目前JavaScript已經(jīng)廣泛應用于Web開發(fā)，市面上絕大多數(shù)網(wǎng)頁都使用了JavaScript代碼?？梢哉f當今所有瀏覽器都支持JavaScript，無需額外安裝第三方插件。JavaScript起源JavaScript最早是在1995年的時候由網(wǎng)景（Netscape）公司的BrendanEich用了十天時間開發(fā)出來的，用于當時的網(wǎng)景導航者（NetscapeNavigator）瀏覽器2.0版。最初這種腳本語言的官方名稱為LiveScript，后來應用于網(wǎng)景導航者瀏覽器2.0B3版的時候正式更名為JavaScript。更名的原因是因為當時網(wǎng)景公司與Sun公司開展了合作，網(wǎng)景公司的管理層希望在他們的瀏覽器中增加對于Java技術的支持。該名稱容易讓人誤以為該腳本語言是和Java語言有關，但實際上該語言的語法風格與Scheme更為接近。JavaScriptvsJava因為名稱的相近，JavaScript常被誤以為和Java有關，但事實上它們是無論從概念還是設計上都毫無關聯(lián)的兩種語言。JavaScript是Netscape公司的BrendanEich發(fā)明的一種輕量級語言，主要應用于網(wǎng)頁開發(fā)，無需事先編譯；而Java是由Sun公司的JamesGosling發(fā)明的一種面向對象程序語言，根據(jù)應用方向又可分為J2SE（Java2標準版）、J2ME（Java2微型版）和J2EE（Java2企業(yè)版）三個版本，需要先編譯再執(zhí)行。JavaScript的主旨是為非程序開發(fā)者快速上手使用的，而Java是更高級更復雜的一種面向專業(yè)程序開發(fā)者的語言，比JavaScript難度大、應用范圍更廣。JavaScript的特點1. 腳本語言JavaScript是一種直譯式的腳本語言，無需事先編譯，可以在程序運行的過程中逐行進行解釋使用。該語言適合非程序開發(fā)人員使用。2. 簡單性JavaScript具有非常簡單的語法，其腳本程序面向非程序開發(fā)人員。HTML前端開發(fā)者都有能力為網(wǎng)頁添加JavaScript片段。3. 弱類型JavaScript無需定義變量的類型，所有變量的聲明都可以用統(tǒng)一的類型關鍵詞表示。在運行過程中，JavaScript會根據(jù)變量的值判斷其實際類型。4. 跨平臺性JavaScript語言是一種Web程序開發(fā)語言，它只與瀏覽器支持情況有關，與操作系統(tǒng)的平臺類型無關。目前JavaScript可以在無需安裝第三方插件的情況下被大多數(shù)主流瀏覽器完全支持，因此JavaScript程序在編寫后可以在不同類型的操作系統(tǒng)中運行，適用于PC、筆記本電腦、平板電腦和手機等各類包含瀏覽器的設備。5. 大小寫敏感JavaScript語言是一種大小寫敏感的語言，例如字母a和A會被認為是不同的內容。同樣在使用函數(shù)時也必須嚴格遵守大小寫的要求使用正確的方法名稱。jQuery概述jQuery簡介jQuery這個名稱來源于JavaScript和Query（查詢）的組合，是一個輕量級的跨平臺JavaScript函數(shù)庫，擁有MIT軟件許可協(xié)議。目前主流瀏覽器基本上都支持jQuery。jQuery秉承“writeless，domore（寫的更少，做的更多）”的核心理念，其語法能用讓用戶更方便地選取和操作HTML元素、處理各類事件、實現(xiàn)JavaScript特效與動畫，并且能為不同類型的瀏覽器提供更便捷的API用于AJAX交互。jQuery也能讓開發(fā)者基于JavaScript函數(shù)庫開發(fā)新的插件。jQuery通用性和可擴展性相結合，它的出現(xiàn)將改變人們對JavaScript的使用方式。jQuery發(fā)展史jQuery最早是在2006年1月由一位美國的軟件工程師JohnResing在紐約BarCamp（注：一種國際研討會網(wǎng)絡，由參與者互相分享Web技術）上發(fā)布的，JohnResing既是jQuery的創(chuàng)造者，也是jQueryJavaScript函數(shù)庫的核心開發(fā)者。最初的jQuery1.0版正式發(fā)布于2006年4月26日，經(jīng)歷多次升級，直至2022年12月發(fā)布的jQuery3.6.3版為本書修訂時的最新版本。目前jQuery是由TimmyWillison所領導的開發(fā)團隊負責進行維護。目前jQuery仍然是網(wǎng)絡上使用范圍最廣泛的JavaScript函數(shù)庫。根據(jù)Builtwith（注：一款用于統(tǒng)計流行網(wǎng)站使用的構建技術和編程語言的工具）的最新統(tǒng)計數(shù)據(jù)得出結論，目前流量排名最高的百萬個網(wǎng)頁中超過70%都在使用jQuery，其中國內比較著名的網(wǎng)站有：CCTV、新浪、搜狗、愛奇藝、豆瓣、CSDN、bilibili、支付寶等。jQuery的特點1. 輕量級封裝網(wǎng)頁使用jQuery所需要引用的JS文件只有32kb左右，幾乎不會影響頁面的加載速度。2. 化簡JavaScriptjQuery的選擇器化簡了JavaScript查找DOM對象的代碼復雜度，基本只需要一行代碼就可以查找各種HTML元素或更改指定元素CSS樣式。3. 兼容CSS3兼容CSS3的選擇器語法規(guī)則，可以根據(jù)元素的樣式來快速查找HTML元素。4. 跨瀏覽器支持jQuery支持目前所有主瀏覽器，例如IE、Firefox、Safari、Opera、Chrome等。因此開發(fā)者不用擔心瀏覽器的兼容性問題。jQuery的版本比較目前jQuery共有三種版本，解釋如下：jQuery1.x版本：該版本是使用最為廣泛的jQuery版本，適用于絕大多數(shù)Web前端項目開發(fā)，兼容性較高。該版本未來不會再增加新的功能，官網(wǎng)只做BUG維護。其最終版為2016年5月發(fā)布的jQuery1.12.4版。jQuery2.x版本：jQuery2.x版本相對1.x而言實際上沒有新增功能，僅僅是在1.x的基礎上去除了對IE6-8的支持，降低了文件大小且提升了性能，因此使用人數(shù)相對較少。該版本未來同樣不會再增加新的功能，官網(wǎng)只做BUG維護。其最終版為2016年5月發(fā)布的jQuery2.2.4版。jQuery3.x版本：該版本是目前最新的jQuery版本，最近一次是2022年12月發(fā)布的jQuery3.6.3版。該版本支持IE9+、Opera最新版、以及其他主流瀏覽器的最新版及前一版。需要注意的是，如果需要兼容IE6-8、Opera12.1x或者Safari5.1等舊版本的瀏覽器，官方建議使用jQuery1.12.x。Web開發(fā)工具JavaScript和jQuery源代碼文件均為純文本內容，電腦操作系統(tǒng)中自帶的寫字板或記事本工具就可以打開和編輯源代碼內容。因此本書不對開發(fā)工具作特定要求，使用任意一款純文本編輯器均可以進行網(wǎng)頁內容的編寫。這里介紹幾款常用的網(wǎng)頁開發(fā)工具軟件：AdobeDreamweaver、SublimeText、NodePad++、EditPlus、VSCode以及WebStorm。AdobeDreamweaverAdobeDreamweaver是一款所見即所得的網(wǎng)頁編輯器，中文名稱為“夢想編織者”或“織夢”。該軟件最初的1.0版是1997年由美國Macromedia公司發(fā)布的，后來該公司于2005年被Adobe公司收購。Dreamweaver也是當時第一套針對專業(yè)Web前端工程師所設計的可視化網(wǎng)頁開發(fā)工具，整合了網(wǎng)頁開發(fā)與網(wǎng)站管理的功能。Dreamweaver支持HTML5/CSS3源代碼的編輯和預覽功能，最大的優(yōu)點是可視化性能帶來的直觀效果，開發(fā)界面可以分屏為代碼部分與預覽視圖，開發(fā)者修改代碼部分時預覽視圖會隨著修改內容實時變化。Dreamweaver也有它的弱點，由于不同瀏覽器存在兼容性問題，Dreamweaver的預覽視圖難以達到與所有瀏覽器完全一致的效果。如需考慮跨瀏覽器兼容問題，預覽畫面僅能作為輔助參考。SublimeTextSublimeText的界面布局非常有特色，它支持文件夾導航圖和代碼縮略圖效果。該軟件支持多種編程語言的語法高亮，也具有代碼自動完成提示功能。該軟件還具有自動恢復功能，如果在編程過程中意外退出，在下次啟動該軟件時文件會自動恢復關閉之前的編輯狀態(tài)。NodePad++NodePad++的名稱來源于Windows系列操作系統(tǒng)自帶的記事本NotePad，在此基礎上多了兩個加號，立刻帶了質的飛越。這是一款免費開源的純文本編輯器，具有完整中文化接口并支持UTF-8技術。由于它具有語法高亮顯示、代碼折疊等功能，因此也非常適合作為計算機程序的編輯器。EditPlusEditPlus是由韓國SangilKim（ES-Computing）公司發(fā)布的一款文字編輯器，支持HTML、CSS、JavaScript、PHP、Java等多種計算機程序的語法高亮顯示與代碼折疊功能。其中最具特色的是EditPlus具有自動完成功能，例如在CSS源文件中輸入字母b加上空格，就會自動生成border:1pxsolidred語句。開發(fā)者可以自行編輯快捷鍵所代表的代碼塊，然后在開發(fā)過程中使用快捷方式讓EditPlus自動完成指定代碼內容。VisualStudioCodeVisualStudioCode常被簡稱為VSCode，是微軟公司出品的一款免費開源的開發(fā)工具，支持Windows、MacOS以及Linux操作系統(tǒng)。該軟件具有語法高亮、代碼自動補全、查看定義等功能，也內置了Git版本控制系統(tǒng)和命令行工具。該軟件安裝后可以在其內置的擴展程序商店安裝擴展包來拓展軟件功能，例如Chinese漢化包插件、Beautify代碼格式化插件、AutoRenameTag自動補全HTML/XML頭尾標簽插件等，適合喜歡自己DIY配置工具的開發(fā)者。該軟件支持多種編程語言，例如JavaScript、TypeScript、HTML、CSS，也可以通過下載擴展包來支持Java、Python、Go等其他編程語言。WebStormWebStorm是JetBrains公司旗下的一款JavaScript開發(fā)工具，適合進行Web前端開發(fā)以及與JavaScript相關的程序編寫。該軟件直接支持代碼高亮、代碼折疊、代碼補全以及格式化等功能，無需安裝額外的插件。正常版本是付費軟件，但是該軟件對于教育教學行業(yè)非常友好，學生和教師均可使用學校郵箱去申請免費教育版許可證，該許可證有效期為每次1年，到期時如果用戶還在學校仍可免費續(xù)約。本章小結本章首先介紹了JavaScript基礎知識，包括JavaScript簡介、起源、JavaScript與Java的不同之處以及JavaScript的特點。其次，詳細介紹了jQuery背景知識，包括jQuery簡介、發(fā)展史和特點。最后，介紹了6款Web開發(fā)工具，分別是AdobeDreamwaver、SublimeText、NodePad++、EditPlus、VisualStudioCode以及WebStorm。六、課后習題1.什么是JavaScript？它有哪些特點？答：JavaScript是一種輕量級的直譯式編程語言，基于ECMAScript標準（注:一種由ECMA國際組織通過ECMA-262標準化的腳本程序語言）。通常在HTML網(wǎng)頁中使用JavaScript為頁面增加動態(tài)效果和功能。其特點是腳本語言、簡單性、弱類型、跨平臺性、大小寫敏感。2.JavaScript與另外哪兩個技術并稱為Web前端的三大核心技術？答：HTML和CSS。3.什么是jQuery？它有哪些特點？答：jQuery這個名稱來源于JavaScript和Query（查詢）的組合，是一個輕量級的跨平臺J