第一节单一架构

我们从现在的JavaWeb阶段到后面学习SSM(Spring MVC Spring MyBatis)框架阶段都是在学习单一架构项目开发的技术。

而在JavaWeb阶段由于重点是探讨如何实现Web开发，所以必须学习一部分前端开发的技术。

1、单一架构技术体系

视图：用户的操作界面+数据的动态显示
- 前端技术：HTML/CSS/JavaScript/jQuery
- 服务器端页面模板技术：Thymeleaf
控制层：处理请求+跳转页面
- 服务器：Tomcat
- 控制器：Servlet(处理单个请求)
- jsp内置对象：page、request、session、application
- 过滤器：Filter(处理字符串乱码,权限)
- 监听器：Listener(会员\游客人数)
- 异步交互：Ajax(局部更新页面)
业务逻辑层：业务逻辑计算
持久化层：操作数据库

2、视图层

严格来说视图分成两层：

前端技术：HTML/CSS/JavaScript/jQuery/Vue
服务器端页面模板技术：Thymeleaf

其中HTML、CSS、JavaScript、jQuery都是工作在浏览器上的，所以它们都属于前端技术。

而Thymeleaf是在服务器上把动态内容计算出具体数据，所以严格来说Thymeleaf是后端技术。

这里大家会有个疑问：为什么在『视图』这个地方已经有HTML、CSS、JavaScript、jQuery这些前端技术了，能够生成用户可以操作的界面，那为什么还需要Thymeleaf这样一个后端技术呢？

简单来说原因是Thymeleaf=HTML+动态数据，而HTML不支持动态数据，这部分需要借助Thymeleaf来完成。

更进一步的细节咱们讲到那再说啦！

3、Web2.0

Web2.0是相对于更早的网页开发规范而提出的新规范。Web2.0规范之前的网页开发并没有明确的将HTML、CSS、JavaScript代码分开，而是互相之间纠缠在一起，导致代码维护困难，开发效率很低。

在开发中我们把这样彼此纠缠、互相影响的现象称为『耦合』。而把耦合在一起的东西拆解开，让他们彼此独立出来称为『解耦』。各个组成部分独立完成自己负责的功能，和其他模块无关称为『内聚』。

将来大家经常会听到一句话：软件开发提倡『高内聚，低耦合』。

一个软件项目只有做到了高内聚、低耦合才能算得上结构严谨，模块化程度高，有利于开发和维护。

所以Web2.0规范主张将网页代码分成下面三个部分：

结构：由HTML实现，负责管理网页的内容。将来网页上不管是静态还是动态的数据都是填写到HTML的标签里。
表现：由CSS实现，负责管理网页内容的表现形式。比如：颜色、尺寸、位置、层级等等。也就是给数据穿上一身漂亮的衣服。
行为：由JavaScript实现，负责实现网页的动态交互效果。比如：轮播图、表单验证、鼠标滑过显示下拉菜单、鼠标滑过改变背景颜色等等。

第二节 html简单回顾

有序列表,无序列表,h,p,img,form表单

https://www.runoob.com/html/html-tutorial.html

超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。

您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。

在本教程中，您将学习如何使用 HTML 来创建站点。

HTML 很容易学习！相信您能很快学会它！

https://www.runoob.com/html/html5-intro.html

HTML5是HTML最新的修订版本，2014年10月由万维网联盟（W3C）完成标准制定。

HTML5的设计目的是为了在移动设备上支持多媒体,HTML5 简单易学。

HTML5 <!DOCTYPE>

声明必须位于 HTML5 文档中的第一行,使用非常简单:

1	<!DOCTYPE html>

FLASH，即Adobe Flash Player，被HTML5取代了。

自2017年Adobe宣布在2020年末放弃对Flash的更新与维护以来，Flash被各大厂商“抛弃”的消息就越来越多。微软在2019年宣布计划从所有的浏览器中移除Flash，苹果也宣布将在2020年早些时候从自家浏览器中移除Flash。2020年12月31日之后，Adobe不再支持Flash Player，这意味着Flash Player已经正式退出历史舞台。

在被众多主流平台排除在外后，HTML5逐渐取代了Flash在网页动画、视频和交互效果方面的地位。HTML5不仅支持更丰富的多媒体内容，还具有更好的安全性和性能，成为现代网页设计的首选技术。因此，可以说FLASH被HTML5取代了。

第三节 CSS简单回顾

https://www.runoob.com/css/css-tutorial.html

CSS (Cascading Style Sheets，层叠样式表），是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，CSS 文件扩展名为 .css。

通过使用 CSS 我们可以大大提升网页开发的工作效率！

在我们的 CSS 教程中，您会学到如何使用 CSS 同时控制多重网页的样式和布局。

CSS3 现在已被大部分现代浏览器支持，而下一版的 CSS4 仍在开发中。

https://www.runoob.com/css3/css3-tutorial.html

CSS 用于控制网页的样式和布局。

CSS3 是最新的 CSS 标准。

本教程向您讲解 CSS3 中的新特性。

第四节 JavaScript基本语法(重要)

1、JavaScript代码嵌入方式

①HTML文档内

JavaScript代码要写在script标签内
script标签可以写在文档内的任意位置
为了能够方便查询或操作HTML标签（元素）script标签可以写在body标签后面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HelloWorld</title>
	</head>
	<body>
		<!-- 在HTML代码中定义一个按钮 -->
		<button type="button" id="helloBtn">SayHello</button>
	</body>
	
	<!-- 在script标签中编写JavaScript代码 -->
	<script type="text/javascript">
		
		// document对象代表整个HTML文档
		// document对象调用getElementById()方法表示根据id查找对应的元素对象
		var btnElement = document.getElementById("helloBtn");
		
		// 给按钮元素对象绑定单击响应函数
		btnElement.onclick = function(){
			
			// 弹出警告框
			alert("hello");
		};
	</script>
</html>

②引入外部JavaScript文档

在script标签内通过src属性指定外部xxx.js文件的路径即可。但是要注意以下两点：

引用外部JavaScript文件的script标签里面不能写JavaScript代码
先引入，再使用
script标签不能写成单标签

引入方式如下：

<body>
</body>

<!-- 使用script标签的src属性引用外部JavaScript文件，和Java中的import语句类似 -->
<!-- 引用外部JavaScript文件的script标签里面不能写JavaScript代码 -->
<!-- 引用外部JavaScript文件的script标签不能改成单标签 -->
<!-- 外部JavaScript文件一定要先引入再使用 -->
<script src="scripts/outter.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">
	
	// 调用外部JavaScript文件中声明的方法
	showMessage();
</script>

2、声明和使用变量

①JavaScript数据类型

基本数据类型
- 数值型：JavaScript不区分整数、小数
- 字符串：JavaScript不区分字符、字符串；单引号、双引号意思一样。
- 布尔型：true、false
  
  在JavaScript中，其他类型和布尔类型的自动转换。
  
  true：非零的数值，非空字符串，非空对象
  
  false：零，空字符串，null，undefined
  
  例如：”false”放在if判断中
  1
  2
  3
  4
  5
  6
  // "false"是一个非空字符串，直接放在if判断中会被当作『真』处理
  if("false"){
  alert("true");
  }else{
  alert("false");
  }
引用类型
- 所有new出来的对象
- 用[]声明的数组
- 用{}声明的对象(json)

②变量

关键字：var
数据类型：JavaScript变量可以接收任意类型的数据
标识符：严格区分大小写
变量使用规则
- 如果使用了一个没有声明的变量，那么会在运行时报错
  
  Uncaught ReferenceError: b is not defined
- 如果声明一个变量没有初始化，那么这个变量的值就是undefined

3、函数

①内置函数

内置函数：系统已经声明好了可以直接使用的函数。

[1]弹出警告框

1	alert("警告框内容");

[2]弹出确认框

用户点击『确定』返回true，点击『取消』返回false

var result = confirm("老板，你真的不加个钟吗？");
if(result) {
	console.log("老板点了确定，表示要加钟");
}else{
	console.log("老板点了确定，表示不加钟");
}

[3]在控制台打印日志

1	console.log("日志内容");

②声明函数

写法1：

1
2
3

function sum(a, b) {
	return a+b;
}

写法2：

1
2
3

var total = function() {
	return a+b;
};

写法2可以这样解读：

声明一个函数，相当于创建了一个『函数对象』，将这个对象的『引用』赋值给变量total。

最后加的分号不是给函数声明加的，而是给整体的赋值语句加的分号。

③调用函数

JavaScript中函数本身就是一种对象，函数名就是这个『对象』的『引用』。而调用函数的格式是：函数引用()。

function sum(a, b) {
	return a+b;
}

var result = sum(2, 3);
console.log("result="+result);

或：

var total = function() {
	return a+b;
}

var totalResult = total(3,6);
console.log("totalResult="+totalResult);

4、对象

JavaScript中没有『类』的概念，对于系统内置的对象可以直接创建使用。

①使用new关键字创建对象

// 创建对象
var obj01 = new Object();

// 给对象设置属性和属性值
obj01.stuName = "tom";
obj01.stuAge = 20;
obj01.stuSubject = "java";

// 在控制台输出对象
console.log(obj01);

②使用{}创建对象

// 创建对象
var obj02 = {
	"soldierName":"john",
	"soldierAge":35,
	"soldierWeapon":"gun"
};

// 在控制台输出对象
console.log(obj02);

③给对象设置函数属性

// 创建对象
var obj01 = new Object();

// 给对象设置属性和属性值
obj01.stuName = "tom";
obj01.stuAge = 20;
obj01.stuSubject = "java";

//添加任意的方法(函数)
obj01.study = function() {
	console.log(this.stuName + " is studying");
};

// 在控制台输出对象
console.log(obj01);
// 调用函数
obj01.study();

或：

// 创建对象
var obj02 = {
	"soldierName":"john",
	"soldierAge":35,
	"soldierWeapon":"gun",
	"soldierShoot":function(){
		console.log(this.soldierName + " is using " + this.soldierWeapon);
	}
};

// 在控制台输出对象
console.log(obj02);
// 调用函数
obj02.soldierShoot();

④this关键字

this关键字只有两种情况：

在函数外面：this关键字指向window对象（代表当前浏览器窗口）
在函数里面：this关键字指向调用函数的对象

// 直接打印this
console.log(this);

// 函数中的this
// 1.声明函数
function getName() {
	console.log(this.name);
}

// 2.创建对象
var obj01 = {
	"name":"tom",
	"getName":getName
};
var obj02 = {
	"name":"jerry",
	"getName":getName
};

// 3.调用函数
obj01.getName();
obj02.getName();

5、数组

①使用new关键字创建数组

// 1.创建数组对象
var arr01 = new Array();

// 2.压入数据
arr01.push("apple");
arr01.push("orange");
arr01.push("banana");
arr01.push("grape");

// 3.遍历数组
for (var i = 0; i < arr01.length; i++) {
	console.log(arr01[i]);
}

// 4.数组元素反序
arr01.reverse();
for (var i = 0; i < arr01.length; i++) {
	console.log(arr01[i]);
}

// 5.数组元素拼接成字符串
var arrStr = arr01.join(",");
console.log(arrStr);

// 6.字符串拆分成数组
var arr02 = arrStr.split(",");
for (var i = 0; i < arr02.length; i++) {
	console.log(arr02[i]);
}

// 7.弹出数组中最后一个元素
var ele = arr01.pop();
console.log(ele);

②使用[]创建数组

1
2
3

// 8.使用[]创建数组
var arr03 = ["cat","dog","tiger"];
console.log(arr03);

6、JSON

①JSON格式的用途

在开发中凡是涉及到『跨平台数据传输』，JSON格式一定是首选。

②JSON格式的说明

JSON数据两端要么是{}，要么是[]
{}定义JSON对象
[]定义JSON数组
JSON对象的格式是：

1	{key:value,key:value,...,key:value}

JOSN数组的格式是：

1	[value,value,...,value]

key的类型固定是字符串
value的类型可以是：
- 基本数据类型
- 引用类型：JSON对象或JSON数组

正因为JSON格式中value部分还可以继续使用JSON对象或JSON数组，所以JSON格式是可以『多层嵌套』的，所以JSON格式不论多么复杂的数据类型都可以表达。

只要是key必须使用双引号,值非数字都要添加双引号

{
	"stuId":556,
	"stuName":"carl",
	"school":{
		"schoolId":339,
		"schoolName":"edu"
	},
	"subjectList":[
		{
			"subjectName":"java",
			"subjectScore":50
		},
		{
			"subjectName":"PHP",
			"subjectScore":35
		},
		{
			"subjectName":"python",
			"subjectScore":24
		}
	],
	"teacherMap":{
		"aaa":{
			"teacherName":"zhangsan",
			"teacherAge":20
		},
		"bbb":{
			"teacherName":"zhangsanfeng",
			"teacherAge":108
		},
		"ccc":{
			"teacherName":"zhangwuji",
			"teacherAge":25
		}
	}
}

③JSON对象和JSON字符串互转

[1]JSON对象转JSON字符串

var jsonObj = {"stuName":"tom","stuAge":20};
var jsonStr = JSON.stringify(jsonObj);

console.log(typeof jsonObj); // object
console.log(typeof jsonStr); // string

[2]JSON字符串转JSON对象

1 2	jsonObj = JSON.parse(jsonStr); console.log(jsonObj); // {stuName: "tom", stuAge: 20}

小结

理解单一架构技术体系

掌握JavaScript的常用用法

第一节 单一架构