引言：我的系列博客[网络安全学习篇]上线了，小编也是初次创作博客，经验不足；对千峰网络信息安全开源的视频公开课程的学习整理的笔记整理的也比较粗糙，其实看到目录有300多集的时候，讲道理，有点怂了，所以我就想到了通过写博客（课程笔记）的形式去学习它，虽然写博客会让我多花几倍的时间去学习它，但是当我完成一篇博客所获得的成就感和你们对于我的认同感，让我很满足，能够鼓励我一天天的坚持下去，也希望和我一起学习本期视频的"同道"们也能给一直坚持下去。我们大家一起加油。由于作者本身也是网络信息安全小白，大部分知识点都是初次接触，出现对其理解不深入，不完整，甚至也会出现错误有问题的地方，希望大家谅解、留言提出指正，同时也欢迎大家来找我一起交流学习！！！
往期博客：
第一阶段：
[网络安全学习篇1]：windowsxp、windows2003、windows7、windows2008系统部署（千峰网络安全视频笔记）
[网络安全学习篇24]：漏洞与木马（千峰网络安全视频笔记 p117-p118）
第二阶段：
第三阶段：
[网络安全学习篇34]：python文件对象对文件内容进行读取和写入
[网络安全学习篇36]：python 面向对象编程思想（本篇）
[网络安全学习篇37]：基于面向对象思想的Python爬虫实例
[网络安全学习篇42]：靶场环境搭建（ubuntu系统安装优化及vulhub安装）
[网络安全学习篇43]：PHP基础+变量 运算符 流程控制语句
[网络安全学习篇46]：PHP COOKIE 和 SESSION
[网络安全学习篇47]：PHP与Mysql交互 注册功能实现 PHP个人中心 留言实现
[网络安全学习篇48]：JS 基础 函数 事件（本篇）
好了，到这里，整个第三阶段的学习，就到此结束了。明天进入第四阶段的学习。
下期博文：
第四阶段：
目录
2、拓展：注册的时候利用JS AJAX技术判断用户名是否唯一
JS
JavaScript简介：
JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名的，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。
JavaScript在1995年由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。
JavaScript的标准是ECMAScript 。截至 2012 年，所有浏览器都完整的支持ECMAScript 5.1，旧版本的浏览器至少支持ECMAScript 3 标准。2015年6月17日，ECMA国际组织发布了ECMAScript 的第六版，该版本正式名称为 ECMAScript 2015，但通常被称为ECMAScript 6 或者ES6。
JS
JS的运行环境是浏览器
JS能做的事情，只有你想不到，没有它做不到的
（chrome浏览器 行业标准）
前端安全
解释型的语言
每次刷新页面，JS代码都会执行
从上到下依次执行
当我们直接访问JS脚本的时候，返回纯文本内容
JS 对大小写敏感
快速入门
JS与HTML混编
任何位置
简单的语句
输出语句
alert(); //弹窗
console.log(); //在控制台输出
如何在HML中引入JS代码
<script></script>
内部JS
外部JS
type="text/javascript"
变量
声明变量
var 强烈建议声明
var name = "GGG"; var a = 1
变量类型
Number
1+1
字符串
布尔类型变量
null和undefined
null表示一个“空”的值，它和0以及空字符串‘’不同，0是一个数值，‘’表示 长度为0的字符串，而null表示“空”
在其他语言中，也有类似Javascript的null的表示，例如Java也用null，Swift用nil，Python用None表示。
但是，在Javascript中，还有一个和null类似的undefined，他表示“未定义”
Javascript的设计者希望用null表示一个空的值，而underfined表示值未定义。事实证明，这样并没有什么用，区分两者意义不大。大多数情况下，我们都应该用null。undefined仅仅在判断函数参数是否有传递情况下有用。
数组
数组可以包含任意数据类型
var arr = [1,2,3.14,"GGG"]调用数组
arr[0]
对象
var person = { name : 'Bob', age: 20, tags:['js','web'], city:'beijing', hasCar:true }调用对象
person.name
流程控制
if语句判断
var age = 15; if (age >= 18){ alert('adult'); }else{ alert('teenager'); }
for循环
var x = 0; var i; for(i=1; i<=10000; i++){ x = x + i; } x;//50005000
for ... in
var o = { name: 'Jack', age: 20, city: 'Beijing' }; for (var key in o) { console.log(key); }//'name', 'age', 'city'
while循环
var x = 0; var n = 99; while (n > 0) { x = x + n; n = n - 2; } x;//2500
do while
var n = 0; do { n = n + 1; }while (n < 100); n;//100
函数
定义函数的好处 方便调用
定义函数 function abs(){}
调用函数 abs(-1);
对象
通过对象操纵浏览器
浏览器内置对象
windows 全局 代表浏览器
navigator
浏览器的相关信息
screen
屏幕的信息
location
获取当前页面的url信息
document 非常重要
代表当前界面
document.cookie
可以完成对cookie信息的读写
alert(document.cookie);
document.cookie="name=hello";
测试：
刷新之后
用户名直接被修改
操纵DOM
DOM 节点
由于HTML文档被浏览器解析后就是一颗DOM树，要改变HTML的结构，就需要通过Javascript来操纵DOM
操作：
更新：更新DOM节点的内容，相当于更新了该DOM节点表示的HTML内容
遍历：遍历DOM节点下新增的子节点，以便进行进一步操作
添加：在该DOM节点下新增一个子节点，相当于动态增加一个HTML节点
删除：将该节点从HTML中删除，相当于删除了该DOM节点的内容以及它包含的所有子节
在操作一个DOM节点前，我们需要通过各种方式先拿到这个DOM节点
拿到DOM节点最常用的方法
document.getElementById()
document.getElementsByTagName()
document.getElementsByClassName() //CSS选择器
由于ID在HTML文档中是唯一的，所以document.getElementById()可以直接定位唯一一个DOM节点document.getElementsByTagName()和document.getElementsByClassName()返回一组的DOM节点，要精确的选择DOM，可以先定位父节点，再从父节点开始选择，以缩小范围。
返回ID为‘test’的节点：
var teest = document.getElementById(‘test’)；
//先定位ID为'test-table'的节点，再返回其内部所有tr节点：
var trs = document.getElementById('test-table').document.getElementsByTagName('tr');
//先定位ID为‘test-div’的节点，再返回其内部所有class包含的red的节点：
var reds = document.getElementById('test-div').document.getElementsByClassName('red');
//获取节点'test'下的所有直属子节点：
var cs = test.children;
//获取节点test下第一个、第二个子节点：
var first = test.firstElementChild;
var last = test.lastElementChile;
第二种方法
使用querySelector()和querySelectAll()，需要了解select语法，然后使用条件来获取节点，更加方便
//通过querySelector获取ID为q1的节点：
var q1 = document.querySelector('#q1');
//通过querySelectorAll获取q1节点内的符合条件的所有节点：
var ps = q1.querySelectorAll('div.highlighted > p');
注：低版本IE<8不支持querySelector和querySelectorAll.IE8仅有限支持
严格的来讲，我们这里的DOM节点是指Element，但是DOM节点实际上是Node，在HTML中，Node包括Element、Comment、CDATA_SECTION等多种，以及根节点Document类型，但是绝大多数时候我们只关心Element，也就是实际控制页面结构的Node，其他类型的Node忽略即可。根节点Document已经自动绑定为全局变量document。
事件
用户触发事件
鼠标事件
onclick
键盘事件
form事件
事件响应
1、判断两次输入的密码是否一致JS实现
实现：
<script>
function fm(){
var ps1=document.getElementById('pas1');
var ps2=document.getElementById('pas2');
if(ps1.value != ps2.value){
alert("两次密码输入不一致，请重新输入");
ps1.value="";
ps2.value="";
}
}
</script>
再创建一个响应事件
<input type="submit" οnmοuseοver="fm()" name="userSubmit" value="注册">
<html>
<head>
<meta charset="utf-8">
<title>注册--刹那芳华</title>
</head>
<body>
<h1>刹那芳华BBS 论坛</h1>
<form
action="./addUser.php"
method="POST"
>
用户名：<input id="user" type="text" name="userName"><br />
密码：<input id="pas1" type="password" name="userPass1"><br />
确认密码：<input id="pas2" type="password" name="userPass2"><br />
<script>
function fm(){
var ps1=document.getElementById('pas1');
var ps2=document.getElementById('pas2');
if(ps1.value != ps2.value){
alert("两次密码输入不一致，请重新输入");
ps1.value="";
ps2.value="";
}
}
</script>
<input type="submit" οnmοuseοver="fm()" name="userSubmit" value="注册">
</form>
<hr />
</body>
</html>输入密码之后，当我们的鼠标光标移动至注册按钮的时候，
就会发生鼠标响应事件，JS就会执行，来判断两次输入的密码是否一致
若不一致，弹出框，提醒用户两次密码输入不正确，并清空
测试：
2、拓展：注册的时候利用JS AJAX技术判断用户名是否唯一
AJAX
xmlhttp=new XMLHttpRequest(); 创建 XMLHttpRequest 对象
向服务器发送请求：
xmlhttp.open("GET","./getUserName.php?q="+str,true);
xmlhttp.send();
responseText 获得字符串形式的响应数据
实现：
服务器端响应文件：
getUserName.php
<?php
include "../inc/dblink.inc.php";
?>
<?php
$sql = "SELECT * FROM `users`";
if($results = mysqli_query($link,$sql)){
while($result=mysqli_fetch_assoc($results)){
$a[]=$result['name'];
}
}else{
mysqli_error($link);
}
$q=$_GET["q"];
if (strlen($q) > 0)
{
$hint="";
for($i=0; $i<count($a); $i++)
{
if($q === $a[$i]){
$hint=$a[$i];
break;
}
}
}
echo $hint;
?>
<?php
mysqli_close($link);
?>创建响应事件onmouseout,当用户的鼠标离开输入框时，触发响应事件，调用下面的JS,向服务器的./getUserName.php发送get请求并传入用户输入的字符串
服务器（getUserName.php）从数据库中提取所有用户名，与传入的字符串比较，返回一个比较结果，下面的JS对服务器返回的信息进行处理，再用户的界面上得到响应。
<script>
function showHint(str)
{
var xmlhttp;
if (str.length==0)
{
document.getElementById("user").innerHTML="";
return;
}
xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
if(xmlhttp.responseText){
alert("用户名已存在，请重新输入！");
}
//document.getElementById("user").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","./getUserName.php?q="+str,true);
xmlhttp.send();
}
</script>
register.php
<html>
<head>
<meta charset="utf-8">
<title>注册--刹那芳华</title>
</head>
<body>
<h1>刹那芳华BBS 论坛</h1>
<form
action="./addUser.php"
method="POST"
>
<script>
function showHint(str)
{
var xmlhttp;
if (str.length==0)
{
document.getElementById("user").innerHTML="";
return;
}
xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
if(xmlhttp.responseText){
alert("用户名已存在，请重新输入！");
}
//document.getElementById("user").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","./getUserName.php?q="+str,true);
xmlhttp.send();
}
</script>
用户名：<input id="user" type="text" name="userName" οnkeyup="showHint(this.value)"><br />
密码：<input id="pas1" type="password" name="userPass1"><br />
确认密码：<input id="pas2" type="password" name="userPass2"><br />
<script>
function fm(){
ps1=document.getElementById('pas1');
ps2=document.getElementById('pas2');
if(ps1.value != ps2.value){
alert("两次密码输入不一致，请重新输入");
ps1.value="";
ps2.value="";
}
}
</script>
<input type="submit" οnmοuseοver="fm()" name="userSubmit" value="注册">
</form>
<hr />
</body>
</html>测试
首先，我们进入数据库查看users表，可以看到有两个用户存在【GGG，test】
输入GGG数据库中已存在的用户名，会报错
输入数据库不存在的用户名，正常
两次响应事件都能正常工作
注册成功
测试成功
源码：
HTML内部和外部调用JS
test.html
<html>
<head>
<title>JS代码测试</title>
<meta charset="utf-8">
<script type="text/javascript">
//正式进入JS
alert('GGG');
</script>
<script src="./js/test.js"></script>
</head>
<body>
<h1>JS代码测试页面</h1>
</body>
</html>
<script src="./js/test1.js"></script>
<script src="http://192.168.1.135/JS/js/test1.js"></script>test.js
alert("This is from test.js");test1.js
console.log("This is from test1.js"); 
js的函数调用
func.html
<meta charset="utf-8">
<h1>JS 函数调用</h1>
<script>
function abs(x){
if(x >= 0){
alert(x);
}else{
alert(-x);
}
}
abs(-2);
</script>
node结构测试
node.html
<!-- HTML结构 -->
<meta charset="utf-8">
<div id="test-div">
<div class="c-red">
<p id="test-p">JavaScript</p>
<p>Java</p>
</div>
<div class="c-red c-gren">
<p>Python</p>
<p>Ruby</p>
<p>Swift</p>
</div>
<div class="c-green">
<p>Scheme</p>
<p>Haskell</p>
</div>
</div> 
事件响应
onclick.html
<input type="button" οnclick="alert(/xss/)" value="bul">
<input type="button" οnmοuseοver="fm()" value="bu2">
<script>
function fm(){
alert('xss');
}
</script>点击bu1触发响应事件
鼠标移动至bu2框范围触发响应事件
参考文献
