1.JavaScript简介及其导入方式
什么是JavaScript？JavaScript简称JS。
JavaScript是一种轻量级、解释型、面向对象的脚本语言。它主要被设计用于在网页上实现动态效果，增加用户与网页的交互性。
作为一种客户端脚本语言，JavaScript可以直接嵌入HTML，并在浏览器中执行。
与HTML和CSS不同，JavaScript使得网页不再是静态的，而是可以根据用户的操作动态变化的。
JavaScript的作用
JavaScript在前端开发中扮演着重要的角色，其应用领域包括但不限于：
客户端脚本：用于在用户浏览器中执行，实现动态效果和用户交互。
网页开发：与HTML和CSS协同工作，使得网页具有更强的交互性和动态性。
后端开发：使用Node.js，JavaScript也可以在服务器端运行，实现服务器端应用的开发。
<!DOCTYPE html>
<html lang="en">
<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>
<!-- 1.内联式 -->
<h1>JavaScrip的导入方式</h1>
<script>
console.log('Hello,body标签的内联样式');
alert('你好，内联样式弹窗');
</script>
<!-- 2.外部引入：把JS代码保存在单独的外部文件中，通过script标签的src属性引入 -->
</body>
</html>单独的外部文件：
console.log('Hello,外联样式');在浏览器中使用F12调出。
2. JavaScript基本语法
有其他语言基础，语法基本一致。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS的基本语法</title>
</head>
<body>
<script>
var x;
let y=5;
const PI=3.14;
// #var声明的变量是具有函数作用域 undefined表示一个变量已被声明，但尚未被赋值，或者是一个对象属性不存在，当函数没有返回值的时候，默认返回的也是undefined
// undefined表示变量可能将来被赋值或者表示某个值还未被算出，而null明确表示没有对象值
// #let声明的变量是具有块级作用域，更安全更灵活
// #const常量
console.log(x,y,PI);
let name='如花';
console.log(name);
let empty_value=null;
console.log(empty_value);
// null表示一个变量被明确赋值为空或者不存在了，它是一个被赋予的值，表示一个空对象引用或者没有对象值
// JS控制语句
let age = 17;
if (age >18){
console.log('你已经成年了');
} else{
console.log('未成年');
}
// let time = 20;
// if(time<12){
// alert('上午好');
// }else if(time<18){
// alert('下午好');
// }else{
// alert('晚上好');
// }
// 条件语句
console.log('For循环');
for(let i=1;i<=10;i++){
console.log(i);
}
console.log('while循环');
let count=1;
while(count<=10){
console.log(count);
count++;
}
console.log('循环关键字');
for(var i=0;i<7;i++){
if(i==2){
continue;
}
if(i==4){
break;
}
console.log(i);
}
</script>
</body>
</html>3. JavaScript函数
“函数”是一段可重复使用的代码块，它接受输入（参数）、执行特定任务，并返回输出。
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS函数</title>
</head>
<body>
<script>
function hello(){
console.log('Hello world');
}
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('如花')
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);
console.log('全局打印局部变量：'+ local_var);
</script>
</body>
</html>受作用域限制，不可以全局打印局部变量
4. JavaScript事件
事件是文档或浏览器窗口中发生的特定瞬间，例如用户的点击、键盘的按下、页面的加载等。通过事件可以让HTML/CSS/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>
</head>
<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>
</html>
5. JavaScript DOM
当网页被加载时，浏览器会创建页面的文档对象模型，也就是DOM（Document Object Model）。
每个HTML或XML文档都可以被视为一个文档树，文档树是整个文档的层次结构表示。
文档节点是整个文档树的根节点。
DOM为这个文档树提供了一个编程接口，开发者可以使用JavaScript来操作这个树状结构。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS DOM</title>
</head>
<body>
<div id="box1">这是一个ID选择器标签</div>
<div class="box2">这是一个类选择器标签</div>
<div>普通的div标签</div>
<button>点击按钮</button>
<script>
var element_id = document.getElementById('box1');
console.log(element_id);
var element_class = document.getElementsByClassName('box2')[0];// ('box2')返回的是一个数组
console.log(element_class);
var element_tag = document.getElementsByTagName('div')[2];
console.log(element_tag);
element_id.innerHTML = '<a href="#">跳转链接</a>';
element_class.innerText ='<a href="#">跳转链接</a>';//innerText会忽略掉HTML标记，把修改后的内容当成纯文本处理，不会解析；而innerHTML会解析HTML标记，把修改后的内容当成HTML代码处理。
element_tag.style.color ='red';
element_tag.style.fontSize ='20px';
//DOM属性绑定事件
var button_element = document.getElementsByTagName('button')[0];
console.log(button_element);
// button_element.onclick = function(){
// alert('DOM属性案件触发');
// }
button_element.addEventListener('click',click_event);
function click_event(){
alert('通过addEventListener触发按键');
}
</script>
</body>
</html>innerText会忽略掉HTML标记，把修改后的内容当成纯文本处理，不会解析；
而innerHTML会解析HTML标记，把修改后的内容当成HTML代码处理。
标签：Web,console,log,前端,JavaScript,JS,HTML,var,element From： https://blog.csdn.net/m0_75186037/article/details/137271603