java-web前端 javascript_是web中一种功能强大的脚本语言,常用来为网页添加各式各样的动态功能。它不需-CSDN博客

本文链接：https://blog.csdn.net/qq_45402917/article/details/120267721

本文介绍了JavaScript作为Web前端的重要脚本语言，用于增强HTML页面的交互性。讲解了JavaScript的引入方式，包括内嵌式和外链式。接着讨论了数据类型、变量命名规则及运算符，强调了动态类型特性。还详细阐述了函数的定义和window对象的使用，包括其属性和方法如document、history等。最后提到了Date对象和String对象的基本操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

介绍

JavaScript是Web中一种功能强大的脚本语言，被设计为向 HTML 页面增加交互性，常用来为网页添加各式各样的动态功能，它不需要进行编译，直接嵌入在HTML页面中，就可以把静态的页面转变成支持用户交互并响应事件的动态页面。

引入JavaScript方式：

在HTML文档中，较为常用的引入JavaScript的方式有两种：
一种是在HTML文档中直接嵌入JavaScript脚本，称为内嵌式；
另一种是链接外部JavaScript脚本文件，称为外链式。

内嵌式：
在html body结束标签前写

<!--javascript-->
<script>
    let a = 10;
    a++
</script>

外链式：
在这里插入图片描述

常见数据类型

可以给变量赋任意类型的值，由值的类型决定变量类型
与python一致

n=12;
x="234";

在这里插入图片描述

变量命名规则

变量名可以由字母、下划线（_）、美元符号（$），甚至中文组成

运算符

算术运算符
用于连接运算表达式，主要包括加（+）、减（-）、乘（*）、除（/）、取模（%）、自增（++）、自减（–）等运算符
比较运算符：
在这里插入图片描述
逻辑运算符：

赋值运算符：

函数

JavaScript中，定义函数是通过function语句实现的。其语法格式如下：
在这里插入图片描述

在上述语法中，functionName是必选项，用于指定函数名，在同一个页面中，函数名必须是唯一的，并且区分大小写；parameter1,parameter2,…是可选项，代表参数列表，当使用多个参数时，参数间使用逗号进行分隔，一个函数最多可以有255个参数；statements是必选项，代表用于实现函数功能的语句；return expression是可选项，用于返回函数值，expression为任意表达式、变量或常量。

windows对象

windows对象：最大的窗口，对象名称不写代表windows对象（允许省略对象名称）
属性和类名可以直接通过名称访问

属性和方法：
document:代表html文档
history:窗体历史记录
open():打开新窗口
close():关闭当前窗口
alter():弹出：警告框，确认后就消失
confirm（）确认框，确认和取消
prompt()：用户输入框

使用示例：
JavaScript：

<script>
        function sum() {
            //通过id获取数字的值
            //js提供了parseInt()和parseFloat()两个转换函数。前者把字符串转换成整数，后者把字符串转换成浮点数。
            var num1 = parseFloat(document.getElementById("num1").value);
            var num2 = parseFloat(document.getElementById("num2").value);
            //isNaN 返回一个 Boolean 值，指明提供的值是否是 NaN ，NaN 的意思是 not a number（不是一个数字）。
            if (isNaN(num1) || isNaN(num2)) {
                alert("输入的内容不是数字")
            } else {
                //弹出警告框，返回结果
                alert(num1 + num2);
            }

        }

    </script>

Html：

<body>
<form>
    <input type="text" placeholder="请输入数字" id="num1">
    <input type="text" placeholder="请输入数字" id="num2">
    <!--点击事件sum()函数-->
    <input type="button" value="求和" onclick="sum()" class="button">
</form>

整个代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>SUM_HTML</title>
    <script>
        function sum() {
            //通过id获取数字的值
            //js提供了parseInt()和parseFloat()两个转换函数。前者把字符串转换成整数，后者把字符串转换成浮点数。
            var num1 = parseFloat(document.getElementById("num1").value);
            var num2 = parseFloat(document.getElementById("num2").value);
            //isNaN 返回一个 Boolean 值，指明提供的值是否是 NaN ，NaN 的意思是 not a number（不是一个数字）。
            if (isNaN(num1) || isNaN(num2)) {
                alert("输入的内容不是数字")
            } else {
                //弹出警告框，返回结果
                alert(num1 + num2);
            }

        }

    </script>
</head>
<body>
<form>
    <input type="text" placeholder="请输入数字" id="num1">
    <input type="text" placeholder="请输入数字" id="num2">
    <!--点击事件sum()函数-->
    <input type="button" value="求和" onclick="sum()" class="button">
</form>
</body>
</html>