目录
2、拓展:注册的时候利用JS AJAX技术判断用户名是否唯一
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混编
可以出现在HTML的任何位置
简单的语句
输出语句
alert(); //弹窗
console.log(); //在控制台输出
如何在HTML中引入JS代码
内部JS:<script></script>
<script src=“./js/test1.js”></script>
<script src=“http://localhost/JS/js/test1.js”></script>
<script src=“http://172.168.23.63/JS/js/test1.js”></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 非常重要
代表当前界面
document.cookie(重要)
可以完成对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>
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" 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数据库中已存在的用户名,会报错
输入数据库不存在的用户名,正常
两次响应事件都能正常工作
注册成功
测试成功
具体请看:https://blog.csdn.net/weixin_43252204/article/details/105717411