Web前端开发基础概述

1.3 Web前端开发
职业前景
1.4 Web前端开发工具
WebStore

WebStorm 是jetbrains公司旗下一款
JavaScript 开发工具。被广大中国JS开发者 誉为“Web前端开发神器”、“最强大的 HTML5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源，继承了
课程概述
课程总体安排
A
HTML、CSS基础（14课时）
B
JavaScript基础，JavaSctipt高级（14课时）
C
Jquery（12课时）
D
客户端请求技术(8课时）（xml,ajax,json,ws)
E
实战项目--网上订餐系统（12课时）
F
复习(4课时)
课程概述
课程考核
综合成绩
出勤（15%）
1.1 Web概述
1．HTTP协议 从网络协议的角度看，HTTP是对TCP/IP
协议集的扩展，作为浏览器与服务器间的通 信协议，处于TCP/IP层次中的应用层。
1.1 Web概述
2．Web服务的基本过程
客服机
1.连接到服务器 2.发送请求 3.发送响应 4.关闭连接
Web服务器
1.1.1 Web的发展
1.4 Web前端开发工具
webstorm安装后的一些设置技巧： 如何修改快键键： File -> Settings->Keymap，然后双击要修改 快捷的功能会有提示框出来，按提示操作 换成自己熟悉编辑器的快键键： File ->Settings->Keymap，支持像Visual Studio、Eclipse、NetBeans这样的主流IDE。
、jQuery、Ajax等技术，从而提高学生综合 Web前端（PC端）的应用开发技术的能力。 课程结束使学生能建立规范的Web前端开发意识 和工程化软件开发思想，接近或达到初级前端 工程师的能力
课程概述
知识目标
（1）了解web开发的发展历史以及特点以及最新的Web3.0。 （2）了解web前端开发以及常用的前端开发工具。 （3）掌握HTML编写规范和HTML标签； （4）理解XHTML基础； （5）掌握JavaScript编程基础。 （6）理解JavaScript的面向对象的编程基础。 （7）了解常用的JavaScript框架 （8）掌握jQuery的基本功能 （9）了解第三方JS插件的使用。 （10）了解WebService的原理和调用。 （11）理解HTTP请求。 （12）掌握AJAX技术。
1.3 Web新技术的应用
移动终端 桌面应用 互联网电视 跨平台的Web应用 网络游戏
1.3 Web前端开发
Web前端开发技术 Web前端技术包括三个主要的因素：HTML、
CSS、JavaScript。 随着时代的发展，前端开发技术的三要素也
演变成为现今的：HTML5，CSS3和JS框架。
1.1.2 Web特点及架构
1. Web的形式及特点
（1）易于导航的图形化Web
（2）与平台无关的Web
（3）分布式的Web
链接到
链接到
链接到
站点B
链接到
链接到
链接到
站点C
站点A
站点D
站点E
1.1.2 Web特点及架构
（4）交互式的动态Web
Web浏览器
HTTP请求
Web服务器
类似于本地SVN（快捷键：ALT+SHIFT+c）
1.4 Web前端开发工具
webstorm安装后的一些设置技巧： 如何更改主题（字体&配色）: File -> settings -> Editor -> colors&fonts -> scheme name. 如何让webstorm启动的时候不打开工程文件 File -> Settings->General去掉Reopen last project on startup.
IntelliJ IDEA强大的JS部分的功能。
1.4 Web前端开发工具
1.4 Web前端开发工具
不需要 (ctrl + s)手动保存 提供文件操作记录，vcs->Local History ->
Show History （快捷键：ALT+~ -〉7） webstorm提供一个本地文件修改历史记录，
webstorm安装后的一些设置技巧： 如何代码自动换行： File -> settings -> Editor “Use Soft Wraps in editor” 打上钩，代码就自动换行了 如何点击光标，显示在本行末尾： File -> Settings->Editor “Allow placement of caret after end of line”去掉勾就行了。
实习报告册（15%） 根据平时出勤情况和
课后作业综合评定。
每学期期末进行 一次考试，为理 论考试,本课程为 教考分离课程 ，考题从题库中 抽取。
1.1 Web概述
在Web网站上，不仅可以传递文字信息，还可以传递 图形、声音、一个图书馆，而每一个网站就 是这个图书馆中的一本书。
无论是web1.0还是web2.0，它们都是在窄带 互联网这样一个大环境下，基于内容与交互 的信息模式，只是web2.0在表现形式上比 web1.0丰富一些，加强了用户的参与度。
1. 2 Web新技术发展及应用
web3.0从应用上来讲，是主动推送信息，推 送的是自己感兴趣的关联信息。
web3.0从技术上来讲，应该是融合传感器来 产生信息，并和物品互动，如GPS或NFC或 kinect类， 应该是自动化、互联网、手机相 结合的。
1.1.2 Web特点及架构
1. 架构 （2）B/S架构 B/S（Browser/Server）结构即浏览器和
服务器结构。WEB浏览器是客户端最主要的 应用软件。
1.1.2 Web特点及架构
1. 架构 （3）C/S和B/S的区别 C/S是建立在局域网的基础之上，B/S是
建立在广域网的基础之上。 硬件环境不同 对安全要求不同 对程序架构不同
1.4 Web前端开发工具
webstorm安装后的一些设置技巧： 在开发js时发现，需要ctrl + return 才能选候 选项： File -> Setting -> Editor -> Code Completion -> Preselect the first suggestion: “Smart” 改为 “Always”
1.4 Web前端开发工具
webstorm安装后的一些设置技巧： javascript类库提示。 File -> settings -> Javascript -> Libraries -> 然后在列表里选择自己经常用到的javascript 类库，最后Download and Install就ok了.
1.4 Web前端开发工具
webstorm安装后的一些设置技巧： js提示比较迟缓 File -> Code Completion -> Autopopup in 下 1000改为0
总结
本讲简述了Web的基础知识，包括Web的发展、Web特 点及架构、Web3.0及新技术的应用情况；本章还介绍了 Web前端开发的相关知识，Web前端开发工程师的职业 要求；最后向读者推荐了8款Web前端开发工具，包括 CSS工具、Javascript工具、图像优化工具和开发及调试 工具。为学习后续的Web知识，进行Web设计、开发和 应用提供了基础的概念和思路。
1.2.2 Web新技术的应用
当前全球主流浏览器厂商微软、谷歌、苹果 、Mozilla等企业都对以HTML5为代表的新一 代Web技术的发展给予了全面支持。新一代 Web技术已应用于移动终端、桌面、电视等 多个平台，初步实现了跨平台的快速发展。
1.2.2 Web新技术的应用
移动终端 桌面应用 互联网电视 跨平台的Web应用 网络游戏
1.4 Web前端开发工具
webstorm安装后的一些设置技巧： 如何完美显示中文： File -> Settings->Appearance中勾选 Override default fonts by (not recommended)，设置Name:NSimSun， Size:12
1.4 Web前端开发工具
同年12月，CERN首次启动了万维网并成立 了全球第一个WWW网站info. cern. ch(至今 仍是CERN的官方网站)，
1.1.1 Web的发展
1991年万维网开始得到广泛应用。
在此之后，伯纳斯·李又相继制定了互联网 的URIs、HTTP、HTML等技术规范，并于 1994年10月，在美国麻省理工学院成立了非 盈利性互联网组织W3C，一直致力于互联网 技术的研究。
最早的网络构想可以追溯到遥远的1980年蒂 姆•伯纳斯-李构建的ENQUIRE项目。
1989年，伯纳斯·李在Enquire的基础上提出 了利用Hypertext(超文本)重新构造信息系统 的设想，并设计出供多人在网络中同时管理 信息的超文本文件系统。
1.1.1 Web的发展
1990年，他在当时的NeXTStep网络系统上 开发出了世界上第一个网络服务器(Web Server)Httpd和第一个客户端浏览编辑程序 World Wide Web(WWW)。
1.1.2 Web特点及架构
1. 架构
（3）C/S和B/S的区别

软件重用不同

系统维护不同

处理问题不同

用户接口不同

信息流不同
1. 2 Web新技术发展及应用
web1.0：网络-人（单向信息，只读） 如：新浪，搜狐，网易
web2.0：人-人（以网络为沟通渠道进行人与 人沟通）如：维基、博客
第1讲 Web前端开发概述
大纲
课程概述 Web概述 Web新技术发展及应用 Web前端开发 Web前端开发工具
课程概述
课程性质 是研究Web前端开发技术以及前后台交互
技术的课程。该课程是软件工程专业“Java软 件开发与设计”方向的一门专业方向必修课程 。
课程概述
课程目标 通过模拟软件开发过程，掌握HTML、CSS
网页
服务器端应用
DB 处理 结果
云
计算机
Internet
WWW服务器
1.1.2 Web特点及架构
1. 架构 （1）C/S架构 C/S（Client/Server）又称客户/服务器模
式。是大家熟知的软件系统体系结构，通过 将任务合理分配到Client端和Server端，降低 了系统的通讯开销，需要安装客户端才可进 行管理操作。