大家都知道,现在虽然是前后端分离,但是前端工程师必须了解一些后端的知识,而后端开发
的工程师也必学一些前端的知识,今天就和我一起来看看后端必学的一些前端知识,我是一个
学习java后端的,最近会更新一系列java后端要学的前端的知识.

JavaScript

文章目录

JavaScript
2.基本对象
事件监听机制:

基本概念:一门客户端脚本语言

运行在客户端浏览器中的,每一个浏览器都有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.直接在html标签上,指定事件的属性(操作),属性值就是js代码
    - οnclick="" 表示单击事件
  - 2.通过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.毫秒值
      - clearTimeout():取消由setTimeout()方法设置的timeout
        
        参数传一个timeout的对象
      - setInterval():按照指定的周期(以毫秒记)来调用函数或计算表达式
        
        参数:
        
        1.js代码或者一个表达式
        
        方法名或者js代码
        
        2.毫秒值
      - clearInterval():取消由setInterval()设置的timeout
        
        参数传一个timeout的对象
  - 3.属性
    - 1.可以获取其他BOM对象
      - history
      - location
      - Navigator
      - Screen
    - 2.获取DOM对象
      - document
  - 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
  - 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():
    - 3.属性
  - 2.Element:元素对象
    - 1.创建/获取:通过document来获取和创建
    - 2.方法:
      - 1.removeAttribute():删除属性
      - 2.setAttribute():设置属性
  - 3.Node:节点对象,其他5个对象的父对象
    - 节点可以是元素节点,属性节点,文本节点,或者是任意一种节点类型
    - 特点:所有的DOM节点都可以被认为是一个节点
    - 方法:
      - CRUD DOM树:
        
        appendChild():向节点的子节点列表的结尾添加新的子节点
        removeChild():删除(并返回)当前节点的指定子节点
        replaceChild():用新节点替换一个子节点
    - 属性
      - parentNode : 返回节点的父节点
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.onkeydown:某个键盘按钮被按下了
  - 2.onkeyup:某个键盘按钮被松开了
  - 3.onkeypress:某个键盘按键被按下并松开
- 选中和改变:
  - onchange:域的内容被改变
  - onselect:文本被选中
- 表单事件:
  - 1.onsubmit:确认按钮被点击
  - 2.onreset:重置按钮被点击

JavaScript学java后端也得学??

JavaScript

文章目录

基本概念:一门客户端脚本语言

1.基本语法

基本输出语句:

3.数据类型

4.变量

5.运算符

1.一元运算符:只有一个运算数的运算符

算术运算符

赋值运算符

比较运算符

逻辑运算符

三元运算符

6.流程控制语句

8.练习99乘法表

2.基本对象

1.创建

2.方法

3.属性

4.特点

Array:数组对象

1创建

2.方法

3.属性

4.特点

Boolean

Date

1.创建

2.方法

Math:数学

1.创建

2.方法

Number

String

RegExp:正则表达式对象

1.正则表达式:定义字符串的组成规则的表达式

1.开始和结束符号

2.量词符号

正则对象:

Global

1.特点:全局对象,这个Global中封装的方法不需要对象就可以直接使用

2.方法:

DOM简单学习:为了满足案例要求

BOM

事件监听机制: