javaScript快速入门！

还不秃顶的计科生

已于 2024-12-25 22:24:05 修改

阅读量1.4k

点赞数 28

分类专栏：快捷操作，编程技巧文章标签： javascript 前端开发语言

于 2024-08-27 17:24:14 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_74009895/article/details/141364514

版权

快捷操作，编程技巧专栏收录该内容

241 篇文章

订阅专栏

基本含义：

是一种脚本语言，用来控制网页的行为，网页能够直接运行，而不需要经过编译器；

第一部分：js的引入方式

（1）内部脚本方式

核心代码：

<script>
        alert("hello,zjc");
    </script>

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        alert("hello,zjc");
    </script>
</head>
<body>
    
</body>
</html>

这个script标签可以出现在任意位置，也就是说它可以放在head标签里面，也可以放在body标签里面。

效果：

（2）外部脚本方式

创建js文件夹，并在js文件中编写以下代码：

alert("hello,zjc");

html文件内调用JavaScript：

代码为：

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

效果：

第二部分：js基础语法

（1）书写语法

①区分大小写

②每一句最后的分号可有可无

③注释方法

//表示单行注释(ctrl+/)

/**/表示多行注释(ctrl+shift+/)

④script标签不能自闭包，否则失效

⑤输出语句的三种形式

1.警告框

 window.alert("msg1");

2.页面文本显示

     document.write("msg2");

3.浏览器控制日志

     console.log("msg3");

（2）变量

第一种变量：var

①不需要指定数据类型

     var a=2;
     console.log(a);
     a="zjc";
     console.log(a);

注意点：

JavaScript里面的变量定义语法和java不一样，这个var是variable变量的缩写，不需要制定数据类型。

②变量是全局范围生效的

同时，var定义的数据都是“全局范围的”，因此，就算是我们在函数内部定义的变量，在函数外部也能访问成功！

{
        var b=100;
     }
     console.log(b);

效果：

③同一个变量名可以重复定义

     {
        var b=100;
        
        var b="hello";
     }

第二种变量：let

在var的基础上，let定义的的范围是“局部变量”

{
        let b=100;
    
     }
     console.log(b);

第三种变量：const

const定义的变量只能读，不能修改，否则会报错。

 const c=2;
     c=3;
     console.log(c);

（3）数据类型、运算符、流程控制语句

①数据类型

注意点，上面我们的变量是“不指定数据类型”，并不代表JavaScript里面就没有数据类型！

获取数据类型的方式：typeof

数据类型分类：
1.number数字（整数小数都可以）

2.string字符串（单引号双引号都可以）

3.boolean布尔类型

4.null对象为空

5.undefined当声明的变量未初始化时，该变量的默认值是undefined

测试代码：

     console.log(typeof(3));//number
     console.log(typeof(3.14));//number

     console.log(typeof('hello'));//string
     console.log(typeof("hello"));//string
        
     console.log(typeof(false));//boolean

     console.log(typeof(null));//null

     var a;
     console.log(typeof(a));//undefined

注意：对于null的类型是object，官方文档明确表示：这个是早期的一个bug,没有影响。不用管就行。

②运算符

1.算术运算符+,-,*,/,%,++,--

2.赋值运算符=,+=,-=,*=,/=,%=

3.比较运算符>,<,>=,<=,!=,==,===

注意：

==和===都是全等运算符，但是，==在进行比较的时候会先进行类型转换，而===再比较的时候不会进行类型转换

示例：

 var a=10;
     console.log(a=="10");//进行类型转换后，相等
     console.log(a==10);//进行类型转换后，相等

     console.log(a==="10");//不进行类型转换，不相等
     console.log(a==10);//不进行类型转换后，相等

效果：

4.逻辑运算符&&，||，!

5.三元运算符(条件表达式？true_value:false_value)

6.数据类型转换

字符串类型转为数字parseInt：

将字符串字面值转为数字，如果字面值不是数字，则转为NaN,其中如果中间出现了字母，那么前面的数字会成功读取。

     console.log(parseInt("1234"));
     console.log(parseInt("12A34"));
     console.log(parseInt("A34"));

其他类型转为boolean：

数字转为boolean：0和NaN转为false，其他转为true

String转为boolean:空串转为false，其他转为true

Null和undefined：均转为false

第三部分：js函数

函数的定义和调用：

 function add(a,b){
       return a+b; 
     }
     var result=add(1,2);
     console.log(result);

也可以写成：

    var add = function(a,b){
       return a+b; 
     }
     var result=add(1,2);
     console.log(result);

效果：

注意点：JS中，函数可以传递任意个数的参数。

第四部分：js对象

（1）Array对象

①数组的定义

方式1：

var arr=new Array(1,2,3,4,5,67,8,9,10);

方式2：

var arr=[1,2,3,4,5,67,8,9,10];

②数组的访问

console.log( arr[0]);

③效果

④数组的初始化数值以及变长性质

 var arr=new Array(1,2,3,4,5,67,8,9,10);
    //var arr=[1,2,3,4,5,67,8,9,10];
   
    arr[100]=101;
    console.log( arr[100]);
    console.log( arr[99]);

尽管最开始我们设置的数组只有10个数，但是我们依然能够成功对数组下标为100的位置赋值并且将该值打印出来，但是index=99处没有赋值，也就是默认值undefined

⑤数组元素的类型可变

var arr=new Array(1,2,3,4,5,67,8,9,10);
    //var arr=[1,2,3,4,5,67,8,9,10];
   
    arr[100]="hello,world";
    console.log( arr[100]);

当我们给数据赋值为string类型的时候，发现还是能够正常访问。

⑥length方法（获取数组中元素的数量）

核心代码：

 console.log( arr.length);

全部代码：

 var arr=new Array(1,2,3,4,5,67,8,9,10);
    //var arr=[1,2,3,4,5,67,8,9,10];
    console.log( arr.length);
    arr[100]="hello,world";
   
    console.log( arr.length);

⑦forEach方法遍历数组中每个有值的元素，并调用一次传入的函数

代码：

 var arr=new Array(1,2,3,4,5,67,8,9,10);
    //var arr=[1,2,3,4,5,67,8,9,10];
    arr[100]="hello,world";
    arr.forEach(function (e){
        console.log(e)
    })

也可以使用箭头函数：

var arr=new Array(1,2,3,4,5,67,8,9,10);
    //var arr=[1,2,3,4,5,67,8,9,10];
    arr[100]="hello,world";
    arr.forEach((e)=>{
        console.log(e)
    })

效果：

分析：

只会把有值的数据打印出来，对于undefined的数据，是不会打印出来的。

⑧push方法-往数组的末尾添加新元素，返回值为新的长度

注意：push里面可以放一个互素，也可以放多个数：

核心代码：

 arr.push(1,2,3);

完整代码：

var arr=new Array(1,2,3,4,5,67,8,9,10);
    //var arr=[1,2,3,4,5,67,8,9,10];
    arr[100]="hello,world";
    arr.push(1,2,3);
    arr.forEach((e)=>{
        console.log(e)
    })

效果：

⑨splice方法-从数组中删除元素

代码：

核心代码：

arr.splice(0,2);

第一个数字0代表索引，从索引为0这个位置开始；

第二个数字2代表删除元素的个数，要删除两个数字。
完整代码：

    var arr=new Array(1,2,3,4,5,67,8,9,10);
    //var arr=[1,2,3,4,5,67,8,9,10];
    arr[100]="hello,world";
    arr.splice(0,2);
    arr.forEach((e)=>{
        console.log(e)
    })

效果：

（2）String对象

①定义字符串

方法1：

var string1=new String("hello,String");

方法2：

var string1="hello,String";

②输出字符串

console.log(string1);

③获取字符串的长度

console.log(string1.length);

④返回在指定位置的字符

console.log(string1.charAt(1));

⑤检索字符串

console.log(string1.indexOf("he"));

查找的是子字符串在原字符串中第一次出现的索引下标.

⑥去除字符串两边的空格

var string2="  hello,String2   ";
    console.log(string2);
    console.log(string2.trim(string2));

⑦获取子字符串

console.log(string2.substring(1,3));//含头不含尾部

第一个数1代表起始索引为1；

第二个数3代表终止索引位置为3；

注意：索引的原则是：含头不含尾.

（3）JSON对象

JSON的概念：JavaScript Object Notation,也就是JavaScript的对象标记法。

JSON是通过JavaScript对象标记法书写的文本。

主要用于前后端传递数据的时候作为数据载体。

①常规创建对象的方法

 var user={
        name:"zjc",
        age:"22",
        gender:"male",
        eat:function(){
            console.log("你好，创建的对象的里eat方法");
        }    
    };

也可以简化写为：

 var user={

        name:"zjc",

        age:"22",

        gender:"male",

        eat(){

            console.log("你好，创建的对象的里eat方法");

        }    

    };

②使用JSON格式创建对象的方法

相比之前，也就是需要前面的属性名也需要用双引号引起来。（因为JSON本质上就是一个文本格式）

 var user={
        "name":"zjc",
        "age":"22",
        "gender":"male",
        eat(){
            console.log("你好，创建的对象的里eat方法");
        }    
    };

②使用对象的语法

console.log(user.name);
    user.eat();

③效果

④特殊：json作为数据载体的书写格式

var userStr='{"name":"jerry","age":18,"addr":["北京","上海","西安"]}';

可以看到，我们这个的左右两边都用单引号括起来了，也就是说，现在这是一个字符串，而不能用常规的自定义对象的访问方式去访问里面属性以及对应的值。

想要正常访问到里面的数据，我们就需要转换格式：

⑤JSON字符串转换为JS对象

var userStr='{"name":"jerry","age":18,"addr":["北京","上海","西安"]}';

    var json_object=JSON.parse(userStr);
    console.log(json_object.name);

⑥JS对象转换为JSON格式

核心代码：

var json_String=JSON.stringify(json_object);
    console.log(json_String);

全部代码：

var userStr='{"name":"jerry","age":18,"addr":["北京","上海","西安"]}';

    var json_object=JSON.parse(userStr);
    console.log(json_object.name);

    var json_String=JSON.stringify(json_object);
    console.log(json_String);

（4）BOM对象

概念：Brower Object Model浏览器对象模型，允许javaScript与浏览器对话，JavaScript将浏览器的各个组成部分封装为对象。

①window浏览器窗口对象

指的就是浏览器的整个窗口：

1.获取window对象

直接window.加属性或者方法就可以，其中window.还可以省略

2.history属性

暂时用不到。

3.location属性

暂时用不到。

4.navigator属性

暂时用不到。

5.alert()方法

window.alert(1);

6.confirm()方法

显示带有一段消息以及确认按钮和取消按钮的对话框。

confirm("您确认删除该记录吗？");

根据点击的选项，接受不同的返回值：

var flag=confirm("您确认删除该记录吗？");

当点击“确定”，返回值是true，当点击“取消”，返回值是false

7.setInterval()方法（定时器-循环执行n次）

按照指定的周期（以毫秒计）来调用函数或者计算表达式

  var num=0;
     setInterval(function(){
        num++;
        console.log("每隔2s执行一次，当前是第："+num+"次");
     },2000);

8.setTimeout()方法（定时器-定时执行1次）

在指定毫秒数后调用函数或者计算表达式

 setTimeout(function(){
        console.log("2s之后只执行这一次哦");
     },2000);

②Navigator浏览器对象

存储的是浏览器的内核，浏览器的版本等信息。

暂时用不到。

③Screen屏幕对象

暂时用不到。

④History历史记录对象

指的是历史记录按钮：

以及：

暂时用不到。

⑤Location地址栏对象

地址栏也就是：

1.地址栏对象的获取

window.location.属性；其中window.可以省略

2.地址栏对象的属性href

设置或者返回完整的URL。

获取当前地址栏的URL路径信息：

alert(location.href);

设置将要跳转到的目的URL：

location.href="https://www.baidu.com/";

（5）DOM对象

全称：Document Object Model文档对象模型，将标记语言的各个组成部分封装为对应的对象。

①Document整个文档对象

②Element元素对象

③Attribute属性对象

④Text文本对象

⑤Comment注释对象

举例：（就类似于基本的HTML页面语言）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM</title>
</head>
<body>
    <h1>DOM对象标题</h1>
    <a href="https://www.baidu.com/">百度一下</a>
</body>
</html>

⑥获取元素对象css

基础准备操作：

在body标签内定义如下内容：

    <img id="h1" src="https://n.sinaimg.cn/kandian/logo137.png">
    <div class="cls">新浪微博</div><br>
    <div class="cls">3微博社区</div><br>
    <input type="checkbox" name="hobby">电影
    <input type="checkbox" name="hobby">旅游
    <input type="checkbox" name="hobby">游戏

下面的内容写在script标签里面：

1.根据id属性值获取，返回单个Element对象

//1根据id获取(返回单个值)
   var img=document.getElementById('h1');
   alert(img)

2.根据标签名称获取，返回Element对象数组

   //2根据标签名称获取（返回多个值）
   //获取div标签
   var divs=document.getElementsByTagName('div');
   //得到的是一个数组，所以我们要遍历数组
   for(var i=0;i<divs.length;i++)
   {
    alert(divs[i]);
   }

将会得到以下两个效果：

3.根据name属性值获取，返回Element对象数组

//3根据name属性获取（返回多个值）
   var divs=document.getElementsByName('hobby');
   for(var i=0;i<divs.length;i++)
   {
    alert(divs[i]);
   }

将会得到3次下面的这个效果图片：

4.根据class属性值获取，返回Element对象数组

 //4根据class属性获取（返回多个值）
   var divs=document.getElementsByClassName('cls');
   for(var i=0;i<divs.length;i++)
   {
    alert(divs[i]);
   }

⑦更改元素对象

1.div标签

更改内容：

   var divs=document.getElementsByTagName('div');
    div1=divs[0];
    div1.innerHTML="修改后的值";

第五部分：js事件监听

（1）事件

HTML事件是发生在HTML元素上的“事情”，比如：

①按钮被点击

②鼠标移动到元素上

③按下键盘按键

（2）事件监听

JavaScript可以在事件被侦测到时能够执行指定“代码”；

举例：

（我将鼠标移动到“招生信息”这块区域，自动显示招生信息下的相关信息）：

以及下方的轮播按钮：

（3）事件绑定

①通过HTML标签中的事件属性进行绑定（js代码+HTML代码）

body区域代码：

 <input type="button" id="button1" value="事件绑定1" onclick="function1()">

script区域代码：

function function1()
        {
            alert("button1被点击了");
        }

②通过DOM元素属性绑定

body区域代码：

 <input type="button" id="button2" value="事件绑定2">

script区域代码：

document.getElementById('button2').onclick = function(){
            alert("button2被点击了");
        }

以上完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM</title>

</head>
<body>

    <input type="button" id="button1" value="事件绑定1" onclick="function1()">
    <input type="button" id="button2" value="事件绑定2">

    <script>
        function function1()
        {
            alert("button1被点击了");
        }
        document.getElementById('button2').onclick = function(){
            alert("button2被点击了");
        }

    </script>
</body>
</html>

（4）常见事件

事件名	说明
onclick	鼠标单击事件
onblur	元素失去焦点
onfocus	元素获得焦点
onload	某个页面或图像被完成加载
onsubmit	当表单提交时触发该事件
onkeydown	某个键盘的键被按下
onmouseover	鼠标被移动到某元素之上
onmouseout	鼠标从某元素移开

①onclick

<body>
    <input id="b1" type="button" value="单击事件" onclick="fn1()">
    <script>
    //onclick: 鼠标点击事件
    function fn1(){
            console.log("我被点击了...");
        }
    </script>
</body>

②onblur

<body>
    <input type="text" name="username" onblur="bfn()" onfocus="ffn()" >
    <script>
    //onblur: 失去焦点事件
    function bfn(){
        console.log("失去焦点...");
    }

    //onfocus: 元素获得焦点
    function ffn(){
        console.log("获得焦点...");
    }
    </script>
</body>

点击输入框之后显示“获得焦点”

③onfocus

如②，点击输入框以外的位置，显示“失去焦点”

④onload

<body onload="load()">

    <script>

    //onload : 页面/元素加载完成后触发
    function load(){
        console.log("页面加载完成...")
    }

    </script>
</body>

⑤onsubmit

<body>

    <form action="" style="text-align: center;" onsubmit="subfn()">
        <input id="b1" type="submit" value="提交">
    </form>
    <script>
   //onsubmit: 提交表单事件
   function subfn(){
        alert("表单被提交了...");
    }
    </script>
</body>

⑥onkeydown

<body>
    <input type="text" name="username" onkeydown="kfn()">
    <script>
   //onkeydown: 某个键盘的键被按下
   function kfn(){
        console.log("键盘被按下了...");
    }
    </script>
</body>

每在键盘上按一下就会触发一次。

⑦onmouseover

<body>
    <table width="800px" border="1" cellspacing="0" align="center" onmouseover="over()" onmouseout="out()">
        <tr>
            <th>学号</th>
            <th>姓名</th>
            <th>分数</th>
            <th>评语</th>
        </tr>
        <tr align="center">
            <td>001</td>
            <td>张三</td>
            <td>90</td>
            <td>很优秀</td>
        </tr>
        <tr align="center">
            <td>002</td>
            <td>李四</td>
            <td>92</td>
            <td>优秀</td>
        </tr>
    </table>
    
    <script>
    //onmouseover: 鼠标移动到元素之上
    function over(){
        console.log("鼠标移入了...")
    }

    //onmouseout: 鼠标移出某元素
    function out(){
        console.log("鼠标移出了...")
    }

    </script>
</body>

鼠标移入到这个表格里面就会显示“鼠标移入了”

⑧onmouseout

代码如⑦，鼠标移出到这个表格里面就会显示“鼠标移出了”

源代码完整版：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-事件-常见事件</title>
</head>

<body onload="load()">

    <form action="" style="text-align: center;" onsubmit="subfn()">
        <input type="text" name="username" onblur="bfn()" onfocus="ffn()" onkeydown="kfn()">
        
        <input id="b1" type="submit" value="提交">

        <input id="b1" type="button" value="单击事件" onclick="fn1()">
    </form>  

    <br><br><br>

    <table width="800px" border="1" cellspacing="0" align="center" onmouseover="over()" onmouseout="out()">
        <tr>
            <th>学号</th>
            <th>姓名</th>
            <th>分数</th>
            <th>评语</th>
        </tr>
        <tr align="center">
            <td>001</td>
            <td>张三</td>
            <td>90</td>
            <td>很优秀</td>
        </tr>
        <tr align="center">
            <td>002</td>
            <td>李四</td>
            <td>92</td>
            <td>优秀</td>
        </tr>
    </table>

</body>

<script>
    //onload : 页面/元素加载完成后触发
    function load(){
        console.log("页面加载完成...")
    }

    //onclick: 鼠标点击事件
    function fn1(){
        console.log("我被点击了...");
    }

    //onblur: 失去焦点事件
    function bfn(){
        console.log("失去焦点...");
    }

    //onfocus: 元素获得焦点
    function ffn(){
        console.log("获得焦点...");
    }

    //onkeydown: 某个键盘的键被按下
    function kfn(){
        console.log("键盘被按下了...");
    }

    //onmouseover: 鼠标移动到元素之上
    function over(){
        console.log("鼠标移入了...")
    }

    //onmouseout: 鼠标移出某元素
    function out(){
        console.log("鼠标移出了...")
    }

    //onsubmit: 提交表单事件
    function subfn(){
        alert("表单被提交了...");
    }

</script>
</html>

（5）案例

案例需求：

1. 点击 "点亮" 按钮, 点亮灯泡; 点击 "熄灭" 按钮, 熄灭灯泡;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-事件-案例</title>
</head>
<body>

    <img id="light" src="img/off.gif"> <br>

    <input type="button" value="点亮"onclick="on()" > 
    <input type="button"  value="熄灭" onclick="off()">

   

</body>

<script>

    //1. 点击 "点亮" 按钮, 点亮灯泡; 点击 "熄灭" 按钮, 熄灭灯泡; 
    function on()
    {
        //获取对象id
        var img=document.getElementById('light');
        //更换图片
        img.src="img/on.gif";
    }
  
    function off()
    {
        //获取对象id
        var img=document.getElementById('light');
        //更换图片
        img.src="img/off.gif";
    }  

</script>
</html>

2. 输入框聚焦后, 展示小写; 输入框离焦后, 展示大写;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-事件-案例</title>
</head>
<body>
    <input type="text" id="name" value="ITCAST" onfocus="lower()" onblur="upper()">
    
    <script>
        //2. 输入框聚焦后, 展示小写; 输入框离焦后, 展示大写;
        function lower(){
            //获取输入框元素对象
            var input = document.getElementById("name");
            //设置内容为小写
            input.value = input.value.toLowerCase();
        }
        
        function upper(){
            //获取输入框元素对象
            var input = document.getElementById("name");
            //设置内容为大写
            input.value = input.value.toUpperCase();
        }
    </script>
</body>
</html>

3. 点击 "全选" 按钮使所有的复选框呈现选中状态 ; 点击 "反选" 按钮使所有的复选框呈现取消勾选的状态 ;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-事件-案例</title>
</head>
<body>
    <input type="checkbox" name="hobby"> 电影
    <input type="checkbox" name="hobby"> 旅游
    <input type="checkbox" name="hobby"> 游戏
    <br>

    <input type="button" value="全选" onclick="checkAll()"> 
    <input type="button" value="反选" onclick="reverse()">

</body>

<script>
    //3. 点击 "全选" 按钮使所有的复选框呈现选中状态 ; 点击 "反选" 按钮使所有的复选框呈现取消勾选的状态 ; -- onclick
    function checkAll()
    {
        //获取所有复选框的元素对象（返回值为数组）
        var hobbys=document.getElementsByName("hobby");
        //设置选中状态
        for(var i=0;i<hobbys.length;i++){
            var element=hobbys[i];
            element.checked=true;
        }

    }
    function reverse()
    {
        //获取所有复选框的元素对象（返回值为数组）
        var hobbys=document.getElementsByName("hobby");
        //设置选中状态
        for(var i=0;i<hobbys.length;i++){
            var element=hobbys[i];
            element.checked=false;
        }

    }


</script>
</html>