JavaScript详解

最新推荐文章于 2025-09-07 22:29:54 发布

原创最新推荐文章于 2025-09-07 22:29:54 发布 · 696 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

JavaWeb 专栏收录该内容

23 篇文章

订阅专栏

JavaScript是什么

JavaScript是一门跨平台的，面向对象的脚本语言。

它被设计用来使网页可进行交互，控制网页的行为。虽然他的语法和Java极度相似，但他们两个确实是完全不一样的语言。

网页需要符合W3C标准

JavaScript是什么

如何引入JavaScript

JavaScript的基础语法

JavaScript常用对象

BOM

DOM

事件监听

如何引入JavaScript

1、内部脚本：

将JS的代码定义在HTML页面内部。

注意：

HTML内部任何位置都可以放任何数量的<Script>标签

我们一般把<Script>标签放在<body>标签后，因为脚本运行会拖慢执行速度，先让其执行完脚本再展示页面的内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
    <<script>
        alert("hello js1");
    </script>
</body>

2、外部脚本：

将JS的代码定义在外部的JS文件中，然后引入到HTML页面中。

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

//这是一个JavaScript文件
alert("hello js");

JavaScript的基础语法

书写语法

1、区分大小写，同Java。

2、每行的末尾可以加分号，也可以不加。（个人书写习惯一般加上）

3、注释，同java：//一句话 /*一段话*/

4、代码块放在{}内，同java。

输出语句

1、使用window.alert()输入警告框。

2、使用document.write()写入html输入。

3、使用console.log()写入浏览器控制台。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>



<script>
    window.alert("hello js~");//写入警告框

    document.write("hello js 2~");//写入html页面

    console.log("hello js3");//写入浏览器的控制台
</script>
</body>
</html>

变量

JavaScript使用var来声明变量，可以存放不同类型的值。这个变量的定义类似于全局变量，一旦定义在任何地方都可以访问。想要控制变量仅限于代码块内使用，需要使用let来声明。

变量的数据类型

JavaScript的数据类型分为引用数据类型和非引用数据类型。

number（数字，小数，整数，NaN（not a number））

NaN常用于类型转换时，如果用一个非数字的字符串转换做number，会自动转为NaN。

String：字符、字符串。双引号单引号都可以。

boolean：布尔，true和false。

null：对象为空。

undefined：当生命的变量没有初始化时，该变量的默认值是undefined。

获取变量的数据类型

alert(typeof age);

类型转换：

* 其他类型转为number：

1. string: 按照字符串的字面值，转为数字.如果字面值不是数字，则转为NaN。一般使用parseInt

var str = "20";
alert(parseInt(str) + 1);

2. boolean: true 转为1，false转为0

* 其他类型转为boolean：

1. number:0和NaN转为false，其他的数字转为true

2. string:空字符串转为false，其他的字符串转为true

3. null:false

4. undefined:false

var flag = 3;
var flag = "";
var flag = undefined;

if(flag){
        alert("转为true");
}else {
        alert("转为false");
}

运算符

特别的，==先转换为object数据类型，再进行判断。 ===先判断数据类型，不相同直接返回false，再进行数据判断。

流程控制语句

if、switch、for、while、do while

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>

    //1. if
    var count = 3;
    if (count == 3) {
        alert(count);
    }

    //2. switch
    var num = 3;
    switch (num) {
        case 1: {
            alert("星期一");
            break;
        }

        case 2: {
            alert("星期二");
            break;
        }

        case 3: {
            alert("星期三");
            break;
        }

        case 4: {
            alert("星期四");
            break;
        }

        case 5: {
            alert("星期五");
            break;
        }

        case 6: {
            alert("星期六");
            break;
        }

        case 7: {
            alert("星期日");
            break;
        }


        default: {
            alert("输入的星期有误");
            break;
        }
    }


    // 3. for
    var sum = 0;
    for (let i = 1; i <= 100; i++) {
        sum += i;
    }
    alert(sum);


    // 4. while
    var sum = 0;
    var i = 1;
    while (i <= 100) {
        sum += i;
        i++;
    }
    alert(sum);


    // 5. do...while
    var sum = 0;
    var i = 1;
    do {
        sum += i;
        i++;
    }
    while (i <= 100);
    alert(sum);


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

函数

函数（方法）是被设计为执行特定任务的代码块。

方法的参数和返回值都不需要书写数据类型，因为它是一个弱类型语言。

JavaScript对象

Array对象

用于定义数组。但是就其效果来说和Java中的集合比较相似。

Array的两个方法。

方法一：push（），添加数据进入数组，可以是任何数据类型。

方法二：splice(开始删除的位置，删除几个元素) 删除元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>



<script>
    // 方式一
    var arr = new Array(1,2,3);

    // alert(arr);

    // 方式二
    var arr2 = [1,2,3];
    //alert(arr2);

    // 访问
    arr2[0] = 10;
    //alert(arr2)


    // 特点：JavaScript数组相当于Java中集合。变长变类型

    // 变长
    var arr3 = [1,2,3];
    arr3[10] = 10;
    //alert(arr3[10]);
    //alert(arr3[9]);

    // 变类型
    arr3[5] = "hello";
    //alert(arr3[5]);
    //alert(arr3);


    // 属性：length：数组中元素的个数
    var arr4 = [1,2,3];
/*
    for (let i = 0; i < arr4.length; i++) {
        alert(arr4[i]);
    }*/

    // 方法：
    // push:添加方法
    var arr5 = [1,2,3];
   /* arr5.push(10);
    alert(arr5);*/

    // splice:删除元素
    arr5.splice(0,1);
    alert(arr5);

</script>

</body>
</html>

String对象

同时我们还需要掌握一个方法.grim()用来清除字符串前方和后方的空白格。在进行表单数据校验的时候这个方法尤其常用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<script>
    //方式一
    var str1 = new String("abc");
    //方式二
    var str2 = "abc";
    var str3 = 'abc';


    //length
    // alert(str3.length);

    // trim():去除字符串前后两端的空白字符

    var str4 = '  abc   ';

    alert(1 + str4.trim() + 1);

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

BOM-浏览器对象模型

Window：浏览器窗口对象

alert（）警告框 confirm（）需要确认或者取消的警告框。

setInterval（）经过几秒后，调用函数，反复调用。

setTimeout（）经过几秒后，调用函数，只调用一次。

History对象

history对象用来保存记录url，我们浏览器返回上一个页面，或者加载到下一个页面，都需要history对象。

Location对象

href方法：跳转到某个网页

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
/*

    alert("要跳转了");
    location.href = "https://www.baidu.com";

*/


    //3秒跳转到首页

    document.write("3秒跳转到首页...");
    setTimeout(function (){
        location.href = "https://www.baidu.com"
    },3000);

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

DOM对象模型

Element对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<img id="light" src="../imgs/off.gif"> <br>

<div class="cls">传智教育</div>   <br>
<div class="cls">黑马程序员</div> <br>

<input type="checkbox" name="hobby"> 电影
<input type="checkbox" name="hobby"> 旅游
<input type="checkbox" name="hobby"> 游戏
<br>

<script>
    /*
    获取：使用Document对象的方法来获取
        * getElementById：根据id属性值获取，返回一个Element对象
        * getElementsByTagName：根据标签名称获取，返回Element对象数组
        * getElementsByName：根据name属性值获取，返回Element对象数组
        * getElementsByClassName：根据class属性值获取，返回Element对象数组

     */
    //1. getElementById：根据id属性值获取，返回一个Element对象
    var img = document.getElementById("light");
    // alert(img);

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

    var divs = document.getElementsByTagName("div");
    // alert(divs.length);
   /* for (let i = 0; i < divs.length; i++) {
        alert(divs[i]);
    }*/

    //3. getElementsByName：根据name属性值获取，返回Element对象数组
    var hobbys = document.getElementsByName("hobby");
   /* for (let i = 0; i < hobbys.length; i++) {
        alert(hobbys[i]);

    }*/

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

    var clss = document.getElementsByClassName("cls");
    for (let i = 0; i < clss.length; i++) {
        alert(clss[i]);

    }



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

事件监听

事件：HTML事件是发生在HTML元素身上的事件。

比如说：

按钮被点击（提交选项）

鼠标移动到了某个元素之上（输入密码时弹出密码长度不符）

按下键盘按钮（比如我们可以限制无法输入数字）

事件监听：JavaScript在事件被侦测到时所执行的代码。

事件绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="button" value="点我" onclick="on()"> <br>
<input type="button" value="再点我" id="btn">


<script>

    function on(){
        alert("我被点了");
    }


    document.getElementById("btn").onclick = function (){
        alert("我被点了");
    }


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