JavaWeb --- JavaScript

乌云不要说话

已于 2023-03-27 13:14:55 修改

阅读量1.3w

点赞数

分类专栏： JavaWeb 文章标签： java javascript 学习

于 2023-03-03 17:27:01 首次发布

本文链接：https://blog.csdn.net/a1404359447/article/details/129301471

版权

本文详细介绍了JavaScript的基础知识，包括其与HTML的结合方式、变量、运算符、数组、函数、自定义对象和事件处理。重点讲解了DOM模型，包括Document对象的方法和节点的常用属性，帮助读者掌握JavaScript在网页交互中的应用。

摘要由CSDN通过智能技术生成

一、JavaScript介绍

JavaScript语言诞生主要是完成页面的数据验证。因此它运行在客户端，需要运行浏览器来解析执行JavaScript代码。JS是Netcape网景公司的产品，最早取名为LiveScript；为了吸引更多java程序员。更名为 JavaScript

JS是弱类型：弱类型就是类型可变

Java是强类型：就是定义变量的时候。类型已确定。而且不可变。

特点：
1、交互性（它可以做的就是信息的动态交互）
2、安全性（不允许直接访问本地硬盘）
3、跨平台性（只要是可以解释Js的浏览器都可以执行，和平台无关）

二、JavaScript和HTML代码结合方式

第一种：

只需要在head标签中，或者在body标签中，使用script标签来书写JavaScript代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" >
    // alert是javascript语言提供的一个警告框函数。
    // 它可以接收任类型的参数，这个参数就是警告框的提示信息
        alert("hello JavaScript");
    </script>
</head>
<body>

</body>
</html>

第二种：

使用script标签引入单独的JavaScript代码文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--
    现在需要使用script引入外部的js文件来执行
    src属性专门用来引入js文件路径（可以是相对路径，也可以是绝对路径）

    script标签可以用来定义js代码，也可以用来引入js文件
    但是,两个功能二选一,使用不能同时使用两个功能
    -->
    <script type="text/javascript" src="1.js"></script>
    <script type="text/javascript" >
        alert("你好张三");
    </script>
</head>
<body>

</body>
</html>

三、变量

什么是变量？变量是可以存放某些值的内存的命名。JavaScript的变量类型：

数值类型：number

字符串类型：string

对象类型：object

布尔类型：boolean

函数类型：function

JavaScript里特殊的值：

undefined：未定义，所有js变量未赋于初始值的时候，默认值都是undefined

null：空值

NaN：全称是 Not a Number，非数字，非数值

JS中的定义变量格式：

var 变量名；

var 变量名 = 值；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>变量</title>
    <script type="text/javascript">
        var i;
        alert(i);//undefined

        i = 12;
        //typeof() 是javascript语言提供的一个函数。
        //它可以取变变量的数据类型返回
        alert(typeof(i));//number

        i = "abc";
        alert(typeof(i));//string

        var a = 12;
        var b = "abc";
        alert(a * b);//NaN，非数字，非数值
    </script>
</head>
<body>

</body>
</html>

四、关系（比较）运算

等于：== 等于是简单的做字面值的比较
全等于：=== 除了做字面值的比较之外，还会比较两个变量的数据类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        var a = 12;
        var b = "12";
        alert(a == b);//true

        alert(a === b);//false
    </script>
</head>
<body>

</body>
</html>

五、逻辑运算

在JavaScript语言中，所有的变量，都可以做为一个boolean类型的变量去使用

0、null、undefined、""(空串）都认为是false；

&&：且运算

有两种情况：
第一种：当表达式全为真的时候。返回最后一个表达式的值。
第二种：当表达式中，有一个为假的时候。返回第一个为假的表达式的值

||：或运算
第一种情况：当表达式全为假时，返回最后一个表达式的值
第二种情况：只要有一个表达式为真。就会把回第一个为真的表达式的值

并且 &&与运算和 ||或运算有短路。

短路就是说，当这个 && 或 || 运算有结果了之后。后面的表达式不再执行

!：取反运算

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        // 在JavaScript语言中，所有的变量，都可以做为一个boolean类型的变量去使用
        // 0、null、undefined、" "(空串）都认为是false；
        var a = 0;
        if (a) {
            alert("0为true")
        }else {
            alert("0为false")
        }

        var b = null;
        if (b) {
            alert("null为true")
        }else {
            alert("null为false")
        }

        var c = undefined;
        if (c) {
            alert("undefined为true")
        }else {
            alert("undefined为false")
        }

        var d = "";
        if (d) {
            alert("空串为true")
        }else {
            alert("空串为false")
        }

        /*
            &&：且运算
            有两种情况：
            第一种：当表达式全为真的时候。返回最后一个表达式的值。
            第二种：当表达式中，有一个为假的时候。返回第一个为假的表达式的值
         */
        var a = "