web前端基础到入门——02day

学习目标：

• 掌握JS两种引入方式，理解企业开发规范
• 吃透JS基础语法、变量本质、数据类型、核心运算符
• 熟练掌握JS函数定义、调用、核心特性
• 掌握数组、字符串、JSON核心用法，打通前端数据基础
• 掌握BOM浏览器对象，独立实现弹窗、定时器、页面跳转功能

一、前言：衔接昨日学习，读懂JS的核心作用

回顾我们Day01 前端入门学习，我们已经完整掌握了前端三大基石中的 HTML 和 CSS：

• HTML：搭建网页骨架（房子结构），负责页面所有内容的展示
• CSS：美化网页样式（装修房子），负责页面布局、颜色、尺寸、美观度

但仅仅依靠 HTML+CSS 制作出来的网页，是静态网页。

什么是静态网页？页面是死的、不会动、不能交互。

我们日常浏览网页时的：按钮点击、弹窗提示、切换主题、页面跳转、输入内容、倒计时效果，HTML和CSS全部无法实现。

JavaScript 就是网页的灵魂，专门为网页赋予动态交互能力。

✅ 两日知识闭环总结：

• 昨天：学会搭建页面、美化页面（页面成型）
• 今天：学会激活页面、交互页面（页面成活）

二、JS代码的两种引入方式（新手必懂）

JS代码无法独立运行，必须嵌入HTML页面中执行。前端开发中，只有 内部脚本、外部脚本 两种引入方式。

1、内部脚本（内嵌式）

直接将JS代码写在HTML的 <script></script> 标签中。

核心注意点：

• script标签可以放在HTML任意位置，支持多个标签
• 官方推荐放在 body 底部：先渲染页面，再执行JS，防止页面卡顿、加载空白

<script>
// 浏览器弹出提示框
alert("Hello JavaScript");
</script>

2、外部脚本（企业开发主流）

将所有JS代码单独抽离为 .js 后缀文件，通过 src 属性引入HTML页面。

核心注意点（高频易错）：

• 外部js文件中，只能写JS代码，不能写script标签
• 引入外部JS的script标签必须是双标签
• 优势：结构分离、代码复用、页面整洁、方便维护

第一步：新建 js/demo.js 文件，写入代码：

alert("Hello JS2");

第二步：在HTML中引入外部JS文件：

<!– 引入外部独立JS文件 –>
<script src="js/demo.js"></script>

三、JS基础语法（新手入门核心规范）

任何编程语言都有语法规则，JS语法宽松但有固定规范，新手一定要养成好习惯。

1、基础语法规则

• 严格区分大小写：和Java一致，name和Name是两个完全不同的变量
• 语句末尾分号 ; 可省略（JS自动补全），企业开发建议写上，规范整洁
• {} 大括号包裹代码块，代表一个整体作用域
• 注释：用于代码解释，不参与程序执行
  • 单行注释：// 注释内容（只注释当前行）
  • 多行注释：/* 注释内容 */（可跨行注释）

2、JS三种输出方式（调试必备）

我们学习JS，需要通过输出方式查看代码运行结果，三种方式各有用途：

alert("弹窗输出内容");
document.write("页面展示内容");
console.log("控制台调试内容");

四、JS变量详解（var / let / const 终极区别）

变量是所有编程语言的核心，用来存储数据。JS是弱类型语言，变量可以随意更换数据类型，极其灵活。

1、三种变量关键字对比（面试重点）

2、代码实操演示

❌ var 缺陷演示：块级失效、重复定义

{
var x = 1;
var x = "A"; // 允许重复定义，无报错
}
alert(x); // 块外依然可以访问，造成变量污染

✅ let 优势：严格块级作用域

{
let x = 1;
}
alert(x); // 报错：x未定义，外部无法访问，更安全

✅ const 常量：一经定义，不可修改

const pi = 3.14;
pi = 3.15; // 直接报错，常量禁止二次赋值

五、JS数据类型与核心运算符

1、五大原始数据类型

JS虽说是弱类型语言，但也有明确的数据类型，我们可以通过 typeof 检测变量类型。

• number：数字类型（整数、小数、NaN非数字）
• string：字符串类型（单/双引号包裹的文本）
• boolean：布尔类型，只有 true / false 两个值
• null：空对象，表示对象为空
• undefined：变量声明但未赋值，默认空值

typeof 123; // number
typeof "CSDN"; // string
typeof true; // boolean
typeof null; // object（JS历史bug，特殊记忆）
let a;
typeof a; // undefined

2、面试重点：== 和 === 的区别

这是JS最容易踩坑、面试必问的运算符考点！

• == 宽松相等：只对比数值，自动隐式转换数据类型
• === 严格全等：同时对比 数值 + 数据类型，类型不同直接false

let age = 20; // number类型
let strAge = "20"; // string类型
console.log(age == strAge); // true（只比值）
console.log(age === strAge); // false（类型不同）

3、JS隐式布尔转换（必记规则）

JS在判断条件时，会自动将部分值转为false，其余全部为true：

等价于false的值：0、空字符串""、null、undefined、NaN

六、JS函数（代码复用核心）

函数是封装重复代码的代码块，定义一次、随处调用，大幅提升开发效率、减少冗余代码。

1、标准函数定义（常用）

// 定义函数
function add(a, b) {
return a + b; // 返回结果
}

// 调用函数
let res = add(10, 20);
alert(res);

2、函数表达式定义

let add = function(a, b) {
return a + b;
}
alert(add(10, 20));

JS函数特殊特性：

• 形参无需声明数据类型
• 调用函数时，实参数量可以和形参不一致，多余参数自动忽略

七、JS常用基本对象（数组+字符串+JSON）

1、Array 数组（重点）

JS数组类似于Java集合，长度可变、支持任意数据类型存储，使用极其灵活。

创建方式：

let arr1 = new Array(1, 2, 3);
let arr2 = [1, "博客", true]; // 推荐简写方式

核心常用方法：

let arr = [1, 2, 3, 4];
arr.forEach(item => console.log(item)); // 遍历数组所有有效值
arr.push(5, 6); // 数组末尾追加元素
arr.splice(2, 2); // 指定位置删除元素（索引，删除个数）

2、String 字符串

字符串是开发中高频使用的数据类型，核心方法如下：

let str = " CSDN JS教程 ";
str.length; // 获取字符串长度
str.trim(); // 去除首尾空格
str.indexOf("CS"); // 查找字符索引
str.substring(0, 3); // 截取字符串（含头不含尾）

3、JSON 对象（前后端交互核心）

JSON 是目前前后端数据交互的唯一主流格式，格式严谨：key必须使用双引号包裹。

两大核心转换方法（工作必用）：

let jsonStr = '{"name":"张三","age":20}';
let obj = JSON.parse(jsonStr); // 转为对象，直接取值
console.log(obj.name);
let newStr = JSON.stringify(obj); // 转回JSON字符串

八、BOM 浏览器对象模型

BOM作用：JS操作浏览器的专属API，可以控制弹窗、定时器、页面跳转、获取浏览器信息。

1、Window 顶级对象

window是BOM的顶级对象，所有浏览器方法都隶属于window，window. 可以直接省略。

常用核心方法：

confirm("是否确认删除数据？"); // 确认弹窗，返回true/false

// 循环定时器：每隔2秒执行一次
setInterval(() => {
console.log("周期性执行任务");
}, 2000);

// 延时定时器：延迟3秒，只执行一次
setTimeout(() => {
alert("3秒时间到！");
}, 3000);

2、Location 地址栏对象

专门操作浏览器地址栏，常用于获取网址、页面跳转：

console.log(location.href); // 获取当前页面完整网址
location.href = "https://www.csdn.net"; // 自动跳转页面

九、今日总结（衔接昨日，完整串联）

• 技术闭环：昨日HTML搭骨架、CSS做美化，今日JS赋予交互，静态网页正式变为动态网页
• 掌握JS两种引入方式，区分开发场景，遵守企业代码规范
• 吃透变量核心：let/const 完全替代 var，理解块级作用域优势
• 掌握 == 和 === 核心区别，避开开发高频坑点
• 熟练使用函数、数组、字符串、JSON，掌握前端基础数据处理能力
• 掌握BOM浏览器操作，实现弹窗、定时、页面跳转等基础动态效果

下期预告：衔接今日BOM基础，Day03 详解DOM文档对象模型，手把手教你操作HTML标签、实现网页交互特效，完美串联前端三大核心技术！

码字不易，欢迎点赞、收藏、关注，持续更新前端零基础全套教程！