一、HTML（静态页面）
概述：
HTML（Hyper Text Markup Language）超文本标记语言，是做网站页面的最基础的开发语言，它的功能很弱，连脚本语言都算不上，类比java这种强语言，那就是一个天上一个地下，但它小而美，网站开发它却是霸主。
结构：
Ø <html>文档声明，用来声明HTML文档所遵循的HTML规范。
Ø <head></head>头部分，用来存放HTML文档的基本属性信息，比如网页标题、编码格式，这部分内容会被网页优先加载。
Ø <body></body>体部分，用来存放网页要显示的数据。
Ø <title></title>声明网页标题
Ø <meta charset=""/>用来通知浏览器使用哪个编码来打开HTML文档，打开的方式一定要和保存文件时使用的编码一致，避免出现中文乱码问题。
入门案例：
<!doctype html>
<html>
<head>
<title>quickstart</title>
<!-- 防止中文乱码 -->
<meta charset="UTF-8"/>
</head>
<body>
hello html ~
你好呀
<!--
ctrl c / v 复制粘贴
ctrl x / d 删除
ctrl 上/下 箭头 调整位置
-->
</body>
</html>二、CSS技术
CSS全称叫做层叠样式表stylesheet，是用来修饰HTML网页的一门技术，增强网页的展示能力。
主要是使用CSS属性来实现，最终可以将css代码和HTML网页代码进行分离，也可以提高css代码的复用性。（用法：放在标签内部，放在头文件中，用style标注）
选择器
<!--1.标签名选择器-->
<!--选中网页中的所有元素-->
<style> /* 在HTML中加入css*/
span{ /* 标签名选择器,选中所有span */
background-color: chartreuse; /* 背景颜色*/
font-size: 24px; /*字号*/
font-family: 黑体;/* 字体 */
}
</style>
<!--2.class选择器-->
<!--给需要修饰的元素，加class属性，可以同时使用多个属性，之间用空格隔开。-->
<style> /* 在HTML中加入css*/
/* 选择class=a的元素 */
.a{
background-color: cornflowerblue; /*背景颜色*/
color:red; /*字体颜色*/
}
.b{
background-color: lightsalmon;
color: black;
}
</style>
<!--3.id选择器-->
<!--id属性的值在整个HTML中作为唯一标识的存在。
可以通过ID值选中指定的元素（#id值）-->
<p id="p1">123</p>
/* 使用id选中元素 */
#p1{
text-indent: 200px; /* 首行缩进*/
}网页是如何与后端交互的？
用户访问页面，页面触发事件创建XHR对象，进行ajax请求，请求访问服务器端，请求被web中间件拦截并进行处理，由控制层框架springmvc中的controller进行接收，controller请求业务层spring框架的service服务，service请求持久层mybatis框架的mapper映射，mapper访问数据库。操作完数据库，返回结果，mybatis封装成java对象传回service，service把java对象传回controller，controller把java对象又转换为json字符串，然后传回浏览器，浏览器传回给调用者XHR，XHR调用回调方法callback，callback进行json字符串的解析，从中拿到要展现的数据，通过javascript处理，最终回显到页面上。
可以看到这个调用过程是非常复杂的，跨越网络，跨域多个服务器，很多技术应用其中，而这一切的始作俑者是谁呢？谁让这一切成为可能，它就是javascript，它实现了用户的请求和响应，实现了数据的动态展现，使早期静态的网站走向了动态的网站。
三、JS
概述
JavaScript 是 web 前端开发者必学的三种语言之一：
HTML 定义网页的内容 H5
CSS 规定网页的布局 CSS3
JavaScript 实现网站的交互 ES6
JS是一门基于对象和事件驱动的脚本语言（在网络前端开发环境下，用于嵌入在客户端浏览器中的一段小程序），通常用来提高网页与用户的交互性，只局限于浏览器。
特点：
(1)JS是一门直译式的语言，直接执行的就是源代码.
是一边解释一边执行，没有编译的过程（不像Java需要提前编译为class文件再运行）.
(2)JS是一门弱类型的语言,没有严格的数据类型.
优势：
(1)良好的交互性
(2)一定的安全性(JS被强制的要求,不能访问浏览器以外的东西,只能访问浏览器和浏览器内部的资源)
(3)跨平台性(Java语言具有跨平台性,是因为有虚拟机)
只要有浏览器的地方都能执行JS
异步请求局部刷新
架构
主流方式：
JavaScript 形成交互
jQuery 封装JavaScript，代码更加简洁高效
ajax 异步请求
json 数据传输
Web中间件(tomcat) 处理请求和响应
mysql数据库 存取数据
用户页面中触发ajax请求，访问后端服务器，Web中间件拦截用户请求，转发后端程序进行数据处理，一般还需访问数据库，然后逐层返回。数据库返回数据处理服务，数据处理服务返回Web中间件，Web中间件返回ajax调用，将数据封装到返回的js对象中，目前主流返回数据为json字符串。在回调callback的方法中解析json中的数据，最终回显到页面上。通常我们使用jquery封装过的ajax，写法更加简洁灵活。
四、jQuery
概念
jQuery是一门轻量的、免费开源的JS函数库，主要作用是用于简化JS代码
轻量的：代码或项目对该技术的依赖程度，依赖程度越低，这个技术越轻，反之，依赖程度越高，这个技术越重。推荐使用轻量级的技术框架
jQuery的核心思想：“写的更少，但做的更多”
jQuery库包含以下功能：
l HTML 元素选取
l HTML 元素操作
l CSS 操作
l HTML 事件函数
l JavaScript 特效和动画
l HTML DOM 遍历和修改
l AJAX
五、json
概念：
ajax往往要完整应用还会配合一个技术：JSON，那什么是JSON呢？
JSON(JavaScript Object Notation，JS 对象简谱) 起名不咋地，非常拗口，我们就记住它是一种轻量级的数据交换格式即可。它基于 ECMAScript (js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。是xml的终结者，成为主流开发方式（ajax异步请求，json返回）。
格式：
[
{
"cbf":"0",
"id":"J_100003717483",
"m":"10000.00",
"op":"2499.00",
"p":"2099.00"
}
]结构特点：
l 数组[]
l 一条记录{}，多条记录用逗号隔开 {},{}，最后一条没有逗号
l 键值对 "p":"2099.00"，kv用双引号括，多个用逗号隔开
JSON已经作为浏览器内置支持，所以我们可以直接使用JSON对象：
l json转obj JSON.parse("json")
l obj转json JSON.stringify(obj)
六、ajax
概念：
ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式、快速动态网页应用的技术。早期只有同步的方式，多个请求，只能顺序执行，只能等待执行。有了ajax异步技术，可以无需等待上一个请求执行完成，就可以直接发起请求。服务端返回后，ajax通过回调技术通知客户端程序，把响应的结果传递给用户事先写好的回调函数。通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页进行局部更新，提升网页的效率，用户无需等待页面的刷新，嗖的一下内容就变化了。改变原有整个页面刷新，造成页面晃眼的现象。所以这项技术一出现，就得到业界的推崇。
关键字：异步、回调、局部刷新。
格式：（七个参数）
$.ajax({
type:
url:
contentType:
data:
dataType:
success: function(data){
},
error: function(data){
}
})实现AJAX的基本步骤
要完整实现一个AJAX异步调用和局部刷新,通常需要以下几个步骤:
1.创建XMLHttpRequest对象,即创建一个异步调用对象.
2.创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.
3.设置响应HTTP请求状态变化的函数.
4.发送HTTP请求.
5.获取异步调用返回的数据.
6.使用JavaScript和DOM实现局部刷新.
七、NodeJS
谷歌Chrome的V8引擎执行JavaScript的速度非常快，性能非常好。于是开始有人在其基础上构建系统。2009年2月，Ryan Dahl在博客上宣布准备基于V8创建一个轻量级的Web服务器并提供一套库。这就是著名的Node.js，它采用事件驱动，采用主流NIO非阻塞I/O 模型，从而得以轻量和高效，非常适合在分布式设备上运行数据密集型的实时应用。
json和js对象的区别
json字符串: { "id":"100","name":"tony","salary":"30000" }
js对象：{ "id":100,"name":"tony","salary":30000 }
可以看出js对象中value值如果是整数，小数，无需加双引号
l 含义不同，json是一种数据格式，js表示类的实例
l 传输：json用于跨平台、跨网络传输，速度快；js不能传输
l 展现：json键值对方式，值是字符串不能是对象方法函数；js值不一定加双引号，值可以是对象、函数、字符串等
l 转换：JSON.parse(jsonStr) JSON已经作为浏览器内置对象，eval(json)；JSON.stringify(obj)
扫一扫
1753
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
