Ajax与三层架构实训教案
教 案
課程：????Ajax與三層架構 ???
單位：??????信息工程學院 ???
教師：????? XXX ????????
課程簡介
《Ajax與三層架構》是一門實用性強，知識面廣的課程，該課程的先修課程為《Java程序設計》、《Jsp WEB開發》。主要包含網頁設計概論，J2EE站點創建，網頁基本元素的插入，網頁布局技術，網頁高級操作和網頁設計綜合訓練。通過本課程學習，使學生能熟練運用J2EE中的文字、鏈接、列表、表格、表單、圖像、多媒體、框架元素標志及屬性設計出多窗口網頁、動態網頁；掌握使用MyEclipse10進行網站的導入、規劃、管理、發布的相關技術及網頁制作的操作技能；能獨立設計中小型WEB站點。最終通過掌握網頁設計的各種技能，培養學生綜合運用所學知識的能力和動手能力，真正能使用所學的知識進行網站建設。該課程以案例和項目驅動，采用集中式授課和練習。
章節內容：
- 了解JQuery入門?4學時
- 掌握JQuery高級API的使用?4學時
- 掌握層次選擇、迭代選擇器的使用 4學時
- 掌握JQuery的事件原理及其使用方法 4學時
- 異步調用及其應用 8學時
- 掌握Ajax組件動畫效果 8學時
- 在線商城綜合案例一?8學時
- 在線商城綜合案例二8學時
參考教材：
[1]王凱. MyEclipse 10網站設計教程.人民郵電出版社，2013.6
[2]牛國勇. MyEclipse 10白金手冊.清華大學出版社,2014.8
[3]鄧超賢. 網頁設計與制作.大連理工大學出版社，2011.8
授課班級：2016級軟件1班、2班
總學時48學時，其中理論24學時，實踐24學時
?
課程教學日歷
課程名稱?Ajax與三層架構 ??????院（系） ?信息工程學院 ??????
專業??計算機科學與技術????????年級??16級 ????????????
?
| 課程 學期 總學時 | 周 學 時 | 學 ? 分 | 考核 方式 | 采用 教材 情況 | 教材名稱 | 瘋狂Ajax講義 | ||||||||
| 主編（著） | 李剛 | |||||||||||||
| 出版社 名稱 | 中國工信出版社 | |||||||||||||
| 48 | 6 | 6 | 考查 | 出版時間 | 2017.1 | |||||||||
| 周 次 | 日 期 | 每周時 數分配 | 教學內容 | 備?注 | ? | |||||||||
| 講 授 | 實驗 (實踐) | 合計時數 | ? | ? | ? | |||||||||
| 1 | 9.10-9.14 | 2 | 2 | 4 | 第一章：JQuery入門 | ? | ? | |||||||
| 2 | 9.17-9.21 | 2 | 2 | 4 | 第二章：JQuery高級API 2.1 熟悉Jquery的基本$符號含義 2.2熟悉HBuilder工具使用 2.3掌握$(function(){}); | ? | ? | |||||||
| 3 | 9.25-9.28 | 2 | 2 | 4 | 第三章：?層次選擇器和迭代選擇器 3.1基本選擇器 3.2熟悉層次選擇器 3.3掌握迭代選擇器 | ? | ? | |||||||
| 4 | 10.1-10.5 | ? | ? | ? | ? | 國慶 | ? | |||||||
| 5 | 10.8-10.12 | 4 | 4 | 8 | 第四章：事件原理及其運用 4.1jQuery事件 4.2事件綁定 | ? | ? | |||||||
| 6 | 10.15-10.19 | 4 | 4 | 8 | 第五章：Ajax及動畫效果 5.1Ajax原理 5.2Ajax應用 5.3Ajax動畫 | ? | ? | |||||||
| 7 | 10.22-10.26 | 4 | 4 | 8 | 第六章：異步調用及插件使用 6.1異步調用案例 6.2插件使用 | ? | ? | |||||||
| 8 | 10.29-11.2 | 4 | 4 | 8 | 第七章：在線商城綜合案例一 7.1 在線商城案例剖徐 7.2 頁面框架講解 | ? | ? | |||||||
| 9 | 11.6-11.10 | 4 | 4 | 8 | 第八章：在線商城綜合案例二 8.1 jQuery函數在項目中的應用 82. jQuery事件、動畫等應用 | ? | ? | |||||||
?
?
?
說明：1.教學內容按每次授課內容填寫。
2.考核方式分考試與考查兩種。
3.任課教師在每學期開課以前根據教學大綱編寫課程教學日歷，一式三份，經教研室主任（負責人）審閱同意后，一份自存，一份交所在院（系部），一份交學生
教研室主任（負責人）簽名：
任課教師簽名：
?
鄭州工業應用技術學院教案
| 課時內容 | 第1章 了解JQuery入門 | 計劃學時 | 4 |
| 教學目標 | （1）熟悉Jquery框架開發環境的構建過程、開發環境的使用方法。 （2）熟悉Jquery框架基本運行流程和基本配置。 （3）掌握Action的開發和Result配置。 （4）理解攔截器的工作原理和意義，掌握攔截器的配置、自定義攔截的使用、了解系統默認攔截器。 （5）掌握Jquery?標簽庫的基本用法。 （6）了解Jquery?的類型轉換和對OGNL的支持。 （7）掌握Jquery?的驗證框架技術。 （8）了解Jquery?的國際化。 （9）掌握Jquery?的文件上傳和下載。 | ||
| 教學重點 | t??HTML基礎。 t??MyEclipse 2012的工作界面組成。 t??創建站點和管理站點的操作。 | ||
| 教學難點 | HTML常用標簽及其使用 如何正確規劃網站內容。 | ||
| 教學設計 | | ||
| 教學內容 | |||
| 課程導入：通過與學生問題式交流，引入該門課程。 介紹該課程的授課基本情況。 欣賞“貴美商城”、“e客在線”等網站作品，引入本章網頁設計概述的學習主要知識。 討論問題：1、為什么要首先建立站點？ ??????????2、一個網站最基本的功能有哪些？ 二、J2EE基礎（重點、難點） http://www.w3school.com.cn/html/ N" <標記>受標記影響的內容<標記> 【案例】標記屬性說明。 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE configuration PUBLIC "-//mybatis.org//DTD Config 3.0//E> <configuration> <!-- 加載屬性文件 --> <properties resource="config/db.properties"> <!--properties中還可以配置一些屬性名和屬性值 ?--> <!-- <property name="jdbc.driver" value=""/> --> </properties> <settings> <!--開啟延遲加載--> <setting name="lazyLoadingEnabled" value="true"/> <!--按需延遲加載--> <setting name="aggressiveLazyLoading" value="false"/> <!-- 開啟二級緩存 --> <setting name="cacheEnabled" value="true"/> </settings> <typeAliases> <package name="com.neuedu.pojo"/> </typeAliases> <mappers> <package name="com.neuedu.mapper"/> </mappers> </configuration> ?七、實訓——創建“快樂旅游”站點 本實訓的目標是為“人事系統”網站創建站點，包括站點中的各種文件和文件夾。要求首先規劃站點結構，然后創建站點以及其中的文件對象。 “貴美商城”站點除了應該具備商城的普遍特點之外，還應該突出“高效”一詞，這需要通過有效地設計和整合色彩、布局以及簡單輕松的文字等方面，才能達到效果。 ? 拓展知識 ???????????????? 課堂案例1——創建站點 ?????????????課堂案例2——管理站點 ???????上機實訓——創建“貴美商城”站點 | |||
| 小結 | 上完課以后在寫 | ||
| 思考及作業 | 想一想： 站點的作用是什么？站點有何意義？舉例日常瀏覽網頁時遇到的站點，并分析其分為幾大板塊？ 練一練： （1）查看HBuilder中“表單”插入欄包含的內容。 （2）在浮動面板組中將“資源”、“行為”和“組件”3個面板排列到同一個面板中（首先需要利用“窗口”菜單顯示出這些面板）。 （3）創建名為“wodewangzhan”的站點，將位置設置在D盤的“OK”文件夾中，然后通過編輯站點的方法將其重命名為“mynet”，最后刪除站點并取消操作。 （4）規劃并構思一個美食站點，創建一個導航草圖，其中必須包含“菜譜”和“食材”兩大板塊，要求整個站點結構能滿足一般的瀏覽和查詢美食資源的要求。 （5）在上一題的基礎上，啟動MyEclipse 2012，創建該美食站點并在其中添加相應的文件夾和文件。 | ||
| 教學后記 | ? ? ? ? ? | ||
| 課時內容 | 第2章 JQuery高級API | 計劃學時 | 4 |
| 教學目標 | （1）熟悉Jquery的基本$符號含義。 （2）熟悉HBuilder工具使用 （3）掌握$(function(){}); （4）理解攔截器的工作原理和意義，掌握攔截器的配置、自定義攔截的使用、了解系統默認攔截器。 | ||
| 教學重點 | t?$(function(){}); | ||
| 教學難點 | 常規API使用 | ||
| 教學設計 |
| ||
| 教學內容 | |||
| 課程導入：通過與學生問題式交流，引入該門課程。 2、當我們在教程中演示 jQuery 時，會將函數直接添加到 部分中。不過，把它們放到一個單獨的文件中會更好，就像這樣（通過 src 屬性來引用文件）： 二、J2EE基礎（重點、難點） http://www.w3school.com.cn/html/ N" 由于 jQuery 是為處理 HTML 事件而特別設計的，那么當您遵循以下原則時，您的代碼會更恰當且更易維護：? ???????????????? 課堂案例1——計算器????????????????????????????????????上機實訓——創建“個人計算器?” | |||
| 小結 | 上完課以后在寫 | ||
| 思考及作業 | 想一想： 直到現在，我們都是一次寫一條 jQuery 語句（一條接著另一條）。不過，有一種名為鏈接（chaining）的技術，允許我們在相同的元素上運行多條 jQuery 命令，一條接著另一條。練一練： （1）查看HBuilder中“表單”插入欄包含的內容。 （2）在浮動面板組中將“資源”、“行為”和“組件”3個面板排列到同一個面板中（首先需要利用“窗口”菜單顯示出這些面板）。 （3）創建名為“wodewangzhan”的站點，將位置設置在D盤的“OK”文件夾中，然后通過編輯站點的方法將其重命名為“mynet”，最后刪除站點并取消操作。 （4）規劃并構思一個美食站點，創建一個導航草圖，其中必須包含“菜譜”和“食材”兩大板塊，要求整個站點結構能滿足一般的瀏覽和查詢美食資源的要求。 （5）在上一題的基礎上，啟動MyEclipse 2012，創建該美食站點并在其中添加相應的文件夾和文件。 | ||
| 教學后記 | ? ? ? ? ? | ||
| 課時內容 | 第3章 層次選擇器和迭代選擇器 | 計劃學時 | 4 |
| 教學目標 | （1）基本選擇器 （2）熟悉層次選擇器 （3）掌握迭代選擇器 | ||
| 教學重點 | t??迭代選擇器。 ????層次選擇器 | ||
| 教學難點 | 迭代選擇器如何使用 | ||
| 教學設計 | ? | ||
| 教學內容 | |||
| 課程導入：通過與學生問題式交流，引入該門課程。 介紹該課程的授課基本情況。 欣賞“貴美商城”、“e客在線”等網站作品，引入本章網頁設計概述的學習主要知識。 討論問題：1、簡化方案是什么？?????????? 參考代碼：
<!DOCTYPE html><html><head><script?src="/jquery/jquery-1.11.1.min.js"></script><script?type="text/javascript"> $(document).ready(function(){ ??$(".ex .hide").click(function(){ ????$(this).parents(".ex").hide("slow"); ??}); });</script><style?type="text/css">?div.ex{background-color:#e5eecc;padding:7px;border:solid 1px #c3c3c3;}</style></head> <body> <h3>中國辦事處</h3><div?class="ex"><button?class="hide"?type="button">隱藏</button><p>聯系人：張先生<br?/>? 北三環中路 100 號<br?/> 北京</p></div> <h3>美國辦事處</h3><div?class="ex"><button?class="hide"?type="button">隱藏</button><p>聯系人：David<br?/>? 第五大街 200 號<br?/> 紐約</p></div>/body></html> 8、jQuery animate()? <!DOCTYPE html><html><head><script?src="/jquery/jquery-1.11.1.min.js"></script><script>? $(document).ready(function(){ ??$("button").click(function(){ ????var?div=$("div"); ????div.animate({height:'300px',opacity:'0.4'},"slow"); ????div.animate({width:'300px',opacity:'0.8'},"slow"); ????div.animate({height:'100px',opacity:'0.4'},"slow"); ????div.animate({width:'100px',opacity:'0.8'},"slow"); ??}); });</script>?</head> <body> <button>開始動畫</button><p>默認情況下，所有 HTML 元素的位置都是靜態的，并且無法移動。如需對位置進行操作，記得首先把元素的 CSS position 屬性設置為 relative、fixed 或 absolute。</p><div?style="background:#98bf21;height:100px;width:100px;position:absolute;"></div> </body></html>
? ? | |||
| 小結 | ? | ||
| 思考及作業 | 想一想： ? ? ? ? ? ? 練一練： | ||
| 教學后記 | ? ? ? ? ? | ||
| 課時內容 | 第4章 事件原理及其使用 | 計劃學時 | 4 |
| 教學目標 | ? 4.1jQuery事件 4.2事件綁定 | ||
| 教學重點 | t? ? | ||
| 教學難點 | ? | ||
| 教學設計 | ? | ||
| 教學內容 | |||
| 課程導入：通過與學生問題式交流，引入該門課程。 介紹該課程的授課基本情況。 ? ? ? ? ? ? ? ? ? ? | |||
| 小結 | 上完課以后在寫 | ||
| 思考及作業 | 想一想： ? ? ? ? ? ? 練一練： ? | ||
| 教學后記 | ? ? ? ? ? | ||
| 課時內容 | 第五章：Ajax及動畫效果 | 計劃學時 | 8 |
| 教學目標 | 5.1Ajax原理 5.2Ajax應用 5.3Ajax動畫 | ||
| 教學重點 | ? | ||
| 教學難點 | ? | ||
| 教學設計 | | ||
| 教學內容 | |||
| 課程導入：通過與學生問題式交流，引入該門課程。 介紹該課程的授課基本情況。 欣賞“貴美商城”、“e客在線”等網站作品，引入本章網頁設計概述的學習主要知識。 討論問題： ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? | |||
| 小結 | 上完課以后在寫 | ||
| 思考及作業 | 想一想： ? ? ? 練一練： | ||
| 教學后記 | ? ? ? ? ? | ||
| 課時內容 | 第六章：異步調用及插件使用 | 計劃學時 | 8 |
| 教學目標 | 6.1異步調用案例 6.2插件使用 | ||
| 教學重點 | t? | ||
| 教學難點 | ? | ||
| 教學設計 | ? ? ? ? ? ? ? ? ? ? ? | ||
| 教學內容 | |||
| 課程導入：通過與學生問題式交流，引入該門課程。 介紹該課程的授課基本情況。 ? 討論問題：1 ? | |||
| 小結 | 上完課以后在寫 | ||
| 思考及作業 | 想一想： ? ? ? ? ? 練一練： ? | ||
| 教學后記 | ? ? ? ? ? | ||
| 課時內容 | 第6章 在線商城綜合實訓一 | 計劃學時 | 8 |
| 教學目標 | 7.1 在線商城案例剖徐 7.2 頁面框架講解 | ||
| 教學重點 | t? | ||
| 教學難點 | ? | ||
| 教學設計 | ? ? ? ? ? ? ? ? ? ? ? | ||
| 教學內容 | |||
| 課程導入：通過與學生問題式交流，引入該門課程。 介紹該課程的授課基本情況。 ? 討論問題：1 ? | |||
| 小結 | 上完課以后在寫 | ||
| 思考及作業 | 想一想： ? ? ? ? ? 練一練： ? | ||
| 教學后記 | ? ? ? ? ? | ||
| 課時內容 | 第八章：在線商城綜合案例二 | 計劃學時 | 8 |
| 教學目標 | 8.1 jQuery函數在項目中的應用 82. jQuery事件、動畫等應用 | ||
| 教學重點 | t? | ||
| 教學難點 | ? | ||
| 教學設計 | ? ? ? ? ? ? ? ? ? ? ? | ||
| 教學內容 | |||
| 課程導入：通過與學生問題式交流，引入該門課程。 介紹該課程的授課基本情況。 ? 討論問題：1 ? | |||
| 小結 | 上完課以后在寫 | ||
| 思考及作業 | 想一想： ? ? ? ? ? 練一練： ? | ||
| 教學后記 | ? ? ? ? ? | ||
?
總結
以上是生活随笔為你收集整理的Ajax与三层架构实训教案的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 《软件建模技术》课程教学大纲
- 下一篇： mysql插入timeStamp类型数据