JavaScript
什么是JavsScript
JavaScript是一种轻量级、解释型、面向对象的脚本语言。它主要被设计用于在网页上实现动态效果，增加用户与网页的交互性。
作为一种客户端语言，JavaScript可以直接嵌入HTML，并在浏览器中执行。
与HTML和CSS不同，JavaScript使得网页不再是静态的，而是可以根据用户的操作动态变化的。
JavaScript的作用
JavaScript在前端开发中扮演着重要角色，其应用领域包括但不限于以下三种：
'客户端脚本'：用于在用户浏览器中执行，实现动态效果和用户交互。
'网页开发'：与HTML和CSS协同工作，使得网页具有更强的交互性和动态性。
'后端开发'：使用Node、JavaScript也可以在服务器端运行，实现服务器端应用的开发。
JS导入方式：
第一种是内联式，在html文件中直接嵌入JS代码，JS代码放在script标签内，script标签可以在head，也可以在body标签内
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS导入方式</title>
<script>
console.log('Hello, Head 标签的内联样式')
</script>
<!-- 外部引入,导入外联样式 -->
<script src="./js/myscript.js"></script>
</head>
<body>
<h1>JavaScript 的导入方式</h1>
<script>
// console.log表示在控制台打印一些日志内容
console.log('Hellp, body标签的内联样式')
alert("你好，内联样式弹窗");
</script>
</body>
JS基本语法
<script>
// 变量，var生成的变量是具有函数作用域
var x;
// 变量，let生成的变量具有块级作用域，let更安全更灵活，它避免了var可以引发的一些问题，特别是关于变量提升和块级作用域的方面
let y = 5;
// 常量
const pI=3.14
// 打印出x,y,pI，打印结构 undefined、5、3.14。undefined的意识就是一个空值，未定义的状态，它是JS中的一种数据类型表示变量声明但没有初始化。
console.log(x , y , pI);
// 创建一个字符串
let name='小刘';
console.log(name);
// 创建一个空值
// null与undefined的区别，虽然他们两个都是表示缺失值的特殊值，但是他们在含义上还是有区别的，
// undefined表示一个变量已被声明但尚未被赋值或者一个对象属性不存在,当函数没有返回值的时候,默认返回的也是undefined
// null表示一个变量被明确赋值为空或者不存在,它是一个被赋予的值,表示一个空对象引用或者没有对象值
// undefined表示变量可能在将来被赋值,或者表示某个值还没有被计算出来.而null,明确表示没有对象值
// 在实际开发中根据语境选择哪个值
let empty_value = null;
console.log(empty_value);
</script>
JS控制语句
JS控制语句：包括条件语句和循环语句
条件语句
条件语句都会使用，if、else if、和else三个关键字。
'if'语句：用于执行一个代码块，当指定的条件为真(true)时执行。语法如下：
if(condition){
//如果条件为真，执行这里的代码
}
'else'语句：用于在上一个If和所有的else if都为假时执行的代码块。语法如下：
if (condition){
//如果条为真，执行这里的代码
}else{
//如果条件为假，执行这里的代码
}
'else if'语句：用于在上一个if语句条件为假时，检查另一个条件。可以有多个else if语句。语法如下：
if (condition1){
//如果条件1为真，执行这里的代码
}else if (condition2){
//如果条件2为真，执行这里的代码
}else{
//如果以上条件都为假，执行这里的代码
}
代码示例：
let age = 18;
//大于等于十八则输出你已经成年了,否则输出未成年
if (age >= 18) {
console.log('你已经成年了');
}else{
console.log('未成年');
}
let time = 22;
if (time < 12) {
alert('上午好');
} else if (time <18) {
alert('下午好');
} else {
alert('晚上好');
}
循环语句
循环语句用于重复执行一段代码，直到指定的条件不再满足为止。
for
'for'循环：是一种常见的循环语句，用于按照指定的条件重复执行代码块。语法如下：
for(初始化表达式；循环条件；迭代器){
//循环体，执行这里的代码
}
代码示例：
console.log('for 循环');
// i=0初始化我们这个循环变量为i,并且初始值为0;循环条件,当i<10时,我们就执行这个for循环,每执行完一次 就执行一次i++
// i++就是i=i+1的简写,也可以为i+=1
for (let i = 1; i<11;i++){
console.log(i);
}
while
'while'循环会在指定的条件为真的执行代码块。语法如下：
whileO(循环条件){
//循环体，执行这里的代码
}
代码示例：
// while死循环
console.log('while 循环');
let count = 1;
while (count <= 10){
console.log(count);
// 迭代条件
count++
}
break与continue
循环关键字
'break'用于跳出循环，结束循环进行。
'continue'用于跳过当前循环中的剩余代码，继续下一次循环。
代码示例：
console.log('循环关键字');
for (var i = 0;i<5;i++){
// i=2跳过这个代码
if ( i == 2){
continue;
}
// i=4终止这段代码
if (i == 4){
break;
}
console.log(i);
}
函数
'函数'是一段可重复使用的代码块，它可接受输入(参数)、执行特定任务，并返回输出。
function function_name(参数1，参数2，参数3，...){//参数可以不写，表示不传参
//函数体，执行这里的代码
return 返回值;//可选，返回值
}
代码示例如下：
<SCript>
function hello(){
console.log('hello world!');
}
//调用这个函数
hello()
function hello_with_return(){
return 'hello world! - 返回值'
}
// 用a这个变量接收这个返回值
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
hello_with_params('如花');
hello_with_params('Alice');
// 作用域
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);
// 因为local_var在局部作用域里面，在外部访问不到
console.log('全局打印局部变量：' + local_var);
</SCript>
事件
事件是文档或者浏览器窗口中发生的特定瞬间，例如用户的点击、键盘的按下、页面的加载等。常见的时间如下：
|-------------|----------|
| 事件 | 描述 |
| onClick | 点击事件 |
| onMouseOver | 鼠标经过 |
| onMouseOut | 鼠标移出 |
| onChange | 文本内容改变事件 |
| onSelect | 文本框选中 |
| onFocus | 光标聚集 |
| onBlur | 移开光标 |
事件的绑定
JS绑定事件的方法有三种：
1、'HTNL'属性
2、'DOM'属性
3、'addEventListener'方法
代码示例：
<body>
<button onclick="click_event()">这是一个点击事件按钮</button>
<input type="text" onfocus="focus_event()" onblur="blur_event()">
<script>
// 点击事件
function click_event() {
alert('点击事件触发了');
}
// 聚焦事件
function focus_event(){
console.log('获取焦点');
}
// 失去焦点
function blur_event(){
console.log('失去焦点');
}
</script>
</body>
注：刚开始接触前端，希望有大佬提出建议，本人虚心学习。