javaEE进阶前端预备知识
·
什么是javaEE进阶
- JavaSE 标准开发
- JavaEE 企业开发
再学习过了javaEE初阶之后，紧接着学习的就是javaEE进阶。
javaEE初阶是学习大部分概念知识，少部分的代码编写，比如：多线程，网络，文件IO，JVM。这些都是给进阶中的实际开发提供铺垫。进阶中的学习基本上都是实操，进行代码的编写。
那都是关于什么方面的代码呢？
分成前端和后端，狭义上是指web开发，说白了，我们看到的网站就是我们要开发的地方。
javaEE针对框架学习，这些框架就是代码编写需要的相同的地方，比如Spring框架，程序员只需要在框架中编写不同的功能就行。
我们看到的网站就是前端，我们看不到的背后执行逻辑就是后端。
web开发有两种模式：1. c/s，客户端/服务器模式 2. b/s，浏览器/服务器模式，这两者各有优点缺点，不过多介绍，只做了解。
目前我们的目标是成为后端开发程序员，但是也需要掌握一定知识的前端知识。
HTML （用来编写一个网站页面有什么）
编写HTML文件，需要用文本编译器软件，这里使用的是vs code软件。
以下是用html实现一些基本标签，html是使用标签来实现语句。
- 基本格式（html实现框架），可以用！+ enter或者！+ tab快速实现
有父子关系，兄弟关系
<html>
<head>
和html是父子关系
<title>和head是父子关系</title>
</head>
<body>
和head是兄弟关系，和html是父子关系
</body>
</html>
- 相对路径和绝对路径
相对路径：在一定基础上的路径 ./md
绝对路径：唯一的路径表示文件 https://editor.csdn.net/md
都能表示文件，但是有所不同 - 标题 h1 /h1（双标签格式）
<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>
<h4>这是四级标题</h4>
- 换行 br/（单标签格式）段落 p （双标签格式）
html代码的编译结不是和代码的排版相同的，比如换行，只有加入换行标签才是真正的换行。
<p>
我勒个豆
</p>
我勒个豆<br/>
<p>
我勒个豆
</p>
我勒个豆<br/>
- 图片 img（单标签格式）
<img src="https://img95.699pic.com/photo/60076/1814.jpg_wh860.jpg" width="200px"><br/>
<!-- 只输入一个大小限制，另一个数值会自适应 -->
<img src="https://img95.699pic.com/photo/60076/1814.jpg_wh860.jpg" width="200px" height="100px"><br/>
<!-- 这一条图片路径不够完整，在弹窗无法看到图片 -->
<img src="../60076/1814.jpg_wh860.jpg" width="200px"><br/>
- 超链接 a （单标签格式）
<a href="https://baidu.com">点我进入百度</a><br/>
<a href="#">空链接</a><br/>
- 表格 table（单标签格式） tr /tr td /td（双标签格式）
<!--table 表格框 tr 表格行数 td 表格一行中的个数
快捷建表方式：table>tr*3>td*2
border表示表格边框的宽度，cellspacing表示边框之间的缝隙宽度(默认有缝隙)，text-align表示表格中内容的位置
-->
<table border="1px" cellspacing="0" style="width: 300px; height: 200px; text-align: center;">
<tr>
<td>111</td>
<td>222</td>
</tr>
<tr>
<td>333</td>
<td rowspan="2">444</td>
<!-- rowspan 一个单位所占行数 -->
</tr>
<tr>
<td>555</td>
<td>666</td>
</tr>
<tr>
<td colspan="2">777</td>
<!-- colspan 一个单位所占列数 -->
</tr>
</table>
- form /form（双标签格式）
- input type name value checked
- select /select（双标签格式）
- textarea /textarea（双标签格式）
这四个都是表单标签
- div /div span /span（双标签格式）
type的类型决定了表单中输入的类型。
name表示URL中键值对中的键，没有name无法提交，而且同样的name就只有一个值，可以用于区分。
value表示选择选项后的键值对的数值
div 是独占一行的，span 不能独占一行
<!-- input type：text password file radio checkbox -->
<!-- select option -->
<!-- textarea submit -->
<form>
用户名：<input type="text" name="username" id=""><br/>
密码：<input type="password" name="password" id=""><br/>
头像：<input type="file" name="" id=""><br/>
<!--
input type name id <br/>
为什么性别选择只能选择一个，但是同样代码编写的兴趣爱好可以多选
因为type不一样，radio只能选择一个，checkbox可以多选
value表示键值对的值，可以在域名中看到设置的值
-->
性别：<input type="radio" name="gender" value="1"> 男 <input type="radio" name="gender" value="2"> 女 <br/>
兴趣爱好：<input type="checkbox" name="ai" value="1"> 羽毛球 <input type="checkbox" name="ai" value="2"> 乒乓球
<input type="checkbox" name="ai" value="3"> 篮球 <input type="checkbox" name="ai" value="4"> 排球<br/>
所在城市：
<select name="city">
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">广州</option>
<option value="4">深圳</option>
</select><br/>
个人宣言：<textarea></textarea>
<input type="submit" name="" id="" value="提交">
<div>
<span>我勒个豆</span>
<span>我勒个豆</span>
<span>我嘞个豆</span>
</div>
<div>
<span>我勒个大豆</span>
<span>我勒个大豆</span>
<span>我嘞个大豆</span>
</div>
<div>
<span>我勒个绿豆</span>
<span>我勒个绿豆</span>
<span>我嘞个绿豆</span>
</div>
</form>
div包装过的输入页面
placeholder表示在输入框中的文字引导
button中的value可以直接显示在弹窗界面中，其余的value只能显示在URL中
<div>
<table>
<tr>
<td>用户名</td>
<td><input type="text" name="username"placeholder="请输入用户名"></td>
</tr>
<tr>
<td>手机号码</td>
<td><input type="text" name="phone" placeholder="请输入手机号码"></td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" name="number" placeholder="请输入密码"></td>
</tr>
</table>
</div>
<div>
<input type="button" value="注册">
已有账号？<a href="#">登录</a>
</div>
CSS （用来编写一个网站页面长什么样）
CSS在HTML的基础上，对页面进行规划和美化，比如有边框的颜色、粗细、线类型、大小和文字的颜色和大小，还有边框之间的距离。
CSS写在style中，因为一个网站在打开后，用户第一眼看到就是页面的布局。
- CSS选择器和font类型
大量的边框美化标签
-
颜色
border-top-color
border-right-color
border-bottom-color
border-left-color -
宽度
border-width
当指定一个值时，该宽度将应用于四条边。
当指定两个值时，第一个宽度应用于顶部和底部，第二个宽度应用于左侧和右侧。
当指定三个值时，第一个宽度应用于顶部，第二个宽度应用于左侧和右侧，第三个宽度应用于底部。
当指定四个值时，四个宽度依次是顶部、右部、底部和左部。
border-top-width
border-right-width
border-bottom-width
border-left-width
div的样式设置之后可以显示很大的范围，span的样式设置之后只会在文本周围显示
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- <link rel="stylesheet" href="style.css"> -->
<style>
/*
标签选择器
id选择器
类选择器/class选择器
复合选择器：由两个及两个以上的单选择器组成，上述三个单选择器任何一个
通配符选择器
*/
/* 选择所有的div标签 */
/* div{
color:green;
} */
/* 选择所有的a标签 */
/* a{
color:red;
} */
/* 选择class=class1的标签 */
/* .class1{
color:blue;
} */
/* 选择所有id=id1的标签 */
/* #id1 {
color:orange;
} */
/* 选择所有标签 */
/* * {
color:purple;
} */
/* 选择列表中的元素 */
/* ul li {
color:aqua;
} */
/* 选择列表中的超链接 */
/* ul a {
color:aquamarine;
} */
/* 选择列表中的id */
/* ul #id1 {
color:beige;
} */
/* 选择列表中的class */
/* ul .red {
color:rgb(255, 235, 205);
} */
/* 选择div中的超链接 */
/* #id3 a {
color:blueviolet;
} */
/* 不连续的复合选择 */
/* ul>a {
color:red;
} */
/* 连续的复合选择 */
/* ul>li>a {
color:chocolate;
} */
#id3 {
border:red dotted 2px;
width:500px;
height:200px;
/* display:inline; */
/* 把div改成span */
border-color:black;
border-style:solid;
/* border-top-width:10px;
border-right-width:8px;
border-bottom-width:6px;
border-left-width:4px; */
/* border-width:10px 8px 6px 4px;
border-color:red cyan black gold;
border-style:double solid dotted dashed; */
}
span{
width:500px;
height: 200px;
border: solid red 2px;
/* display: block; */
/* 把span改成div */
}
</style>
</head>
<body>
<!-- ul 是无序列表
ol 是有序列表
id 在定义上要遵守唯一性
class 可以有多个div有相同的class
-->
<ul>
<li>aaa</li>
<li>bbb</li>
<li><a href="#" id="id1" class="red">我是一个div</a></li>
</ul>
<ol>
<li>111</li>
<li>222</li>
<li>333</li>
</ol>
<div class="class1" style="color:red">我也是一个div</div>
<div id="id2" class="class1">他也是一个div</div>
<div id="id3" class="class2"><a href="#" class="id1">我嘞个豆</a></div>
<span>我是一个span</span>
</body>
</html>
/* 选择所有的div标签 */
div {
color:green;
}
/* 选择所有的a标签 */
a {
color:brown;
}
- 框边距
有padding（框外边距）margin（框内边距）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
border:1px solid blue;
}
.large {
width:500px;
height: 600px;
border:1px solid green;
}
.small {
width: 300px;
height: 120px;
}
#div4 {
padding-top:20px;
padding-left:20px;
}
#div1 {
margin-bottom:20px;
}
#div2 {
margin-bottom:70px;
margin-top:50px;
}
</style>
</head>
<body>
<div id="div4" class="large" style="border:1px solid gold">
<div id="div1" class="small">1</div>
<div id="div2" class="small">2</div>
<div id="div3" class="small">3</div>
</div>
</body>
</html>
JavaScript （用力编写和网站页面交互的功能）
背景：
在HTML和CSS的基础上，在页面加上交互功能，才是网站最基本的功能。
虽然名字带有java，但是和java没有半毛钱关系。
可是JS在语法上借鉴了java很多地方，进行了简化，没有那么严格的类型限制。
引入方式：
- 在 script 的标签中编写JS代码。
- 直接写在HTML元素内部。
- 定义script标签，通过src属性引入外部js文件
基本语法：
- 变量
var（早期变量关键字）
let（目前主要使用的关键字）
const（声明常量的，声明后不能修改） - 数据类型
number（数字，不区分整数和小数）
string（字符串类型）
boolean（布尔类型，true 真，false 假）
undefined（表示变量未初始化，只有唯一的值 underfined）
<script>
// alert("Hello JavaScript!")
//console.log相当于java中的System.out.println
let a = 10;
console.log(typeof a);
let b = "我爱你";
console.log(typeof b);
let c = true;
console.log(typeof c);
let d;
console.log(typeof d);
let e = null;
console.log(typeof e);
let f = 5/2;
console.log(typeof f);
</script>
- 运算符
运算符基本和java一模一样，说个特殊的相等
== 表示比较相等（会进行隐式类型转换）
=== 表示比较相等（不会进行隐式类型转换）
let a = 10;
let b = "10";
console.log(a == b);
console.log(a === b);
JS对象：
- 数组
//数组的使用
let arr = [1, true, "你我他", , null];
console.log(arr);
- 函数
//函数的使用
//函数的结构：function 方法名（参数）+ 函数体 + return
function add(a,b) {
let sum = a + b;
console.log(sum);
return sum;
}
add(1,4);
add("世界", "和平");
add(true, false);
add(true, true);
add(false, false);
let sum = function (a,b) {
let sum = a * b;
return sum;
}
let aa = sum(2,5);
console.log(aa);//答案为10
- 对象
//对象
let xiaoming = {
"name": "xiaoming",
"age": 18,
"isWork": false,
"love": "badminton",
"say": function(){
console.log("hello");
}
}
console.log(xiaoming);
console.log(xiaoming.name);
console.log(xiaoming["love"]);
//查
console.log(xiaoming);
console.log(xiaoming.name);
console.log(xiaoming["love"]);
xiaoming.say();
//增
xiaoming.id = 23;
//改
xiaoming.age = 19;
console.log(xiaoming);
JQuery（作为JS的框架，封装了JS常用的功能代码）
- 引入依赖
在JQuery官网找到压缩版，对链接进行另存，并且把存下的链接复制到vscode中，这样就能在本地使用框架，不用去外网求框架，速度更快，而且保证安全性。
- 语法
$().action()
$ 这是一个函数，它是jQuery提供的一个全局函数，用于选择的操作HTML元素
括号中作为选择器，用来“查询”和“查找”HTML元素
action操作，执行对元素的操作 - JQuery选择器
$() 中有许多选择器可以选择，例如 * 表示所有元素，“p" 表示所有p元素。 - JQuery事件
有很多时间，鼠标、键盘、点击这些都有交互，也是事件，其中包含事件源、事件类型和事件处理程序。
以下就是点击消失的交互事件。
<body>
<button type = "button">点我消失</button>
<script src="jquery-4.0.0.min.js"></script>
<script>
// $表示选取元素，对其编写交互功能
// $(document).ready(function() {
// $('button').click(function() {
// $(this).hide();
// })
// });
// 后者用$简化表示文件
$(function() {
$("button").click(function() {
$(this).hide();
});
});
// 后者取消了文件的选取，编译结果不影响
$("button").click(function() {
$(this).hide();
})
</script>
</body>
- 操作元素
有三个简单获取元素内容的JQuery方法：
- text() 设置或返回所选元素的文本内容
- html() 设置或返回所选元素的内容（包括HTML标签）
- val() 设置或返回表单字段的值
总结：
- text/html 对非表单标签生效，这里举例的是div
- val 对表单标签生效，这里举例的是input
- 有参数，表示赋值；无参数，表示取值
- html和text的区别：取值上text()只取文本，html()会返回html标签内容；赋值上text()会把html标签当作普通文本展示，html()会展示html内容。
JQuery attr() 方法用于获取属性值
<body>
<div><h1>我是一个div</h1></div>
<input type="text" id="userName" value="admin"><br/>
<button id="submit">点击有惊喜</button><br/>
<img src="https://picsum.photos/200" id="picture" id="picture" width="200px"><br/>
<script src="jquery-4.0.0.min.js"></script>
//事件一：点击按钮，获取值
<script>
$("#submit").click(function() {
let imgSrc = $("#picture").attr("src");
console.log(imgSrc);
// let userName = $("#userName").val();
// console.log(userName);
// $("#userName").val("我变了");
// let userName2 = $("div").text();
// console.log(userName2);
// $("div").text("<h2>我是新版本</h2>");
// let userName4 = $("div").html();
// console.log(userName4);
// $("div").html("<h2>我是新版本</h2>");
});
</script>
</body>
- CSS()方法设置或返回所选元素的一个或多个样式属性。
- 添加HTML内容：
- append() : 在被选元素的结尾插⼊内容
- prepend() : 在被选元素的开头插⼊内容
- after() : 在被选元素之后插⼊内容
- before() : 在被选元素之前插⼊内容
- 删除元素：
- remove()：删除被选元素（及其子元素）
- empty()：删除所选元素的子元素
<body>
<div sytle = "font-size: 36px;">我是一个文本</div>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
<script src="jquery-4.0.0.min.js"></script>
<script>
// remove()删除方法把整个列表的框架都删掉了
// empty()删除方法把整个列表中的内容都删掉了，但是还有ol框架
// $("ol").remove();
// $("ol").empty();
// $("ol").before("I'm before");
// $("ol").prepend("I'm prepend");
// $("ol").append("I'm append");
// $("ol").after("I'm after");
$("div").click(function() {
$(this).css("font-size","48px");
let fontSize = $(this).css("font-size");
console.log(fontSize);
});
</script>
</body>
- 猜数字案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button type = "button" id="reset">重新开始一局游戏</button><br/>
请输入要猜的数字：<input type="text" id="number">
<button type="button" id="button">猜</button><br/>
已经猜的次数：<span id="count">0</span><br/>
结果：<span id="result"></span>
<script src="jquery-4.0.0.min.js"></script>
<script>
$(function() {
//随机生成一个 1-100 的数字
var guessNumber = Math.floor(Math.random() * 100) + 1 //random生成【0，1）的数字，*100后【0，100）的小数，用向下取整成整数【0，99】，再总体加一为【1，100】
var count = 0;
//关于提交了数字后的数值比较
$("#button").click(function(){
count++;
$("#count").text(count);
var userGuess = parseInt($("#number").val());
if(userGuess == guessNumber) {
$("#result").text("猜对了");
$("#result").css("color","gray");
} else if(userGuess > guessNumber) {
$("#result").text("猜大了");
$("#result").css("color","red");
} else {
$("#result").text("猜小了");
$("#result").css("color","red");
}
});
$("#reset").click(function() {
//按了重新开始的按钮，元素的数值需要重新设置
guessNumber = Math.floor(Math.random() * 100) + 1;
count = 0;
$("#number").val("");
$("#count").text(count);
$("#result").text("");
});
});
</script>
</body>
</html>
- 表白墙案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.container {
width: 400px;
margin: 0 auto;
}
h1 {
text-align: center;
padding: 20px 0;
}
p {
color: #666;
text-align: center;
font-size: 14px;
padding: 10px 0;
}
.row {
height: 40px;
display: flex;
justify-content: center;
align-items: center;
}
span {
width: 100px;
line-height: 40px;
}
.edit {
width: 200px;
height: 30px;
}
.submit {
width: 304px;
height: 40px;
color: white;
background-color: orange;
border: none;
}
</style>
</head>
<body>
<div class="container">
<h1>表白墙</h1>
<p>输入后点击提交，会将信息显示在表格中</p>
<div class="row">
<span>谁: </span>
<input class="edit" type="text">
</div>
<div class="row">
<span>对谁: </span>
<input class="edit" type="text">
</div>
<div class="row">
<span>说什么: </span>
<input class="edit" type="text">
</div>
<div class="row">
<input type="button" value="提交" class="submit">
</div>
</div>
<script src="jquery-4.0.0.min.js"></script>
<script>
$(function() {
$(".submit").click(function() {
var from = $(".edit:eq(0)").val();
var to = $(".edit:eq(0)").val();
var message = $(".edit:eq(2)").val();
console.log(from + "," + to + "," + message);
if(from == '' || to == '' || message == '') {
return;
}
// 2. 构造 html 元素
var html = '<div class = "row">' + from + '对' + to + '说：' +message +
'</div>';
// 3.把构造好的元素添加进行，在整个div后加入
$(".container").append(html);
// 4. 同时清理之前输入框的内容
$(":text").val("");//":text" 表示所有text的标签
});
});
</script>
// 刷新后，数据没有了，前端只能存储少量的数据，后端可以借助数据库存储大量的数据
</body>
</html>
总结：
- 其中表单标签点出的内容用 val() 接受，非表单标签点出的内容用 text() 接受。
- 加入id的标注，可以准确的获取元素进行交互的代码编写。
- name必须要写在表单标签中，是提交数据的key
更多推荐
9
0- 0
已为社区贡献2条内容
所有评论(0)