1 web网站开发的主要原则

• – 用标签元素HTML描述网页的内容结构；
• – 用CSS描述网页的排版布局样式表的首要目的是为网页上的元素精确定位。其次，把网页上的内容结构和格式控制相分离。即html的标签主要是定义网页的内容，而CSS决定这些网页内容如何显示；
• – 用JavaScript描述网页的事件处理，即鼠标或键盘在网页元素上的动作后的程序,当用户在客户端的浏览器中显示该网页时，浏览器就会执行JavaScript程序，让用户通过交互式的操作变换网页显示的内容，以实现HTML语言所不能实现的一些功能。 使用 <SCRIPT> 标签将语句嵌入文档。

2 前端向后端交互

提交的时候有一个不可或缺的元素，就是form标签，form标签代表了一个边界，在form范围内的input，select等元素，在form执行submit事件后，它们所记录的数据就会被浏览器使用http协议以post或者get的方式传输到对应的服务器上。

<form id="config_form">     <TABLE CLASS="form">         <input type="hidden" id="id"/>         <tr id="app_tr">             <td STYLE="width: 30%;">App：</td>             <td id="app_td"></td>         </tr>         <tr>             <td>广告位类型：</td>             <td>                 <select id="type">                     <option value="LOOP" selected="selected">轮播</option>                 </select>             </td>         </tr>         <tr>             <td>轮播时间：</td>             <td><input id="loop_invl" type="number" min="1" required="required"/>&nbsp;&nbsp;秒</td>         </tr>         <tr>             <td>广告位展示间隔：</td>             <td><input id="play_invl" type="number" min="1" required="required"/>&nbsp;&nbsp;小时</td>         </tr>         <tr>             <td colspan="2"><input type="submit" CLASS="btn btn-primary" style="width: 50px"                                    value="保 存"/></td>         </tr>     </TABLE> </form>

html中表单提交方式get和post 的区别：

Get

• URL 改变，在URL
  里显示 HTML Form 参数的 key/value 值。
• 只适合有少量参数的 HTML Form，因为 URL 长度有字符限制，不能无限长。
• 涉及安全性的信息，比如用户密码，不能用 get，因为会在 URL 上显示，不安全。

Post

• URL 不改变，不在 URL 里显示 HTML Form 的数据。
• Form 提交的信息没有长度限制。
• 涉及安全性的信息，如用户密码，应采用 post 方式。 

3 JavaScript 框架（库）

JavaScript   (js) 是属于网络的脚本语言！JavaScript 被数百万计的网页用来改进设计、验证表单、检测浏览器、创建cookies，以及更多的应用。

JavaScript 高级程序设计（特别是对浏览器差异的复杂处理），通常很困难也很耗时。为了应对这些调整，诞生了许多 JavaScript (HELPER)
库。这些 JavaScript 库常被称为 JavaScript 框架。了解到一些广受欢迎的 JavaScript 框架：

• jQuery
• PROTOTYPE
• MooTools

所有这些框架都提供针对常见 JavaScript 任务的函数，包括动画、DOM 操作以及 Ajax 处理。它使用 CSS 选择器来访问和操作网页上的 HTML 元素（DOM 对象）。jQuery 同时提供 companion UI（用户界面）和插件。许多大公司在网站上使用 jQuery：

• Google
• Microsoft
• IBM
• Netflix

4 前端AJAX方式获得后端数据

AJAX 不是一种新的编程语言，而是一种使用现有标准的新方法。通过与服务器进行数据交换，AJAX 可以在不重新加载整个网页的情况下，对网页的某部分进行更新。有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图等。

Ajax这是“Asynchronous JavaScript and XML”名字的缩写，它的全称应该叫做异步的javascript+xml的技术，正式因为ajax，提升了浏览器 在web应用中的作用，才需要更加专业的web前端工程师专门从事web前端的开发，后端工程师跟专注于从事后端服务提供数据类的开发。

1、AJAX 请求来获得 JSON 数据

首先够造URL，这个URL会对应到后台的bean定义的类，会以post方式请求，processData是同步还是异步请求，contentType定义的是交互数据的方式，json类型，success...定义后续执行的动作（请求成功后的回调函数）。

2、jQuery.getJSON(url,data,success(data,status,xhr))

 跳用getJSON函数等价于：

 $.ajax({

  url: url,
  data: data,
  success: callback,
  dataType: json
});

 json我们能很清晰的看懂，而且json很容易传化为javascript对象，操作十分方便，所以json最终取代了xml。

5 Chrome 中的 JavaScript 断点设置和调试

JS 为脚本语言，修改（可以直接再chrome中修改保存就可以在chrome 中同步），调试方法跟idea调试是一样的，断点、查看、进入函数、跳出函数...... 比如：我要看向后端传递的参数是否正确，可以在source中断点调试，右边就是变量的赋值：

6 JS总结

通过html 页面添加 JAVASCRIPT，使得网站的动态性和交互性，创建对事件的响应，验证表单，以及如何根据不同的情况运行不同的脚本。创建和使用对象，以及如何使用 JAVASCRIPT 的内置对象。

javascript学习更多内容：http://www.w3school.com.cn/example/jseg_examples.asp3