记录在听黑马课的时候的笔记以及课堂上练习的代码，文章图源于我在听课的时候所截的屏，所以有些不清晰，请见谅。下面是课程链接，可点击自行跳转。
【黑马程序员JavaWeb开发教程，实现javaweb企业开发全流程（涵盖Spring+MyBatis+SpringMVC+SpringBoot等）】https://www.bilibili.com/video/BV1m84y1w7Tb/?share_source=copy_web&vd_source=d521b664e1113402904fa9336bd1d0ac
目录
介绍
引入方式
基础语法
书写语法
变量
数据类型&运算符
函数
对象
Array数组
字符串
JSON
BOM
DOM
事件监听
Vue
常用指令
案例
生命周期
介绍
引入方式
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> <!-- 内部脚本 --> <!-- <script> alert("hello JS!"); </script> --> <!-- 外部脚本 --> <script src="js/demo.js"></script> </head> <body> </body> </html> <!--demo.js--> alert("hello JS!");基础语法
书写语法
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> <script> /* alert("Hello,JS!"); */ //浏览器弹出警告框 window.alert("Hello,JS!"); //写入HTML，在浏览器中展示 document.write("Hello,JS!"); //写入浏览器控制台 console.log("Hello,JS!"); </script> </body> </html>变量
变量的定义方式：
<!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 a = 10; //使用var关键字声明变量a，并赋值为10 a = "张三"; //变量a重新赋值为字符串"张三" alert(a); //弹出警告框，显示变量a的值 */ //作用域比较大，为全局变量，可以重复定义的 /* { var a = 20; var a = "李四"; } alert(a); //弹出警告框，显示变量a的值 */ //let 局部变量不能重复定义 /* { let b = 30; //let b = "王五"; //报错，不能重复定义变量b alert(b); //弹出警告框，显示变量b的值 } */ //const 声明常量，不能修改 const c = 40; c = 50; //报错，不能修改常量c的值 alert(c); //弹出警告框，显示常量c的值 </script> </body> </html>数据类型&运算符
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> <script> //原始数据类型 alert(typeof 3);//number 数字类型 alert(typeof 3.14);//number 数字类型 alert(typeof "A");//string 字符串类型 alert(typeof 'Hello');//string 字符串类型 alert(typeof true);//boolean 布尔类型 alert(typeof false);//boolean 布尔类型 alert(typeof null);//object 对象类型（特殊的原始数据类型，表示空值） var a ; alert(typeof a);//undefined 未定义类型 </script> </body> </html>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> <script> // var age = 20; // var _age = "20"; // var $age = 20; // alert(age == _age);//true // alert(age === _age);//false // alert(age === $age);//true // 类型转换 - 其他类型转为数字 alert(parseInt("12")); //12 alert(parseInt("12A45")); //12 alert(parseInt("A45")); //NaN // 类型转换 - 其他类型转为boolean // if(0){ // alert("0 转换为false"); // } // if(NaN){ // alert("NaN 转换为false"); // } // if(-1){ // alert("除0和NaN其他数字都转为 true"); // } // if(""){ // alert("空字符串为 false，其他都是true"); // } // if(null){ // alert("null 转化为false"); // } // if(undefined){ // alert("undefined 转化为false"); // } </script> </body> </html>函数
但只取前面所需要的参数个数。
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> <script> //定义函数 -1 /* function add(a,b){ return a + b; } */ //定义函数 -2 var add = function(a,b){ return a + b; } //调用函数 var result = add(3,5); alert(result); //8 </script> </body> </html>对象
Array数组
JS数组创建以及相关操作：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>JS对象定义Array数组</title> </head> <body> <script> //定义数组 - 方式1 /* var arr1 = new Array(); arr1[0] = "张三"; arr1[1] = 20; arr1[2] = true; alert(arr1[0]); //张三 alert(arr1.length); //3 */ //定义数组 - 方式2 /* var arr2 = ["李四",25,false]; alert(arr2[1]); //25 alert(arr2.length); //3 //数组长度可变，类型可变 arr2[10] = 10; alert(arr2.length); //11 alert(arr2[5]); //undefined alert(arr2[10]); //10 */ //for获取数组元素 var arr3 = ["苹果","香蕉","橘子"]; // arr3[9] = "葡萄"; // for (let i = 0; i < arr3.length; i++) { // const element = arr3[i]; // console.log(element); // } // //forEach遍历有数值的元素 // arr3.forEach(function(element) { // console.log(element); // }); // //箭头函数遍历有数值的元素 (...)=>{...} // arr3.forEach(element => // console.log(element) // ); //push 添加元素至数组末尾 arr3.push("草莓"); console.log(arr3); console.log("========"); //splice 添加/删除元素 //arr3.splice(1,0,"葡萄");//在索引1位置添加元素葡萄，不删除元素 arr3.splice(2,1);//从索引2位置删除1个元素 console.log(arr3); console.log("========"); //pop 删除数组末尾元素 arr3.pop(); console.log(arr3); console.log("========"); //shift 删除数组开头元素 arr3.shift(); console.log(arr3); console.log("========"); //unshift 添加元素至数组开头 arr3.unshift("西瓜"); console.log(arr3); </script> </body> </html>字符串
JS字符串：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>JS对象String字符串</title> </head> <body> <script> //创建字符串对象 var str = new String("Hello, World!"); console.log(str); //输出字符串对象 var str2 = "Hello, JavaScript!"; console.log(str2); //输出字符串字面量 //字符串长度 length 属性 console.log(str.length); //13 console.log(str2.length); //18 //charAt() 方法 获取指定位置的字符 console.log(str.charAt(7)); //W console.log(str2.charAt(6)); //J //indexOf() 方法 查找子字符串首次出现的位置 console.log(str.indexOf("o")); //4 console.log(str2.indexOf("o")); //4 //trim() 方法 去除字符串两端的空格 var str3 = " Hello, Trim! "; console.log(str3.trim()); //Hello, Trim! //substring() 方法 提取字符串的子字符串 参数：起始位置，结束位置（不包含） console.log(str.substring(0,5)); //Hello console.log(str2.substring(7,17)); //JavaScript </script> </body> </html>JSON
JSON对象的创建以及转换：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>JS对象JSON</title> </head> <body> <script> // JSON对象 /* var jsonObj = { "name": "张三", "age": 20, "isStudent": false, "greet": function() { console.log("Hello, " + this.name); } }; console.log(jsonObj); // 访问属性 console.log(jsonObj.name); console.log(jsonObj["age"]); // 修改属性 jsonObj.age = 21; console.log(jsonObj); // 添加属性 jsonObj.gender = "男"; console.log(jsonObj); // 删除属性 delete jsonObj.isStudent; console.log(jsonObj); // 调用方法 jsonObj.greet(); */ var jsonstr = '{"name":"Jens","age":27,"isStudent":false}'; // JSON字符串转换为JS对象 var jsonObj = JSON.parse(jsonstr); alert(jsonObj.name); // JS对象转换为JSON字符串 var jsonstr2 = JSON.stringify(jsonObj); alert(jsonstr2); </script> </body> </html>BOM
概念：Browser Object Model（浏览器对象模型），允许 JavaScript 与浏览器对话，JavaScript 将浏览器的各个组成部分封装为对象。
组成：
Window：浏览器窗口对象
Navigator：浏览器对象
Screen：屏幕对象
History：历史记录对象
Location：地址栏对象
Window和LocationBOM对象：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>JS对象BOM</title> </head> <body> <script> //获取 // window.alert("Hello BOM"); // alert("Hello BOM Window"); //方法 //confirm - 弹出一个确认对话框 -- 确认 true 取消 false // var res = confirm("你确定要删除吗？"); // alert(res); //定时器 -- 在指定的毫秒数后调用函数或计算表达式 setInterval/setTimeout // var i = 0 ; // setInterval(function(){ // i++; // console.log("定时器执行了"+i+"次"); // },2000); //setTimeout -- 只执行一次 // setTimeout(function(){ // alert("定时器只执行我一次"); // },5000); //location -- 获取或设置当前页面的URL alert(location.href); location.href = "https://www.baidu.com"; </script> </body> </html>DOM
DOM对象实现：
<!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> <img id="h1" src="img/off.gif"> <br><br> <div class="cls">Love yourself</div> <br> <div class="cls">and love what you love</div> <br> <input type="checkbox" name="hobby"> 电影 <input type="checkbox" name="hobby"> 旅游 <input type="checkbox" name="hobby"> 游戏 </body> <script> //1. 获取Element元素 //1.1 获取元素-根据ID获取 var img1 = document.getElementById("h1"); alert(img1.src); //1.2 获取元素-根据标签获取 var imgs = document.getElementsByTagName("img"); alert(imgs[0].src); //1.3 获取元素-根据name属性获取 var hobbies = document.getElementsByName("hobby"); alert(hobbies[0].checked); //1.4 获取元素-根据class属性获取 var cls = document.getElementsByClassName("cls"); alert(cls[0].innerHTML); //2. 查询参考手册，属性、方法 //修改Love yourself为Hello World cls[0].innerHTML = "Hello World"; alert("修改后的内容是："+cls[0].innerHTML); </script> </html>DOM操作：
<!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> <img id="h1" src="img/off.gif"> <br><br> <div class="cls">传智教育</div> <br> <div class="cls">黑马程序员</div> <br> <input type="checkbox" name="hobby"> 电影 <input type="checkbox" name="hobby"> 旅游 <input type="checkbox" name="hobby"> 游戏 </body> <script> //1. 点亮灯泡 : src 属性值 var img = document.getElementById('h1'); img.src = "img/on.gif"; //2. 将所有div标签的内容后面加上: very good (红色字体) -- <font color='red'></font> var divs = document.getElementsByTagName('div'); for (let i = 0; i < divs.length; i++) { const div = divs[i]; div.innerHTML += "<font color='red'>very good</font>"; } //3. 使所有的复选框呈现选中状态 var ins = document.getElementsByName('hobby'); for (let i = 0; i < ins.length; i++) { const check = ins[i]; check.checked = true;//选中 } </script> </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>JS-事件-事件绑定</title> </head> <body> <input type="button" id="btn1" value="事件绑定1" onclick="on()"> <input type="button" id="btn2" value="事件绑定2"> </body> <script> function on(){ alert("按钮1被点击了..."); } document.getElementById('btn2').onclick = function(){ alert("按钮2被点击了..."); } </script> </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>JS-事件-常见事件</title> </head> <body onload="load()"> <form action="" style="text-align: center;" onsubmit="subfn()"> <input type="text" name="username" onblur="bfn()" onfocus="ffn()" onkeydown="kfn()"> <input id="b1" type="submit" value="提交"> <input id="b1" type="button" value="单击事件" onclick="fn1()"> </form> <br><br><br> <table width="800px" border="1" cellspacing="0" align="center" onmouseover="over()" onmouseout="out()"> <tr> <th>学号</th> <th>姓名</th> <th>分数</th> <th>评语</th> </tr> <tr align="center"> <td>001</td> <td>张三</td> <td>90</td> <td>很优秀</td> </tr> <tr align="center"> <td>002</td> <td>李四</td> <td>92</td> <td>优秀</td> </tr> </table> </body> <script> //onload : 页面/元素加载完成后触发 function load(){ console.log("页面加载完成...") } //onclick: 鼠标点击事件 function fn1(){ console.log("我被点击了..."); } //onblur: 失去焦点事件 function bfn(){ console.log("失去焦点..."); } //onfocus: 元素获得焦点 function ffn(){ console.log("获得焦点..."); } //onkeydown: 某个键盘的键被按下 function kfn(){ console.log("键盘被按下了..."); } //onmouseover: 鼠标移动到元素之上 function over(){ console.log("鼠标移入了...") } //onmouseout: 鼠标移除某元素 function out(){ console.log("鼠标移出了...") } //onsubmit: 提交表单事件 function subfn(){ console.log("表单被提交了..."); } </script> </html>Vue
Vue快速入门：
<!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>Vue-快速入门</title> <script src="js/vue.js"></script> </head> <body> <div id="app"> <input type="text" v-model="message"> {{message}} </div> </body> <script> //定义Vue对象 new Vue({ el: "#app", //vue接管区域 data:{ message: "Hello Vue" } }) </script> </html>常用指令
Vue指令v-bind和v-model：
<!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>Vue-指令-v-bind</title> <script src="js/vue.js"></script> </head> <body> <div id="app"> <a v-bind:href="url">链接1</a> <a :href="url">链接2</a> <input type="text" v-model="url"> </div> </body> <script> //定义Vue对象 new Vue({ el: "#app", //vue接管区域 data:{ url: "https://www.baidu.com" } }) </script> </html>Vue指令v-on：
<!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>Vue-指令-v-on</title> <script src="js/vue.js"></script> </head> <body> <div id="app"> <input type="button" value="点我一下" v-on:click="handle()"> <input type="button" value="点我一下" @click="handle()"> </div> </body> <script> //定义Vue对象 new Vue({ el: "#app", //vue接管区域 data:{ }, methods: { handle: function(){ alert("你点我了一下..."); } } }) </script> </html>Vue指令v-if与v-show：
<!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>Vue-指令-v-if与v-show</title> <script src="js/vue.js"></script> </head> <body> <div id="app"> 年龄<input type="text" v-model="age">经判定,为: <span v-if="age <= 35">年轻人(35及以下)</span> <span v-else-if="age > 35 && age < 60">中年人(35-60)</span> <span v-else>老年人(60及以上)</span> <br><br> 年龄<input type="text" v-model="age">经判定,为: <span v-show="age <= 35">年轻人(35及以下)</span> <span v-show="age > 35 && age < 60">中年人(35-60)</span> <span v-show="age >= 60">老年人(60及以上)</span> </div> </body> <script> //定义Vue对象 new Vue({ el: "#app", //vue接管区域 data:{ age: 20 }, methods: { } }) </script> </html>Vue指令v-for：
<!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>Vue-指令-v-for</title> <script src="js/vue.js"></script> </head> <body> <div id="app"> <div v-for="addr in addrs">{{addr}}</div> <hr> <div v-for="(addr,index) in addrs">{{index + 1}} : {{addr}}</div> </div> </body> <script> //定义Vue对象 new Vue({ el: "#app", //vue接管区域 data:{ addrs:["北京", "上海", "西安", "成都", "深圳"] }, methods: { } }) </script> </html>案例
通过Vue完成表格数据的渲染展示：
<!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>Vue-指令-案例</title> <script src="js/vue.js"></script> </head> <body> <div id="app"> <table border="1" cellspacing="0" width="60%"> <tr> <th>编号</th> <th>姓名</th> <th>年龄</th> <th>性别</th> <th>成绩</th> <th>等级</th> </tr> <tr align="center" v-for="(user,index) in users"> <td>{{index + 1}}</td> <td>{{user.name}}</td> <td>{{user.age}}</td> <td> <span v-if="user.gender == 1">男</span> <span v-if="user.gender == 2">女</span> </td> <td>{{user.score}}</td> <td> <span v-if="user.score >= 85">优秀</span> <span v-else-if="user.score >= 60">及格</span> <span style="color: red;" v-else>不及格</span> </td> </tr> </table> </div> </body> <script> new Vue({ el: "#app", data: { users: [{ name: "Tom", age: 20, gender: 1, score: 78 },{ name: "Rose", age: 18, gender: 2, score: 86 },{ name: "Jerry", age: 26, gender: 1, score: 90 },{ name: "Tony", age: 30, gender: 1, score: 52 }] }, methods: { }, }) </script> </html>生命周期
vue生命周期：
<!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>Vue-指令-v-for</title> <script src="js/vue.js"></script> </head> <body> <div id="app"> </div> </body> <script> //定义Vue对象 new Vue({ el: "#app", //vue接管区域 data:{ }, methods: { }, mounted () { alert("vue挂载完成,发送请求到服务端") } }) </script> </html>这篇文章就先更到这里，接下来的内容可查看我的下一篇博客，感谢观看，希望对你有帮助。
![[SWPUCTF 2018]SimplePHP](http://pic.xiahunao.cn/[SWPUCTF 2018]SimplePHP)
