Download - Web开发基础
![Page 1: Web开发基础](https://reader033.vdocuments.pub/reader033/viewer/2022061111/545514a3af795974408b5116/html5/thumbnails/1.jpg)
Web 开发基础 ( 一 )蔡啸 2011/1/17
![Page 2: Web开发基础](https://reader033.vdocuments.pub/reader033/viewer/2022061111/545514a3af795974408b5116/html5/thumbnails/2.jpg)
提纲 Web 基础知识
http 协议 , 请求响应模型 浏览器端开发
html/css/dom javascript dojo
服务器端开发 python django
![Page 3: Web开发基础](https://reader033.vdocuments.pub/reader033/viewer/2022061111/545514a3af795974408b5116/html5/thumbnails/3.jpg)
Web 基础知识 五层网络协议
物理
层
数据
链路
层
网络
层
传输
层
应用
层(
HTTP
)
We build our apps on top of this.
![Page 4: Web开发基础](https://reader033.vdocuments.pub/reader033/viewer/2022061111/545514a3af795974408b5116/html5/thumbnails/4.jpg)
Web 基础知识 What is web app?
Software which is built upon Internet, and based on HTTP protocol
Famous web app? Gmail Google Maps Facebook Web QQ
![Page 5: Web开发基础](https://reader033.vdocuments.pub/reader033/viewer/2022061111/545514a3af795974408b5116/html5/thumbnails/5.jpg)
Web 基础知识 HTTP 请求响应模型
![Page 6: Web开发基础](https://reader033.vdocuments.pub/reader033/viewer/2022061111/545514a3af795974408b5116/html5/thumbnails/6.jpg)
Web 基础知识 HTTP 协议 (RFC2616, HTTP 1.1) 支持五种类型的方法:
GET POST PUT DELETE HEAD
![Page 7: Web开发基础](https://reader033.vdocuments.pub/reader033/viewer/2022061111/545514a3af795974408b5116/html5/thumbnails/7.jpg)
浏览器端开发 HTML(hypertext markup language)
对文档进行结构化描述的标记语言 历史:
1999 HTML 4.01 Now HTML 5 is approaching
![Page 8: Web开发基础](https://reader033.vdocuments.pub/reader033/viewer/2022061111/545514a3af795974408b5116/html5/thumbnails/8.jpg)
浏览器端开发• HTML5 新特性:
二维绘图 API 允许 web 应用程序将自身注册为某个协议或 MIME 类型
的 API 播放视屏和音频的 API 历史记录 API 跨文档的消息传递,使得文档可以互相通
信而不用考虑它们的来源域 支持拖放操作的 API 支持编辑操作的 API 新的网络 API 使用 javascript API 的键值对来实现客户
端的持久化存储,同时支持嵌入的 SQL 数据库 服务器推送
![Page 9: Web开发基础](https://reader033.vdocuments.pub/reader033/viewer/2022061111/545514a3af795974408b5116/html5/thumbnails/9.jpg)
浏览器端开发 DOM 模型
用于表示 html 生成的文档的结构 插入删除节点 修改节点属性(调节 css) 注册消息响应事件 问题:
主流浏览器的实现的差异性( DOM Level2)
![Page 10: Web开发基础](https://reader033.vdocuments.pub/reader033/viewer/2022061111/545514a3af795974408b5116/html5/thumbnails/10.jpg)
浏览器端开发 javascript
在设计上受一定的 c 影响,但仍有许多的差异 弱类型动态语言
变量定义 var s = ‘string’; var i = 1; var f = 1.00; var obj = {}; var array = [];
![Page 11: Web开发基础](https://reader033.vdocuments.pub/reader033/viewer/2022061111/545514a3af795974408b5116/html5/thumbnails/11.jpg)
浏览器端开发 javascript
闭包:funtion closureTest(){
var testArray = [1,2,3,4,5];function printArray(){
for (var i = 0; i < testArray.length; i++){
console.log(testArray[i]);}
}}
![Page 12: Web开发基础](https://reader033.vdocuments.pub/reader033/viewer/2022061111/545514a3af795974408b5116/html5/thumbnails/12.jpg)
浏览器端开发 web 开发的问题
不同浏览器实现的差异性 标准的 API 过于底层 javascript 缺乏良好的 OO 支持
于是: javascript 框架应用而生 著名的 javascript 框架 :
jquery, dojo, mootools, YUI,etc
![Page 13: Web开发基础](https://reader033.vdocuments.pub/reader033/viewer/2022061111/545514a3af795974408b5116/html5/thumbnails/13.jpg)
浏览器端开发 Dojo 是一个 web 开发框架,它对浏览器
实现差异进行了屏蔽,提供了一个强壮的、易用的高抽象层次的访问接口。
它由三个部分组成 : dojo: dojo 的核心库,用于实现最为基础和重
要的客户端编程 , 比如对 dom 对象的操作, ajax 通讯等。
dijit: js 的 ui 库, dojox: 实验性的 js 功能,比如制图
![Page 14: Web开发基础](https://reader033.vdocuments.pub/reader033/viewer/2022061111/545514a3af795974408b5116/html5/thumbnails/14.jpg)
浏览器端开发 dojo.query: 查找符合指定条件的 dom 元
素 pure js
dojo
![Page 15: Web开发基础](https://reader033.vdocuments.pub/reader033/viewer/2022061111/545514a3af795974408b5116/html5/thumbnails/15.jpg)
浏览器端开发 dojo.xhr 用于向服务器端发送 AJAX 请求
dojo pure js
![Page 16: Web开发基础](https://reader033.vdocuments.pub/reader033/viewer/2022061111/545514a3af795974408b5116/html5/thumbnails/16.jpg)
浏览器端开发 dijit 控件:
两种使用方式: 标记语言式声明 脚本语言动态生成
![Page 17: Web开发基础](https://reader033.vdocuments.pub/reader033/viewer/2022061111/545514a3af795974408b5116/html5/thumbnails/17.jpg)
服务器端开发 常见的服务器端开发解决方案
ASP.NET JAVA EE(struts, spring) Coldfusion Python with Django Ruby on Rails PHP(Zend)
![Page 18: Web开发基础](https://reader033.vdocuments.pub/reader033/viewer/2022061111/545514a3af795974408b5116/html5/thumbnails/18.jpg)
服务器端开发 Django
诞生于 2005 , 它是基于 python 的 web 开发框架。
特性: ORM admin 管理界面和以及可以给予其扩展的能力 模板语言 web 开发工具集,可以提高管理配置的生产率
![Page 19: Web开发基础](https://reader033.vdocuments.pub/reader033/viewer/2022061111/545514a3af795974408b5116/html5/thumbnails/19.jpg)
服务器端开发 安装
创建项目
wget http://www.djangoproject.com/download/1.2.3/tarball/tar xzvf Django-1.2.3.tar.gzcd Django-1.2.3sudo python setup.py install
django-admin.py startproject $projectname./manage.py runserver
![Page 20: Web开发基础](https://reader033.vdocuments.pub/reader033/viewer/2022061111/545514a3af795974408b5116/html5/thumbnails/20.jpg)
服务器端开发 一个 django 新项目的文件目录结构:
创建 apppython manage.py start project
![Page 21: Web开发基础](https://reader033.vdocuments.pub/reader033/viewer/2022061111/545514a3af795974408b5116/html5/thumbnails/21.jpg)
服务器端开发 定义 url映射 修改 $home/urls.py
和 $home/app_demo/urls.py
![Page 22: Web开发基础](https://reader033.vdocuments.pub/reader033/viewer/2022061111/545514a3af795974408b5116/html5/thumbnails/22.jpg)
服务器端开发 定义 view函数
启动 server
![Page 23: Web开发基础](https://reader033.vdocuments.pub/reader033/viewer/2022061111/545514a3af795974408b5116/html5/thumbnails/23.jpg)
服务器端开发 To be continued…
ORM 模型 模板系统 部署 请求响应模型
![Page 24: Web开发基础](https://reader033.vdocuments.pub/reader033/viewer/2022061111/545514a3af795974408b5116/html5/thumbnails/24.jpg)
参考资料 Web 标准
HTTP 1.1 标准 RFC2616 HTML 4.1 标准 DOM Level2 标准 CSS 2 标准
JavaScript : JavaScript: The Good Parts by Douglas
Crockford JavaScript: The Definitive Guide by David
Flanagan
![Page 25: Web开发基础](https://reader033.vdocuments.pub/reader033/viewer/2022061111/545514a3af795974408b5116/html5/thumbnails/25.jpg)
参考资料 dojo :
http://dojotoolkit.org/api/ dojo官方文档,目前最新的版本已经比较详尽了
http://dojocampus.org/explorer/ dojo campus 有很多不错的示例代码
sitepen 网站 Dojo: The Definitive Guide, Matthew A.
Russell
![Page 26: Web开发基础](https://reader033.vdocuments.pub/reader033/viewer/2022061111/545514a3af795974408b5116/html5/thumbnails/26.jpg)
参考资料 Python
Dive Into Python, Mark Pilgrim Expert Python Programming: Best
practices for designing, coding, and distributing your Python software by Tarek Ziadé
http://docs.python.org python官方文档 http://stackoverflow.com/questions/tagg
ed/python 活跃的 python社区
![Page 27: Web开发基础](https://reader033.vdocuments.pub/reader033/viewer/2022061111/545514a3af795974408b5116/html5/thumbnails/27.jpg)
参考资料 Django
http://docs.djangoproject.com/en/1.2/ Django Step By Step, by limodou , http://stackoverflow.com/questions/
tagged/django Others:
What should a developer know before building a public web site