JavaScript学java后端也得学??

13 篇文章 0 订阅
8 篇文章 0 订阅
大家都知道,现在虽然是前后端分离,但是前端工程师必须了解一些后端的知识,而后端开发
的工程师也必学一些前端的知识,今天就和我一起来看看后端必学的一些前端知识,我是一个
学习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.直接在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:重置按钮被点击
  • 5
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

炒冷饭

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值