JavaScript基础（一）

学Java的bb

已于 2025-05-21 12:03:59 修改

阅读量892

点赞数 21

CC 4.0 BY-SA版权

文章标签： javascript 开发语言 ecmascript html css 前端 java

于 2025-05-20 14:21:24 首次发布

本文链接：https://blog.youkuaiyun.com/sjdjjdkd/article/details/148085257

在前面我们已经学习了HTML、CSS的基础内容，我们知道HTML负责网页的结构，而CSS负责的是网页的样式。而要想让网页具备一定的交互效果，具有一定的动作行为，还得通过JavaScript来实现。那今天,我们就来讲解JavaScript，这门语言会让我们的页面能够和用户进行交互。

什么是JavaScript？

JavaScript（简称：JS）是一门跨平台、面向对象的脚本语言（不用编译直接运行），是用来控制网页行为的，实现人机交互效果。注意：JavaScript 和 Java 是完全不同的语言，不论是概念还是设计。但是基础语法类似。
组成：
- ECMAScript: 规定了JS基础语法核心知识，包括变量、数据类型、流程控制、函数、对象等。
- BOM：浏览器对象模型，用于操作浏览器本身，如：页面弹窗、地址栏操作、关闭窗口等。
- DOM：文档对象模型，用于操作HTML文档，如：改变标签内的内容、改变标签内字体样式等。

JS引入方式

内部脚本：将JS代码定义在HTML页面中

JS代码必须位于<script></script>标签之间

在HTML文档中，可以在任意地方，放置任意数量的<script>

一般会把脚本置于<body>元素的底部，可改善显示速度

<body>
  <!-- 页面内容 -->
  
  <script>
    alert("Hello World");
  </script>
</body>

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

外部JS文件中，只包含JS代码，不包含<script>标签

引入外部js的<script>标签，必须是双标签

alert('Hello World'); /* demo.js文件 */

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

注意1：demo.js中只有js代码，没有<script>标签

注意2：通过<script></script>标签引入外部JS文件时，标签不能自闭合，必须有结束标签

介绍JS的两种引入方式的例子如下：

<!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>
    <!-- 内部脚本 -->
    <!-- <script>
        alert("Hello JS~");
    </script> -->

    <!-- 外部脚本 -->
    <script src="js/demo.js"></script>
</body>
</html>

浏览器打开效果如图所示：

JS基础语法

书写规范

掌握了js的引入方式，那么接下来我们需要学习js的书写了，首先需要掌握的是js的书写语法，语法规则如下：

区分大小写：与 Java 一样，变量名、函数名以及其他一切东西都是区分大小写的。
每行结尾的分号可有可无【推荐要么全都写，要么全都不写，一个项目保持一致】。
大括号表示代码块。
注释：
- 单行注释：// 注释内容
- 多行注释：/* 注释内容 */

js中3钟输出语句如下：

api	描述
window.alert(...)	弹出框（window可以省略）
document.write(...)	在浏览器页面输出内容
console.log(...)	写入浏览器控制台

示例代码如下：

<!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>

    <script>
        //1. 写入浏览器的body区域
        document.write("Hello JS...");

        //2. 弹出框
        window.alert("Hello Js22222");
        alert("Hello Js22222"); //window对象可以省略

        //3. 控制台
        console.log("Hello JS33333");//最常用的一种

    </script>
</body>

</html>

浏览器打开如图所示效果：

变量

基本的书写语法我们清楚了之后，接下来，我们再来讲解JS中的变量。在js中，变量的声明和java中还是不同的。

1.let关键字

JS中主要通过let关键字来声明变量的。
JS是一门弱类型语言(JAVA是强类型)，变量是可以存放不同类型的值的。
变量名需要遵循如下规则：
- 组成字符可以是任何字母、数字、下划线（_）或美元符号（$），且数字不能开头
- 变量名严格区分大小写，如：name和Name是不同的变量
- 不能使用关键字作为变量名，如：let、if、for、var等

示例代码如下：

<script>
    //变量
    let a = 20;//let关键字定义变量--类型可变
    a = "Hello";
    alert(a);
</script>

上述的示例中，大家会看到变量a既可以存数字，又可以存字符串，a的值会被覆盖。因为JS是弱类型语言。

2.const-常量

JS中用const关键字来声明常量。
一旦声明，常量的值就不能改变（不可以重新赋值）

示例代码如下：

<body>
    <script>
        //常量
        const PI = 3.14;
        PI = 3.15;
        alert(PI);
    </script>
</body>

这段代码中为PI重新赋值了，所以浏览器会报错。（按F12可检查错误）

数据类型

虽然JS是弱数据类型的语言，但是JS中也存在数据类型，JS中的数据类型分为：基本数据类型和引用数据类型（对象）。

基本数据类型：

数据类型	描述
number	数字（整数、小数、NaN(Not a Number)）
string	字符串，单双引('...')、双引号("...")、反引号(`...`)皆可，正常使用推荐单引号
boolean	布尔。true，false
null	对象为空。 JavaScript 是大小写敏感的，因此 null、Null、NULL是完全不同的
undefined	当声明的变量未初始化时，该变量的默认值是 undefined

使用typeof运算符可以获取数据类型：

<script>
    let a = 20;
    alert(typeof a);//获取数据类型
</script>

各个基本数据类型的举例如下：

<!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>

    <script>
        //原始数据类型
        alert(typeof 3); //number
        alert(typeof 3.14); //number

        alert(typeof "A"); //string
        alert(typeof 'Hello');//string

        alert(typeof true); //boolean
        alert(typeof false);//boolean

        alert(typeof null); //object 

        var a ;
        alert(typeof a); //undefined

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

这里我们需要特别注意(typeof null)输出的类型是object。

反引号（`...`）

使用反引号引起来的字符串，也称为模板字符串。

模板字符串的使用场景：拼接字符串和变量。
模板字符串的语法：
- `...` ：反引号（英文输入模式下键盘 tab 键上方波浪线 ~ 那个键）
- 内容拼接时，使用 ${ } 来引用变量

具体示例如下：

 <script>
    let name = 'Tom';
    let age = 18;
    console.log('大家好, 我是新入职的' + name + ', 今年' + age + '岁了, 请多多关照'); //原始方式 , 手动拼接字符串
    console.log(`大家好, 我是新入职的${name}, 今年${age}岁了, 请多多关照`); //使用模板字符串方式拼接字符串
  </script>

输出结果我们可以在浏览器的控制台中查看。

运算符

JS中的运算符、运算规则绝大多数还是和JAVA中是一致的，具体运算符如下：

运算规则	运算符
算术运算符	+ , - , * , / , % , ++ , --
赋值运算符	= , += , -= , *= , /= , %=
比较运算符	> , < , >= , <= , != , == , === 注意 == 会进行类型转换，=== 不会进行类型转换
逻辑运算符	&& , \|\| , !
三元运算符	条件表达式 ? true_value: false_value

那这里，我们主要介绍一下 = 、==、=== 的区别：

= 是赋值操作
== 会在比较时，判断左右两边的值是否相等（会自动进行类型转换）
=== 全等，在比较时，判断左右两边的类型（类型不一样直接返回false）和值是否都相等，都相等才为true（不会进行类型转换）

示例代码如下：

<!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> 

    <script>
         var age = 20;
         var _age = "20";
         var $age = 20;

         alert(age == _age); //true ，只比较值(先把类型转换为一样的)
         alert(age === _age); //false ，类型不一样
         alert(age === $age); //true ，类型一样，值一样
    </script>
</body>
</html>

类型转换

在某些运算被执行时，系统内部自动将数据类型进行转换，这种转换成为隐式转换。

字符串 <-> 数字：
- +号两边只要有一个是字符串，都会把另外一个转成字符串，然后拼接在一起。
- 除了+外的算术运算符，比如：- * / 都会把字符串转为数字类型。
- 通过parseInt(...)函数，可以将一个字符串转为数字(只要是数字就一直往后转换为数字，直到碰到字母停止转换)。
其他类型 -> 布尔类型：
- Number：0 和 NaN为false，其他均转为true。
- String：空字符串为false，其他均转为true。
- Null 和 undefined ：均转为false。

举例1.字符串 <-> 数字

//类型转换 - 字符串 <-> 数字
alert(typeof ('10' - 1)); //number
alert(typeof ('10' + 1)); //string

alert(parseInt("12")); //12
alert(parseInt("12A45")); //12
alert(parseInt("A45"));//NaN (not a number)

举例2.其他类型 <-> 布尔类型

在js中，还有非常重要的一点是：0，null，undefined，""（空字符串），NaN 理解成false，其他理解成true。

// 类型转换 - 其他类型转为boolean
if(0){//false
    alert("0 转换为false");
}
if(NaN){//false
    alert("NaN 转换为false");
}
if(1){//true
    alert("除0和NaN其他数字都转为 true");
}

if(""){//false
    alert("空字符串为 false, 其他都是true");
}

if(" "){//true
    alert("空格字符串为 true");
}

if(null){//false
    alert("null 转化为false");
}
if(undefined){//false
    alert("undefined 转化为false");
}