Java Web——JavaScript基础

Java Web——JavaScript基础
1. 引入方式

JavaScript程序不能独立运行，它需要被嵌入HTML中，然后浏览器才能执行 JavaScript 代码。

通过 script 标签将 JavaScript 代码引入到 HTML 中，有3种方式：

1.1. 内嵌式(嵌入式)

直接写在html文件里，用script标签包住
```
html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 引入方式title>
head>
<body>
  
  <script>
    alert('Hello world!')
  script>
body>
html>
```
1.2. 外部式(外链式)

代码写在以.js结尾的文件里，通过script标签，引入到html页面中。
```
<!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>Document</title>
  </head>
 
  <body>
    <script src="./js/my.js">
      // 中间不要写内容
    </script>
  </body>
 
</html>
```
```
alert('我是外部的 js文件')
```
1.3. 行内式 (理解即可)

代码写在标签内部

注意：此处作为了解即可，但是vue框架会用这种模式
```
<body>
    <button onclick="alert('逗你玩~~~')">点击我月薪过万</button>
</body>
```
2. 注释

通过注释可以屏蔽代码被执行或者添加备注信息，JavaScript 支持两种形式注释语法：

2.1. 单行注释

使用 // 注释单行代码
```
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 注释</title>
</head>
<body>
  
  <script>
    // 这种是单行注释的语法
    // 一次只能注释一行
    // 可以重复注释
     alert('Hello world!')
  </script>
</body>
</html>
```
2.2. 多行注释

使用 /* */ 注释多行代码
```
<body>
  <script>
    /* 这种的是多行注释的语法 */
    /*
    	更常见的多行注释是这种写法
    	在些可以任意换行
    	多少行都可以
      */
    document.write('你好小伙伴')
  </script>
</body>
```
注：编辑器中单行注释的快捷键为 ctrl + /

3. 结束符

在 JavaScript 中 ; 代表一段代码的结束，多数情况下可以省略 ; 使用回车（enter）替代。

但为了风格统一，结束符要么每句都写，要么每句都不写
```
<body>
    <script>
        alert(1);
        alert(2);
        alert(3)
        alert(4)
    </script>
</body>
```
4. 输出输入

输出和输入也可理解为人和计算机的交互，用户通过键盘、鼠标等向计算机输入信息，计算机处理后再展示结果给用户，这便是一次输入和输出的过程。

举例说明：如按键盘上的方向键，向上/下键可以滚动页面，按向上/下键这个动作叫作输入，页面发生了滚动了这便叫输出。

4.1. 输出

alert( )、

document.wirte( )

JavaScript 可以接收用户的输入，然后再将输入的结果输出：

alert( )、document.wirte( )

以数字为例，向 alert( ) 或 document.write( )输入任意数字，他都会以弹窗形式展示（输出）给用户。

上文以举例就不多写了

4.2. 输入

prompt( )
```
<body>
  <script> 
    // 1. 输入的任意数字，都会以弹窗形式展示
    document.write('要输出的内容')
    alert('要输出的内容');
 
    // 2. 以弹窗形式提示用户输入姓名，注意这里的文字使用英文的引号
    prompt('请输入您的姓名:')
  </script>
</body>
```
4.3. 控制台使用

在编译器中运行 HTML 代码后，会在浏览器中显示网页界面。这时，按下 F12 键或者 Ctrl + Shift + i 键可以打开浏览器的开发者工具，也叫控制台界面。在控制台界面中，您可以查看网页的 HTML 结构、CSS 样式以及 JavaScript 代码等信息，并且可以进行实时调试和修改。这对于网页开发和调试非常有用，可以帮助开发者更好地理解和修改代码，以实现所需的功能和效果。

通过浏览器的开发者工具，我们可以进行很多有用的操作，包括但不限于：
1. 元素检查：查看网页的 HTML 结构，通过修改 HTML 元素的属性来实时改变页面效果。
2. 样式调试：查看和修改 CSS 样式，立即看到样式改变对页面的影响。
3. JavaScript 调试：可以查看和运行 JavaScript 代码，进行断点调试，查看变量值等。
4. 网络监控：查看所有加载的资源文件，包括加载时间、文件大小等，对于优化网页加载速度非常有帮助。
5. 控制台输出：JavaScript 的错误信息、警告信息和调试信息都会显示在控制台，方便开发者查找和解决问题。
5. 变量

变量是计算机中用来存储数据的“容器”，它可以让计算机变得有记忆，通俗的理解变量就是使用【某个符号】来代表【某个具体的数值】（数据）
```
<script>
  // x 符号代表了 5 这个数值
  x = 5
  // y 符号代表了 6 这个数值
  y = 6
    
  //举例： 在 JavaScript 中使用变量可以将某个数据（数值）记录下来！
 
  // 将用户输入的内容保存在 num 这个变量（容器）中
  num = prompt('请输入一数字!')
 
  // 通过 num 变量（容器）将用户输入的内容输出出来
  alert(num)
  document.write(num)
</script>
```
5.1. 变量的声明

声明(定义)变量有两部分构成：声明关键字、变量名（标识）
```
<body>
  <script> 
    // let 变量名
    // 声明(定义)变量有两部分构成：声明关键字、变量名（标识）
    // let 即关键字，所谓关键字是系统提供的专门用来声明（定义）变量的词语
    // age 即变量的名称，也叫标识符
    let age
  </script>
</body>
```
关键字是 JavaScript 中内置的一些英文词汇（单词或缩写），它们代表某些特定的含义，如 let 的含义是

声明变量的，看到 let 后就可想到这行代码的意思是在声明变量，如 let age;

let 和 var 都是 JavaScript 中的声明变量的关键字，推荐使用 let 声明变量！！！

5.2. 赋值

声明（定义）变量相当于创造了一个空的“容器”，通过赋值向这个容器中添加数据。
```
<body>
  <script> 
    // 声明(定义)变量有两部分构成：声明关键字、变量名（标识）
    // let 即关键字，所谓关键字是系统提供的专门用来声明（定义）变量的词语
    // age 即变量的名称，也叫标识符
    let age
    // 赋值，将 18 这个数据存入了 age 这个“容器”中
    age = 18
    // 这样 age 的值就成了 18
    document.write(age)
    
    // 也可以声明和赋值同时进行
    let str = 'hello world!'
    alert(str);
  </script>
</body>
```
5.3. *定义变量关键字

JavaScript 使用专门的关键字 let 和 var 来声明（定义）变量，在使用时需要注意一些细节：

5.3.1. 使用 let 时的注意事项
1. 允许声明和赋值同时进行
```
let a = 10; // 声明变量a并赋值为10
```
1. 不允许重复声明
```
let b = 20;
let b = 30; // 报错，b已经被声明过了
```
1. 允许同时声明多个变量并赋值
```
let c = 10, d = 20, e = 30; // 同时声明并赋值多个变量
```
1. JavaScript 中内置的一些关键字不能被当做变量名
```
let let = 10; // 报错，"let"是JavaScript的关键字，不能用作变量名
```
5.3.2. 使用 var 时的注意事项
1. 允许声明和赋值同时进行
```
var f = 40; // 声明变量f并赋值为40
```
1. 允许重复声明
```
var g = 50;
var g = 60; // 不报错，但不推荐这样做，因为会覆盖前一个值
```
1. 允许同时声明多个变量并赋值
```
var h = 10, i = 20, j = 30; // 同时声明并赋值多个变量
```
5.3.3. let 和 var 的区别

在大部分情况下，let和var的行为类似，但let具有更严格的块级作用域规则，而var在函数级作用域内有效。因此，let可以防止某些在var中可能出现的错误。例如：
```
if (true) {
    var x = 'var'; // x在整个函数内部都可见
    let y = 'let'; // y只在if语句块中可见
}
console.log(x); // 输出 "var"
console.log(y); // 报错，y is not defined，因为y只定义在if语句块中
```
在这个例子中，我们可以看到var定义的变量在整个函数内部都可见，而let定义的变量只在声明它的代码块内可见。这就是let比var更严谨的地方，它可以防止一些作用域相关的错误。 因此，现代JavaScript编程中，建议使用let来定义变量。

5.4. 变量命名规则
- 只能是字母、数字、下划线 _ 、美元符号 $ ，且不能能数字开头
- 字母区分大小写，如 Age 和 age 是不同的变量
- JavaScript 内部已占用于单词（关键字或保留字）不允许使用
- 尽量保证变量具有一定的语义，见字知义
```
<body>
  <script> 
    let age = 18 // 正确
    let age1 = 18 // 正确
    let _age = 18 // 正确
 
    // let 1age = 18; // 错误，不可以数字开头
    let $age = 18 // 正确
    let Age = 24 // 正确，它与小写的 age 是不同的变量
    // let let = 18; // 错误，let 是关键字
    let int = 123 // 不推荐，int 是保留字
  </script>
</body>
```
6. 常量

概念：使用 const 声明的变量称为“常量”。

使用场景：当某个变量永远不会改变的时候，就可以使用 const 来声明，而不是let。

命名规范：和变量一致
```
//常量PI被赋值为3.14，代表圆周率。
const PI = 3.14
```
注：因为是常量，常量不允许重新赋值,声明的时候必须赋值(初始化)

7. 数据类型

计算机程序可以处理大量的数据，为了方便数据的管理，在JavaScript中，将数据分成了不同的类型：

注：可以通过 typeof 关键字检测数据类型
```
<body>
    <h1>JavaScript 类型检测</h1>
    <script>
        // 检测 1 是什么类型数据，结果为 number
        document.write(typeof 1)
    </script>
</body>
```
7.1. JS弱类型数据语言

同时，JavaScript是一种弱类型的语言，不用提前声明变量的数据类型

JavaScript 是一种弱类型（或动态类型）语言，这意味着不需要提前声明变量的数据类型。

好比，Java 是一种强类型语言，需要提前声明变量的数据类型。

Java 代码示例：
```
// 在Java中，需要提前声明变量的数据类型
public class Main {
    public static void main(String[] args) {
        // 声明一个整型变量
        int myInt = 10;
        
        // 声明一个浮点型变量
        double myDouble = 20.5;
        
        // 声明一个字符串变量
        String myString = "Hello, World!";
        
        System.out.println("myInt: " + myInt);
        System.out.println("myDouble: " + myDouble);
        System.out.println("myString: " + myString);
    }
}
```
JavaScript 代码示例：
```
// 在JavaScript中，不需要提前声明变量的数据类型
// 使用var关键字声明变量（在旧版JavaScript中常用，现在推荐使用let或const）
var myInt = 10;
var myDouble = 20.5;
var myString = "Hello, World!";
 
console.log("myInt: " + myInt);
console.log("myDouble: " + myDouble);
console.log("myString: " + myString);
 
// 在JavaScript中，变量类型可以在程序执行过程中动态改变
myInt = "Now I'm a string!";
console.log("myInt: " + myInt);
```
在 Java 中必须提前声明数据类型，并且一旦声明后就不能改变。

而在 JavaScript 中，可以随时更改变量的数据类型。

这就是强类型语言和弱类型语言之间的主要区别之一。

7.2. 数据类型分类

数据类型

具体类型

解释

基本数据类型

Boolean

布尔型

String

字符串型

Number

数字型

Null

空型

Undefined

未定义型

复杂数据类型

Object

对象
1. Boolean（布尔型）: 这种类型只有两个值：true 或 false。它通常用于条件语句中进行逻辑判断。
```
let isTrue = true;
let isFalse = false;
```
1. String（字符串型）: 用于表示文本或字符序列。字符串可以用单引号(')或双引号(")定义。
```
let myString = "Hello, World!";
let myOtherString = 'Another string.';
```
注意事项：
1. 无论单引号或是双引号必须成对使用
2. 单引号/双引号可以互相嵌套，但是不以自已嵌套自已
3. 必要时可以使用转义符 \，输出单引号或双引号
对于String类型，你给出了三个注意事项，以下是对于这些注意事项的代码举例：
1. 无论单引号或是双引号必须成对使用
```
// 正确
let correctString1 = "Hello";
let correctString2 = 'Hello';
 
// 错误 - 不成对使用引号
let incorrectString1 = "Hello; // 报错，缺少结束的双引号
let incorrectString2 = 'Hello; // 报错，缺少结束的单引号
```
1. 单引号/双引号可以互相嵌套，但是不以自己嵌套自己
```
// 正确 - 双引号内部嵌套单引号
let nestedString1 = "He said, 'Hello!'";
 
// 正确 - 单引号内部嵌套双引号
let nestedString2 = 'She said, "Hi!"';
 
// 错误 - 尝试用自己嵌套自己，这将导致错误
let incorrectNestedString1 = "This is an ""error""."; // 报错，双引号内部不能直接嵌套双引号
let incorrectNestedString2 = 'This is an ''error''.'; // 报错，单引号内部不能直接嵌套单引号
```
1. 必要时可以使用转义符 \，输出单引号或双引号
```
// 使用转义符在双引号字符串内输出双引号
let escapedString1 = "He said, \"Hello!\"";
console.log(escapedString1); // 输出：He said, "Hello!"
 
// 使用转义符在单引号字符串内输出单引号
let escapedString2 = 'She said, \'Hi!\'';
console.log(escapedString2); // 输出：She said, 'Hi!'
```
1. Number（数字型）: 用于表示数值，包括整数和浮点数。
```
let myNumber = 10;
let myFloat = 10.5;
```
1. Null（空型）: 这是一个特殊类型，只有一个值，就是 null。它表示一个空值或无值的状态。
```
let myNull = null;
```
1. Undefined（未定义型）: 这是一个特殊类型，表示变量已被声明，但尚未赋值。
```
let myUndefined;
```
注意：如果你试图访问一个尚未声明的变量，JavaScript将会抛出一个错误，而不是返回undefined。例如，console.log(notDeclaredVariable) 会导致 ReferenceError: notDeclaredVariable is not defined。
1. Object（对象）: 对象是属性的集合，每个属性都有名字和值。JavaScript的对象是键值对的集合，可以是任何数据类型。
```
let myObject = new Object();
myObject.key1 = "value1";
myObject.key2 = 2;
```
也可以使用字面量方式创建对象：
```
let myOtherObject = {
    key1: "value1",
    key2: 2,
};
```
7.3. 数据类型检测

在JavaScript中，可以用typeof运算符进行数据类型的检测

确实，在JavaScript中，我们可以使用typeof运算符来检测数据的类型。下面是一些例子：
```
console.log(typeof "Hello world"); // 输出：string
console.log(typeof 123); // 输出：number
console.log(typeof true); // 输出：boolean
console.log(typeof { a: 1 }); // 输出：object
console.log(typeof [1, 2, 3]); // 输出：object
console.log(typeof null); // 输出：object
console.log(typeof undefined); // 输出：undefined
console.log(typeof function() {}); // 输出：function
```
这里有几个要注意的点：
1. 对于字符串、数字和布尔值，typeof运算符返回的结果是其对应的数据类型。
2. 对于对象和数组，typeof运算符返回的结果是object。要区分数组和其他对象，可以使用Array.isArray()方法。
3. 对于null，typeof运算符返回的结果是object，这是一个历史遗留问题。要检测一个值是否为null，可以直接使用===运算符。
4. 对于undefined，typeof运算符返回的结果是undefined。这是因为undefined是一个特殊的值，表示变量已经被声明，但尚未赋值。
5. 对于函数，typeof运算符返回的结果是function。
相关阅读:
LiveQing视频点播流媒体RTMP推流服务功能-支持视频点播分屏大屏展示视频轮巡分组播放RMP推流直播大屏展示
 spark sql createOrReplaceTempView
存储系统架构演变
 JDBC8.0+
结巴（jieba）分词 java 实现
 Ubuntu: 系统使用, 系统源更新, Vi基本操作, 磁盘拓展
 WPF中的绑定知识详解（含案例源码分享）
pm2 命令手册
 LeetCode二叉树OJ
【蓝桥杯冲击国赛计划第5天】哈希表
原文地址：https://blog.csdn.net/Sakurapaid/article/details/134484148

数据类型	具体类型	解释
基本数据类型	Boolean	布尔型
	String	字符串型
	Number	数字型
	Null	空型
	Undefined	未定义型
复杂数据类型	Object	对象

1. 引入方式

1.1. 内嵌式(嵌入式)

1.2. 外部式(外链式)

1.3. 行内式 (理解即可)

2. 注释

2.1. 单行注释

2.2. 多行注释

3. 结束符

4. 输出输入

4.1. 输出

4.2. 输入

4.3. 控制台使用

5. 变量

5.1. 变量的声明

5.2. 赋值

5.3. *定义变量关键字

5.3.1. 使用 let 时的注意事项

5.3.2. 使用 var 时的注意事项

5.3.3. let 和 var 的区别

5.4. 变量命名规则

6. 常量

7. 数据类型

7.1. JS弱类型数据语言

7.2. 数据类型分类

7.3. 数据类型检测