本文已参与「新人创作礼」活动，一起开启掘金创作之路。

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代码

内部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实现

实现：

再创建一个响应事件

<input type="submit" onmouseover="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对服务器返回的信息进行处理，再用户的界面上得到响应。

<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>

测试

首先，我们进入数据库查看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" onclick="alert(/xss/)" value="bul">
<input type="button" onmouseover="fm()" value="bu2">
<script>
function fm(){
	alert('xss');
}
</script>

点击bu1触发响应事件

鼠标移动至bu2框范围触发响应事件

参考文献

千峰网络信息安全开源课程

菜鸟教程：AJAX教程

W3schoool：HTML事件属性

JS 基础 函数 事件

JS

JavaScript简介：

JS

简单的语句

变量

声明变量

变量类型

null和undefined

数组

对象

流程控制

if语句判断

for循环

for ... in

while循环

do while

函数

对象

windows 全局 代表浏览器

navigator

screen

location

document 非常重要

document.cookie

操纵DOM

DOM 节点

拿到DOM节点最常用的方法

事件

1、判断两次输入的密码是否一致JS实现

实现：

测试：

2、拓展：注册的时候利用JS AJAX技术判断用户名是否唯一

AJAX

实现：

测试

源码：

HTML内部和外部调用JS

js的函数调用

node结构测试

事件响应

JS 基础函数事件

windows 全局代表浏览器