JavaWeb总结1-4节

渝北最后的单纯

已于 2022-03-18 16:34:16 修改

阅读量484

点赞数 1

分类专栏： Java 文章标签： javascript html 前端

于 2022-03-09 00:32:48 首次发布

原文链接：https://heavy_code_industry.gitee.io/code_heavy_industry/pro001-javaweb/lecture/chapter03/verse05.html

版权

Java 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

JavaWeb笔记

第一节、html

1、html标签

标签名称	功能
h1~h6	1级标题~6级标题
p	段落
a	超链接
ul/li	无序列表
img	图片
div	定义一个前后有换行的块
span	定义一个前后无换行的块
br	换行

超链接：
<a href="page02-anchor-target.html">点我跳转到下一个页面</a>

无序列表：
<ul>
        <li>Apple</li>
        <li>Banana</li>
        <li>Grape</li>
    </ul>

<div style="border: 1px solid black;width: 100px;height: 100px;">This is a div block</div>

<span style="border: 1px solid black;width: 100px;height: 100px;">This is a span block</span>

url链接：尽量使用绝对路径写

2、form表单

①action属性

用户在表单里填写的信息需要发送到服务器端，对于Java项目来说就是交给Java代码来处理。那么在页面上我们就必须正确填写服务器端的能够接收表单数据的地址。

②method属性

『method』这个单词的意思是『方式、方法』，在form标签中method属性用来定义提交表单的**『请求方式』**。method属性只有两个可选值：get或post，没有极特殊情况的话使用post即可

HTTP1.1中共定义了八种请求方式：

GET
Chrome
Firefox
Safari
Opera
Edge

常见的Java服务器有：

Tomcat
Weblogic
WebSphere
Glassfish
Jetty
POST
PUT
DELETE
HEAD
CONNECT
OPTIONS
TRACE

3、name和value

相当于Map<String,String[]> 。

4、单行文本框

type = text 单行文本框

= password 密码框

		= **radio** 单选框

= checkbox多选框

=interesting下拉列表

button ：

类型	功能
普通按钮	点击后无效果，需要通过JavaScript绑定单击响应函数
重置按钮	点击后将表单内的所有表单项都恢复为默认值
提交按钮	点击后提交表单

5、！！！表单隐藏域：①代码！！！

<input type="hidden" name="userId" value="2233"/>

后续很多后端接受信息需要隐藏域进行隐藏

#②说明

通过表单隐藏域设置的表单项不会显示到页面上，用户看不到。但是提交表单时会一起被提交。用来设置一些需要和表单一起提交但是不希望用户看到的数据，例如：用户id等等。

6、多行文本框

#①代码

自我介绍：<textarea name="desc"></textarea>

#②效果

#③说明

textarea没有value属性，如果要设置默认值需要写在开始和结束标签之间。

第二节、CSS

1、设置CSS样式的三种方式

#①在HTML标签内设置

仅对当前标签有效

<div style="border: 1px solid black;width: 100px; height: 100px;">&nbsp;</div>

②在head标签内设置

对当前页面有效

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .one {
            border: 1px solid black;
            width: 100px;
            height: 100px;
            background-color: lightgreen;
            margin-top: 5px;
        }
    </style>
</head>
<body>

    <div style="border: 1px solid black;width: 100px; height: 100px;">&nbsp;</div>

    <div class="one">&nbsp;</div>
    <div class="one">&nbsp;</div>
    <div class="one">&nbsp;</div>

</body>

HTML引入CSS：
<link rel="stylesheet" type="text/css" href="/aaa/pro01-HTML/style/example.css" />

CSS代码语法

CSS样式由选择器和声明组成，而声明又由属性和值组成。
属性和值之间用冒号隔开。
多条声明之间用分号隔开。
使用/* … */声明注释。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-e3QhMmBY-1646756915801)(https://heavy_code_industry.gitee.io/code_heavy_industry/assets/img/img046.cb990aa2.png)]

第三节、JavaScript：

1、特性

#①脚本语言

JavaScript是一种解释型的脚本语言。不同于C、C++、Java等语言先编译后执行, JavaScript不会产生编译出来的字节码文件，而是在程序的运行过程中对源文件逐行进行解释。

#②基于对象

JavaScript是一种基于对象的脚本语言，它不仅可以创建对象，也能使用现有的对象。但是面向对象的三大特性：『封装』、『继承』、『多态』中，JavaScript能够实现封装，可以模拟继承，不支持多态，所以它不是一门面向对象的编程语言。

#③弱类型

JavaScript中也有明确的数据类型，但是声明一个变量后它可以接收任何类型的数据，并且会在程序执行过程中根据上下文自动转换类型。

#④事件驱动

JavaScript是一种采用事件驱动的脚本语言，它不需要经过Web服务器就可以对用户的输入做出响应。

#⑤跨平台性

JavaScript脚本语言不依赖于操作系统，仅需要浏览器的支持。因此一个JavaScript脚本在编写后可以带到任意机器上使用，前提是机器上的浏览器支持JavaScript脚本语言。目前JavaScript已被大多数的浏览器所支持。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tjlXYUjn-1646756915801)(https://heavy_code_industry.gitee.io/code_heavy_industry/assets/img/img001.1c07d33d.png)]

2、数据

①JavaScript数据类型

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

#②变量

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

3、函数

#①内置函数

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

#[1]弹出警告框

alert("警告框内容");

#[2]弹出确认框

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

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

#[3]在控制台打印日志

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

②声明函数

写法1：

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

写法2：

		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();

#②使用[]创建数组

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

#6、JSON

#①JSON格式的用途

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

#②JSON格式的说明

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

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

JOSN数组的格式是：

[value,value,...,value]

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

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

{
	"stuId":556,
	"stuName":"carl",
	"school":{
		"schoolId":339,
		"schoolName":"atguigu"
	},
	"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对象

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

第四节 DOM

#1、概念

#①名词解释

DOM是Document Object Model的缩写，意思是**『文档对象模型』**——将HTML文档抽象成模型，再封装成对象方便用程序操作。

这是一种非常常用的编程思想：将现实世界的事物抽象成模型，这样就非常容易使用对象来量化的描述现实事物，从而把生活中的问题转化成一个程序问题，最终实现用应用软件协助解决现实问题。而在这其中**『模型』**就是那个连通现实世界和代码世界的桥梁。

#②DOM树

浏览器把HTML文档从服务器上下载下来之后就开始按照**『从上到下』的顺序『读取HTML标签』。每一个标签都会被封装成一个『对象』**。

而第一个读取到的肯定是根标签html，然后是它的子标签head，再然后是head标签里的子标签……所以从html标签开始，整个文档中的所有标签都会根据它们之间的**『父子关系』被放到一个『树形结构』**的对象中。

这个包含了所有标签对象的整个树形结构对象就是JavaScript中的一个可以直接使用的内置对象：document。

例如，下面的标签结构：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IM700oUF-1646756915803)(https://heavy_code_industry.gitee.io/code_heavy_industry/assets/img/img004.b38eb5f9.png)]

会被解析为：

#2、具体概念

#①各个组成部分的类型

整个文档中的一切都可以看做Node。各个具体组成部分的具体类型可以看做Node类型的子类。

其实严格来说，JavaScript并不支持真正意义上的『继承』，这里我们借用Java中的『继承』概念，从逻辑上来帮助我们理解各个类型之间的关系。

组成部分	节点类型	具体类型
整个文档	文档节点	Document
HTML标签	元素节点	Element
HTML标签内的文本	文本节点	Text
HTML标签内的属性	属性节点	Attr
注释	注释节点	Comment

#②父子关系

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-owYmFwj0-1646756915804)(https://heavy_code_industry.gitee.io/code_heavy_industry/assets/img/img006.46dad6e0.png)]

#③先辈后代关系

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kbh4WukG-1646756915804)(https://heavy_code_industry.gitee.io/code_heavy_industry/assets/img/img007.1c9bf6a0.png)]

#3、DOM操作

由于实际开发时基本上都是使用JavaScript的各种框架来操作，而框架中的操作方式和我们现在看到的原生操作完全不同，所以下面罗列的API仅供参考，不做要求。

#①在整个文档范围内查询元素节点

功能	API	返回值
根据id值查询	document.getElementById(“id值”)	一个具体的元素节
根据标签名查询	document.getElementsByTagName(“标签名”)	元素节点数组
根据name属性值查询	document.getElementsByName(“name值”)	元素节点数组

#②在具体元素节点范围内查找子节点

功能	API	返回值
查找全部子节点	element.childNodes 【W3C考虑换行，IE≤8不考虑】	节点数组
查找第一个子节点	element.firstChild 【W3C考虑换行，IE≤8不考虑】	节点对象
查找最后一个子节点	element.lastChild 【W3C考虑换行，IE≤8不考虑】	节点对象

#③查找指定元素节点的父节点

功能	API	返回值
查找指定元素节点的父节点	element.parentNode	节点对象

#④查找指定元素节点的兄弟节点

功能	API	返回值
查找前一个兄弟节点	node.previousSibling 【W3C考虑换行，IE≤8不考虑】	节点对象
查找后一个兄弟节点	node.nextSibling 【W3C考虑换行，IE≤8不考虑】	节点对象

#⑤属性操作

需求	操作方式
读取属性值	元素对象.属性名
修改属性值	元素对象.属性名=新的属性值

#⑥文本操作

需求	操作方式
读取文本值	element.firstChild.nodeValue
修改文本值	element.firstChild.nodeValue=新文本值

#⑦DOM增删改操作

API	功能
document.createElement(“标签名”)	创建元素节点并返回，但不会自动添加到文档中
document.createTextNode(“文本值”)	创建文本节点并返回，但不会自动添加到文档中
element.appendChild(ele)	将ele添加到element所有子节点后面
parentEle.insertBefore(newEle,targetEle)	将newEle插入到targetEle前面
parentEle.replaceChild(newEle, oldEle)	用新节点替换原有的旧子节点
parentEle.removeChild(childNode)	删除指定的子节点
element.innerHTML	读写HTML代码