JavaScript
/* 时间：2021/12/07 功能：CSS 目录: 一: 引入 二: 数据类型 三: 函数 四: 作用域 五: 条件语句 六: 获取标签元素 七: 获取标签属性和设置 八: 数组 九: 定时器 十: 对象 十一: json 十二: 类 十三: 补充标签 十四: EventListener 十五: 简单综合: 日记本 */
一: 引入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 内嵌式 -->
<script>
alert("内嵌式_Js")
</script>
<!-- 外链式 -->
<script src="js/main.js"></script>
<script>
fnShow();
</script>
</head>
<body>
<!-- 行内式 -->
<input type="button" value="按钮" onclick="alert('行内式_Js')"
</body>
</html>
alert("外链式_Js")
function fnShow(){
alert("OK")
}
1 : 文件 main.js
<script> // 随机数 document.write(Math.round(Math.random()*10)) </script> <script> // 输入输出 var s1 = prompt("请输入num1:"); var s2 = prompt("请输入num2:"); n1 = parseFloat(s1) n2 = parseFloat(s2) document.write(n1 + n2) </script>
二: 数据类型
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script> var iNum1 = 1; // 定义类型 - 数字 var fun2 = 1.1; // 定义类型 - 数字 var sName = "张三"; // 定义类型 - 字符串 var bIsOk = true; // 定义类型 - 布尔 var unData; // 定义类型 - 未初始化 var oData = null; // 定义类型 - 空对象 console.log(iNum1, typeof(iNum1)) console.log(fun2, typeof(fun2)) console.log(sName, typeof(sName)) console.log(bIsOk, typeof(bIsOk)) console.log(unData, typeof(unData)) console.log(oData, typeof(oData)) var oPerson = { name : "王五", age : 20 } console.log(oPerson, typeof(oPerson)) console.log(oPerson.name, typeof(oPerson.name)) console.log(oPerson.age, typeof(oPerson.age)) </script> </head> <body> <!-- --> </body> </html>
<script> // 数组 : 单类型 var scores = [20, 40, 60, 80, 100]; document.write(scores, "<br>", scores.length, "<br>", scores[0], "<br>"); scores[0] = 100; document.write(scores[0], "<br>"); // 数组 : 多类型 var cars=new Array(); cars[0]="Saab"; cars[1]="Volvo"; cars[2]="BMW"; cars[3] = 123; var person={ firstname : "John", lastname : "Doe", id : 5566 }; cars[4] = person; document.write(cars[4].id, "<br>"); </script>
三: 函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function fnShow(){
alert("无参 无返回值 函数")
};
fnShow()
function fnSum(iNum1, iNum2){
var iResult = iNum1 + iNum2;
return iResult
}
var iNum = fnSum(2, 4);
alert(iNum);
</script>
</head>
<body>
</body>
</html>
<body> <!-- 函数处理 --> <button onclick="myFunction('Harry Potter', 'wizard')"> 点击 </button> <script> function myFunction(name, job){ document.write("welcome" + name + ", the" + job); } </script> </body> <script> // 变量是否带var function exampleFunction(){ var varDeclared = "使用var声明的变量"; // 局部变量 nonVarDeclared = "没使用var声明的变量"; // 全局变量 } exampleFunction(); console.log(nonVarDeclared); // 报错 document.write(nonVarDeclared); // 显示 </script>
四: 作用域
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function fnShow(){
var iNum = 1; // 局部变量;
alert("fnShow(): " + iNum)
}
fnShow();
// alert(iNum); // Uncaught ReferenceError: iNum is not defined
var iNum1 = 1; // 全局变量;
function fnModify(){
alert("fnModify(): " + iNum1);
iNum1 = 3;
iNum1++;
++iNum1;
alert("fnModify(): " + iNum1);
}
fnModify();
</script>
</head>
<body>
</body>
</html>
五: 条件语句
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
var iNum1 = 3;
var sString = "3";
if(iNum1 == sString){
var sResult = "iNum1和sString, 数据都一样"
alert(sResult)
}else{
var sResult = "iNum1和sString, 数据都不一样"
alert(sResult)
}
if(iNum1 === sString){
var sResult = "iNum1和sString, 类型和数据都一样"
alert(sResult)
}else{
var sResult = "iNum1和sString, 类型和数据至少有一个不一样"
alert(sResult)
}
// 拼接: 字符串 + 数字; 底层把数字类型转成字符串, 这种操作隐式类型转换
var sResult = iNum1 + sString
alert(typeof(sResult))
</script>
</head>
<body>
</body>
</html>
六: 获取标签元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
// 完全写法
// function fnLoad(){
// var oP = document.getElementById("p1");
// console.log("fnLoad", oP);
// alert(oP)
// };
// window.onload = fnLoad;
// 等待加载完成: 页面标签 + 数据
window.onload = function(){
var oP = document.getElementById("p1");
console.log("function()", oP);
alert(oP);
};
</script>
</head>
<body>
<p id="p1"> 段落标签</p>
</body>
</html>
七: 获取标签属性和设置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
window.onload = function(){
var oBtn = document.getElementById("btn1"); // 获取id
console.log(oBtn.type, oBtn.value);
oBtn.name = "username"; // 设置属性 : name
oBtn.style.background = "green"; // 设置属性 : 样式
oBtn.className = "benstyle"; // 设置属性 : class
oBtn.style.fontSize = "30px"; // 设置属性 : 字体大小
var oDiv = document.getElementById("div1")
console.log(oDiv.innerHTML)
oDiv.innerHTML = "<a href='http://www.baidu.com'>百度</a>" // 设置标签内容
}
</script>
</head>
<body>
<input type="button" value="按钮" id="btn1">
<div id = "div1">
Don't Sleep
</div>
</body>
</html>
八: 数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
// 定义数组
var aArray1 = new Array(1, 2, 3);
var aArray2 = [3, 7, 9];
console.log(aArray1); // 打印元素
console.log(aArray2); // 打印元素
var aArray3 = [[1, 4, 2], [9, 0, 2]];
console.log(aArray3, aArray3[0, 3]); // 打印元素
var aArray4 = [2, 3, 7];
console.log(aArray4)
console.log("aArray4.length", aArray4.length); // 元素个数
aArray4[1] = 26; // 修改元素
console.log(aArray4);
aArray4.push("hi"); // 添加元素
console.log(aArray4);
aArray4.splice(2, 2); // 添加元素: 参数1-开始下标; 参数2-删除个数;
console.log(aArray4);
aArray4.splice(1, 0, "苹果", 66) // 添加元素：参数1-开始下标; 参数2-删除个数; 参数3-添加内容;
console.log(aArray4)
</script>
</head>
<body>
</body>
</html>
九: 定时器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
// 定时器 : 调用一次
// 参数: 1 - 执行函数; 2 - 时间间隔; 3 - 传参
var tid = setTimeout(fnShow, 2000, "张三", 20)
function fnShow(name, age){
alert("ok" + name + age)
alert(tid)
clearTimeout(tid) // 销毁定时器
}
// 定时器 : 间隔时间
var tidStop = setInterval(fnShowInfo, 3500, "李四", 22);
function fnShowInfo(name, age){
alert("ok" + name + age)
}
function fnStop(){
alert(tidStop)
clearInterval(tidStop); // 销毁定时器
}
</script>
</head>
<body>
<input type="button" value="停止" onclick="fnStop()">
</body>
</html>
十: 对象
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> // 方法一 var oPerson = new Object(); oPerson.name = "张三"; oPerson.age = 25; oPerson.show = function(){ document.write(oPerson.name, " ", oPerson.age) }; console.log(oPerson, typeof(oPerson)); oPerson.show(); // 方法二 var oStudent = { name: "张三", age: 20, show:function(){ document.write("333", "<br>"); } } console.log(oStudent, typeof(oStudent)); oStudent.show(); </script> </body> </html
十一: json
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--
json数据格式:
1 对象格式: 最外层大括号, 双引号括住key和value
2 数组格式: 最外层中括号, 逗号间隔
-->
<script>
// 对象格式
var sJson1 = '{"name":"李四", "age":24}';
var oPerson = JSON.parse(sJson1); // 转换 : json - js对象
console.log(oPerson);
console.log(oPerson.name + " " + oPerson.age);
// 数组格式
var sJson2 = '[{"name":"李四", "age":24}, {"name":"王五", "age":26}]';
var aArray = JSON.parse(sJson2);
console.log(aArray);
var oPerson = aArray[1];
console.log(oPerson.name);
// python解析 : 格式 - 字典或列表
</script>
</head>
<body>
</body>
</html>
十二: 类
<script> <!-- 对象1 --> var phone1 = { number: "123", year: 2020, is_waterproof:false, phone_age:function(){ return 2023 - this.year; } } <!-- 对象2 --> var phone2 = { number: "456", year: 2019, is_waterproof:false, phone_age:function(){ return 2023 - this.year; } } <!-- 对象3 --> var phone3 = { number: "789", year: 2021, is_waterproof:false, phone_age:function(){ return 2023 - this.year; } } document.write(phone1.phone_age()); document.write(phone2.phone_age()); document.write(phone3.phone_age(), "<br>"); </script>
<script> <!-- 不用创造多个对象，只需要创造一个模板 --> class Phone{ constructor(number, year, is_waterproof){ this.number = number; this.year = year; this.is_waterproof = is_waterproof; } phone_age(){ return 2023 - this.year; } } var phone1 = new Phone("123", 2020, false); var phone2 = new Phone("456", 2019, false); var phone3 = new Phone("789", 2021, false); document.write(phone1.phone_age()); document.write(phone2.phone_age()); document.write(phone3.phone_age()); </script>
十三: 补充标签
<!-- windows获取标签 --> <body style="height: 1500px;"> <h1 id="header"> JavaScript 教学</h1> <script> window.document.write("hello world", "<br>"); var a = 123; window.document.write(window.a); </script> </body>
<!-- 标签操作 --> <body style="height: 1500px;"> <h1 id="header"> JavaScript 教学</h1> <a id="link" href = "http://www.google.com"> google </a> <script> var h1 = document.getElementById("header"); h1.innerText = "Java" // 修改内容 h1.style.backgroundColor = "green"; // 修改背景色 h1.style.color = "blue"; // 修改内容色 console.log(h1) var link = document.getElementById("link"); link.href = "https://amazon.com"; link.innerText = "amazon"; </script> </body>
十四: EventListener
<!-- 函数传参: 默认自己--> <body style="height: 1500px;"> <button id = "btn" onclick="fnSet(this)"> 按下 </button> <script> function fnSet(element){ console.log(element) element.innerText = "OK" // 修改内容 element.style.color = "green" // 修改颜色 - 文字 } </script> </body>
<!-- 函数传参: 不传参--> <body style="height: 1500px;"> <button id = "btn" onclick="fnSet()"> 按下 </button> <script> function fnSet(){ var btn = document.getElementById("btn"); console.log(btn) btn.innerText = "OK" // 修改内容 btn.style.color = "green" // 修改颜色 - 文字 } </script> </body>
<!-- 函数传参: 不传参--> <body style="height: 1500px;"> <button id = "btn"> 按下 </button> <img id="img" src="222.JPG" width="300"> <script> var btn = document.getElementById("btn"); btn.addEventListener("click", function() { console.log(btn) this.innerText = "OK" // 修改内容 this.style.color = "green" // 修改颜色 - 文字 }); var btn = document.getElementById("img"); btn.addEventListener("mouseover", function() { this.src = "123.JPG"; // 触发修改 }); btn.addEventListener("mouseout", function() { this.src = "222.JPG"; // 离开还原 }); </script> </body>
十五: 简单综合: 日记本
<body style="height: 1500px;"> <h1> 小白的部落 </h1> <p> 标题</p> <input type="text" id="title"> <p> 内容</p> <textarea id="content" rows="8" ></textarea> <button id="btn">发布</button> <div id="list"> <!-- <div class="article"> <h2> 今天天气好</h2> <p> 今天天气好， 出去捡到钱</p> </div> --> </div> <script> // 标题和内容; 发布按钮 var title = document.getElementById("title"); var content = document.getElementById("content"); var list = document.getElementById("list"); var btn = document.getElementById("btn"); btn.addEventListener("click", function(){ console.log(list.innerText) list.innerHTML = list.innerHTML + ` ----------------------------------- <div class="article"> <h2> ${title.value}</h2> <p> ${content.value}</p> </div> `; title.value = ""; // 情况原有内容 content.value = ""; // 情况原有内容 }) </script> </body>
