前端知识--学习理解JS

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...定义后续执行的动作（请求成功后的回调函数）。

 

// 加载app列表             function getAppNameMap() {                 $.ajax({                     url: "/newadmin/adverts/config/api/v3/admin/apps",                     data: {                         "r": Math.random()                     },                     type: "GET",                     processData:false,                     dataType: "json",                     async: false,                     success: function (result) {                         if (result.data) {                             appNameMap = result.data;                             for (var app in appNameMap) {                                 $("#app_td").append("< input  name = 'app'  type = 'radio'  value = '" + app + "' />&nbsp;" + appNameMap[app] + "&nbsp;&nbsp;&nbsp;");                             }                             $("input[name='app']").first().attr("checked", "checked");                         } else                             alert("加载App列表失败！\n" + result.error.message);                     },                     error: function (data) {                         alert("加载App列表失败！");                     }                 })             }

 

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

 

url	必需。规定将请求发送的哪个 URL。
data	可选。规定连同请求发送到服务器的数据。
success(data,status,xhr)	可选。规定当请求成功时运行的函数。 额外的参数： response - 包含来自请求的结果数据 status - 包含请求的状态 xhr - 包含 XMLHttpRequest 对象

 

 跳用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