JavaScript（JS基础）

本文介绍了JavaScript的两种编写方式——嵌入式和外部引用，以及JS的基本语法，包括变量声明（let和var）、数据类型和运算符的使用。文章还详细讲解了数据类型转换，如字符串与数字之间的转换，并探讨了条件语句和循环语句在JS中的应用。

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

提示：JS的重点是让静态的页面产生一些变化

文章目录

JS编写方式
- 嵌入编写
- 外部编写
JS基本语法
- 使用let声明变量
- 使用var声明变量
JS中的数据类型
JS流程控制语句

JS编写方式

提示：JavaScript是弱类型语言，行尾分号可写可不写

嵌入编写

JS编写在script(脚本)标记中，script标记可以出现在html中的任意位置，也就是说JS代码可以嵌入在HTML中任意部分，从上到下依次执行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!-- 嵌入编写 编写在script(脚本)标记中，script标记可以出现在html中的任意位置 -->
    <script>
    	// 输出语句
        console.log('hello world')
    </script>
</body>
</html>

在这里插入图片描述

外部编写

script引入外部js文件，那么标记中间的代码运行时会被浏览器忽略掉，不再执行
js代码（取名hello.js）：

console.log('Hello 世界');

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!-- 引入外部js文件 -->
    <script src="./hello.js">
        // script引入外部js文件，那么标记中间的代码运行时会被浏览器忽略掉，不再执行
        console.log('1234');
    </script>
</body>
</html>

在这里插入图片描述

JS基本语法

JavaScript 变量的命名规范可以总结为以下几个方面：

使用有意义的、描述性的变量名

变量名应该与变量所代表的值或含义相关联，能够表达变量的用途。例如：firstName, lastName, totalAmount 等。

变量命名应该符合标识符命名规则

变量名必须以字母、下划线（_）或美元符号（$）开头，并且可以包含字母、数字、下划线或美元符号。变量名不能以数字开头。同时要注意保留字的使用，如if、else、for等关键字不能用作变量名。

使用驼峰命名法

一般情况下建议使用驼峰式命名法，即第一个单词的首字母小写，其他单词的首字母大写。例如：totalAmount, firstName, lastName。

不能使用JavaScript关键词与JavaScript保留字。
使用有意义的缩写

在变量名中可以使用缩写，但是要确保缩写是大家都能理解的。例如：qty(数量), str(字符串)。

避免使用单个字符的变量名

比如 i, j, k 等单字符变量名一般只在循环中使用，其他情况应该尽量避免使用。

遵循良好的变量命名规范有助于程序的可读性和可维护性。

使用let声明变量

❗ js中定义变量使用let关键字
js是弱类型语言，定义时不需要指定数据类型，变量的类型是由赋值的数据决定

【示例代码】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script>
        let Tom
        Tom = 200
        console.log(Tom);
        Tom = '你好世界！'
        console.log(Tom);
    </script>
</body>
</html>

在这里插入图片描述

使用var声明变量

用的比较少
❗ 定义变量也可以使用var关键字，新标准js语法，建议使用let

【示例代码】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script>
        Tom = 200
        var Tom
        Tom = true
        console.log(Tom);
    </script>
</body>
</html>

在这里插入图片描述

JS中的数据类型

typeof：获取当前变量的数据类型

JavaScript 中有 7 种数据类型，其中 5 种是基本数据类型，另外两种是引用数据类型。

基本数据类型：

未定义（Undefined）：表示未定义的值。
数字（Number）：整数和浮点数都属于数字类型，例如 1、3.14 等。
布尔值（Boolean）：true 和 false 两个值。
字符串（String）：例如 “hello”、‘world’ 等，用单引号或双引号包裹起来。
符号（Symbol）：表示独一无二的值，用于对象属性的键。

引用数据类型：

对象（Object）：例如数组、函数、正则表达式、空（Null）空值等对象。
function-函数类型：function函数

【示例代码】
这里没有写符号（Symbol）数据类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script>
        //js六种数据类型
        let x
        console.log(typeof x); //1.undefined 未定义
        x = 100.3
        console.log(typeof x); //2.number 数字类型（不区分整数小数）
        x = false
        console.log(typeof x); //3.boolean 布尔类型 true/false
        x = 'abc'
        console.log(typeof x); //4.String 字符串类型 数据使用引号括起来（单引号双引号通用）
        x = []
        console.log(typeof x); //5.object 对象类型 有属性和方法可以使用
        x = function(){}
        console.log(typeof x); //6.function 函数类型 就是方法

        //特殊的number类型 NaN（Not a Nnumber）非数 Infinity无限大
        x = parseInt('abc')
        console.log( x , typeof x);
        x  = 3/0
        console.log( x , typeof x);

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

在这里插入图片描述

JS中运算符

JavaScript中的运算符可以分为以下几类：||

运算符	优先级
算术运算符	加号`+`，减号`-`，乘号`*`，除号`/`，取模`%`，`++`，`--`
逻辑运算符	与`&&`、或`ll`、非`!`
比较运算符	等于`==`，不等于`!=`，全等于`===`，不全等于`!==`，大于`>`，小于`<`，大于等于`>=`，小于等于`<=`
赋值运算符	等号`=`，加等`+=`，减等`-=`，乘等`*=`，除等`/=`，取模等`%=`
位运算符	与`&`，或`l`，异或`^`，非`~`，左移`<<`，右移`>>`，无符号右移`>>>`
条件运算符	三元操作符`?:`，根据表达式的结果返回一个值。例如：`a>b?a:b`

除此之外，JavaScript还支持一些其他的运算符，例如typeof运算符，用于检测变量的数据类型；
instanceof运算符，用于检测对象是否是某个类的实例等。

还有反引号 `
在这里插入图片描述

【示例代码】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script>
        //1. / 除法  不同于Java的除法规则
        console.log(3/2);
        //2. + 与Java相同
        let name = '汤姆'
        let nick = '抓杰瑞'

        console.log('大家好我是' + name + ',AKA' + nick );
        //3.js最新版本引入了模版字符串的语法 替代+字符串连接符  使用反引号``
        console.log( `大家好我是${name},AKA${nick}` );
    </script>
</body>
</html>

在这里插入图片描述

❗`==` 和 `===`

== 和 === 的区别

== 比较时会将比较的数据先转换成相同类型，再去比较数据值
=== 严格比较，类型和数据值都相同，结果才是true

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script>
        console.log(11=='11');
        console.log(11==='11');
    </script>
</body>
</html>

在这里插入图片描述

JS中的数据类型转换

字符串类型加减乘除

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script>
        let num1 = '10'
        let num2 = '5'
        console.log(num1+num2);
        console.log(num1-num2);
        console.log(num1*num2);
        console.log(num1/num2);
    </script>
</body>
</html>

输出结果：
在这里插入图片描述
字符串类型数据在做 - * / 运算时，js默认会把它转换成number类型

布尔类型加减乘除

给num1和num2重新赋值，一个true一个false

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script>
        num1 = true
        num2 = false
        console.log(num1+num2);
    </script>
</body>

</html>

输出1
在这里插入图片描述
布尔类型数据在做 + - * / 运算时，js默认会把true转换成1，false转换成0再去运算

字符串与整数、小数之间的转换

parseInt()将字符串转换为整数
pareFloat()将字符串转换成小数

【示例代码1】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script>
        //pareFloat将字符串转换成小数
        let s1 = '10'
        let s2 = '10.5'
        s1 = parseInt(s1)
        s2 = parseFloat(s2)
        console.log(s1+s2);
    </script>
</body>
</html>

输出结果：
在这里插入图片描述

【示例代码2】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script>
        //pareFloat将字符串转换成小数
        let s1 = '10'
        let s2 = '52.1'
        s1 = parseInt(s1)
        s2 = parseInt(s2)
        console.log(s1+s2);
    </script>
</body>
</html>

输出结果：
在这里插入图片描述

JS流程控制语句

JS流程控制语句指的是用于控制程序执行流程的语句，包括条件语句和循环语句。

条件语句

if语句：通过判断一个条件，决定是否执行后面的代码块。

if (condition) {
  // 如果condition为true，则执行这里的语句块
}

if...else语句：根据先前判断的条件，分别执行不同的代码块。

if (condition) {
  // 如果condition为true，则执行这里的语句块
} else {
  // 如果condition为false，则执行这里的语句块
}

if...else if...else语句：根据多个条件依次判断，分别执行不同的代码块。

if (condition1) {
  // 如果condition1为true，则执行这里的语句块
} else if (condition2) {
  // 如果condition2为true，则执行这里的语句块
} else {
  // 如果既不是condition1也不是condition2，则执行这里的语句块
}

switch语句：根据一个表达式的值，依次执行不同的代码块。

switch(expression) {
  case value1:
    // 如果expression的值和value1相等，则执行这里的语句块
    break;
  case value2:
    // 如果expression的值和value2相等，则执行这里的语句块
    break;
  default:
    // 如果expression的值既不是value1也不是value2，则执行这里的语句块
}

循环语句

while循环：只要指定的条件为true，就不断地执行循环体中的代码块。

while (condition) {
  // 如果condition为true，则执行这里的语句块
}

do...while循环：先执行一次循环体中的代码块，然后只要指定的条件为true，就不断地执行循环体中的代码块。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script>
        let num = 3452
        do {
            console.log( num%10 );     //2     5     4    3
            num = Math.trunc( num/10 ) //345   34    3    0
        } while (num!=0);
    </script>
</body>
</html>

在这里插入图片描述
这段代码实现了一个反向输出一个整数的各个位数的功能。代码执行步骤如下：

定义一个变量num并赋值为3452。
进入do…while循环，先执行循环体内的代码块。
执行console.log(num%10)语句，输出num除以10的余数，即num的个位数。此时输出为2。
执行Math.trunc(num/10)语句，将num除以10并向下取整，得到num去掉个位数后的整数部分。此时num变为345。
判断num是否为0。由于num不为0，继续进行下一次循环。
重复步骤3~5，输出num的十位数5、百位数4和千位数3，直到num为0时循环结束。
整数的每个位数依次反向输出：2、5、4、3。

for循环：设定一个计数器并设置循环的终止条件，每次循环时更新计数器的值。

for (initialization; condition; increment) {
  // initialization：初始化变量
  // condition：设置循环的终止条件
  // increment：计数器增加的量
  // 执行这里的语句块
}

【示例代码】
使用for循环，输出100-999之间所有的水仙花数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script>
        //使用for循环，输出100-999之间所有的水仙花数
        //153=1*1*1 + 5*5*5 + 3*3*3
        for (let num = 100; num < 1000; num++) {
            let b = Math.trunc(num/100)
            let s = Math.trunc(num/10%10)
            let g = Math.trunc(num%10)
            if(num == b*b*b + s*s*s + g*g*g)
            console.log(`水花仙数:${num}`)
        }
    </script>
</body>
</html>

输出结果：
在这里插入图片描述

for...in循环：用于遍历对象的所有可枚举属性。

for (var prop in object) {
  // prop：枚举属性名
  // object：要枚举属性的对象
  // 执行这里的语句块
}

for...of循环：用于遍历可迭代对象（如数组、字符串等）的所有元素。

for (var element of iterable) {
  // element：当前遍历到的元素
  // iterable：要遍历的可迭代对象
  // 执行这里的语句块
}

JavaScript（JS基础）

文章目录

JS编写方式

嵌入编写

外部编写

JS基本语法

使用let声明变量

使用var声明变量

JS中的数据类型

JS中运算符

❗== 和 ===

JS中的数据类型转换

字符串类型加减乘除

布尔类型加减乘除

字符串与整数、小数之间的转换

JS流程控制语句

❗`==` 和 `===`