有前端的基础学java



一、教程简介

1.1 Java 开发为何学Web技术

在这里插入图片描述

在这里插入图片描述

1.2 课程设计

在这里插入图片描述

在这里插入图片描述

1.3 课前准备

在这里插入图片描述

二、HTML

2.1 Html简介

2.1.1 HTML、CSS、JS分别有什么作用

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

2.1.2 什么是HTML

在这里插入图片描述

2.1.3 什么是标记语言

在这里插入图片描述

2.2 Hello，Html

2.2.1 HTML基础结构

在这里插入图片描述

2.2.2 专业词汇

在这里插入图片描述

2.2.3 语法细节

在这里插入图片描述

2.3 VSCode安装

2.3.1 安装软件及插件

https://code.visualstudio.com/

安装Auto Rename tag插件

在这里插入图片描述

如法炮制，安装下列插件

在这里插入图片描述

2.3.2 Live Server插件使用

生成html模板

在这里插入图片描述

编辑好demo，选择右下角的Go live会自动跑一个小型服务器，就可以很方便的看你的html解析效果喽。

在这里插入图片描述

效果

在这里插入图片描述

他还是实时更新的。更改代码，实时更新。

在这里插入图片描述

不使用了再点击下，关闭 live server。

在这里插入图片描述

2.3.3 其它设置

在这里插入图片描述

在这里插入图片描述

2.4 HTML常见标签

推荐一个在线学习文档网站：https://www.w3school.com.cn/

2.4.1 标题、段落、换行标签。

效果如下：

在这里插入图片描述

2.4.2 列表标签

有序列表（ol：order list）。

在这里插入图片描述

无序列表(ul:unorder list)

在这里插入图片描述

2.4.3 链接标签

2.4.4 图片标签

2.4.5 表格标签

在这里插入图片描述

效果

在这里插入图片描述

演示一个复杂点的，实现下单元格跨行。

在这里插入图片描述

同样，跨列的属性是

教你一个快捷键，一键生成3行4列。

在这里插入图片描述

2.4.6 表单标签

在这里插入图片描述

说一下get和post的区别。

post请求数据放在负载里。

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

2.4.7 布局相关标签

效果如下

在这里插入图片描述

2.4.8 特殊字符

在这里插入图片描述

完整字符实体：https://www.w3school.com.cn/charsets/ref_html_8859.asp

三、CSS

3.1 css的三种引入方式

3.1.1 方法1：行内式

效果

在这里插入图片描述

优缺点：

3.1.2 方法2：内嵌式

在这里插入图片描述

3.1.3 方法3：外部样式表

btm.css

在这里插入图片描述

html

3.2 CSS的三大选择器

3.2.1 元素选择器

在这里插入图片描述

3.2.2 标签选择器

id 选择器使用 HTML 元素的 id 属性来选择特定元素。

元素的 id 在页面中是唯一的，因此 id 选择器用于选择一个唯一的元素！

css

html

效果

在这里插入图片描述

3.2.3 class选择器

在这里插入图片描述

效果

在这里插入图片描述

3.3 CSS浮动

看如下代码

现在效果如下。

在这里插入图片描述

如果想要它们在同一行，还保留目前样式，怎么做？使用浮动。

在这里插入图片描述

在这里插入图片描述

现在在同一行，但是并没有平均分布，更不用谈控制彼此的间隔。接下来我们学习定位

3.4 CSS定位

在这里插入图片描述

效果

在这里插入图片描述

注意拖动滚动条相对浏览器窗口不会动。

在这里插入图片描述

3.5 CSS盒子模型

设置下diva的内边距。

效果如下。

在这里插入图片描述

再设置下divb内边距。

效果如下。

在这里插入图片描述

四、Java Script

如果客户端只是静态页面，啥都需要后端服务器做，交互来交互去会很慢。比如输入一个密码，是不是符合格式要求，长度要求，有没有特殊字符，有没有输入…这些杂活都得走一趟互联网，就像一个啥也不会的员工，啥都问老板。多灾难啊

前端服务器得干活，需要有动态编码功能。上javascript。

4.1 JavaScript引入

4.1 内嵌式

效果

在这里插入图片描述

4.2 引入外部脚本文件

引入方式： 完整代码：

在这里插入图片描述

在这里插入图片描述

4.2 数据类型和变量

在这里插入图片描述

在这里插入图片描述

4.3 常见运算符

在这里插入图片描述

4.4 流程控制

4.4.1 分支结构

else

在这里插入图片描述

注意小细节。

在这里插入图片描述

switch分支。

在这里插入图片描述

4.4.2 循环结构

需求：在浏览器窗口打印下表

在这里插入图片描述

在这里插入图片描述

for循环类似。

接下来看看循环。注意下图中var不表示数组元素，而是数组中的索引

在这里插入图片描述

4.4.3 函数

在这里插入图片描述

在这里插入图片描述

4.5 对象的创建

方法1，var xxx = new Object(),语法就是很随性

在这里插入图片描述

方法2：

在这里插入图片描述

4.6 JSON

4.6.1 为什么需要JSON

在这里插入图片描述

4.6.2 JSON在客户端中的使用

在这里插入图片描述

在这里插入图片描述

4.6.3 JSON在服务端中的使用

新建Dog类、

Person类

测试Demo

4.6.4 JSON和Map、List之间的转换关系

将Map对象转成JSON字符串

将List对象转成JSON字符串

4.7 JS常见对象

4.7.1 数组对象

灵活的数组

在这里插入图片描述

在这里插入图片描述

方法 ，基本和java类似。参考文档：https://www.runoob.com/jsref/jsref-obj-array.html

concat() 连接两个或更多的数组，并返回结果。 copyWithin() 从数组的指定位置拷贝元素到数组的另一个指定位置中。 entries() 返回数组的可迭代对象。 every() 检测数值元素的每个元素是否都符合条件。 fill() 使用一个固定值来填充数组。 filter() 检测数值元素，并返回符合条件所有元素的数组。 find() 返回符合传入测试（函数）条件的数组元素。 findIndex() 返回符合传入测试（函数）条件的数组元素索引。 forEach() 数组每个元素都执行一次回调函数。 from() 通过给定的对象中创建一个数组。 includes() 判断一个数组是否包含一个指定的值。 indexOf() 搜索数组中的元素，并返回它所在的位置。 isArray() 判断对象是否为数组。 join() 把数组的所有元素放入一个字符串。 keys() 返回数组的可迭代对象，包含原始数组的键(key)。 lastIndexOf() 搜索数组中的元素，并返回它最后出现的位置。 map() 通过指定函数处理数组的每个元素，并返回处理后的数组。 pop() 删除数组的最后一个元素并返回删除的元素。 push() 向数组的末尾添加一个或更多元素，并返回新的长度。 reduce() 将数组元素计算为一个值（从左到右）。 reduceRight() 将数组元素计算为一个值（从右到左）。 reverse() 反转数组的元素顺序。 shift() 删除并返回数组的第一个元素。 slice() 选取数组的一部分，并返回一个新数组。 some() 检测数组元素中是否有元素符合指定条件。 sort() 对数组的元素进行排序。 splice() 从数组中添加或删除元素。 toString() 把数组转换为字符串，并返回结果。 unshift() 向数组的开头添加一个或更多元素，并返回新的长度。 valueOf() 返回数组对象的原始值。 Array.of() 将一组值转换为数组。 Array.at() 用于接收一个整数值并返回该索引对应的元素，允许正数和负数。负整数从数组中的最后一个元素开始倒数。 Array.flat() 创建一个新数组，这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成。 Array.flatMap() 使用映射函数映射每个元素，然后将结果压缩成一个新数组。

4.7.2 其它对象

其它的自学吧。

在这里插入图片描述

4.8 事件与事件绑定

4.8.1 事件

在这里插入图片描述

4.8.2 通过元素属性绑定事件

在这里插入图片描述

一个简单通过元素的属性进行事件的绑定demo

再来一个复杂点的。

效果如下。自己玩吧。

在这里插入图片描述

4.8.3 通过DOM编程动态绑定

在这里插入图片描述

把script放到head中；

没想到，竟然不好使了。这是因为浏览器是按照从上到下扫描代码的，扫到脚本时，还拿不到按钮：。

解决下。

可以直接用window.onload()方法，这样我们就不用在html代码的body部分再嵌入js代码了。

五、BOM编程

5.1 有前端的基础学java 什么是BOM编程

在这里插入图片描述

在这里插入图片描述

一句话概括，BOM编程就是学习怎么调用浏览器对象本身及其属性的API。

5.2 Window对象

5.2.1 Window对象的常见API

三种弹窗方式。

在这里插入图片描述

在这里插入图片描述

定时任务。

在这里插入图片描述

5.2.2 Window对象的常见属性

history属性

在这里插入图片描述

location属性：跳转页面

在这里插入图片描述

SessionStorage、LocalStorage。

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

六、DOM编程

6.1 什么是DOM编程

在这里插入图片描述

重点在于：动态修改页面！这不就和java的反射差不多？牛！！！

怎么做到的？我们看下浏览器解析html的过程就懂了

在这里插入图片描述

原来在浏览器展示页面前，还是把html解析成为了一个document对象啊。改不了html没关系，我们改document对象，页面显示也会变！

下图展示了在浏览器中解析的document对象。

在这里插入图片描述

你改以下里面的内容，浏览器也跟着变（去水印你学废了嘛？）

在这里插入图片描述

手动可以做到的，用代码也可以实现。这就是DOM编程啦。

Document是树状结构。子节点有三种，element、attribute、text。

拿上面案例代码举例，可画出对应的树结构如下。

在这里插入图片描述

6.2 获取页面元素的几种方式

操作document分三步。

在这里插入图片描述

6.2.1 直接获取

接下来，看看直接获取页面元素的四种方法。通过id获取元素的方式最常用。

在这里插入图片描述

6.2.2 间接获取

比如通过父元素获取子元素。

在这里插入图片描述

6.3 操作属性、样式、文本

操作元素的属性。

在这里插入图片描述

还操作元素的样式、文本。

在这里插入图片描述

6.4 增删元素

增加元素

效果如下。

在这里插入图片描述

删除

在这里插入图片描述

清除元素列表。

七、正则表达式

在这里插入图片描述

参考教程：https://www.runoob.com/regexp/regexp-intro.html

7.1 正则表达式的作用

7.1.1 验证功能

玩一下。正则表达式功能1：验证。

在这里插入图片描述

7.1.2 匹配功能

正则表达式功能2：匹配(查找) 匹配第一个。

效果如下。

在这里插入图片描述

全文匹配

在这里插入图片描述

7.1.3 替换功能

在这里插入图片描述

忽略大小写的版本。

在这里插入图片描述

7.2 正则表达式的语法

在这里插入图片描述

在这里插入图片描述

接下来一个常见场景。

常用的一些正则表达式。

在这里插入图片描述

八、案例开发：日程管理(第一期)

8.1 登录页及验证

在这里插入图片描述

html代码如下：

8.2 注册页及数据校验功能

版权声明：

本文来源网络，所有图片文章版权属于原作者，如有侵权，联系删除。

本文网址：https://www.bianchenghao6.com/h6javajc/18767.html