JavaScript
2021/12/7 22:16:42
本文主要是介绍JavaScript，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！
/*
时间：2021/12/07
功能：CSS
目录:
一: 引入
二: 数据类型
三: 函数
四: 作用域
五: 条件语句
六: 获取标签元素
七: 获取标签属性和设置
八: 数组
九: 定时器
*/
一: 引入
<!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>
这篇关于JavaScript的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
- 2024-09-28AI给的和自己写的Python代码，都无法改变输入框的内容，替换也不行
- 2024-09-27Sentinel配置限流资料：新手入门教程
- 2024-09-27Sentinel配置限流资料详解
- 2024-09-27Sentinel限流资料：新手入门教程
- 2024-09-26Sentinel限流资料入门详解
- 2024-09-26Springboot框架资料：初学者入门教程
- 2024-09-26Springboot框架资料详解：新手入门教程
- 2024-09-26Springboot企业级开发资料：新手入门指南
- 2024-09-26SpringBoot企业级开发资料新手指南
- 2024-09-26Springboot微服务资料入门教程
