JavaScript~入门~

504 Gateway Time-out

于 2022-10-01 13:17:33 发布

阅读量130

点赞数 4

分类专栏： EE 文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/weixin_54175406/article/details/127133556

版权

EE 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

什么是JavaScript

JavaScript，即JS是一门解释型或即时编译型的编程语言，最早用于开发Web页面而产生；但现在已经被用到了越来越多的地方，像网页开发，客户端程序的开发，服务器开发等；

JavaScript的组成

ECMAScript(简称 ES): JavaScript 的基础语法；
DOM: 页面文档对象模型, 对页面中的元素进行操作，描述处理网页内容的方法与接口；
BOM: 浏览器对象模型, 对浏览器窗口进行操作，描述与浏览器交互的方法与接口；

JavaScript的基本规则

书写形式

内嵌式
在html文件中写JavaScript的代码时，可以使用script标签将其代码嵌入其中；

<body>
    <script>
        alert("hello JavaScript!");
    </script>
</body>

在这里插入图片描述

行内式
直接嵌入到html元素的内部；

<body>
    <input type="button" value="确定" onclick="alert('hello')">
</body>

此时点击“确定”，即有下面的效果：
在这里插入图片描述

外部式

在一个js文件中写JavaScript代码，在将文件引入到html文件中；

alert('hello')

<body>
    <script src="hello.js"></script>
</body>

在这里插入图片描述

输入与输出

以弹框的形式显示一个输入框；
属于“模态对话框”，在不点击确定的情况下无法操作页面的其他内容；

<body>
    <script >
        prompt("请输入");
    </script>
</body>

在这里插入图片描述

以弹框的形式显示一个输出框；

在这里插入图片描述

在控制台输出；
这种输出方式一般是由程序员查看，为程序员调试代码提供便利；

<body>
    <script >
        console.log("happy!")
    </script>
</body>

在这里插入图片描述

JavaScript的基本语法

JavaScript的变量

<body>
    <script >
        //变量的创建
        var month = 9;  //数字可以直接赋值
        var str = 'hello';  //字符串变量需要使用双引号或者单引号
        //读取变量
        console.log(str);
        //修改变量
        str = "happy";
        console.log(str);

    </script>
</body>

在这里插入图片描述

在JavaScript中，所有类型的变量都用统一的关键字 var 声明，表示这是一个变量；
JavaScript中的变量类型是一种动态类型，所谓动态类型就是一个变量在运行的过程中，其类型是可以发生改变的；而此变量当前具体是什么类型，是代码运行到 = 语句时才确定的；
关于声明变量的关键字，也可以使用let，至于var与let的区别，这里不做解释，因为在大部分场景下，两者是接近等价的；

<body>
    <script >
        //对于动态类型而言，这样的操作是被允许的
        var str="hello";    //字符串
        str=10; //数字
    </script>
</body>

基本数据类型

number:数字；
不区分整数和浮点数，统一认为是数字类型；

<body>
    <script >
        var a = 10; //整数
        var b = 3.14;   //浮点数
        var c = 06;   //八进制数
        var d = 0xc;  //十六进制数
        var e = 0x01; //二进制数
        var max=Number.MAX_VALUE;   //js所能表示的最大值
        console.log(max*10);    //Infinity无穷大，大于任何数
        console.log(-max*10);  //-Infinity负无穷大
        console.log("hello" - 10); //NaN表示不是一个数字
        console.log(isNaN('hello'+10));//isNaN判断是不是一个数字,true表示是非数字
    </script>
</body>

在这里插入图片描述

string:字符串类型

<body>
    <script >
        var str="hello";
        var str2='happy';
        var str3="It's a brithday cake!";//单引号和双引号可以搭配使用
        console.log(str3);
    </script>
</body>

字符串可以使用单引号或者双引号引起来，但必须引起来，否则会报错；

对于在双引号（或单引号）中使用双引号（或单引号）的情形，必须使用转义字符；

<body>
    <script >
        var str="I like this \"cat\"";
        console.log(str);
        var str2 ="C:\\Users\\Administrator...";
        console.log(str2);
    </script>
</body>

在这里插入图片描述

<body>
    <script >
        var str="happy everyday!";
        console.log(str.length);    //求字符串长度
        var str1="happy";
        var str2=" everyday";
        console.log(str1+str2); //字符串使用+进行拼接
    </script>
</body>

在这里插入图片描述

字符串和数字也可以进行拼接，得到的是字符串；

boolean 布尔类型

<body>
    <script >
        var str="hello";
        console.log(isNaN(str));    //输出布尔值
        console.log(true);
        console.log(false);
        console.log(true+1);
        console.log(false+1);
    </script>
</body>

在这里插入图片描述

JavaScript中的布尔值，true表示真，可看做1；false表示假，可看做0；
布尔值与数字进行运算时，容易发生隐式类型转换；

underfined 未定义数据类型

<body>
    <script >
        var str;
        console.log(str);
    </script>
</body>

在这里插入图片描述

对于没有进行初始化的变量，就是underfined 未定义数据类型；
未定义的值可以与字符串拼接（结果为underfined字符串），可以与数字相加（结果为NaN），因为js是弱类型的，一般会发生隐式类型转换；

null：空值类型

<body>
    <script >
        var str=null;
        console.log(str);
    </script>
</body>

null表示当前的值为空；
null与underfined相似但又是不同的，null代表是一个无效但是合法的值，而underfined代表是一个未定义的非法的值；

运算符

关于JavaScript的运算符部分，实际与java的用法是基本一致的，因此这里只对其与java的不同之处加以说明；

== 与 ===

== 用来比较相等，会自动进行隐式类型转换；
===同样用来比较相等，但不会进行隐式类型转换；

数组

JavaScript的数组与java的数组有着极大的差异；

创建数组；

<body>
    <script >
        //使用new关键字创建
        var arr=new Array();
        //直接赋值的方式创建
        var arr2=[];
        var arr3=[1,'happy',true];
    </script>
</body>

使用new 关键字创建时，Array()可以理解为是JavaScript内置的数组；
JavaScript的数组元素可以是任何合法的类型；

操作数组元素；
获取数组元素：通过下标访问获取；

<body>
    <script >
       var arr=['happy','hello','lucky','beautiful'];
       console.log(arr[0]);
       console.log(arr[1]);
       //如果下标超出范围
       console.log(arr[50]);
       //如果下标为负数
       console.log(arr[-1]);
    </script>
</body>

在这里插入图片描述

访问下标超出合法范围的情况下，代码不会报错，但是返回值为underfined;

修改数组元素：给对应的下标放上对应的元素；

<body>
    <script >
       var arr=['happy','hello','lucky','beautiful'];
       //正常修改
       arr[0]='future';
       console.log(arr[0]);
       //超出数组下标范围时
       arr[50]=50;
       console.log(arr[50]);
       //下标为负数时
       arr[-1]='tomorrow';
       console.log(arr[-1]);
       //下标为字符串时
       arr['today']=27;
       console.log(arr['today'])
    </script>
</body>

在这里插入图片描述此时查看整个数组：

在这里插入图片描述此时的数组实际上更加趋向于是一个map，整个数组中存储了2部分的值，即正常下标正常的值，以及以键值对存储的元素；

新增数组元素：

直接根据下标来添加；
这种新增方式的前提是，已知当前的数组长度或者当前可以放到哪个下标位置；
使用push来往末尾增加；

<body>
    <script >
       var arr=['happy','hello','lucky','beautiful'];
       arr.push(666);
    </script>
</body>

在这里插入图片描述
删除数组元素：splice;

<body>
    <script >
       var arr=['happy','hello','lucky','beautiful'];
       arr.splice(1,1);
       console.log(arr);
    </script>
</body>

在这里插入图片描述

splice()方法带有2个参数，第一个参数代表开始删除的位置的下标，第二个参数代表要删除的元素的个数；
上面splice(1,1)表示的含义是：从下标为1的位置开始，删除一个元素；

函数

函数的基本语法格式；

在这里插入图片描述

<body>
    <script >
        //函数定义
      function fun(x,y){
        var z=x+y;
        return z;
      }
      //函数调用并接收返回值
      var ret=fun(1,5);
      console.log(ret);
    </script>
</body>

关键字function用来声明函数；
JavaScript中的函数不一定先定义后使用，定义和调用的顺序没有要求；

函数参数

JavaScript对于函数的形参个数和实参个数没有必须实际要求；
当形参个数多于实参个数时，多出来的形参值为underfined;
当实参个数多于形参个数时，多出来的实参会被忽略；

<body>
    <script >
        //实参个数多于形参个数
      function fun(x,y){
        var z=x+y;
        return z;
      }
      //形参个数多于实参个数
      function fun2(a,b,c){
        return a+b+c;
      }
      //函数调用并接收返回值
      var ret=fun(1,5,6);
      var ret2=fun2(11,12);
      console.log(ret);
      console.log(ret2);

    </script>
</body>

在这里插入图片描述

函数表达式

函数表达式是另一种定义函数的方法；

<body>
    <script >
        var sum=function(){
            var s=0;
            for(var i=0;i<arguments.length;i++){
                s+=arguments[i];
            }
            return s;
        }
        console.log(sum(1,5,10));

    </script>
</body>

在这里插入图片描述

这种定义方式是定义一个匿名函数，然后用变量来保存这个函数，在之后的调用中，就可以直接使用这个变量来调用函数；
arguments是JavaScript中内置的一个变量，相当于一个数组，保存了所有的实参；

作用域

全局变量：在整个script标签中都生效；
局部变量：在函数内部生效，部分区域生效；

<body>
    <script >
        //全局变量
        var num=10;
        function fun(){
            //局部变量
            var num=0;
            console.log(num);
        }
        fun();
        console.log(num);
    </script>
</body>

在这里插入图片描述

如果在创建变量时，不写var，则会得到一个全局变量；

<body>
    <script >
    function fun(){
            //不加var的变量是全局变量
                num=0;
        }
        fun();
        console.log(num);
    </script>
</body>

在这里插入图片描述

如果使用let定义变量，它的作用域是“块级作用域”，即在当前定义变量的 { } 中生效；

作用域链；

由于函数是可以定义在函数内的，因此在使用某个变量时，首先在当前的 {} 中寻找；如果没有找到，则继续往外层的 {} 找，如果直到顶层依然没有找到，就认为这个变量是未定义的，这样一级一级往外寻找的过程，就是作用域链；

对象

JavaScript中所有的对象都是Object类型，对象的属性，方法皆不会影响JavaScript中对象的类型；

创建对象；

<body>
    <script >
        //一个没有任何属性和方法的对象
    var ment={

    };

    var student={
        //对象的属性
        name:'三一',
        age:18,
        //对象的方法
        sports:function(){
            console.log('好好锻炼！');
        }
    };
    //访问对象的属性、方法
    console.log(student.name);
    console.log(student['age']);
    student.sports();
    </script>
</body>

在这里插入图片描述

JavaScript使用{ }来创建对象；
属性和方法都是键值对的方式进行定义；
访问对象的属性时，可以使用 . 或者[ ]来访问；
访问对象的方法时，记得在方法之后加括号 ( );

JavaScript创建对象的方法还有使用new Object创建和使用构造函数来创建，但由于实际使用场景不多，且用法略显老旧，这里就不做过多介绍~

WebAPI

什么是WebAPI

前面提到JavaScript是有基础语法和DOM以及BOM三部分组成的，而WebAPI就包括了DOM和BOM；如果仅仅依靠基础语法，可以实现的功能是简单且单一的，但借助WebAPI就可以完成功能更加强大的程序；

DOM

DOM，即Document Object Model，文档对象模型；定义了访问和处理HTML文档的标准方法，通过对程序中结构的访问来改变文档的样式、结构以及内容，属于一个编程接口；

获取页面元素

所谓元素，就是页面中的使用的所有标签；
JavaScript对于获取元素的方式提供了许多方法，这里只介绍最强大最通用的一种，即querySelector;

<body>
    <div class="one">节日快乐！</div>
    <div id="brith">生日快乐！</div>
    <script>
        var elem1=document.querySelector('.one');
        var elem2=document.querySelector('#brith');
        console.log(elem1);
        console.log(elem2);

    </script>
</body>

在这里插入图片描述

querySelector是document的方法；
document表示文档，一个页面就是一个文档，由浏览器来提供，一般页面加载成功，即代表有了文档；
获取元素以后就可以使用元素来表示这个标签；

如果想同时选中文档中的所有相同标签，可以使用querySelectorAll;

事件

所谓事件，实际就是用户对浏览器页面的一些操作，像鼠标点击、鼠标拖动、键盘输入等等，都可以认为是一个事件；用户操作，产生事件，浏览器捕捉到事件，触发相应的程序对事件做出反应，从而实现与用户的操作；因此，事件是浏览器与用户交互的重要操作；

事件的三要素：

事件源：触发事件的元素；
事件类型：具体的事件内容，像点击，输入…;
事件处理程序：如何对事件做出反应，需要执行哪些代码；

<body>
    <!--事件源：按钮but-->
    <button id="but" >提交</button>
    <script>
        var elem=document.querySelector('.but'); 
        //事件类型：点击
        //事件处理程序：函数
        but.onclick =function(){
            alert('提交成功');
        }
    </script>
</body>

请添加图片描述
这里的函数不需要手动调用的原因是：类似于一个回调函数，将调用的权限交给了浏览器，当用户触发点击的操作时，调用函数；

操作元素

修改元素内容；

<body>
    <div id="div">hello world</div>
    <script>
        var elem=document.querySelector('div');
        console.log(elem.innerText);
        elem.innerText='happy everyday';
        console.log(elem.innerText);
    </script>
</body>

在这里插入图片描述

使用innerText对元素的内容进行修改；

修改元素属性；
首先对该元素的个别属性进行设置：

通过这些属性就可以直接获取属性的值，同时也可以通过属性直接来修改属性的值；

<body>
   <img src="yun.png" alt="一朵白云" title="云">
    <script>
        var img=document.querySelector('img');
        img.onclick=function(){
            if(img.src.indexOf('yun.png')!=-1){
                img.src='./sky.png';
            }else{
                img.src='./yun.png';
            }
        }
        console.dir(img);
    </script>
</body>

下面是代码的运行效果，点击图片，即可进行切换；
请添加图片描述

修改表单元素的属性；

value:input的文本值的属性；

<body>
   <input type="button" value="开">
    <script>
        var elem=document.querySelector('input');
        elem.onclick=function(){
            if(elem.value==='开'){
                elem.value='关';
            }else{
                elem.value='开'
            }
        }
       
    </script>
</body>

请添加图片描述

type:input的类型属性；

<body>
   <input type="password" >
   <button>显示密码</button>
    <script>
        let input=document.querySelector('input');
        let button=document.querySelector('button');
        button.onclick=function(){
            if(input.type=='text'){
                input.type='password';
                button.innerHTML='显示密码';
            }else if(input.type=='password'){
                input.type='text';
                button.innerHTML='隐藏密码';
            }
        }
       
    </script>
</body>

请添加图片描述表单的属性有很多，大都可以通过DOM来进行修改，可以参考MND文档；

修改样式的属性；

行内样式操作：

行内样式即通过style标签来指定的样式；
elem.style.属性名=属性值；

<body>
    <div style="font-size: 10px;
        font-weight: 700; 
        color: aqua;">
        天天开心^-^
     </div>
     <script>
         var div = document.querySelector('div');
         div.onclick = function () {
            //parseInt:把属性值转为整数类型
             var elem = parseInt(this.style.fontSize);
             elem += 10;
             this.style.fontSize = elem + "px";
        }
     </script>
</body>

请添加图片描述
如果需要修改的样式很多，逐个操作无疑耗时又耗力，可以使用类名样式来操作；

类名样式操作；

<style>
        /*日间模式*/
        .light {
            background-color: aquamarine;
            color: black;
        }
        /*夜间模式*/
        .dark {
            background-color: rgb(1, 10, 17);
            color: aliceblue;
        }
    </style>
</head>
    
<body >
    <div class ='light'>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus ab vero esse voluptas quod assumenda officia atque, accusantium, earum rerum quae molestiae? Corporis fuga magnam eius pariatur numquam optio minus.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus ab vero esse voluptas quod assumenda officia atque, accusantium, earum rerum quae molestiae? Corporis fuga magnam eius pariatur numquam optio minus.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus ab vero esse voluptas quod assumenda officia atque, accusantium, earum rerum quae molestiae? Corporis fuga magnam eius pariatur numquam optio minus.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus ab vero esse voluptas quod assumenda officia atque, accusantium, earum rerum quae molestiae? Corporis fuga magnam eius pariatur numquam optio minus.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus ab vero esse voluptas quod assumenda officia atque, accusantium, earum rerum quae molestiae? Corporis fuga magnam eius pariatur numquam optio minus.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus ab vero esse voluptas quod assumenda officia atque, accusantium, earum rerum quae molestiae? Corporis fuga magnam eius pariatur numquam optio minus.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus ab vero esse voluptas quod assumenda officia atque, accusantium, earum rerum quae molestiae? Corporis fuga magnam eius pariatur numquam optio minus.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus ab vero esse voluptas quod assumenda officia atque, accusantium, earum rerum quae molestiae? Corporis fuga magnam eius pariatur numquam optio minus.</p>
    </div>

    <script>
        var div=document.querySelector('div');

        div.onclick=function(){
            if(div.className=='light'){
                div.className='dark';
            }else{
                div.className='light';
            }
        }
    </script>
</body>
</html>

请添加图片描述

操作节点

创建节点

<body >
   <div class="one">

   </div>

   <script>
    var div=document.createElement('div');
    div.innerHTML='平安喜乐';
   </script>
</body>

使用createElement来创建元素；
仅仅创建元素，内容是不会在页面上显示的，需要将创建出的元素加入到DOM树上；

将节点加入到DOM树上；

<body >
   <div class="one">

   </div>

   <script>
    var div=document.createElement('div');
    div.innerHTML='平安喜乐';
    var elem=document.querySelector('.one');
    elem.appendChild(div);
   </script>
</body>