高校JavaScript程序設(shè)計(jì)課程體系建設(shè)探究

范伊紅+葉傳奇

摘要：隨著互聯(lián)網(wǎng)技術(shù)的高速發(fā)展，Web技術(shù)被日益廣泛的使用，以JavaScript技術(shù)為核心的客戶端開發(fā)技術(shù)迅速發(fā)展。高校應(yīng)以崗位需求為導(dǎo)向，加強(qiáng)JavaScript程序設(shè)計(jì)課程體系建設(shè)探究。該文介紹了JavaScript技術(shù)的主要應(yīng)用領(lǐng)域、分析了目前高校JavaScript課程設(shè)置現(xiàn)狀，提出了我校JavaS cript課程體系的建設(shè)框架。

關(guān)鍵詞：JavaScript；jQuery；教學(xué)；改革

中圖分類號(hào)：G642 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1009-3044（2016）15-0143-02

Abstract： With the rapid development of Internet technology， Web technology has been widely used， with JavaScript technology as the core client development technology rapid development. University should take the post demand as the guidance， strengthen the JavaScript programming curriculum system construction research. This paper introduces the main application areas of JavaScript technology， analyzes the current status of the JavaScript curriculum in Colleges and universities， and puts forward the framework of the construction of javaScrip curriculum system in our university.

Key words： JavaScript；jQuery；Teaching； reform

1引言

隨著互聯(lián)網(wǎng)技術(shù)的高速發(fā)展，Web技術(shù)被日益廣泛的使用，Web開發(fā)技術(shù)可以被分為客戶端技術(shù)和服務(wù)端技術(shù)兩大類。Web客戶端技術(shù)主要包括： HTML語言、Java Applets、JavaScript、CSS、DHTML、插件技術(shù)以及VRML技術(shù)，其中JavaScript是前端技術(shù)的核心語言，特別是近年來隨著jQuery、Node.js和HTML5等新技術(shù)的廣泛應(yīng)用，JavaScript的重要性逐步增加，JavaScript已經(jīng)成為世界上最流行的編程語言之一。本文主要討論的JavaScript技術(shù)的主要應(yīng)用領(lǐng)域、高校JavaScript課程設(shè)置現(xiàn)狀以及我校JavaScript課程體系的建設(shè)。

JavaScript起源于Netscape公司的LiveScript語言，這是一種基于對(duì)象和事件驅(qū)動(dòng)的客戶端腳本語言，早些年，JavaScript由于其復(fù)雜的文檔對(duì)象模型（DOM）、糟糕的實(shí)現(xiàn)和調(diào)試工具、不兼容的瀏覽器實(shí)現(xiàn)而不受開發(fā)者的重視。近年來隨著技術(shù)的發(fā)展，JavaScript變得越來越的強(qiáng)大、完善，JavaS cript性質(zhì)和地位發(fā)生了天翻地覆的變化，如今JavaScript已經(jīng)變成了Web開發(fā)必備的語言。

2 JavaScript技術(shù)應(yīng)用領(lǐng)域

2.1 網(wǎng)站開發(fā)

2.1.1 網(wǎng)站前端開發(fā)

（1）原生應(yīng)用

原生應(yīng)用是指直接使用 JavaScript 語言進(jìn)行程序的編寫，常用來實(shí)現(xiàn)前端邏輯，比如檢查用戶輸入，向用戶提示信息，顯示浮動(dòng)圖片，變幻字體大小顏色，彈出廣告、豐富鼠標(biāo)效果、動(dòng)態(tài)菜單、目錄樹、選項(xiàng)卡等。原生應(yīng)用非常普遍，這也是最輕量級(jí)的方式，但是編寫起來也相對(duì)復(fù)雜，尤其是將瀏覽器兼容性等問題考慮在內(nèi)的情況下，開發(fā)人員需要關(guān)注的內(nèi)容非常之多，這需要開發(fā)人員具備很高的素質(zhì)。[2]

（2）JavaScript庫應(yīng)用

為了簡(jiǎn)化JavaScript的開發(fā)，出現(xiàn)了許多JavaScript程序庫，JavaScript程序庫封裝了很多預(yù)定義的對(duì)象和函數(shù)，能幫助使用者輕松地建立有高難度交互的Web2.0特性的富客戶端頁面，并且兼容各大瀏覽器。目前使用較多的JavaScript程序庫有：JQuery、Prototype、Dojo 、YUI、Ext JS、MooTools。很多企業(yè)也封裝自己的JavaScript程序庫。

（3）前端框架應(yīng)用

框架最大的優(yōu)勢(shì)就是簡(jiǎn)單易用，即使只掌握少量的web知識(shí)，也可以毫無障礙的使用它們。一個(gè)前端開發(fā)框架其實(shí)就是一系列產(chǎn)品化的HTML/CSS/JavaScript控件庫的集合，可以在設(shè)計(jì)中使用它們。利用框架可以很快創(chuàng)建響應(yīng)式且符合標(biāo)準(zhǔn)的網(wǎng)站，而且簡(jiǎn)單并具有一致性。

近幾年不論是桌面瀏覽器端還是移動(dòng)端都涌現(xiàn)出很多優(yōu)秀的框架，比如：Bootstrap、jQuery UI、jQuery Mobile、Sencha ExtJS、Sencha Touch、Sencha GXT、Dojo、Dojo Mobile、Mootools、Foundation、YUI、Kissy、QWrap 等，利用這些技術(shù)可以更加快速的建立圖形用戶界面。

2.1.2 網(wǎng)站后端開發(fā)

Node.js是一個(gè)后端的Javascript運(yùn)行環(huán)境（支持的系統(tǒng)包括Lnux、Windows、Mac），這意味著程序員可以編寫系統(tǒng)級(jí)或者服務(wù)器端的Javascript代碼，交給Node.js來解釋執(zhí)行。

node.js 對(duì) Google V8 引擎進(jìn)行了封裝，使用事件驅(qū)動(dòng)，非阻塞 I/O 模型而得以輕量和高效，非常適合在分布式設(shè)備上運(yùn)行的數(shù)據(jù)密集型的實(shí)時(shí)應(yīng)用。

2.2 移動(dòng)App開發(fā)

2.2.1 Web app

Web App就是運(yùn)行在網(wǎng)絡(luò)和標(biāo)準(zhǔn)瀏覽器上的基于網(wǎng)頁技術(shù)開發(fā)實(shí)現(xiàn)特定功能的應(yīng)用。移動(dòng)端Web App和WAP最直接的區(qū)別就是功能層面。WAP更側(cè)重使用網(wǎng)頁技術(shù)在移動(dòng)端做展示，包括文字、媒體文件等。而Web App更側(cè)重“功能”，是使用網(wǎng)頁技術(shù)實(shí)現(xiàn)的App。

Web App客戶端使用W3C標(biāo)準(zhǔn)的HTML或HTML5、CSS3、JavaScript開發(fā)，服務(wù)端采用JAVA、PHP或ASP技術(shù)。 Web App可以實(shí)現(xiàn)很多原本原生Native App才可以實(shí)現(xiàn)的功能，比如LBS的功能、本地文件和數(shù)據(jù)存儲(chǔ)、音視頻播放的功能，甚至調(diào)用照相機(jī)和結(jié)合GPU的硬件加速功能。Web App能夠輕松實(shí)現(xiàn)跨平臺(tái)，無需用戶下載，并且和傳統(tǒng)網(wǎng)站一樣可以動(dòng)態(tài)升級(jí)。Web App有App的特性，但是更有Web的特性。Web App可以像傳統(tǒng)互聯(lián)網(wǎng)網(wǎng)頁那樣相互鏈接，從一個(gè)Web App直接跳轉(zhuǎn)到另外一個(gè)Web App。這無論是從用戶的使用體驗(yàn)層面還是從應(yīng)用之間的數(shù)據(jù)傳輸來看都是非常不錯(cuò)的選擇。

2.4 混合式移動(dòng)（Hybrid App）開發(fā)

混合應(yīng)用程序是一種Web應(yīng)用程序，主要使用HTML5和JavaScript構(gòu)建而成，然后封裝在細(xì)薄的原生容器里面，可通過容器來訪問原生平臺(tái)功能。由于JavaScript的跨平臺(tái)特性，使得它在移動(dòng)互聯(lián)網(wǎng)時(shí)代將有更大的作為。

Hybrid App的概念2010被提出。這種兼具原生App（Native App）和Web App的優(yōu)勢(shì)又能將彼此的缺陷最小化的移動(dòng)應(yīng)用開發(fā)模式成了一種全新的選擇。國內(nèi)外知名的Hybrid App移動(dòng)應(yīng)用開發(fā)框架有PhoneGap、Appmobi、APICloud、WeX5以及AppCan等。

2.5 插件開發(fā)

插件是可獨(dú)立完成某個(gè)或一系列功能的模塊.通常插件由宿主程序加載，不能獨(dú)立運(yùn)行。由于JavaScript 具有跨平臺(tái)的特點(diǎn)，因此所有主流平臺(tái)都可以使用 javaScript或者jQuery 進(jìn)行插件開發(fā)。目前有非常多的js/jQuery插件，上網(wǎng)查找相關(guān)的JS插件，以實(shí)現(xiàn)頁面需要的某種效果。

2.6 其他應(yīng)用

隨著 HTML5 的出現(xiàn)，JavaScript 在更多方面有突出表現(xiàn)，例如利用主流HTML5游戲框架：Construct2、ImactJS、LimeJS、GameMaker、CreateJS、lycheeJS、Crafty、three.js、melonJS、Turbulenz、Quintus、Cocos2d-html5等，可以讓用戶在短時(shí)間內(nèi)快速開發(fā)出一款可運(yùn)行于所有平臺(tái)（Windows、Mac、Linux、Android、iOS等）的高質(zhì)量和硬件加速的2D、3D游戲。

HTML5還有更多API可以幫助開發(fā)者創(chuàng)建應(yīng)用，這些API可以使程序訪問諸如本地文件，攝像頭，SOCKET通信服務(wù)，以及硬件動(dòng)畫加速等。

3 JavaScript課程現(xiàn)狀分析

目前大多數(shù)高校本科生培養(yǎng)方案中，與客戶端技術(shù)相關(guān)的課程只有網(wǎng)絡(luò)設(shè)計(jì)與制作、JavaScript程序設(shè)計(jì)兩門課，課程主要包括html、css、JavaScript三大部分，通常在1-2學(xué)期完成。

但是以JavaScript技術(shù)為核心的客戶端開發(fā)技術(shù)應(yīng)用如此廣泛，相關(guān)技術(shù)如此之多，筆者認(rèn)為應(yīng)該加強(qiáng)客戶端相關(guān)課程的建設(shè)。

另外客戶端技術(shù)的主要特點(diǎn)是語法簡(jiǎn)單，易學(xué)習(xí)，但由于內(nèi)容多、雜，系統(tǒng)性不強(qiáng)，應(yīng)用靈活，學(xué)生要想很好的掌握有一定難度。

筆者認(rèn)為應(yīng)該加強(qiáng)相關(guān)課程的實(shí)驗(yàn)項(xiàng)目設(shè)計(jì)，指導(dǎo)學(xué)生完成一定數(shù)量的綜合性實(shí)驗(yàn)，從而真正的掌握相關(guān)課程的內(nèi)容。

4我校JavaScript程序設(shè)計(jì)課程體系建設(shè)

為了適應(yīng)日益發(fā)展的應(yīng)用需求，我校JavaScript相關(guān)課程共分為《網(wǎng)頁設(shè)計(jì)與制作》、《JavaScript程序設(shè)計(jì)》《jQuery程序設(shè)計(jì)》《HTML5編程基礎(chǔ)》《移動(dòng)技術(shù)開發(fā)》等5門課程。分別在本科第2、3、4、5、6學(xué)期完成。并且在充分調(diào)研的基礎(chǔ)上設(shè)計(jì)了每門課程的教學(xué)內(nèi)容，精心組織課堂案例、設(shè)計(jì)了每門課程的項(xiàng)目實(shí)戰(zhàn)案例。

4.1網(wǎng)頁設(shè)計(jì)與制作課程

（1）課程目的

網(wǎng)頁是提供信息展示的一種方式。學(xué)生通過本課程的學(xué)習(xí)，能掌握網(wǎng)頁設(shè)計(jì)必備的基礎(chǔ)知識(shí)、培養(yǎng)學(xué)生具有制作一般商業(yè)網(wǎng)站的能力，同時(shí)讓學(xué)生了解網(wǎng)頁網(wǎng)站的技術(shù)發(fā)展趨勢(shì)、最新的技術(shù)動(dòng)態(tài)和網(wǎng)頁、網(wǎng)站制作軟件平臺(tái)。

（2）課程基本要求

通過該課程的學(xué)習(xí)，學(xué)生應(yīng)掌握網(wǎng)頁設(shè)計(jì)與制作的基礎(chǔ)知識(shí)、基本理論和基本技能，掌握網(wǎng)頁制作需要的HTML語言、網(wǎng)頁制作流程、CSS基礎(chǔ)知識(shí)、CSS+DIV布局網(wǎng)頁等知識(shí)以及用Dreamweaver工具軟件制作網(wǎng)頁的基本方法和把Photoshop制作的網(wǎng)頁效果圖切圖輸出的基本方法。

（3）學(xué)時(shí)分配

4.2JavaScript程序設(shè)計(jì)課程

（1）課程目的

通過學(xué)習(xí)能夠直接使用 JavaScript 語言進(jìn)行程序的編寫，實(shí)現(xiàn)常用前端邏輯。能夠根據(jù)應(yīng)用開發(fā)對(duì)應(yīng)的客戶端代碼，從而為應(yīng)用項(xiàng)目的開發(fā)打下必要的基礎(chǔ)。

（2）課程基本要求

通過該課程的學(xué)習(xí)，掌握J(rèn)avaScript的基本語法、程序控制語句、常用對(duì)象、事件模型的原理、XMLHttpRequest對(duì)象的操作方法；掌握使用JavaScript技術(shù)控制網(wǎng)頁的基本方法。

（3）學(xué)時(shí)分配

4.3 jQuery程序設(shè)計(jì)課程

（1）課程目的

通過課程的學(xué)習(xí)使學(xué)生掌握jQuery專業(yè)理論知識(shí)和實(shí)際操作技能，為從事基于WEB技術(shù)的電子商務(wù)及網(wǎng)站開發(fā)、維護(hù)工作，參與開發(fā)環(huán)境的設(shè)計(jì)和搭建，承擔(dān)系統(tǒng)設(shè)計(jì)、程序設(shè)計(jì)和開發(fā)工作奠定良好的專業(yè)基礎(chǔ)。

（2）課程基本要求

掌握jQuery選擇器、DOM操作、事件和動(dòng)畫、Ajax的應(yīng)用、jQuery插件的使用和寫法、jQuery Mobile的使用。該門課程是一門動(dòng)手實(shí)踐能力要求高、與實(shí)際聯(lián)系緊密的技能課程，以項(xiàng)目教學(xué)為主線，學(xué)生在掌握jQuery程序設(shè)計(jì)的同時(shí)，養(yǎng)成良好的編程習(xí)慣和編碼風(fēng)格。

（3）學(xué)時(shí)分配

4.4 HTML5編程基礎(chǔ)課程

（1）課程作用與目的

通過本課程的學(xué)習(xí)，使學(xué)生能夠迅速理解和掌握新一代Web標(biāo)準(zhǔn)HTML5所涵蓋的核心技術(shù)，學(xué)生在學(xué)習(xí)本課程時(shí)可以充分了解和體驗(yàn)HTML5的強(qiáng)大功能在軟件項(xiàng)目開發(fā)實(shí)踐中應(yīng)用。

（2）課程基本要求

熟練掌握HTML5中的Canvas繪圖、Geolocation地理位置、Communication、Websocket、Forms、Webworkers、Storage等API接口的使用。

（3）學(xué)時(shí)分配

4.5 移動(dòng)技術(shù)開發(fā)課程

（1）課程作用與目的

掌握一種 Hybrid App開發(fā)技術(shù)基礎(chǔ)知識(shí)，了解Hybrid App開發(fā)在商業(yè)領(lǐng)域中的廣泛應(yīng)用，培養(yǎng)學(xué)生分析問題、解決問題的能力，提高學(xué)生在實(shí)際開發(fā)工作中的適應(yīng)能力，為學(xué)生學(xué)習(xí)專業(yè)知識(shí)和參加工程實(shí)踐打下必要的基礎(chǔ)。

（2）課程基本要求

利用AppCan的技術(shù)開發(fā)移動(dòng)App項(xiàng)目。掌握AppCan Hybrid開發(fā)環(huán)境搭建、AppCan程序設(shè)計(jì)基礎(chǔ)、AppCan多窗口框架、界面布局、常用控件、網(wǎng)絡(luò)通訊、數(shù)據(jù)存儲(chǔ)、空間擴(kuò)展等技術(shù)。

（3）學(xué)時(shí)分配

5結(jié)束語

以JavaScript技術(shù)為核心的客戶端開發(fā)技術(shù)涉及知識(shí)點(diǎn)多、靈活多變、實(shí)踐性強(qiáng)。要不斷地探索各個(gè)課程之間的聯(lián)系，研究每門課程的教學(xué)內(nèi)容與實(shí)戰(zhàn)項(xiàng)目，關(guān)注技術(shù)的發(fā)展前沿，及時(shí)更新教學(xué)內(nèi)容，培養(yǎng)適應(yīng)時(shí)代發(fā)展需求的計(jì)算機(jī)軟件相關(guān)人才。

參考文獻(xiàn)：

[1] 范開濤，甕南.“JavaScript Web 開發(fā)與應(yīng)用”課程網(wǎng)絡(luò)教學(xué)研究與探索. 電腦知識(shí)與技術(shù)[J].2014，10（16） ：3832-3836.

[2] 榮艷冬.以崗位需求為導(dǎo)向的 JavaScript 課程構(gòu)建.軟件[J].2015，36（6）：18-20.

[3] 單東林，張曉菲，魏然..鋒利的jQuery[M].人民郵電出版社，2009.

[4] http：//www.appcan.cn/ 網(wǎng)站技術(shù)文檔.