Web前端基础知识（六）
JavaScript 简介
JavaScript 简称JS，是一种轻量级、解释型、面向对象的脚本语言。主要被设计用于在网页上实现动态效果，增加用户与网页的交互性。
作为一种客户端脚本语言，JavaScript可以直接嵌入HTML,并在浏览器中执行。
与HTML和CSS不同，JavaScript使得网页不再是静态的，而是可以根据用户的操作动态变化。
JavaScript的作用（包括但不限于）：
客户端脚本：用于在用户浏览器中执行，实现动态效果和用户交互。
网页开发：与HTML、CSS协同工作，使得网页具有更强的交互性和动态性。
后端开发：使用Node.js，js也可以在服务端运行，实现服务器端应用的开发。
JS的导入方式：
1.内联式：在HTML文件中，直接嵌入JS代码。
CSS代码放在<style>中。
JS代码放在<script>中。
<script>标签可以在<head>中或<body>内。
2.外部引入：把js代码保存在单独的外部文件中，通过script标签的src属性引入。
console.log:要在控制台中，打印一些日志内容。
举例：
效果：
举例：
<body>
<h1>JS的导入方式</h1>
<script>
alert('内联样式弹窗')
</script>
</body>
效果：
JS变量
在JS中，使用三个关键字来声明变量。
const 表示声明一个常量；
var和let 都表示声明变量，var声明的变量具有函数作用域，let声明的变量具有块级作用域。let 更安全更灵活。let避免了var可能引发的一些问题，比如，关于变量提升和块级作用域的方面。
举例：
效果：
注意：null和undefined都是用于表示缺失值的特殊值，
undefined 表示一个变量已被声明，但尚未被赋值，或者 对象属性不存在。当函数没有返回值的时候，默认返回的也是undefined.
null表示一个变量被明确赋值为空，或者不存在了。它是一个被赋予的值，表示一个空对象引用或者没有对象值。
JS控制语句
1.条件语句
if(条件){
//如果条件为真，执行语句块中的代码。
}
if(条件){
//如果条件为真，执行语句块中的代码
}else{
//如果条件为假，执行语句块中的代码
}
if(条件1){
//如果条件1为真，执行语句块中的代码
}else if（条件2）{
//如果条件2为真，执行语句块中的代码，elseif可有多个。
}else{
//如果以上条件都为假，执行语句块中的代码
}
举例：
let age=17;
if (age>18){
console.log("成年")
}else{
console.log("未成年")
}
效果：
举例(在不同的时间，弹出不同的问候窗口)：
let time=22;
if (time<12){
alert('上午好！')
}else if(time<18){
alert('下午好！')
}else{
alert('晚上好！')
}
效果：
2.循环语句
for (初始化表达式;循环条件;迭代器){
//循环体
}
举例：
console.log('for循环：')
for (let i=1;i<11;i++) {
console.log(i)
}
效果：
while(条件){
//循环体
}
举例：
console.log('while循环：')
let count=1;
while(count<=10){
console.log(count);
count++;
}
效果：
break:用于跳出循环，结束循环的执行。
continue:用于跳过当前循环中的剩余代码，继续下一次循环。
举例：
for(var i=0;i<5;i++){
if(i==2){
continue;
}
if(i==4){
break;
}
console.log(i);
}
效果：
函数
function 函数名 (参数1,参数2,...){ //参数可以不写，表示不传参
//函数体
return 返回值; //可选。
}
举例：
<script>
function hello(){
console.log('hello');
}
hello();
function hello_with_return(){
return 'hello,world-返回值'
}
let a=hello_with_return();
console.log(a)
console.log(hello_with_return())
function hello_with_params(name){
console.log('hello,'+name)
}
hello_with_params('用户');
</script>
效果：
作用域
作用域在函数内部声明的变量，具有局部作用域，即函数作用域。
在函数外部声明的变量，具有全局作用域。
举例：
let global_var="全局变量";
function local_var_function(){
let local_var="局部变量";
console.log('函数内打印全局变量：'+global_var);
console.log('函数内打印局部变量：'+local_var);
}
local_var_function();
console.log('函数外打印全局变量：'+global_var);
console.log('函数外打印局部变量：'+local_var);
效果：
事件
事件是文档或浏览器窗口中发生的特定瞬间，例如用户的点击、键盘的按下、页面的加载等。通过事件让HTML、CSS、JS 建立关系。
常见的事件如下：
| 事件 | 描述 |
| onClick | 点击事件 |
| onMouseOver | 鼠标经过 |
| onMouseOut | 鼠标移出 |
| onChange | 文本内容改变事件 |
| onSelect | 文本框选中 |
| onFocus | 光标聚集 |
| onBlur | 移开光标(失去焦点) |
本质上，事件 是一个 函数触发的条件（当事件发生时，相关联的函数就会被调用）。
在HTML中，可以通过三种方法来添加事件：（1）HTML属性（在HTML标签中，添加事件属性）
（2）DOM属性
（3）addEventListener 方法
例如：
<button οnclick="click_event()">这是一个点击事件按钮</button>
<script>
//点击事件
function click_event(){
alert('点击事件触发了');
}
</script>
举例：
举例：
//聚焦、失焦，一般用在文本框。
<script>
//聚焦事件
function focus_event(){
console.log('获取焦点');
}
//失去焦点事件
function blur_event(){
console.log('失去焦点');
}
</script>
效果：
点击文本框内部，控制台打印“获取焦点”；点击文本框外部，控制台打印“失去焦点”。
DOM:
在Web开发中，DOM通常与JavaScript一起使用。
当网页被加载时，浏览器会创建页面的文档对象模型，也就是DOM。
DOM允许开发者通过JS与HTML文档进行交互，动态地改变文档的结构、样式、内容。
对象的作用：为了让函数和变量之间建立联系。
对象中的属性就是变量。
对象中的方法就是函数。
与普通的变量、函数相比，区别：在调用的时候，需要在这个对象的属性和方法前加上对象名。
每个HTML文档或者是XML文档，都可以视为一个文档树。
DOM，为文档树提供一个编程的接口，即 DOM API.
后续内容见《Web前端基础知识（七）》