【学习总结|DAY03】前端Web-JavaScript学习总结与实例练习

今天我学习了前端三大基础之一——JavaScript。JavaScript 是一门跨平台、面向对象的脚本语言，主要用于控制网页行为，实现人机交互效果。简单来说，就是让我们的网页“动”起来，响应用户的操作。

JavaScript 介绍

JavaScript 由三个主要部分组成：

• ECMAScript: 规定了 JavaScript 的基础语法核心知识，包括变量、数据类型、流程控制、函数、对象等。
• BOM (Browser Object Model): 浏览器对象模型，用于操作浏览器本身，例如页面弹窗、地址栏操作、关闭窗口等。
• DOM (Document Object Model): 文档对象模型，用于操作 HTML 文档，例如改变标签内容、改变字体样式等。

JavaScript 引入方式

JavaScript 代码可以以两种方式引入 HTML 页面：

• 内部脚本: 将 JavaScript 代码定义在 <script> 标签之间，可以放置在 HTML 文档的任意位置。
• 外部脚本: 将 JavaScript 代码定义在外部 JS 文件中，然后通过 <script src="..."></script> 标签引入到 HTML 页面中。

JavaScript 基础语法

• 区分大小写: 变量名、函数名等都是区分大小写的。
• 分号可有可无: 代码行结尾的分号可选，但建议统一使用。
• 大括号表示代码块: 使用大括号 {} 包裹代码块。
• 注释: 单行注释使用 //，多行注释使用 /* ... */。

JavaScript 中提供了三种输出语句：

• window.alert(…): 弹出警告框。
• document.write(…): 在 HTML 页面输出内容。
• console.log(…): 写入浏览器控制台。

JavaScript 变量

• let: 用于声明变量，可以存储不同类型的值。
• const: 用于声明常量，一旦声明，值不能改变。
• var: 早期 JavaScript 中用于声明变量，但不够严谨，不推荐使用。

JavaScript 数据类型

JavaScript 中的数据类型分为两类：

• 原始数据类型: number (数字), string (字符串), boolean (布尔值), null (空值), undefined (未定义)。
• 引用数据类型: 对象，数组，函数等。

可以使用 typeof 关键字返回变量的数据类型。

JavaScript 运算符

JavaScript 中的运算符包括：

• 算术运算符: +, -, *, /, %, ++, –
• 赋值运算符: =, +=, -=, *=, /=, %=
• 比较运算符: >, <, >=, <=, !=, ==, === (全等)
• 逻辑运算符: &&, ||, !
• 三元运算符: 条件表达式 ? true_value : false_value

JavaScript 流程控制语句

JavaScript 中的流程控制语句包括：

• if … else if … else …
• switch
• for
• while
• do … while

JavaScript 函数

JavaScript 中的函数用于封装代码块，提高代码复用性。定义函数的两种语法：

• 格式一: function 函数名(参数1, 参数2...){ 要执行的代码 }
• 格式二: 匿名函数 (函数表达式) 和 箭头函数

JavaScript 对象

JavaScript 中的对象可以分为三类：

• 基本对象: Array (数组), String (字符串), JSON
• BOM 对象: Window, Navigator, Screen, History, Location
• DOM 对象: HTML 元素对象

JavaScript 事件

JavaScript 事件是 HTML 元素上发生的“事情”，例如点击按钮、鼠标移动等。我们可以给事件绑定函数，当事件触发时，自动执行函数。

事件监听的语法:

javascript

复制

事件源.addEventListener('事件类型', 要执行的函数);

JavaScript 模块化

JavaScript 模块化是一种将 JavaScript 程序拆分为多个可按需导入的单独模块的机制。可以使用 export 关键字导出模块，使用 import 关键字导入模块。

实例练习

1、for循环应用

代码描述：使用 for 循环打印出 1 到 100 中所有能被 3 整除的数

<script>
        for(let i=0;i<100;i++){
            if(i%3==0){
                console.log("0-100可以被3整除的数有：" + i);
            }
        }
    </script>

实现效果：

2、if条件句 

代码描述：编写一个程序，根据用户输入的月份（1 - 12），输出该月份所属的季节。3 - 5 月为春季，6 - 8 月为夏季，9 - 11 月为秋季，12、1、2 月为冬季。

<script>
        let Season = prompt("请输入月份（1-12）：");
        if(Season == "1" || Season == "2" || Season == "12"){
            alert("该月份属于冬天")
        }else if(Season == "3" || Season == "4" || Season == "5"){
            alert("该月份属于春天")
        }else if(Season == "6" || Season == "7" || Season == "8"){
            alert("该月份属于夏天")
        }else if(Season == "9" || Season == "10" || Season == "11"){
            alert("该月份属于秋天")
        }else{
            alert("输入错误，请重新输入1-12的数字")
        }
    </script>

实现效果：

输入12，点击运行