JavaScript学java后端也得学??

ゝ一世哀愁。 2021-07-24 21:37 374阅读 0赞

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

# JavaScript #

### 文章目录 ###

*  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
 *  事件监听机制:

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

*  运行在客户端浏览器中的,每一个浏览器都有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>
           
               <script> alert("hello,world") </script>
           
               <input type="text">
    
           
           </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>
    
        
        ```

#### 逻辑运算符 ####

```
        &&  || !
    
        之前有讲如果类型不是运算符要求的类型,会进行自动的类型转换
    
        其他类型转换为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>

## 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>

## 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>

*  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:重置按钮被点击