前端基础三件套HTML+CSS+JS基础

用户180554289221
848 阅读10分钟

JavaWeb的架构

单一架构技术体系

  • 视图：用户的操作界面+数据的动态显示

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

  • 控制层：处理请求+跳转页面

    • 服务器：Tomcat
    • 控制器：Servlet
    • 域对象：request、session、servletContext
    • 过滤器：Filter
    • 监听器：Listener
    • 异步交互：Ajax

  • 业务逻辑层：业务逻辑计算

  • 持久化层：操作数据库

image.png

本阶段技术体系

./images

HTML和css

严格来说视图分成两层：

  • 前端技术：HTML/CSS/JavaScript
  • 服务器端页面模板技术：Thymeleaf 其中HTML、CSS、JavaScript都是工作在浏览器上的，所以它们都属于前端技术。而Thymeleaf是在服务器上把动态内容计算出具体数据，所以严格来说Thymeleaf是后端技术。
    Thymeleaf=HTML+动态数据

image.png 如上就是视图层

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

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

HTML

HTML文件结构

  1. 文档声明类型 HTML5版本
<!DOCTYPE html>
  1. 根标签
  2. 头部 head标签用于定义文档的头部，其他头部元素都放在head标签里。头部元素包括title标签、script标签、style标签、link标签、meta标签等等。
  3. 主体
  4. 注释

HTML语法规则

  • 根标签有且只能有一个
  • 无论是双标签还是单标签都必须正确关闭
  • 标签可以嵌套但不能交叉嵌套
  • 注释不能嵌套
  • 属性必须有值，值必须加引号，单引号或双引号均可
  • 标签名不区分大小写但建议使用小写

HTML标签

HTML标签如下表：

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

image.png

from表单

<form action="/aaa/pro01-HTML/page05-form-target.html" method="post">
    
</form>
  • action:正确填写服务器端的能够接收表单数据的地址
  • method:"get"或"post"，一般都是post啦

input的杂七杂八

text
<input type="text" name="signal"/><br/>
password
<input type="password" name="secret"/><br/>
radio
你最喜欢的季节是：
<input type="radio" name="season" value="spring" />春天
<input type="radio" name="season" value="summer" checked="checked" />夏天
<input type="radio" name="season" value="autumn" />秋天
<input type="radio" name="season" value="winter" />冬天
tips
  • name属性相同的radio为一组，组内互斥
  • 当用户选择了一个radio并提交表单，这个radio的name属性和value属性组成一个键值对发送给服务器
  • 设置checked="checked"属性设置默认被选中的radio
checkbox
<input type="checkbox" name="team" value="Brazil"/>巴西
<input type="checkbox" name="team" value="German" checked="checked"/>德国
<input type="checkbox" name="team" value="France"/>法国
<input type="checkbox" name="team" value="China" checked="checked"/>中国
<input type="checkbox" name="team" value="Italian"/>意大利
下拉列表
<select name="interesting">
    <option value="swimming">游泳</option>
    <option value="running">跑步</option>
    <option value="shooting" selected="selected">射击</option>
    <option value="skating">溜冰</option>
</select>
  • 下拉列表用到了两种标签，其中select标签用来定义下拉列表，而option标签设置列表项。
  • name属性在select标签中设置。
  • value属性在option标签中设置。
  • option标签的标签体是显示出来给用户看的，提交到服务器的是value属性的值。
  • 通过在option标签中设置selected="selected"属性实现默认选中的效果。
button
<button type="button">普通按钮</button>
<button type="reset">重置按钮</button>
<button type="submit">提交按钮</button>
类型功能
普通按钮点击后无效果，需要通过JavaScript绑定单击响应函数
重置按钮点击后将表单内的所有表单项都恢复为默认值
提交按钮点击后提交表单
隐藏表单
<input type="hidden" name="userId" value="2233"/>
多行文本框
<textarea name="desc"></textarea>

JavaScript

特性

①脚本语言

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

②基于对象

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

③弱类型

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

④事件驱动

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

⑤跨平台性

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

工作流程

image.png

<!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代码嵌入方式

可内嵌在HTML文档当中，也可以在外部引入.js文件

<script type="text/javascript">
	
	// 下面是同样实现HelloWorld功能的简化版代码
	document.getElementById("helloBtn").onclick = function() {
		alert("Hello simple");
	};
	
</script>

<body>
</body>

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

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

JavaScript数据类型

基本数据类型

  • 数值型：JavaScript不区分整数、小数

  • 字符串：JavaScript不区分字符、字符串；单引号、双引号意思一样。

  • 布尔型：true、false

    在JavaScript中，其他类型和布尔类型的自动转换。

    true：非零的数值，非空字符串，非空对象

    false：零，空字符串，null，undefined

引用类型

  • 所有new出来的对象
  • 用[]声明的数组
  • 用{}声明的对象

变量

  • 关键字：var

  • 数据类型：JavaScript变量可以接收任意类型的数据

  • 标识符：严格区分大小写

  • 变量使用规则

    • 如果使用了一个没有声明的变量，那么会在运行时报错

      Uncaught ReferenceError: b is not defined

    • 如果声明一个变量没有初始化，那么这个变量的值就是undefined

函数

内置函数

警告框

alert("警告框内容");

确认框

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

打印日志

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

声明函数

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

赋值＋声明

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

调用函数

函数本身就是对象

function sum(a, b) {
	return a+b;
}
		
var result = sum(2, 3);
console.log("result="+result);

对象

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");
};


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

this关键字

this关键字只有两种情况：

  • 在函数外面：this关键字指向window对象（代表当前浏览器窗口）
  • 在函数里面：this关键字指向调用函数的对象
// 直接打印this
console.log(this);

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

数组

使用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]);
}

使用[]创建数组


var arr03 = ["cat","dog","tiger"];
console.log(arr03);

JSON

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

  • JSON数据两端要么是{}，要么是[]
  • {}定义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字符串互转

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

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

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

DOM

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

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

DOM树

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

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

image.png

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代码

JavaScript事件驱动

document.getElementById("eventArea").onmousemove = function (event){
	document.getElementById("showData").innerText = event.clientX + " " + event.clientY;
};
avatar
文章
阅读
粉丝