Web前端开发技术概述

---

---

Hi，我是EverdayForCode。你，今天学习了吗！

学习主要内容

• HTML5
• CSS
• JavaScript
• JQuery
• 手机/PC网页布局
• 前端交互/动画
• AJAX

概述

Web应用程序设计语言的产生与发展

C/S架构应用程序

• Client/Server：所有的显示和业务逻辑全部在客户端（胖客户端） ，服务端提供数据，典型的两层架构。
  

B/S架构应用程序

• Browse/Server：浏览器负责网页显示（瘦客户端），Web服务器负责业务逻辑，数据放在数据库服务器，典型的三层/多层架构。
  

Web应用程序架构

Web应用程序的架构即B/S架构，请求响应机制（浏览器请求，服务器响应）

浏览器

• 向Web服务器提交http请求(post/get)—Request
  接收Web服务器的http响应，解释HTML并显示网页
  IE核心浏览器(IE、遨游、360、腾讯TT等)，非IE核心浏览器(Firefox、Chrome、Safari等)
  Web服务器
• 接收浏览器提交过来的http请求
  执行响应的服务端代码(java程序片/servlet等)，将执行结果返回给浏览器—Response
  Java EE(Tomcat)、PHP(Apache)、ASP.net(IIS)等

数据库服务器

• 提供数据的结构化存储和管理机制
  关系数据库(MySQL、SQLServer、Oracle等)，非关系数据库(Redis、HBase、MangoDB等)

混合架构

• 使用Client（单独开发的客户端，而不是通用的浏览器）替代B/S程序中的浏览器，如：使用Java桌面程序向Web服务器发送http请求
  Java SE、Android App……
• Web服务器响应请求，并以字符方式返回格式化的数据
  XML、JSON，对象的字符串表达方式，可用于对象的存储、传输等
• Client解析XML/JSON数据将其显示
  JSON的序列化/反序列化

前端开发

• Web应用程序中，所有的程序逻辑都在Web服务器中，网页的交互功能极其有限，一般模式都是：点击链接，跳转到另一个网页。
  HTML中也可以增加程序逻辑，提升用户体验
• HTML中也可以增加程序逻辑，提升用户体验
  浏览器中的插件：Flash、SilverLight（目前逐渐被HTML5+JavaScript淘汰）
  HTML中的程序：JavaScript
  JavaScript在HTML中执行：
  1、可控制HTML中的所有的标记、内容
  2、控制浏览器的动作
  3、提交异步http请求（同步/异步）

网站/Web项目开发工作流程

前端开发的工作内容

• 向上与美工结合
• 向下与后端开发（JavaEE/PHP/ASP.NET等）结合

1. 实现HTML网页布局/动画/交互逻辑
2. 通过Ajax (异步HTTP请求)获取后端接口数据
3. 将数据以网页的方式呈现

写在后面：EverdayForCode学习过一些基础课程，比如：数据结构、离散数学、计算机网络原理…可能由于是课堂教学，EverdayForCode就没有认真的学习，完全是应付考试。可能就是“书到用时方恨少”的感觉。同样Web前端开发也是一门课程，但是EverdayForCode不想再应付考试了，其实博文上面的内容课堂PPT上面都有，我想等这门课结束时我应该不会保留PPT也不回再去阅读PPT，把它写做博文或许是正确的。加油，一切都不是太晚。