Java Web基础教程 （三）客户端开发

前言

web技术是客户端与服务端交互的技术，所以客户端的开发知识也是在Java web学习过程中必不可少的部分。不过呢，客户端技术涉及到的知识点非常的多，我需要在短短的一篇教程里来给大家讲明白是不太科学的。所以在这我主要想记录下来我对这四块技术的学习过程中的一些心得来与大家分享。并且也会留下学习资料，希望我和大家一起去探索学习。

客户端开发工具

工欲善其事，必先利其器。想要提升开发效率，搭配一套合适的开发环境是再重要不过的事情了。现在几乎所有的主流开发工具都都支持Web前端技术。比如MyEclipse、IntelliJ IDEA、Visual Studio 2010等。但是前端开发工作最核心也是最主要用到的就是浏览器和文本编辑器了。

浏览器推荐：Chrome、FireFox
文本编辑器推荐：Sublime、Atom

HTML：框架

HTML的全称为Hypertext Markup Language，中文的意思是超文本标签语言，是一种制作超文本文档的简单标签语言，也是用于制作网页的内容。

1. HTML基本构成

HTML文档的基本结构

简要说明

1. 标签用来标识html文档的开始与结束
2. 标签用来标识html文档的头部部分，在这个标签中可以加入标签来定义文档的标题，标签可以用来添加javascript代码，标签可以用来给html文档添加样式
3. 标签来定义文档的主体部分，在这个标签里面主要用来描述浏览器中显示出来的内容。

更多详细教程：菜鸟教程 HTML

Javascript：行为

JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。

更多详细教程：菜鸟教程 JavaScript

DOM操作

HTML DOM (文档对象模型)
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

HTML DOM 模型被构造为对象的树：

更多详细教程： 菜鸟教程 DOM

通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。

• JavaScript 能够改变页面中的所有 HTML 元素

• JavaScript 能够改变页面中的所有 HTML 属性
• JavaScript 能够改变页面中的所有 CSS 样式
• JavaScript 能够对页面中的所有事件做出反应

CSS：样式

什么是 CSS?

• CSS 指层叠样式表 (Cascading Style Sheets)
• 样式定义如何显示 HTML 元素
• 样式通常存储在样式表中
• 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
• 外部样式表可以极大提高工作效率
• 外部样式表通常存储在 CSS 文件中
• 多个样式定义可层叠为一

样式解决了一个很大的问题

HTML 标签原本被设计为用于定义文档内容，如下实例：

这是一个标题

这是一个段落.

样式表定义如何显示 HTML 元素，就像 HTML 3.2 的字体标签和颜色属性所起的作用那样。样式通常保存在外部的 .css 文件中。通过仅仅编辑一个简单的 CSS 文档，外部样式表使你有能力同时改变站点中所有页面的布局和外观。
为了解决这个问题，万维网联盟（W3C），这个非营利的标准化联盟，肩负起了 HTML 标准化的使命，并在 HTML 4.0 之外创造出样式（Style）。
当代浏览器都支持 CSS .

更多详细教程：菜鸟教程 CSS

Ajax：同步或异步访问服务器资源

AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

什么是 AJAX ？

AJAX = 异步 JavaScript 和 XML。
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。
有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等。

AJAX 工作原理

更多详细教程：菜鸟教程 AJAX

总结

前端技术在JavaWeb开发学习中占什么位置呢？我觉得虽然JavaWeb技术主要是对网站后台的开发与架构，但是数据毕竟是需要传输到前端进行展示的。而且在对后台的开发中我们后端开发人员可以自己搭建简易前台页面与后台进行交互。我认为这是在Java web学习中非常重要的。

下节预告

Servlet技术

敬请期待哦～