大家都知道,现在虽然是前后端分离,但是前端工程师必须了解一些后端的知识,而后端开发
的工程师也必学一些前端的知识,今天就和我一起来看看后端必学的一些前端知识,我是一个
学习java后端的,最近会更新一系列java后端要学的前端的知识.
JavaScript
文章目录
基本概念:一门客户端脚本语言
- 运行在客户端浏览器中的,每一个浏览器都有JavaScript的解析引擎
- 脚本语言:不需要编译,直接就可以被浏览器解析和执行了
- 功能:
- 可以来增强用户和html页面的交互过程,可以控制html元素,让页面有些动态的效果
- 发展史:
- 1992年,Nombase公司,开发出一门客户端脚本语言,专门用于表单的校验.命名为:C–,后来更名为ScriptEase
- 1995年,Netscape(网景)公司,开发了一门客户端脚本语言:LiveScript,请来SUN公司对LiveScript进行改造,命名为JavaScript
- 1996年,微软抄袭了JavaScript语言
- 1997年,ECMA(欧洲计算机制造商协会),ECMAScript,就是所有的客户端脚本的标准
总结:JavaScript =ECMAScript+JavaScript自己特有的东西(BOM+DOM)
- ECMAScript:客户端脚本语言的标准
1.基本语法
* 1.和html结合方式.
* 1.内部
* 定义<script>,标签体内容就是js代码
* 2.外部
* 定义<script>,通过src属性引入外部的js文件,js文件中的代码就是标签中要执行的代码
* **注意**:<script>标签可以定义在html页面的任何位置,但是定义的位置会影响执行顺序.并且<script>标签可以定义多个
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内部结合方式</title>
</head>
<body>
<!-- 在html中定义<script>标签,可以放在任意位置,但是会影响执行顺序-->
<script>
alert("hello,world")
</script>
<!--因为标签放在html代码之前,所以在html代码之前执行-->
<input type="text">
<!-- 外部结合方式指的是:在外部写好javaScript代码,然后通过<script>标签引入-->
</body>
</html>
基本输出语句:
* document.write("");表示在页面上输出内容
* 2.注释
* 单行注释: //
* 多行注释: /* */
3.数据类型
* 原始数据类型(基本数据类型)
* 1.number(数字)整数/小数/NaN(not a number)一个不是数字的数字类型
* 2.string:字符串 字符/字符串
* 3.boolean:true和false
* 4.null:一个对象为空的占位符
* undefined:未定义(如果一个变量没有给初始化,暗恶魔就就是undefined)
* 引用数据类型(对象)
4.变量
* 变量:一小块存储数据的内存空间
* Java语言是强类型的语言,而JavaScript是一个弱类型的语言
* 强类型:在开辟空间时,定义了空间将来存储的数据的数据类型
* 弱类型:在开辟变量存储空间时,不定义空间将来存储的数据的数据类型
* 语法:
* var 变量名 = 初始化的值;(也可以不初始化值)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>原始数据类型</title>
</head>
<body>
<script>
/**原始数据类型:
* number
* string
* boolean
* null
* undefined
* 引用数据类型
*
*/
var a = 5;
var b = "abc";
var c = true;
var d = null;
var e;
document.write(typeof(a)+"<br>");
document.write(typeof(b)+"<br>");
document.write(typeof(c)+"<br>");
document.write(typeof(d)+"<br>");
document.write(typeof(e)+"<br>");
</script>
</body>
</html>
5.运算符
1.一元运算符:只有一个运算数的运算符
++,--,+,-
++(自增)
--(自减)
注意这个运算符的位置(顺序和java中的一样的)
+(正号)-(负号)
注意:在JS中,如果运算数不是运算符所要求的类型,那么js引擎会自动的将运算数进行书类型转换
其他类型转为number:
1.字符串转number
var b =+"123"
alert(b)
如果自面子不是数字类型,那么转为一个不是数字的数字(NaN)
2.boolean转为number
true转为1
false转为0
算术运算符
```
+,-,*,/,%
和java没有区别
```
赋值运算符
```
=,+=,-=....
```
比较运算符
```
>,<,>=,<= , == , ===(全等于)
比较运算符的比较分为:
1.类型相同的比较
直接比较
字符串按照字典顺序比较;按位逐一比较,直到得出大小为止
2.类型不同,先进行类型的转换,再比较
===运算符
全等于,在比较之前,先进行类型判断,如果类型不一样,则直接返回false.
```
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>比较运算符</title>
</head>
<body>
<script>
var a = 123;
var b = "123";
document.write(a ==b);
</script>
</body>
</html>
<!--返回的结果是true -->
```
逻辑运算符
```
&& || !
之前有讲如果类型不是运算符要求的类型,会进行自动的类型转换
其他类型转换为boolean:
1.number转boolean:
0为假,非0为真
2.string转boolean:
除了空字符串其他都是true
3.null&undefined
都是false
4.对象转boolean:
所有对象都是true
```
三元运算符
```
? :
```
6.流程控制语句
* if..else
* switch
* 在java中switch可以接受的数据类型
```
switch(变量)
case 值:
switch可以接受的变量的类型byte/int/short/char/枚举(1.5之后)/string(1.7)之后
```
* 在JS中switch可以接收任何**原始的数据类型**
* while
* do...while
* for
* 7.特殊语法:
```
1.语句以;语句,如果一行只有一行语句,那么;可以省略
2.变量定义问题:
变量的定义可以使用var关键字,也可以不使用任何关键字
用:定义的变量是局部变量
不用:定义的变量是全局变量(不建议使用)
```
8.练习99乘法表
2.基本对象
* Function对象:描述一个方法或者函数的对象
1.创建
```
1. var fun = new Function(形参列表,方法体);(不常用)
2. function 方法名称(形参列表){
方法体
}
例如:
function fun(a,b){
alert(a+b);
}
fun(1,3);
3. var 方法名 = function(形参列表){
方法体
}
```
2.方法
* 调用:直接写方法名和传参就可以了
3.属性
* length:代表形参的个数
4.特点
-
方法定义时,形参的类型可以不写
-
方法是一个对象,重名的方法,会覆盖之前定义的方法
-
在JS中方法的调用只与方法的名称调用有关,和参数列表无关.
-
在方法声明中有一个隐藏的内置对象(数组),arguments,封装传进去的所有的实际参数.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>function对象</title> </head> <body> <script> /** function对象(方法/函数) * 语法格式: * 1. var 方法名 = new function(形参列表){ * 方法体 * } * 2. function 方法名(形参列表){ * 方法体 * } * */ function fun(a,b) { document.write(a+b); } fun(3,4); document.write("<br>") document.write(fun.length); </script> </body> </html>
Array:数组对象
1创建
* 1.var arr = new Array(元素列表);
* 2.var arr = new Array(数组的默认长度)
* 3.var arr =[元素列表];
2.方法
* join(参数):将数组的元素按照指定的分隔符拼接为字符串
* push():向数组的末尾添加一个或更多元素,并且返回新的长度
*
3.属性
- length:数组的长度
4.特点
- JS中,数组元素的类型是可变的
- 在JS中,数组的长度是可变的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Array对象</title>
</head>
<body>
<script>
/**
* 创建Array数组对象的方式
* 1.var arr = new Array(元素列表);
* 2.var arr = new Array(元素长度);
* 3.var arr = new Array[元素列表];
*/
var arr1 = new Array(1,2,3,4);
var arr2 = new Array(5);
var arr3 = [1,23,4];
document.write(arr1);
document.write("<br>");
document.write(arr1[1]);//javaScript语法中Array对象也支持索引,并且下标也是从0开始
document.write("<br>");
document.write(arr2);
document.write("<br>");
document.write(arr3);
</script>
</body>
</html>
Boolean
Date
1.创建
- var Date = new Date();
2.方法
- toLocaleString():返回当前date对象对应的时间本地字符串
- getTime():获取毫秒值,返回当前时间对象描述的时间和1970年1月1日零点的时间所过的毫秒值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Date对象</title>
</head>
<body>
<script>
/**
* var Date = new Date();
* 默认的显示方式和java中的一样,但是我们在java中要使用SimpleDateFormat才能进行格式转换
* 在javaScript中很简便,调用toLocalString()方法就可以了
*/
var date = new Date();
document.write(date);
document.write("<br>");
document.write(date.toLocaleString());
document.write("<br>");
document.write(date.toLocaleDateString());
document.write("<br>");
document.write(date.getTime())
</script>
</body>
</html>
<!--输出:
Thu Apr 30 2020 00:28:29 GMT+0800 (中国标准时间)
2020/4/30 上午12:28:29
2020/4/30
1588177709696 -->
Math:数学
1.创建
- 特点:该对象不需要创建可以直接使用
2.方法
- 1.random():返回0~1之间的一个随机数(含头不含尾,和java中很类似)
- ceil():对数进行想向上上舍入
- floor()对数进行下舍入
- round():对数进行4舍5入为最接近的整数
- 3.属性
- PI π值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Math对象</title>
</head>
<body>
<script>
/**
* Math对象比较特殊,不需要创建就可以直接使用
*/
var a = Math.PI;
document.write(a);
document.write("<br>");
document.write(Math.random());
document.write("<br>");
document.write(Math.ceil(5.32));
document.write("<br>");
document.write(Math.floor(5.98));
document.write("<br>");
document.write(Math.round(5.51));
</script>
</body>
</html>
<!--输出:
3.141592653589793
0.06079875959909731
6
5
6
-->
Number
String
RegExp:正则表达式对象
1.正则表达式:定义字符串的组成规则的表达式
1.开始和结束符号
以 ^ 开始
以 $ 结束
```
* 1.单个字符
```
[a]表示字符a
[ab]表示字符a或者字符b
[a-z]表示字符a到字符z
为了简便:
\d:单个数字字符[0-9]
\w:单个单词字符[a-zA-Z0-9_]
2.量词符号
? 表示出现0次或者1次
* 表示0次或多次
+ 表示出现1次或者多次
{m,n} m<=表示出现次数<=n
{,n} m缺省表示至多n次
{m,} n缺省表示最少m次
正则对象:
- 1.创建
- var reg = new RegExp(“正则表达式”);
- var reg = /正则表达式/;
- 2.方法
- test(参数):验证指定字符串是否符合正则表达式规范
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>RegExp正则对象</title>
</head>
<body>
<script>
/**
* RegExp正则对象
* 创建:
* 1.var reg = new RegExp("正则表达式");
* 2.var reg = /正则表达式/
*
* 方法:
* test()方法检测是否符合正则表达式
*/
var str = "zhangsan"
var reg = new RegExp("//w{6,12}");
document.write(reg.test(str));
</script>
</body>
</html>
Global
1.特点:全局对象,这个Global中封装的方法不需要对象就可以直接使用
2.方法:
-
1.encodeURL:url编码
-
2.decodeURL url解码
-
encodeURLComponent:url编码,编码的字符更多
-
decodeURLComponent:url解码,解码的字符更多
-
parseInt:将一个字符串转为数字
逐一判断每一个字符是否为数字,知道不是数字为止,把前面的数字部分转为number
-
isNaN():判断是不是NaN
- NaN六亲不认,NaN参与的==比较都会返回false,所以没办法比较,因此有isNaN这个方法来判断是不是NaN.
-
eval():将JavaScript字符串,并将它作为脚本代码来执行
-
DOM简单学习:为了满足案例要求
-
控制html文档的内容
-
代码:获取页面标签(元素)对象 Element
- document.getElementById(“id值”):获取元素的对象
-
操作Element对象
- 1.修改属性值
- 明确获取的对象是哪一个,查看api文档,找那些属性可以设置
- 2.修改标签体的内容
- 属性:innerHTML
- 1.修改属性值
-
事件简单了解:
- 功能:某些组件被执行了某些操作后,触发某些代码的执行
- 如何绑定事件:
- 1.直接在html标签上,指定事件的属性(操作),属性值就是js代码
- οnclick="" 表示单击事件
- 2.通过js获取元素对象,指定事件属性,设置一个函数
- 1.直接在html标签上,指定事件的属性(操作),属性值就是js代码
BOM
-
概念:Browser Object Model浏览器对象模型
- 将浏览器的各个组成部分封装成对象
-
组成:
-
Window:窗口对象
- 1.创建
- 2.方法
- 1.和弹出框有关的方法:
- 1.alert()显示带有一段消息和一个确认键的警告框
- 2.confirm():显示带有一段消息以及确认按钮和取消按钮的对话框
- 如果用户点击确认按钮,则返回true,否则返回false
- 3.prompt();显示可提示用户输入的对话框
- 返回值是获取用户输入的值
- 2.和打开关闭有关的方法:
- open(url地址):打开一个新的页面,页面的url地址传入参数
- close():谁(页面)调用这个方法就关闭那个窗口
- 3.和定时器有关的方法
- 定时器:相当于闹钟
- setTimeout():在指定的毫秒数后执行函数或者调用表达式
- 参数:
- 1.js代码或者一个表达式
- 方法名或者js代码
- 2.毫秒值
- 1.js代码或者一个表达式
- 参数:
- clearTimeout():取消由setTimeout()方法设置的timeout
- 参数传一个timeout的对象
- setInterval():按照指定的周期(以毫秒记)来调用函数或计算表达式
- 参数:
- 1.js代码或者一个表达式
- 方法名或者js代码
- 2.毫秒值
- 1.js代码或者一个表达式
- 参数:
- clearInterval():取消由setInterval()设置的timeout
- 参数传一个timeout的对象
- 1.和弹出框有关的方法:
- 3.属性
- 1.可以获取其他BOM对象
- history
- location
- Navigator
- Screen
- 2.获取DOM对象
- document
- 1.可以获取其他BOM对象
- 4.特点
- window不需要创建,可以直接使用.window.方法名()直接调用
- window引用可以省略
-
Navigator:浏览器对象
-
Screen:显示器[屏幕对象
-
History:历史记录对象
-
Location:地址栏对象
-
1.创建(获取):
- window.location
- location
-
2.方法:
- reload()重新加载当前文档,刷新
-
3.属性;
- href:设置或者返回当前的url地址
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>自动跳转</title> <style> p{ text-align: center; } span{ color: red; } </style> </head> <body> <p> <span id="time">5</span>秒后自动转跳到首页 </p>
-
-
<script>
/**
* 分析;
* 1.文字的控制用一个<p>便签
* 2.控制读秒,因为要控制秒数,所以用一个<span>包裹
* 2.1
*/
var second = 5;
var time =document.getElementById("time");
function showtime() {
second --;
if(second<=0){
//特别注意一下这里的href设置的格式,href是属性,不是方法
location.href="https://www.baidu.com";
}
time.innerHTML =second+"";
}
//设置定时器
setInterval(showtime,1000);
</script>
</body>
</html>
- DOM
- 概念: Document Object Model文档对象模型
- 将标记语言文档的各个组成部分,封装为对象,可以使用这些对象,对标记语言文档进行CRUD的动态操作
- DOM定义了访问HTML和XML文档的标准
- W3C DOM标准被分为3个不同的部分:
- 核心DOM:针对任何结构化文档的标准模型
- document对象:文档对象
- Element:元素对象
- Attribute:属性对象
- Text:文本对象
- Comment:注释对象
- XML DOM:针对XML文档的标准模型
- HTML DOM:针对HTML文档的标准模型
- 核心DOM:针对任何结构化文档的标准模型
- 核心DOM
- 1.document对象:
- 1.创建:在htnl中可以使用window对象来获取
- window.document
- document
- 2.方法
- 1.获取Element对象:
- 1.getElementById():根据id属性值获取元素对象,id属性值一般是惟一的
- 2.getElementByTagName():根据元素名称获取元素对象们,返回值是一个数组
- 3.getElementByClassName():根据Class属性值来获取元素们,返回值是一个数组
- 4.getElementByName():根据name属性值获取元素们,返回值是一个数组
- 2.创建其他DOM对象
- createAttribute(name):
- createComment():
- createElement():
- createTextNode():
- 1.获取Element对象:
- 3.属性
- 1.创建:在htnl中可以使用window对象来获取
- 2.Element:元素对象
- 1.创建/获取:通过document来获取和创建
- 2.方法:
- 1.removeAttribute():删除属性
- 2.setAttribute():设置属性
- 3.Node:节点对象,其他5个对象的父对象
- 节点可以是元素节点,属性节点,文本节点,或者是任意一种节点类型
- 特点:所有的DOM节点都可以被认为是一个节点
- 方法:
- CRUD DOM树:
- appendChild():向节点的子节点列表的结尾添加新的子节点
- removeChild():删除(并返回)当前节点的指定子节点
- replaceChild():用新节点替换一个子节点
- CRUD DOM树:
- 属性
- parentNode : 返回节点的父节点
- 1.document对象:
- 概念: Document Object Model文档对象模型
- HTML DOM:
- 1.标签体的设置和获取:innerHTML
- 2.使用html对象的属性
- 3.设置样式
- 1.使用元素的style属性来设置样式
- 2.提前定义好类选择器的样式,通过元素.className属性来设置class属性值
事件监听机制:
- 概念:某些组件被执行某些操作后,触发某些代码的执行.
- 事件:某些操作,如:单击,双击,键盘按下了.鼠标移动了
- 事件源:组件,如按钮,文本输入框
- 监听器:代码
- 注册监听:将事件,事件源,监听器结合在一起,当事件源上发生了某个事件,触发执行这个监听器执行代码
- 常见的时间:
- 点击事件:
- 1.onclick:单击事件
- 2.ondblclick:双击事件
- 焦点时间:
- 1.onblur:失去焦点:一般用来表单校验(用户名是否存在,是否合法等)
- 2.onfocus:元素获得焦点
- 加载事件:
- 1.onload:(一个页面,一张图片完成加载)
- 鼠标事件:
- 1.onmousedown :鼠标按钮被按下了
- 定义方法时,定义一个形参,接收event对象
- event的button属性可以获取哪个鼠标按钮被点击了
- 返回0鼠标左键1滚轮点击了2鼠标右键
- 2.onmouseup:鼠标按钮被松开了
- 3.onmousemove:鼠标被移动
- 4.onmouseover:鼠标移动到某一元素上
- 5.onmouseout:鼠标从某一元素移开
- 1.onmousedown :鼠标按钮被按下了
- 键盘事件:
- 1.onkeydown:某个键盘按钮被按下了
- 2.onkeyup:某个键盘按钮被松开了
- 3.onkeypress:某个键盘按键被按下并松开
- 选中和改变:
- onchange:域的内容被改变
- onselect:文本被选中
- 表单事件:
- 1.onsubmit:确认按钮被点击
- 2.onreset:重置按钮被点击
- 点击事件:
扫一扫
1630
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
