/* 时间：2021/12/07 功能：CSS 目录: 一: 引入 二: 数据类型 三: 函数 四: 作用域 五: 条件语句 六: 获取标签元素 七: 获取标签属性和设置 八: 数组 九: 定时器 十: 对象 十一: 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>
<!-- 内嵌式 -->
<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
二: 数据类型
<!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>
// 注释: ctrl + /
var iNum1 = 1; // 定义类型 - 数字
var fNum2 = 1.1; // 定义类型 - 数字
var sName = "张三"; // 定义类型 - 字符串
var bIsOK = true; // 定义类型 - 布尔
var unData; // 定义类型 - 未初始化
var oData = null; // 定义类型 - 空对象
console.log(typeof(iNum1))
console.log(typeof(fNum2))
console.log(typeof(sName))
console.log(typeof(bIsOK))
console.log(typeof(unData))
console.log(typeof(oData))
var oPerson = {
name : "王五",
age : "20"
}
alert(oPerson.name)
console.log(oPerson.name, oPerson.age)
</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 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>
四: 作用域
<!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>
<script>
// 方法一: object
var oPerson = new Object();
oPerson.name = "李四";
oPerson.age = 20;
oPerson.show = function(){
alert("method one");
}
// 获取信息 : 属性方法
alert(oPerson.name);
oPerson.show();
// 方法一:
var oStudent = {
name: "张三",
age: 20,
show:function(){
alert("method two");
}
}
alert(oStudent.name + oPerson.age);
oStudent.show();
</script>
</head>
<body>
</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>