【CyberSecurityLearning 50】JS 基础+函数+对象+事件-CSDN博客

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混编
可以出现在HTML的任何位置

简单的语句

输出语句

alert(); //弹窗

console.log(); //在控制台输出

如何在HTML中引入JS代码

内部JS：<script></script>

可以从外部引入js脚本
<script 
type="text/javascript" src="vendors.47ee6caee3579c652820.js" 
integrity="sha512-D2n5DNLLXR1Pg0RECW6VRkt2hStlq9lyb52AiW1vAXQbklC0SFw0wBvQ9K2lldtGDWyit3AakyxPWHdXieKQIQ==" 
crossorigin="anonymous"></script>

外部JS：type="text/javascript"

变量

声明变量

var 强烈建议声明
注意只能用var声明一次（同一个变量可以反复赋值）

var name = "Waffle";
var a = 1;

变量类型

Number
可以做四则运算

字符串和布尔值

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]

对象

JavaScript的对象是一组由键-值组成的无序的集合
定义数组的时候用中括号，定义对象的时候要用大括号

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是计算一个数的绝对值

调用函数 abs(-1);

对象

通过对象来操纵浏览器

浏览器内置对象

浏览器内置对象：

window 全局代表浏览器

一般会省略window直接写，window相当于域名下的根，默认情况下可以省略

访问对象中的属性要用点.

navigator

浏览器的相关信息

火狐是网警公司的（Netscape）

screen

屏幕的信息

location

获取当前页面的url信息

document 非常重要

代表当前界面

可以完成对cookie信息的读写

alert(document.cookie);

document.cookie="name=hello";

测试：

刷新之后

用户名直接被修改

文档对象模型（DOM）

操纵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（鼠标单击），dbclick（鼠标双击double）等

键盘事件

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" onmouseover="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>

<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" onkeyup="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" onmouseover="fm()" name="userSubmit" value="注册">
 
</form>
	<hr />
</body>
</html>