开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> PHP知识库 -> JS基础与应用 -> 正文阅读

[PHP知识库]JS基础与应用

JS

JS的运行环境是浏览器

解释型的语言

每次刷新页面，JS代码都会执行

从上到下依次执行

当我们直接访问JS脚本的时候，返回纯文本内容

JS 对大小写敏感

JS可以与HTML混编，可以放在html代码的任何位置

简单的语句

输出语句

alert(); //弹窗

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

如何在HTML中引入JS代码

<script> js代码 </script> <!-- 内部JS -->
<script src=".js文件路径"></script> <!-- 外部JS src内也可引用http网址使用js脚本 -->
<button οnclick='alert('test')'>test</button> <!-- 写在标签属性中 -->

变量

使用var声明

变量类型

Number —— JS不区分整形和浮点型，同一用number表示

可做四则运算 1+1

NaN；Not a Number，无法计算时用NaN表示（NaN与任何值比较都是false；NaN不等于任何值，包括它本身）

Infinity；无限大，数值超过number能表示的最大值时用Infinity表示

字符串

var a = ‘aaa’;

布尔类型变量

var t =true;

null和undefined

null表示一个“空”的值，它和0以及空字符串‘’不同，0是一个数值，‘’表示长度为0的字符串，而null表示“空”

在JavaScript中，还有一个和null类似的undefined，他表示“未定义”

JavaScript的设计者希望用null表示一个空的值，而undefined表示值未定义。事实证明，这样并没有什么用，区分两者意义不大。大多数情况下，我们都应该用null。undefined仅仅在判断函数参数是否有传递情况下有用。

数组

数组可以包含任意数据类型

var arr = [1,2,3.14,“GGG”]

调用数组 à arr[角标]

对象

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;
    console.log(x);
}

for … in

var o = {
	name: 'Jack',
	age: 20,
	city: 'Beijing'
};
for (var key in o) {
	console.log(key); //'name', 'age', 'city'
	console.log(o[key]); //'Jack', 20, 'BeiJing'
}

while循环

var x = 0;
var n = 99;
while (n > 0) {
	x = x + n;
	n = n - 2;
}
console.log(x); //2500

do while

var n = 0;
do {
	n = n + 1;
}while (n < 100);
console.log(n); //100

函数

定义函数 function fun(){}

调用函数 fun();

对象

通过对象操纵浏览器

浏览器内置对象

windows 全局代表浏览器

navigator

浏览器的相关信息

从上到下分别为浏览器名称、浏览器版本、浏览器设置的User-Agent字典。除此之外还要navigator.language → 浏览器设置的语言、navigator.platform → 操作系统类型。

screen

屏幕的信息

location

获取当前页面的url信息

document

代表当前界面

document.charset → 当前页面编码设置

document.title → 标题；document.title=”ABC” → 修改标题

document.cookie →可以完成对cookie信息的读写

操纵DOM

DOM 节点

由于HTML文档被浏览器解析后就是一颗DOM树，要改变HTML的结构，就需要通过JavaScript来操纵DOM

操作：

更新：更新DOM节点的内容，相当于更新了该DOM节点表示的HTML内容
遍历：遍历DOM节点下新增的子节点，以便进行进一步操作
添加：在该DOM节点下新增一个子节点，相当于动态增加一个HTML节点
删除：将该节点从HTML中删除，相当于删除了该DOM节点的内容以及它包含的所有子节

在操作一个DOM节点前，我们需要通过各种方式先拿到这个DOM节点

拿到DOM节点最常用的方法

document.getElementById();
document.getElementsByTagName();
document.getElementsByClassName();

由于ID在HTML文档中是唯一的，所以document.getElementById()可以直接定位唯一一个DOM节点document.getElementsByTagName()和document.getElementsByClassName()返回一组的DOM节点，要精确的选择DOM，可以先定位父节点，再从父节点开始选择，以缩小范围。

返回ID为‘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 test = document.getElementById('test');
var cs = test.children;

//获取节点test下第一个、最后一个子节点：
var test = document.getElementById('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。

事件

Windows事件

Keyboard事件

Mouse事件

Form事件

Media事件

事件响应

判断两次输入的密码是否一致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>

创建一个响应事件

<html>
    <head>
        <meta charset="UTF-8">
        <title>注册</title>
    </head>
    <body>
        <h1>论坛 注册</h1>
    </body>
    <form
        action="addUser.php"
        method="POST"
    >
        用户名：<input id="user" type="text" name="userName"><br />
        密码：<input id="ps1" type="password" name="userPassword1"><br />
        确认密码：<input id="ps2" type="password" name="userPassword2"><br />
        <script>
            function fun(){
                var ps1 = document.getElementById('ps1');
                var ps2 = document.getElementById("ps2");
                if(ps1.value !== ps2.value){
                    alert("两次密码输入不一致，请重新输入");
                    ps1.value = "";
                    ps2.value = "";
                }
            }
        </script>
        <input type="submit" onmousedown="fun()" name="userSubmit" value="提交">
    </form>
</html>

测试：

注册的时候利用AJAX技术判断用户名是否唯一

AJAX

AJAX四步骤：

xmlhttp = new XMLHttpRequest(); //创建 XMLHttpRequest 对象 
xmlhttp.open("GET","./getUserName.php?q="+str,true); //初始化请求
xmlhttp.send(); //发送请求
xmlgttp.responseText; //获得字符串形式的响应数据

? 实现：

? 服务器端响应文件：getUserName.php

<?php
include "../inc/sql.php";
$sql = "select * from users";
if(!$results = mysqli_query($dbLink,$sql)){
	die(mysqli_error($dbLink));
}
//获取数据库中所有用户名称
while($result=mysqli_fetch_assoc($results)){
	$a[]=$result['name'];
}  
//判断注册用户名是否重复
$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;
mysqli_close($dbLink);
?>

创建响应事件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("用户名已存在，请重新输入！");
                }
            }
        }
        xmlhttp.open("GET","./getUserName.php?q="+str,true);
        xmlhttp.send();
    }
</script>

<html>
    <head>
        <meta charset="utf-8">
        <title>注册</title>
    </head>
    <body>
        <h1>论坛</h1>
        <form
            action="./addUser.php"
            method="POST"
        > 
            <script>
                function fun1(){
                    user=document.getElementById('user');
                    if(user.value == ""){
                        alert("未输入用户名，请输入！");
                    }
                }
            </script>
            <script>
                function showHint(str){
                    var xmlhttp;
                    xmlhttp=new XMLHttpRequest();
                    xmlhttp.onreadystatechange=function(){
                        if (xmlhttp.readyState==4 && xmlhttp.status==200){
                            if(xmlhttp.responseText){
                                alert("用户名已存在，请重新输入！");
                            }
                        }
                    }
                    xmlhttp.open("GET","./getUserName.php?q="+str,true);
                    xmlhttp.send();
                }
            </script>
            用户名：<input id="user" type="text" name="userName" onkeyup="fun1(),showHint(this.value)"><br />
            密码：<input id="ps1" type="password" name="userPassword1"><br />
            确认密码：<input id="ps2" type="password" name="userPassword2"><br />
            <script>
                function fun2(){
                    ps1=document.getElementById('ps1');
                    ps2=document.getElementById('ps2');
                    if(ps1.value == "" || ps2.value == ""){
                        alert("未输入密码，请输入！");
                        return;
                    }
                    if(ps1.value != ps2.value){
                        alert("两次密码输入不一致，请重新输入！");
                        ps1.value="";
                        ps2.value="";
                    }
                }
            </script>
            <input type="submit" onmouseover="fun2()" name="userSubmit" value="注册">  
        </form>
        <hr />
    </body>
</html>