JS---ECMAScript

最新推荐文章于 2023-12-17 15:29:47 发布

洛尘~~

最新推荐文章于 2023-12-17 15:29:47 发布

阅读量157

点赞数

分类专栏：前端（JavaScript、Vue）

本文链接：https://blog.csdn.net/weixin_55999942/article/details/119224067

版权

前端（JavaScript、Vue）专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1、初体验

<!--java script的脚本块可以出现多个-->

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script><!--2、内嵌式的js-->

        //alert('好呀好呀')

    </script>

    <!--3、外部js script 双标签-->

    <script src="my.js"></script>

</head>



<body>

    <!--1、行内式的 js 直接写到元素的内部

    点击按钮弹出对话框-->

    <input type="button" value="哈哈哈" onclick="alert('啦啦啦');

                                                alert('嘿嘿嘿');

                                                alert('呀呀呀');">

        <!--4、脚本块的方式-->

    <script type="text/javascript">

        /*

        * 暴露在脚本块的程序，在页面打开的时候执行

        * 之上而下执行*/

        alert('都十二点了')

    </script>

</body>

</html>

2、输入输出语句

//这是一个输入框

    prompt('请输入你的年龄：')

    //alert 弹出警示框

    alert('计算的结果是：')

    //console 控制台输出，给程序员测试用

    console.log('我是程序员能看到的：')

3、变量的使用

<script type="text/javascript">

  /*    //1、声明了一个age变量

      var age;

      //2、赋值， 把值存入这个变量中

      age="sss";

      //3.输出结果

      console.log(age)  */

  var i;

  alert("i= "+i);

  alert(undefined);

  var k=undefined;

  alert("k= "+k);

  //一个变量没有声明/定义，直接访问？

  //alert(age);//语法错误； age is not defined（ 变量age下存在，不能这样写）

  var a,b,c=200;

  alert("a ="+a);

  alert("b ="+b);

  alert("c ="+c);



  a=false;

  alert(a);



  a="abc";

  alert(a);



  a=1.2;

  alert(a);



    </script>

4、JS函数初步


<body>

      <script type="text/javascript">

        /*

            1、JS的函数

              等同于java中的方法，函数也是一段可以被重复利用的代码片段

              函数一般都是可以完成某个特定功能的

            2、回顾java中的方法？

                【修饰符列表】 返回值类型  方法名 （形式参数列表）{

                        方法体；

                }

                例如：

                public static boolean login（String username,String password）{

                        ...

                        return true;

                }

             3、JS的函数定义？

                语法格式：

                   JS中的函数不需要指定返回值类型，返回什么类型都可以

                   第一种：

                       function 函数名（形式参数列表）{

                            函数体；

                       }

                    第二种：

                       函数名=function 函数名（形式参数列表）{

                            函数体；

                       }

         */

        function sum(a,b){

          //a，b都是局部变量名

          alert(a+b);

        }

          //定义函数sayHello

        sayHello=function (username){

            alert("hello"+username);

        }

        //函数必须调用

        //sum(10,20);

        //sayHello("小米")

      </script>

      <input type="button" value="hello" onclick="sayHello('  jack')">

      <input type="button" value="计算10和20的求和" onclick="sum(10,20)">

</body>

5、JS的函数初步

<script type="text/javascript">

      /*

        java中的方法有重载机制，JS的函数能重载吗？

           JS当中的函数在调用的时候，参数的类型，没有限制，并且参数的个数也没有限制。



           重载的含义：

             方法名或函数名一样，形参不同（个数，类型，顺序）

             JS函数名字不能重名，同名函数覆盖

      */

      function sum(a,b){

        return a+b;

      }

      //调用函数

      var retValue=sum(1,2);

      alert(retValue);



      var retValue2=sum('jack');

      alert(retValue2);//jackundefined



      var retValue3=sum();//NaN   (NaN 是一个具体存在的值，该值表示的不是数字。Not a Number)

      alert(retValue3);



      var retValue4=sum(1,2,3)

      alert(retValue4)//3



      //JS函数名字不能重名，同名函数覆盖

     function Test1(username){

          alert("test1")

      }

      function Test1(){

          alert("test1 test1")

      }

      Test1("hhh")

    </script>

6、JS得到局部变量和全局变量


<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>6、JS得到局部变量和全局变量</title>

</head>

  <body>



      <script type="text/javascript">

        /*

        全局变量：

            在函数体之外声明的变量，生命周期是浏览器打开到浏览器关闭（太占内存）

         局部变量：

            在函数体中声明的变量，局部变量的生命周期是函数执行到函数执行结束（生命周期较短）

        */

        var i=100

        function accessI(){

            alert("i= "+i);

        }

        accessI();



        //全局变量

        var username="jack";

        function accessUsername(){

            //局部变量

            var username="hhhh";

            //就近原则（局部变量）

            alert("username="+username);

        }

        //调用函数

        accessUsername();

        //访问全局变量

        alert("username="+username);



      </script>

  </body>

</html>

7、JS的数据类型


<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="UTF-8">

        <title>JS中的数据类型</title>

    </head>

    <body>

        <script type="text/javascript">

          /*

              1、JS中的数据类型有：原始类型、引用类型

                 原始数据类型有：Undefined、Number、String、Boolean、Null

                 引用数据类型有：Object以及Object的子类

              2、

                 js中比较字符串是否相等使用“==”完成，没有equals

              3、

                 有一个运算符typeof，可以获取程序的运行阶段动态的获取变量的数据类型

                 */



            function sum(a,b){

                if (typeof a=="number"&&typeof b=="number"){

                    return a+b;

                }

                alert(a+","+b+"必须为数字！")

            }

            var retValue=sum(false,"abc")

            alert(retValue);

        </script>

    </body>

</html>

8、Undefined类型

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="UTF-8">

        <title>Undefined类型</title>

    </head>

    <body>

        <script type="text/javascript">

            /*

                Undefined类型只有一个值，这个值就是  undefined

                当一个变量没有手动赋值，系统默认赋值为 undefined

                或者也可以给一个变量手动赋值undefined

            * */

            var i;  //undefined

            var k=undefined; //undefined



            alert(i===k);//true



            var y="undefined"; //undefined

            alert(y===k);//false



        </script>

    </body>

</html>

9、Number类型


<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="UTF-8">

        <title>Number</title>

    </head>

    <body>

        <script type="text/javascript">

             /*

                1、Number类型包括哪些值？

                    -1 0 1 2 3  3.14 100 NaN Infinity

                    整数、小数、正数、、负数、不是数字、无穷大属于Number类型

                2、isNaN():结果是true表示不是一个数字，结果为false表示是一个数字

                3、parseInt();可以将字符串自动转化为数字，并且取整数

                4、parseFloat();可以将字符串自动转化为数字，

                5、Math.ceil();向上取整

              */

             var v1=1;

             var v2=3.14;

             var v3=-100;

             var v4=NaN;

             var v5=Infinity;



             alert(typeof  v1);

             alert(typeof  v2);

             alert(typeof  v3);

             alert(typeof  v4);

             alert(typeof  v5);



             //关于NaN(表示Not a Number，不是一个数字，但属于Number类型)

             //什么情况下是NaN呢？

             //运算结果本来是一个数字，最后算完不是一个数字的时候，结果就是NaN

             var a=100;

             var b="中国人";

             alert(a/b);   //NaN



             var e="abc";

             var f=10;

             alert(e+f);// 字符串拼接，abc10



             //Infinity 当除数为0的时候，结果为无穷大

             alert(10/0);



             //思考，10/3=？

             alert(10/3);   //3.3333333333333335



             function sum(a,b){

                 if (isNaN(a)||isNaN(b)){

                     alert("参与运算的必须为数字！")

                     return;

                 }

                 return a+b;

             }

             sum(100,"g");

             alert(sum(100,200));



             //parseInt();可以将字符串自动转化为数字，并且取整数

             alert(parseInt("3.9999"));//3

             alert(parseInt(3.9999));//3



             //parseFloat();可以将字符串自动转化为数字，

             alert(parseFloat("3.14")+1);//4.14

             alert(parseFloat("3.2")+1);//4.2



             //Math.ceil();向上取整

             alert(Math.ceil("2.1"))//3

        </script>



    </body>

</html>

10、Boolean类型

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="UTF-8">

        <title>Boolean类型</title>

    </head>

    <body>

        <script type="text/javascript">

            /*

             1、JS的布尔类型永远只有两个值：true和false

             2、在Boolean类型中有一个函数为：Boolean（）；

                    语法格式：

                        Boolean（数据）

                     Boolean（）函数的作用是将非布尔类型转换为布尔类型，

                     有字符串为true，没有字符串为false

             */

            var username="jack";



            /*if (Boolean(username)){

                alert("欢迎你"+username)

            }else {

                alert("用户名不能为空！")

            }*/



            if (username){

                alert("欢迎你"+username)

            }else {



                alert("用户名不能为空！")

            }



            //有就为true，没有就为false

            alert(Boolean(1))//true

            alert(Boolean(0))//false

            alert(Boolean(""))//false

            alert(Boolean("abc"))//true

            alert(Boolean(null))//false

            alert(Boolean(NaN))//false

            alert(Boolean(undefined))//false

            alert(Boolean(Infinity))//true



            //Null类型只有null一个值

            alert(typeof null);//Object

        </script>

    </body>

</html>

11、String类型


<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="UTF-8">

        <title>String类型</title>

    </head>

    <body>

        <script  type="text/javascript">

            /*

                String类型

                 1、在JS当中字符串可以使用单引号，也可以使用双引号。

                    var  s1='abcdef';

                    var  s2="abcdef";

                 2、在JS中，怎么创建字符串对象呢？

                    两种方式：

                        第一种：var s=“abc”；

                        第二种：（使用JS内置的支持类String），var s2=new String（“abc”）；

                     需要注意的是：string是一个内置的类，可以直接用，string的父类是Object

                  3、关于String类型的常用属性和函数？

                      常用属性：

                          length 获取字符串长度

                      常用函数：

                         indexOf     获取指定字符串在当前字符串中第一次出现的索引

                         lastIndexOf   获取指定字符串在当前字符串中最后一次出现的索引

                         replace    替换

                         substr      截取子字符串

                         substring   截取子字符串

                         toLowerCase    转换小写

                         toUpperCase    转换大写

                         split          拆分字符串

            */



            //小string属于原始类型

            var x="abc";

            alert(typeof x)//string



            //大String属于（Object）

            var y=String("abc");

            alert(typeof y);//Object



            //获取字符串长度

            alert(x.length)

            alert(y.length)



        </script>

    </body>

</html>

12、Object类型


<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="UTF-8">

        <title>Object类型</title>

    </head>

    <body>

        <script type="text/javascript" >

         /*

             Object类型；

               1、Object类型是所有类型的超类，自定义的任何类型，默认继承Object

               2、Object类包含哪些属性？

                  prototype属性（常用的，给类动态的扩展属性和函数）

                  constructor属性

               3、Object类包含哪些函数？

                  toString（）

                  valueOf（）

                  toLocaleString（）

               4、在JS当中定义的类默认继承Object，会继承Object类中所有的属性以及函数

               5、在JS当中怎么定义类？怎么new对象？

                   定义类的语法：

                        第一种方式：

                            function 类名（形参）{

                            }

                        第二种方式：

                            类名=function（形参）{

                            }

                    创建对象的语法：

                        new 构造方法名（实参）;

         */

         //把sayHello当做一个普通的函数来调用

        /* new sayHello();

         //把sayHello当做一个类来创建对象

         var obj=new sayHello();//obj是一个引用，保存内存地址指向堆中的对象

*/

         //定义一个学生类

         function Student(){

             alert('Student.....');

         }

         //普通函数调用

         Student();//Student.....



         //当做类来创建对象

         var stu=new Student();

         alert(stu); //[object Object]



         //JS的类的定义，同时又是一个构造函数的定义

         //在JS中类的定义和构造函数的定义是放在一起完成的

         function User(a,b,c){

             this.sno=a;

             this.sname=b;

             this.sage=c;

         }

         //创建对象

         var u1=new User(111,"张三",30)

         //访问对象的属性

         alert(u1.sno);

         alert(u1.sname);

         alert(u1.sage);



         Product=function (pno,pname,price){

             //属性

             this.pno=pno;

             this.pname=pname;

             this.price=price;

             //函数

             this.getPrice=function (){

                 return this.price;

             }

         }



         var pro=new Product(111,"西瓜",4.0)

         var pri=pro.getPrice()

         alert(pri);

         //通过prototype这个属性来给类动态扩展属性以及函数

         Product.prototype.getPname=function (){

             return this.pname;

         }

         //调用后期扩展的getPname（）

         var pname=pro.getPname();

         alert(pname);



         //给String扩展一个函数



         String.prototype.suiyi=function (){

             alert("扩展的函数")

         }

         "lll".suiyi();//扩展的函数



        </script>

    </body>

</html>

13、JS的常用事件


<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="UTF-8">

        <title>JS的常用事件</title>

    </head>

    <body>

        <script type="text/javascript">

            /*

                 JS中的事件：

                   blur失去焦点

                   focus获得焦点



                   click鼠标单击

                   dblclick鼠标双击



                   keydown键盘按下

                   keyup键盘弹起



                   mousedown鼠标按下

                   mouseover鼠标经过

                   mousemove鼠标移动

                   mouseout鼠标离开

                   mouseup鼠标弹起



                   reset表单重置

                   submit表单提交



                   change下拉列表选中项改变，或文本框内容改变

                   select文本被选定

                   load页面加载完毕（整个HTML页面中所有的元素全部加载完之后发生）



                 任何一个事件都会对应一个事件句柄是在事件前添加on。

                 onXXX这个事件句柄出现在一个标签的属性位置上。（事件句柄以属性的形式存在）

            */

            //对当前的程序来说，sayHello函数被称为回调函数（callback函数）



            function sayHello(){

                alert("hello jack!")

            }

        </script>

        <!--注册事件的第一种方式，直接在标签中使用事件句柄-->

        <input type="button" value="hello" onclick="sayHello()"/>



        <input type="button" value="hello2" id="mybtn"/>

        <input type="button" value="hello3" id="mybtn1"/>

        <input type="button" value="hello4" id="mybtn2"/>

        <script type="text/javascript">

            function doSome(){

                alert("do some!")

            }

            /*

                第二种注册事件的方式，是使用纯JS代码完成事件的注册

            */

            //第一步：获取这个按钮对象 （document代表这个HTML页面）

            var btnObj = document.getElementById("mybtn");

            //第二步：给按钮对象的onclick属性赋值

            btnObj.onclick=doSome;//不加小括号



            var byId = document.getElementById('mybtn1');

            byId.onclick=function () {   //这个函数没有名字叫做匿名函数，匿名函数也是回调函数

                alert("test...")

            }

            document.getElementById("mybtn2").onclick=function () {

                alert("以后都这样写...")

            }

        </script>

    </body>

</html>



14、JS的执行顺序

2021年6月29日

11:24



<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="UTF-8">

        <title>JS的执行顺序</title>

    </head>

    <body onload="ready()">



        <script type="text/javascript">

          /* document.getElementById("btn").onclick=function () {

                alert("Hi...")

            }

          */

          /*

                window.onload=function(){

                document.getElementById("btn").onclick=function () {

                  alert("Hi...")

              }

              };



          */


          function ready(){

              document.getElementById("btn").onclick=function () {

                  alert("Hi...")

              }

          }

        </script>

        <input type="button" value="hello" id="btn">

    </body>

</html>

15、JS代码设置节点的属性


<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="UTF-8">

        <title>JS代码设置节点的属性</title>

    </head>

    <body>



        <script type="text/javascript">

            window.onload=function () {

                document.getElementById("btn").onclick=function () {

                    var mytext = document.getElementById("mytext");

                    mytext.type="checkbox";

                }

            }

        </script>

        <label for="mytext"></label><input type="text" id="mytext"/>



        <input type="button" value="将文本框改为复选框" id="btn"/>

    </body>

</html>

16、JS代码捕捉回车键


<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="UTF-8">

        <title>JS代码捕捉回车键</title>

    </head>

    <body>

        <script type="text/javascript">

            window.onload=function () {

                var user = document.getElementById("username");

                    user.onkeydown=function (event) {

                    //获取键值，回车键键值是13，ESC的键值是27

                    //对于“键盘事件对象来说”都有keyCode属性来获取键值

                    //alert(event);  [object KeyboardEvent]

                    if (event.key==='Enter'){

                        alert("正在进行验证....");

                        user.onclick=sayHello;

                    }

                }

            }

            function sayHello(a) {

                alert("lll");

            }

        </script>

        <input type="text" id="username">

    </body>

</html>

17、JS的void运算符


<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="UTF-8">

        <title>JS的void运算符</title>

    </head>

    <body>

        页面顶部 <br> <br> <br><br><br><br> <br> <br>

        <br> <br> <br><br><br>

        <br> <br> <br><br><br>

        <br> <br> <br><br><br>

        <br> <br> <br><br><br><br>

        <br> <br><br><br><br> <br> <br><br><br>

        <br> <br> <br><br><br>

        <br><br><br> <br> <br><br><br>



        <!--

        void运算符的语法，void（表达式）

        运算原理，执行表达式，但不返回任何结果

        -->

        <a href="JavaScript:void(0)" onclick="alert('test code')">

            既保留超链接的样式，同时用户点击超链接的时候执行一段JS代码，但页面不跳转

            <br><br>

        </a>

    </body>

</html>

18、Js的控制语句


<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="UTF-8">

        <title>JS的控制语句</title>

    </head>

    <body>

        <script type="text/javascript">

            /*

                1、if

                2、switch

                3、while

                4、do...while...

                5、for循环



                6、break

                7、continue

            */

            //创建JS数组

            var arr=[false,true,1,2,3.14];//JS中数组元素的类型随意,个数随意

            //遍历数组

            for (var i = 0; i <arr.length ; i++) {

                alert(arr[i])

            }



            //for...in  i代表数组元素的下标

            for (var i in arr) {

                //alert(i)

                alert(arr[i])

            }



            //for...in语句可以遍历对象的属性

            User=function (username,password) {

                this.username=username;

                this.password=password;

            }



            var u=new User("张三","444");

            alert(u.username+","+u.password);//张三，444

            alert(u["username"]+","+u["password"]);//张三，444



            for (var shuXingMing in u){

                //alert(shuXingMing);

                //alert(typeof shuXingMing) shuXingMing是一个字符串

                alert(u[shuXingMing])

            }

        </script>

    </body>

</html>