JAVAEE-前端三剑客

JavaEE导读

Java狭义来理解，就是要做web开发。⽬前⽤⼾对PC端应⽤的开发结构模式主要分为C/S和B/S结构。

C/S即Client/Server（客⼾机/服务器）结构。常⻅的C/S架构的应⽤⽐如QQ，CCTALK，各种⽹络游戏等等，⼀般需要安装并且与服务器进⾏⽹络通信的都属于此类。APP

B/S即Browser/Server（浏览器/服务器）结构。B/S架构全称是浏览器/服务器(Browser/Server)结构，分为Web浏览器、服务器程序、数据库服务三部分，可以理解为是对C/S架构⼀种改进,由于所有的业务逻辑都由服务器程序处理,所以客⼾端仅使⽤浏览器就可以完成所有操作，⼤⼤降低了客⼾端的维护成本。浏览器

接下来的学习中都是基于B/S架构的

在这里我们先简单了解前端Web开发，后续重点学习后端开发。

HTML

HTML(Hyper Text Markup Language),超⽂本标记语⾔。

例如

html 复制代码

<h1>我是⼀级标题</h1>
<h2>我是⼆级标题</h2>
<h3>我是三级标题</h3>

上⾯代码中的<h1> <h2> <h3>就是标签，学习HTML 主要就是学习标签。

标签名(body)放到<>中

⼤部分标签成对出现. <h1> 为开始标签, </h1> 为结束标签.

少数标签只有开始标签,称为"单标签".

开始标签和结束标签之间,写的是标签的内容.

开始标签中可能会带有"属性"id属性相当于给这个标签设置了⼀个唯⼀的标识符(⾝份证号码)

html 复制代码

<h3 id="myId">我是三级标题</h3>

HTML ⽂件基本结构

html 复制代码

<html>
<head>
    <title>Title</title>
</head>
<body>
    我是HTML页面
</body>
</html>

这是标签构成的一个DOM树。

HTML常见标签

标题标签 h1-h6

html 复制代码

<h1>hello</h1>
<h2>hello</h2>
<h3>hello</h3>
<h4>hello</h4>
<h5>hello</h5>
<h6>hello</h6>

段落标签

html 复制代码

<p>这是⼀个段落</p>

换⾏标签

html 复制代码

这是⼀个br标签<br/>

其中段落标签和换行标签的区别如下

图⽚标签

img标签必须带有src属性.表⽰图⽚的路径

html 复制代码

<img src="rose.jpg">

width/height:控制宽度⾼度.⾼度和宽度⼀般改⼀个就⾏,另外⼀个会等⽐例缩放.否则就会图⽚失衡

border:边框,参数是宽度的像素.但是⼀般使⽤CSS来设定

html 复制代码

<img src="rose.jpg" width="500px" height="800px" border="5px">

超链接

html 复制代码

<a href="http://www.baidu.com">百度</a>

href:必须具备,表⽰点击后会跳转到哪个⻚⾯.

target:打开⽅式.默认是_self.如果是_blank则⽤新的标签⻚打开

空链接:使⽤#在href中占位

html 复制代码

<a href="#">空链接</a>

表格标签

table标签:表⽰整个表格

tr:表⽰表格的⼀⾏

td:表⽰⼀个单元格

thead:表格的头部区域

tbody:表格的主体区域

table包含tr,tr包含td

html 复制代码

<table align="center" border="1" cellpadding="20" cellspacing="0" width="500" he
    <tr>
        <td>姓名</td>
        <td>性别</td>
        <td>年龄</td>
    </tr>
    <tr>
        <td>张三</td>
        <td>男</td>
        <td>10</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>⼥</td>
        <td>11</td>
    </tr>
</table>

表单标签

form 标签

html 复制代码

<form action="test.html">
... [form 的内容]
</form>

描述了要把数据按照什么⽅式,提交到哪个⻚⾯中

input标签

各种输⼊控件,单⾏⽂本框,按钮,单选框,复选框.

type(必须有),取值种类很多,button,checkbox,text,file,image,password,radio等.

name:给input起了个名字.尤其是对于单选按钮,具有相同的name才能多选⼀.

value:input中的默认值.

checked:默认被选中.(⽤于单选按钮和多选按钮)

html 复制代码

文本
<input type="text">
密码（看不到输入）
<input type="password">
单选
性别
<input type="radio" name="sex">男
<input type="radio" name="sex" checked="checked">⼥
单选框之间必须具备相同的name属性,才能实现多选⼀效果.
多选
爱好:
<input type="checkbox"> 吃饭 <input type="checkbox"> 睡觉 <input type="checkbox">
按钮
<input type="button" value="我是个按钮">
提交按钮
<form action="test.html">
    <input type="text" name="username">
    <input type="submit" value="提交">
</form>

select标签

下拉菜单

html 复制代码

<select>
    <option>北京</option>
    <option selected="selected">上海</option>
</select>

textarea标签

html 复制代码

<textarea rows="3" cols="50">
</textarea>

⽆语义标签:div&span

div是独占⼀⾏的,是⼀个⼤盒⼦.

span不独占⼀⾏,是⼀个⼩盒⼦.

html 复制代码

<div>
    <span>咬⼈猫</span>
    <span>咬⼈猫</span>
    <span>咬⼈猫</span>
</div>
<div>
    <span>兔总裁</span>
    <span>兔总裁</span>
    <span>兔总裁</span>
</div>
<div>
    <span>阿叶君</span>
    <span>阿叶君</span>
    <span>阿叶君</span>
</div>

CSS

CSS(Cascading StyleSheet)，层叠样式表,⽤于控制⻚⾯的样式

基本语法规范

选择器+{⼀条/N条声明}

css 复制代码

<style>
p {
/* 设置字体颜⾊ */
color: red;
/* 设置字体⼤⼩ */
font-size: 30px;
}
</style>
<p>hello</p>

CSS有3种引⼊⽅式，语法如下表格所⽰

|------|---------------------------------|----------------------------------------------|
| ⾏内样式 | 在标签内使⽤style属性，属性值是css属性键值对 | <divstyle="color:green">绿⾊</div> |
| 内部样式 | 定义<style>标签，在标签内部定义css样式 | <style>h1{...}</style> |
| 外部样式 | 定义<link>标签，通过href属性引⼊外部css ⽂件 | <link rel="stylesheet"href="[CSS⽂件路径]"> |

CSS选择器主要分以下⼏种:

标签选择器
class选择器
id选择器
复合选择器
通配符选择器

css 复制代码

/* 选择所有的a标签, 设置颜⾊为红⾊ */
a {
color: red;
}
/* 选择所有的div标签, 设置颜⾊为绿⾊ */
div {
color: green;
}
/* 选择class为font32的元素, 设置字体⼤⼩为32px */
.font32 {
font-size: 32px;
}
/* 选择id为submit的元素, 设置颜⾊为红⾊ */
#submit {
color: red;
}
/* 设置⻚⾯所有元素, 颜⾊为红⾊*/
* {
color: red;
}
/*只设置 ul标签下的 li标签下的 a标签, 颜⾊为红⾊*/
ul li a {
color: blue;
}

常⽤CSS

css 复制代码

.text1{
    color: red;
}
.text1{
    font-size: 32px;
}
.text1{
    border: 1px solid purple;
}
.text1 {
    width: 200px;
    height: 100px;
}
.text1 {
    padding: 20px;
}
.text1 {
    margin: 20px;
}

只有块级元素可以设置宽⾼

JavaScript

JavaScript(简称JS),是⼀个脚本语⾔,解释型或即时编译型的编程语⾔.虽然它是作为开发Web⻚⾯的脚本语⾔⽽出名，但是它也被⽤到了很多⾮浏览器环境中

|------|---------------------------------|-------------------------------------------------------------|
| 引⼊⽅式 | 语法描述 | ⽰例 |
| ⾏内样式 | 直接嵌⼊到html元素内部 | <input type="button"value="点我⼀下" οnclick="alert('haha')"> |
| 内部样式 | 定义<script>标签，写到script标签中 | <script> alert("haha"); </script> |
| 外部样式 | 定义<script>标签，通过src属性引⼊外部js ⽂件 | <script src="hello.js"></script> |

变量

|-------|---------------------------------|------------------------|
| 关键字 | 解释 | ⽰例 |
| var | 早期JS中声明变量的关键字,作⽤域在该语句的函数内 | var name='zhangsan'; |
| les | ES6中新增的声明变量的关键字,作⽤域为该语句所在的代码块内 | les name='zhangsan'; |
| const | 声明常量的，声明后不能修改 | const name='zhangsan'; |

JavaScript 是⼀⻔动态弱类型语⾔，变量可以存放不同类型的值(动态)

数据类型

javascript 复制代码

<script>
    var a = 10;
    console.log(typeof a);//number
    var b = 'hello';
    console.log(typeof b);//string
    var c = true;
    console.log(typeof c);//boolean
    var d;
    console.log(typeof d);//undefined
    var e = null;
    console.log(typeof e);//null
</script>

运算符和Java基本相同，注意如下

|-----------------------------------------|
| == ⽐较相等(会进⾏隐式类型转换) === ⽐较相等(不会进⾏隐式类型转换) |

JavaScript对象

创建数组有两种⽅式

javascript 复制代码

// Array 的 A 要⼤写
var arr = new Array();
//常用
var arr = [];
var arr2 = [1, 2, 'haha', false]; // 数组中保存的内容称为 "元素"

函数

javascript 复制代码

// 创建函数/函数声明/函数定义
function 函数名(形参列表) {
函数体
return 返回值;
}
// 函数调⽤
函数名(实参列表) // 不考虑返回值
返回值 = 函数名(实参列表) // 考虑返回值

另一种函数调用方式

javascript 复制代码

var add = function() {
var sum = 0;
for (var i = 0; i < arguments.length; i++) {
sum += arguments[i];
}
return sum;
}
console.log(add(10, 20)); // 30
console.log(add(1, 2, 3, 4)); // 10
console.log(typeof add); // function

这是匿名函数，然后将这个匿名函数⽤⼀个变量来表示，后⾯就可以通过这个add变量来调⽤函数了

在JS中,字符串,数值,数组,函数都是对象

使用{}来创建对象

javascript 复制代码

var a = {}; // 创建了⼀个空的对象
var student = {
name: '蔡徐坤',
height: 175,
weight: 170,
sayHello: function() {
console.log("hello");
}
};

使⽤new Object创建对象

javascript 复制代码

var student = new Object(); // 和创建数组类似
student.name = "蔡徐坤";
student.height = 175;
student['weight'] = 170;
student.sayHello = function () {
console.log("hello");
}
console.log(student.name);
console.log(student['weight']);
student.sayHello();

使⽤构造函数创建对象

javascript 复制代码

function 构造函数名(形参) {
this.属性 = 值;
this.⽅法 = function...
}
var obj = new 构造函数名(实参);

JQuery

jQuery是⼀个快速、简洁且功能丰富的JavaScript框架

在使⽤jQuery CDN时，只需要在HTML⽂档中加⼊如下代码

javascript 复制代码

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

基础语法

javascript 复制代码

$(selector).action()

如果在⽂档没有完全加载之前就运⾏函数，操作可能失败

javascript 复制代码

$(document).ready(function(){
    // jQuery functions go here
});
//简洁写法
$(function(){
    // jQuery functions go here
});

|--------------|------------------|
| 语法 | 描述 |
| $("\*") | 选取所有元素 | |$ (this) | 选取当前HTML元素 |
| $("p") | 所有\元素 | |$ ("p:first") | 选取第⼀个<p>元素 |
| $("p:last") | 最后⼀个\元素 | |$ (".box") | 所有class="box"的元素 |

|------------------|---------------------------------|
| $("#box") | id="box"的元素 | |$ (".intro.demo") | 所有class="intro"且class="demo"的元素 |
| $("p.intro") | 选取class为intro的\元素 | |$ ("ulli:first") | 选取第⼀个<ul>元素的第⼀个<li>元素 |
| $(":input") | 所有\元素 | |$ (":text") | 所有type="text"的<input>元素 |
| $(":checkbox") | 所有type="checkbox"的<input>元素 |

常见事件

|--------------|--------------------------------|
| 事件 | 代码 |
| ⽂档就绪事件(完成加载) | $(document).ready(function) | | 点击事件 |$ (selector).click(function) |
| 双击事件 | $(selector).dblclick(function) |

|----------|---------------------------------|
| 元素的值发⽣改变 | $(selector).change(function) | | ⿏标悬停事件 |$ (selector).mouseover(function) |

总结

HTML是⼀种超⽂本标记语⾔,主要⽤于⻚⾯内容的显⽰和排版.如果需要更漂亮的样式展⽰和⻚⾯效果,需要搭配CSS和JavaScript来使⽤
学习HTML主要是学习标签,HTML的标签特别多,了解基本语法即可
CSS重点是学习CSS的选择器使⽤
JavaScript是⼀个脚本语⾔,和Java没有关系.JQuery是⼀个JavaScript框架,使⽤JQuery可以轻松

地选择和操作HTML元素,提⾼我们的开发效率.

前端开发对于后端开发⼈员⽽⾔不是很重要,不必花费过多时间在这个上⾯.达到借助⽹络能阅读代码的⽔平即可

断更一年多，是去考研了，现在复活了，哈哈