JavaScript入门基础篇--小白必看-day01_小白学习javascript知识点-CSDN博客

本文链接：https://blog.csdn.net/m0_74287204/article/details/148082660

一、JavaScript 的起源与发展

诞生背景
- JavaScript 最初是由网景公司（Netscape）的布兰登·艾奇（Brendan Eich）在 1995 年 5 月设计的。当时，网景浏览器（Netscape Navigator）在市场上占据主导地位，但网页的交互性较差。为了满足网页开发者让网页“动起来”的需求，布兰登·艾奇在短短 10 天内设计出了 JavaScript 的前身——LiveScript。
- 最初，JavaScript 是被设计成一种简单易学的脚本语言，主要目的是为了解决 HTML 在交互性方面的不足。它被嵌入到 HTML 页面中，用于实现一些简单的功能，比如表单验证、简单的动画效果等。
名称由来
- JavaScript 的名字其实是一个营销策略的结果。当时，Java 语言（由 Sun Microsystems 公司开发）非常流行，网景公司希望借助 Java 的热度来推广这门新语言。尽管 JavaScript 和 Java 在语法上有一些相似之处，但它们是完全不同的语言，有着不同的设计理念和用途。
发展过程
- 早期阶段（1995 - 1999）：JavaScript 刚推出时功能比较简单，主要用于一些简单的网页交互。1996 年，微软推出了自己的脚本语言 JScript（为了避免商标问题），它与 JavaScript 基本兼容。1997 年，JavaScript 被提交到欧洲计算机制造商协会（ECMA），并于 1997 年发布了 ECMAScript 1.0 标准，这标志着 JavaScript 开始走向标准化。
- 发展阶段（2000 - 2008）：随着互联网的发展，JavaScript 的功能不断增强。2005 年，AJAX（Asynchronous JavaScript and XML）技术的出现是一个重要的里程碑。它允许网页在不重新加载整个页面的情况下与服务器进行数据交互，大大提升了用户体验。这一时期，JavaScript 开始被用于开发更复杂的网页应用。
- 成熟阶段（2009 - 至今）：2009 年，Google V8 引擎的出现极大地提升了 JavaScript 的执行性能。此后，JavaScript 不再局限于浏览器端，Node.js 的出现使得 JavaScript 可以在服务器端运行。如今，JavaScript 已经成为世界上最流行的编程语言之一，广泛应用于前端开发、后端开发、移动应用开发等多个领域。

二、JavaScript 的主要特点

简单易学
- JavaScript 的语法结构与 C 语言家族（如 Java、C++）有一定的相似性，对于有编程基础的人来说比较容易上手。它是一种弱类型语言，不需要像强类型语言（如 Java）那样在声明变量时明确指定变量的类型。例如，你可以直接声明一个变量 var num = 10;，而不需要像在 Java 中那样写 int num = 10;。
跨平台性
- JavaScript 可以在多种操作系统（如 Windows、macOS、Linux）和多种浏览器（如 Chrome、Firefox、Safari）上运行。这使得开发者可以使用同一种语言开发出可以在不同设备和平台上运行的网页应用，大大提高了开发效率。
灵活性
- JavaScript 是一种动态语言，它支持多种编程范式，如面向对象编程、函数式编程等。你可以根据项目的需要选择合适的编程方式。例如，你可以使用面向对象的方式创建对象和类，也可以使用函数式编程的方式编写简洁高效的代码。
事件驱动
- JavaScript 与 HTML 和 CSS 紧密结合，通过事件驱动的方式实现网页的交互。当用户在网页上进行操作（如点击按钮、输入文本、鼠标移动等）时，会触发相应的事件，JavaScript 可以捕获这些事件并执行相应的代码。例如，你可以为一个按钮添加一个点击事件，当用户点击按钮时弹出一个提示框。

三 .JavaScript基础

小编使用的工具是vscode最新版，这里先给大家整理一下vscode常用快捷键（Windows）

分类	快捷键	功能描述
文件操作	`Ctrl + N`	新建文件
	`Ctrl + O`	打开文件
	`Ctrl + S`	保存当前文件
	`Ctrl + Shift + S`	另存为
	`Ctrl + W`	关闭当前标签页
编辑操作	`Ctrl + C`	复制选中内容
	`Ctrl + X`	剪切选中内容
	`Ctrl + V`	粘贴
	`Ctrl + Z`	撤销
	`Ctrl + Y`	重做
	`Ctrl + D`	选中下一个相同内容（多光标编辑）
	`Alt + ↑/↓`	向上/向下移动当前行
	`Ctrl + Shift + K`	删除当前行
导航操作	`Ctrl + P`	快速打开文件
	`Ctrl + G`	跳转到指定行号
	`Ctrl + F`	在当前文件内查找
	`Ctrl + H`	替换内容
	`F12`	跳转到定义
	`Alt + ←/→`	后退/前进（导航历史）
窗口管理	`Ctrl + B`	显示/隐藏侧边栏
	`Ctrl + \`	拆分编辑器（多窗口）
	`Ctrl + 1/2/3`	切换到第1/2/3个编辑器组
调试运行	`F5`	启动调试
	`F9`	切换断点
	`F10`	单步跳过
	`F11`	单步进入
终端操作	Ctrl + `	显示/隐藏终端
	`Ctrl + Shift + ``	拆分终端
其他常用	`Ctrl + /`	注释/取消注释当前行
	`Shift + Alt + F`	格式化代码
	`Ctrl + Space`	触发代码提示
	`Ctrl + Shift + P`	打开命令面板（万能快捷键）

1.JavaScript的介绍

（1）体验JavaScript

接下来我们通过简单的例子来体验一下js的妙处，运行下方代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>体验js</title>
    <style>
        .GY{
            background-color: red;
        }
    </style>
</head>
<body>
    <button class='GY'>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>
   
</body>

</html>

浏览器显示如下，只有按钮1有颜色

添加js代码可控制点击按钮变为红色：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>体验js</title>
    <style>
        .GY{
            background-color: red;
        }
    </style>
</head>
<body>
    <button class='GY'>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>
    <script>
            let btn=document.querySelectorAll('button')
            for(let i=0;i<btn.length;i++){
                btn[i].addEventListener('click',function(){
                    document.querySelector('button').className='';
                    this.className='GY'
                })
            }
    </script>
</body>

</html>

从中我们可以看出js代码控制简单的逻辑修改页面元素的属性

（2）js代码的书写位置

类型	语法示例	说明
内部	`<script>alert('内部JS');</script>`	直接嵌入 HTML 文件内，通常放在 `<body>` 末尾。
外部	`<script src="script.js"></script>`	通过 `src` 引入外部 .js 文件，推荐使用。
行内	`<button onclick="alert('行内JS')">点击</button>`	直接写在 HTML 标签的事件属性中，不推荐。

（3）js代码的注释与结束符规范

1. 注释方式

类型	语法	用途
单行注释	`// 注释内容`	注释单行代码，快捷键（`Ctrl + /`）。
多行注释	`/* 注释内容 */`	注释多行代码或文档说明，快捷键（`Shift + Alt + A`）。

2. 结束符（分号）规则

问题	说明
结束符是什么？	分号 `;`（如 `let x = 1;`）。
可以省略吗？	✅ 可以，JS 引擎会自动补全（ASI 机制）。
省略建议	团队统一风格：要么全加，要么全不加，避免混用（如 Vue/React 推荐不加）。

某些情况必须加分号（如 ( )、[ ] 开头时），否则会报错：

// 错误示例（不加分号）  
let x = 1  
[1, 2].forEach(console.log) // 报错：1[1, 2]...

2.变量

（1）变量的概念与作用

变量是存储数据的容器，用于在程序中保存和操作数据。

（2）变量的声明方式

声明方式	语法	特点
`var`	`var x = 10;`	存在变量提升，函数作用域，可重复声明，老版本使用，现在基本不使用
`let`	`let y = 20;`	块级作用域，不可重复声明，不存在变量提升
`const`	`const z = 30;`	块级作用域，不可重复声明，不可重新赋值（但对象/数组内容可修改）

示例代码：

var a = 1;      // 旧版声明方式
let b = 2;      // 推荐使用
const c = 3;    // 推荐用于常量

b = 4;          // 允许修改
// c = 5;       // 报错：常量不可重新赋值

（3）变量的命名规范

必须以字母、_或$开头
区分大小写
不能使用保留字（如 let、class等）
推荐使用小驼峰命名法（如 userName）

（4）变量使用注意事项

（1）变量提升：var声明的变量会提升到作用域顶部（值为undefined）

console.log(x); // undefined
var x = 5;

（2）暂时性死区：let/const在声明前不可访问

console.log(y); // 报错
let y = 10;

（3）作用域差异：

var:函数作用域

let/const：块级作用域（{}内有效）

案例一：交换两个变量的值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        let num1=1
        let num2=2
        let temp
        temp=num1
        num1=num2
        num2=temp
        console.log(num1)
        console.log(num2)     
    </script>
</body>
</html>

案列二：输入年龄姓名：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
        <script>
            let uname=prompt('请输入你的姓名')
            let age=prompt('请输入你的年龄')
            let gender=prompt('请输入你的性别')
            document.write(uname,age,gender)
        </script>
</body>
</html>

（5）变量的拓展——数组

（1）基本概念

有序数据集合，索引从0开始
可存储任意类型数据（数字、字符串、对象等）

（2）声明方式

let arr1 = [];                 // 空数组  
let arr2 = [1, "a", true];     // 含不同类型  
let arr3 = new Array(3);       // 长度为3的空数组

3.常量

（1）常量的基本概念

使用 const 关键字声明
声明后不可重新赋值
必须初始化（声明时赋值）

（2）. 常量的特点

特性	说明
块级作用域	只在声明所在的代码块内有效
不可重复声明	同一作用域内不能重复声明
暂时性死区	声明前不可访问
不可重新赋值	声明后不能改变其绑定的值

（3）.常量的声明规范

// 正确写法
const PI = 3.1415;
const MAX_SIZE = 100;

// 错误写法
// const PI;  // 报错：未初始化
// PI = 3.14; // 报错：不可重新赋值

（4）. 常量使用场景

数学常数（如PI）
配置参数（如API地址）
固定枚举值（如状态码）
引入第三方库时固定引用

（5）. 注意事项

对象/数组常量内容可修改（仅限制绑定不可变）

const user = {name: "Alice"};
user.name = "Bob";  // 允许
// user = {};       // 报错

命名规范：
- 全大写+下划线（推荐用于简单常量）
- 小驼峰（推荐用于对象/函数常量）
替代var的方案：
- 优先使用const
- 需要重新赋值的变量才用let

4.数据类型

1.数据类型分类

1.1 基本数据类型（原始类型）

类型	说明	示例
Number	数字（整数/浮点数）	`42`, `3.14`
String	字符串	`"hello"`, `'world'`
Boolean	布尔值	`true`, `false`
Undefined	未定义	`undefined`
Null	空值	`null`
Symbol	唯一标识符（ES6）	`Symbol('id')`
BigInt	大整数（ES11）	`123n`

1.2 引用数据类型

类型	说明	示例
Object	对象	`{name: "John"}`
Array	数组	`[1, 2, 3]`
Function	函数	`function() {}`
Date	日期	`new Date()`
RegExp	正则表达式	`/\d+/g`

2. 类型检测方法

2.1 typeof 运算符

typeof 42;          // "number"
typeof "hello";     // "string"
typeof true;        // "boolean"
typeof undefined;   // "undefined"
typeof null;        // "object" (历史遗留问题)
typeof {};          // "object"
typeof [];          // "object"
typeof function(){};// "function"

2.2 instanceof 运算符

[] instanceof Array;    // true
{} instanceof Object;   // true

2.3 Object.prototype.toString

Object.prototype.toString.call(42);     // "[object Number]"
Object.prototype.toString.call([]);    // "[object Array]"

3. 类型转换

3.1 显式类型转换

方法	说明	示例
Number()	转为数字	`Number("42") → 42`
String()	转为字符串	`String(42) → "42"`
Boolean()	转为布尔值	`Boolean(1) → true`
parseInt()	字符串转整数	`parseInt("10px") → 10`
parseFloat()	字符串转浮点数	`parseFloat("3.14") → 3.14`

3.2 隐式类型转换

"5" + 2;     // "52" (字符串拼接)
"5" - 2;     // 3 (数字运算)
!"0";        // false (布尔转换)

4. 特殊值处理

4.1 NaN (Not a Number)

isNaN(NaN);         // true
isNaN("hello");     // true
Number.isNaN(NaN);  // true (ES6更安全的方法)

4.2 null vs undefined

undefined: 变量声明但未赋值
null: 开发者主动设置的空值

5. 最佳实践

使用===严格相等比较避免隐式转换
重要转换使用显式方法（如Number()）
检查数组类型用Array.isArray()
新版特性优先（如BigInt替代大数运算）

6.实战案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h2{
            text-align: center;
        }
        table{
            border-collapse: collapse;
            height: 80px;
            margin: 0 auto;
        }
        th{
            padding: 5px 20px;
        }
        table,th,td{
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <h2>订单</h2>
    
    <script>
        let name=prompt('请输入商品名称')
        let num=+prompt('请输入商品数量')
        let address=prompt('请输入收货地址')
        let price=10
        let total=num*price
        document.write(`
        <table>
        <tr>
            <th>商品名称</th>
            <th>商品价格</th>
            <th>商品数量</th>
            <th>总价</th>
            <th>收货地址</th>
        </tr>
        <tr>
            <td>${name}</td>
            <td>${price}</td>
            <td>${num}</td>
            <td>${total}</td>
            <td>${address}</td>
        </tr>
    </table>
        `)

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

演示效果