JavaScript学习
一、 Web端哪些时候需要用到？
行为交互：例如：返回顶部
数据交互：例如：筛选关键词
逻辑交互：例如：单选选男选女
二、JavaScript组成
ECMAScript：JavaScript语法和基本对象
DOM：文档对象模型，js代码去操作HTML标签
document.getElementById("content")
BOM：浏览器对象模型，浏览器内置功能
alert("点击了");
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" placeholder="请输入内容" id="content" />
<input type="button" value="点击" onclick="clickMe();"/>
<h1>显示内容</h1>
<div id="txt"></div>
<script>
function clickMe(){
// alert("点击了");
// 1、获取用户输入的内容
var tag = document.getElementById("content");
var userInputData = tag.value;
// 2、找到div，并将内容赋值
var tagTxt = document.getElementById("txt");
tagTxt.innerText = userInputData;
}
</script>
</body>
</html>
三、JavaScript建议放到body部分的最下部位：
1）单个文件使用一个script
2）多个文件使用一个script，要创建一个js文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" placeholder="请输入内容" id="content" />
<input type="button" value="点击" onclick="clickMe();"/>
<h1>显示内容</h1>
<div id="txt"></div>
<script src="v1.js"></script>
</body>
</html>
v1.js文件
function clickMe(){ // alert("点击了"); // 1、获取用户输入的内容 var tag = document.getElementById("content"); var userInputData = tag.value; // 2、找到div，并将内容赋值 var tagTxt = document.getElementById("txt"); tagTxt.innerText = userInputData; }
四、注释
1）HTML注释
单行&多行注释： <!--HTML注释标记-->
2）CSS注释，必须在style的代码块中。
<style> /* 这是CSS注释*/ </style>
3）JavaScript注释，必须在script的代码块中。
<script>
//JavaScript单行注释
/*JavaScript多行注释*/
</script>
五、JavaScript变量
变量名标准的规范：
var userName = “liusijiang”；
1）局部变量：函数中变量。
2）全局变量：代码块顶格。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
//全局变量
NAME = "liusijaing";
function userName() {
//局部变量
var age = 19;
}
alert(NAME);
</script>
</body>
</html>
六、JavaScript的数据类型
<body>
<script>
var age = 19; //数字类型
var name = "liusijiang"; // 字符串
var data = true; //bool类型:true&false
var dataList = [11,22,33]; //数组 python列表
var info = {name:"liusijiang",age:19} //对象 python字典
var info = {"name":"liusijiang","age":19} //对象 python字典
</script>
</body>
七、JavaScript语句
1）、判断语句
var age = 19; if(age < 19){ ... }else{ ... }
var age = 19; if(age < 18){ ... }else if(age == 19){ ... }else{ ... }
2）循环语句
var dataList = [11,22,33]; for (var i = 0;i < dataList.length;i++){ console.log(i); //print } // 上面for语句可以换成如下 for (var idx in dataList){ var data = dataList[idx]; console.log(idx,data); }
八、函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
function du(a1,a2) {
var a3 = a1 + a2;
return a3;
}
var res = du(11,22);
console.log(res); //33
</script>
</body>
</html>
运行结果使用F12》console（控制台）》查看
匿名函数（函数没有名字），作用：因在开发过程中名字过多导致重名
function (arg) {
console.log(12345678);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
function func(){
console.log(12345678);
}
setInterval(func, 1000); //定时调用函数
</script>
</body>
</html>
匿名函数的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
function func(){
console.log(12345678);
}
setInterval(func, 1000); //定时调用函数
// 匿名函数的使用如下：
setInterval(function (){
console.log(123);
}, 1000); //定时调用函数
</script>
</body>
</html>
自执行函数，自动执行（闭包）
function f(a1,a2) { console.log(a1,a2); } f("xxxxx","123"); // 上面代码转换成如下 (function f(a1,a2) { console.log(a1,a2); })("yyyy","4321")
运行结果如下：
九、JSON序列化
JSON.stringify(对象)，js中的对象转换成JSON字符串
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
var info = {name:"liusijiang",age:19}
var infoStr = JSON.stringify(info);
console.log(infoStr); //执行结果：{"name":"liusijiang","age":19}
</script>
</body>
</html>
运行结果如下：
JSON.parse(字符串)，JSON字符串转换成js对象
//JSON.parse(字符串)，JSON字符串转换成js对象 var dataString = '{"name":"liusijiang","age":19}'; var info = JSON.parse(dataString); console.log(info); // 执行结果：{name:"liusijiang",age:19}
运行结果如下：
十、ES5
现阶段ES6（很多前后端分离的项目），ES6编译转换成ES5
JavaScript基础语法
JavaScript应该放在什么位置？
1、行间JS
优势
劣势
2、内部JS
优势
劣势
3、外部JS
优势
劣势
浙公网安备 33010602011771号