JavaScript(超级无敌认真好用，万字收藏篇!!!!)

企业开发 2023-05-05 00:23:46 阅读次数: 0

文章目录

JavaScript

1. JS的基本介绍

1.1 什么是JavaScrpit

  • JavaScript是一个运行在浏览器的脚本语言
  • JavaScript也是基于对象的编程语言(和Java的相似)
  • JavaScript过于灵活，难度虽然不大，但难以掌握
  • JavaScript是松散类型语言
  • JavaScript主要用于在前端界面编写动态效果，和前端验证。

1.2 JS的基本使用

  1. 标签引用

写在Script标签里<scrpit> JavaScrpit代码</scrpit>

  • 例如:

    <script>
		for(var i =0;i<10;i++){
      
      
			document.write(i);
		}
</script>
  1. 文件引用

在单独JS文件里编写JavaScript，然后在HTML文件使用<script>标签进行引用

  • 例如:

    <script src="文件名.js"></script>

2. JS的基本语法

2.1 JS中的数据类型

JS是一种弱类型编程语言，只包含四种类型

①数字类型(number)：整型，浮点型

②字符串类型(string):使用"双引号"，'单引号’括起来的都是字符串(没有字符)

③布尔类型(boolean):false，true

④对象类型( object ):JS中任意对象类型都是object类型

2.2 JS中变量的声明和使用

JS中的变量类型由值决定

JS声明变量时并不指定数据类型，而是由值决定数据类型

int num=10错误

  • JS中变量声明方式:

    ① 变量名=变量值 ：age = 20这种方法不直观且容易产生歧义(在单独声明变量时不建议使用)

    • 注意:如果无声明变量关键字则默认使用var关键字

    ② var 变量名 = 变量值： var age = 20

    • var是JS中声明变量的关键字

    ③let 变量名=变量值: let age = 20(ES5中用于声明变量的关键字)

    • let也是JS中声明变量的关键字

  • 面试题

    var和let这两种声明方式的区别?

    var是用于声明全局变量，就算在一个"代码块"或"函数"中声明的变量，再代码块外依然可以使用；

    let是用于声明局部变量，在"代码块"中声明，作用域仅限在"代码块"中，代码块外不可用；

  • JS中声明常量使用const关键字

2.3 JS中的流程控制语句

  • JS中的流程控制语句与java及其相似，但有少许不同

不同点：

  1. 分支语句

    分支语句的条件可以分为以下三种

    ① boolean类型的 true或false；

    ② number类型的 非0或0 （非0即true） ；

    ③ sring类型的 空字符串和非空字符串(非空字符串即为true)

    ④ object类型的 非null或null （非null即ture） ，还可以是存在或不存在（存在即ture）；

  2. 循环语句

    • for循环

      • javaScrpit中有两种foreach循环

        其中for-in循环中数组前的变量循环的是数组的索引

        而for-of循环才等同于java中的foreach循环，数组前的变量循环的是数组中的每个元素.

               let nums=[4,5,4,5,54,6,4,5,64];
			//传统for循环
			document.write("<hr />")
			for(let i=0;i<nums.length;i++){
      
      
				document.write(nums[i]+"<br />");
			}
			/**
			 * foreach循环
			 * for in 循环
			 * for in循环中数组前的变量存储的是数组的索引
			 */
			document.write("<hr />")
			for(let num in nums){
      
      //num中存储的数组的索引
				document.write(nums[num]+"<br />");
			}
			document.write("<hr />")
			/**
			 * for of循环
			 * 等同于java中的foreach循环，将数组中的每个元素给数组前的变量
			 */
			for(let num of nums){
      
      //num中存储的是数组中的元素
			document.write(num+"<br />");	
			}

    foreach也可以循环对象

    for-in 循环遍历的是对象中的所有属性名

    for-of 循环不可用，会报错 obj is not iterable

    要想遍历循环中的所有属性值，则用for-in循环,遍历 对象[对象前的变量]

    			//创建一个JS对象
			let obj =new Object();
			//定义对象的属性
			obj.username="小花";
			obj.age=18;
			obj.sex="男";
			//遍历对象中的所有属性
            //将对象中的属性名变量
			for(let att in obj){
      
      
				document.write(obj[att]+"<br />")
			}

2.4 JS中数组的使用

  • JS中的数组是变长数组

1. 声明数组的方式(两种)

① 通过字面量方式

            let nums=[];//声明一个空数组，使用字面量方式
			let numbers=[5,12,16,54,6];
			
			for(let num of numbers){
    
    
				document.write(numbers[num])
			}

② 通过声明对象方式

           //通过声明对象的方式声明数组
			let arr=new Array();
            let arr=new Array(2);//声明长度为2的数组
			arr[0]=56;
			arr[1]=30;
			arr[2]=45;
			
			for (let num of arr) {
    
    
				document.write(num+"<br />")
			}

2 为数组中的元素赋值

① 通过索引赋值

该方法赋值时比较灵活

            let nums=[];//声明一个空数组，使用字面量方式
			nums[0] = 45;
            nums[1] = 45;
  • 赋值时必须知道索引

② 向数组尾部添加元素

无需考虑索引问题，但它只能为数组尾部添加新值

使用push函数向数组尾部添加元素

let nums=[];//声明一个空数组，使用字面量方式
nums.push(199);
nums.push(12,54,65,1,65,5,56)

3 JS中函数的使用

JS中函数等同于Java中的方法

  • Java中的方法

    ① 修饰符

    ② 返回类型

    ③ 方法名

    ④ 参数列表

    ⑤ 异常列表

    ⑥ 方法体

  • JavaScript的函数

    ①function关键字

    ② 函数名

    ③ 参数列表

    ④ 函数体

3.1 函数的创建和调用

  1. 函数的创建

  • 使用函数声明创建一个函数

    例:

    /**function 函数名([形参1,形参2,...,形参n]) {
    函数体
}
*/
function say(){
      
      		
	document.write("你好，欢迎使用函数声明创建一个函数");		
}

  • 使用函数表达式创建一个函数

    例:

    /**var 函数名 = function([形参1,形参2,...,形参n]) {
    函数体
}
*/
var say =function(){
      
      		
	document.write("你好，欢迎使用函数");		
}
  1. 函数的调用

  • JS中自定义的函数如果不调用，则不会执行

  • 在JS中使用"事件"调用对象函数

  • JS是以"事件"驱动的，在HTML标签中都存在相关事件

    ① 单机事件 ②鼠标悬浮事件 ③ 鼠标离开事件 ④ 值改变事件 ⑤ 键盘按下事件

  • 调用函数

    例:

    //函数声明
function say(){
      
      	
			document.write("你好，欢迎使用函数声明创建一个函数");	
		}
//调用函数
say();

    用事件调用

    <button onclick="say()"> 按钮 </button>
	<script>
		
		function say(){
      
      
			
			document.write("你好，欢迎使用");
			
		}
//		say();
	</script>

3.2 打印三角形案例理解JS中的函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style>
		#printDiv{
    
    
			margin: 0 auto;
			height: 600px;
			width: 800px;
			border: 1px solid red;
			color: red;
		}
	</style>
	<body>
		<input type="text" name="number" id="num" />
		<button onclick="printStart()">打印小星星</button>
		<div id="printDiv"></div>
		<script>
			function printStart(){
    
    
				//从页面获得该事件
				let inputObj =document.getElementById("num");
				let num=parseInt(inputObj.value);
				let divObj =document.getElementById("printDiv");
				//清空原有的数据
				divObj.innerHTML="";
				for (var i =0 ;i <num ;i++) {
    
    
					for (var j =0 ; j<num-i ;j++) {
    
    
//						document.write("&nbsp;&nbsp;&nbsp;");
						divObj.innerHTML=divObj.innerHTML+"&nbsp;&nbsp;&nbsp;";
					}
					for (var j =0 ; j<2*i+1 ;j++) {
    
    
//						document.write("&nbsp;*&nbsp;")
						divObj.innerHTML=divObj.innerHTML+"&nbsp;*&nbsp;";
					}
//                  document.write("<br />")
					divObj.innerHTML=divObj.innerHTML+"<br />";
				}	
			}	
		</script>
	</body>
</html>

innerHTML:向html标签写入内容，innerHTML写入的内容为HTML标签元素则会被浏览器解释执行

innerText:向html标签写入内容，innerHTML写入的内容为HTML标签元素不会被浏览器解释执行，原样输出

3.3 JS中对象的使用

JS是一种基于对象的语言，JS中存在对象

1.JS中包含3类对象

①JS内置对象(内建对象)

  • JS内部定义好的对象，可以直接使用:

    如：String，Date，Array，Math…

②宿主对象

  • BOM：浏览器对象(浏览器对象模型，不在使用)
  • DOM：网页对象(文档对象模型)

③自定义对象

  • 开发者自己定义或创建的对象

PS:JS中的方法和属性你说他有他就有

2.JS自定义对象方式

①使用JS内置Object对象直接创建对象

let obj =new Object()
  • 我们可以根据需要为obj对象设置属性和方法

②使用字面量方式创建对象

let obj={
    
    }//声明一个空对象

③使用字面量方式声明一个带有属性的对象

let obj={
    
    
    Phone:"123456",
    addr:'陕西省西安市'
}

④使用构造函数创建对象

function Student(stuId,stuName,stuAge){
    
    
    //对象中的属性
    this.stuId=stuId
    this.stuName=stuName
    this.stuAge=stuAge
}
let student =new Student(101,小明,18)
console.log(student)

  • 通过原型模式为对象增加原型属性

    • 原型属性为该类所有对象的共享属性，通过该构造函数创建的对象都存在该属性，而且是共享的

      Student.prototype.stuSex="男

    • 如果对象中存在一个原型属性同名的属性，则对象的属性会覆盖原型属性

4 JS的DOM编程

JS把页面当成当成document对象，里面包含HTML属性

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

通过这个对象模型，JavaScript 获得创建动态 HTML 的所有力量：

  • JavaScript 能改变页面中的所有 HTML 元素
  • JavaScript 能改变页面中的所有 HTML 属性
  • JavaScript 能改变页面中的所有 CSS 样式
  • JavaScript 能删除已有的 HTML 元素和属性
  • JavaScript 能添加新的 HTML 元素和属性
  • JavaScript 能对页面中所有已有的 HTML 事件作出反应
  • JavaScript 能在页面中创建新的 HTML 事件
  • 换言之：HTML DOM 是关于如何获取、更改、添加或删除 HTML 元素的标准。

4.1 DOM编程实现计算器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	    
	<style>
		 .c1{
      
      
		 	background: cornflowerblue;
	     	margin: 0px auto;
	     	width: 360px;
	     	height: 400px;
	     	border-radius: 15px;
	     	text-align: center;
	     	font-size: 20px;
	     	border: 1px solid aquamarine; 	
	     }
	     button{
      
      
	     	margin-top: 10px;
	     	margin-left: 4px;
	     	width: 80px;
	     	height: 50px;
	     	border: 1px solid aquamarine;
	     	border-radius: 15px;
	     }
	     button:hover{
      
      
	     	 background-color: palegoldenrod;
	     }
	     input{
      
      
	     	margin-top: 10px;
	     	width: 200px;
	     	height: 40px;
	     	border: 1px solid aquamarine;
	     	border-radius: 5px;
	     }
	</style>
	<body>
		<div class="c1">
			<h2 align="center">计算器</h2>
			
			<form name="calForm">
				<table align="center">
					<tr>
						<td>num1:</td>
						<td><input type="text" name="num1"/></td>
					</tr>
					<tr>
						<td>num2:</td>
						<td><input type="text" name="num2"/></td>
					</tr>
					
					<tr>
						<td colspan="2">
							<button type="button" onclick="cal('+')"> + </button>
							<button type="button" onclick="cal('-')"> - </button>
							<button type="button" onclick="cal('*')"> * </button>
							<button type="button" onclick="cal('/')"> / </button>
						</td>
						
					</tr>
					<tr>
						<td>结果:</td>
						<td>
							<input type="text" name="result" disabled="disabled" />
						</td>
					</tr>
				</table>
			</form>
			
		</div>
		<script >
			
			function cal(fuhao){
      
      
				let num1 = parseInt(document.calForm.num1.value);
			    let num2 = parseInt(document.calForm.num2.value);
			    let resultObj = document.calForm.result;
			    let result;
				switch(fuhao){
      
      
					case '+':
						result = num1 + num2;
						break;
					case '-':
						result = num1 - num2;
						break;
					case '*':
						result = num1 * num2;
						break;
					case '/':
						if(num2==0){
      
      
							alert("除数不能为零");
							return;
						}
						result = num1 / num2;
						break;
				}
				resultObj.value = result;
//				 console.log(resultObj.value = result)
			}
		</script>
	</body>
</html>

4.2 DOM编程实现随机点名

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style>
        .container{
      
      
            margin: 0 auto;
            height: 600px;
            width: 300px;
            /* border: 1px solid red; 	 */
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            
        }
        #num{
      
      
            margin: 0 auto;
            height: 150px;
            width: 300px;
            /* border: 1px solid red; 	 */
            background-color: yellow;
            text-align: center;
            font-size: 50px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color:red;
            margin-bottom: 10px;
            
        }
        #btnDiv{
      
      
            margin: 0 auto;
            height: 40px;
            width: 300px;
            /* border: 1px solid red; 	 */
            text-align: center;
        }
        #btnDiv button{
      
      
            width: 90px;
            height: 40px;
            border: 0px;
            border-radius: 5px;
            border: 0px solid red; 
            background-color: orange;
            color: #fff;
        }
        #btnDiv button:hover{
      
      
            cursor: pointer;
            background-color: darkorange;
            border: 1px solid red; 
            
        }
        #btnDiv button:active{
      
      
            border: 2px solid beige; 
        }
		</style>
	<body>
        <div class="container">
            <div id="num">
            </div>
            <div id="btnDiv">
                <button onclick="clickStart()">开始</button>
                <button onclick="stop()">暂停</button>
                <button onclick="reset()">复位</button>
            </div>
        </div>
		<script >
              var menu=["盖浇面","肥牛","一号二楼面","一号二楼米饭","冒菜","双椒鸡拌面"];
		      var index=parseInt(Math.random()*(menu.length));
              let obj=document.getElementById("num");
              console.log(menu[index],index)
              obj.innerHTML=menu[index];
              var timer=null;
              //开启单机事件按钮
              function clickStart(){
      
      
                if(timer!=null){
      
      
                    return;
                }
                start();
              }
              //开始计数
              function start(){
      
      
                  var index=parseInt(Math.random()*(menu.length));
                  obj.innerHTML=menu[index];
                  //延吃器,每100ms调用一次
                  timer=setTimeout(start,10);
              }
              //暂停计数器
              function stop(){
      
      
                //清空延迟器
                clearTimeout(timer);
                timer=null;
              }
              //复位
              function reset(){
      
      
                num=0;
                let obj=document.getElementById("num");
                stop();
              }
		</script>
	</body>
</html>

4.3 DOM编程实现动态时间

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style>
        .container{
      
      
            margin: 0 auto;
            height: 600px;
            width: 500px;
            /* border: 1px solid red; 	 */
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            
        }
        #timer{
      
      
            margin: 0 auto;
            height: 150px;
            width: 500px;
            background-color: yellow;
            text-align: center;
            font-size: 40px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color:red;
            margin-bottom: 10px;
            
        }
    
		</style>
	<body onload="showTime()">
        <div class="container">
            <div id="timer"></div>
        </div>
		<script>
            //展示时间
              function showTime(){
      
      
              var date =new Date();
              var obj=document.getElementById("timer");
              obj.innerHTML=formatTime(date);
              setTimeout(showTime,1000)
            }
              /**
               *格式化时间
               */
              function formatTime(time){
      
      
                 let year = time.getFullYear();
                 let month = fillZero(time.getMonth()+1);
                 let day =fillZero(time.getDate());
                 let hour=fillZero(time.getHours());
                 let min=fillZero(time.getMinutes());
                 let sec=fillZero(time.getSeconds());
                 let nowTime=year+"年"+month+"月"+day+"日  "+hour+":"+min+":"+sec;
                 return nowTime;
              }
              //为数字前填充0
              function fillZero(num){
      
      
                return num<10?"0"+num:num;
              }
		</script>
	</body>
</html>

4.4 DOM编程实现全选全不选功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
  <hr/>
  <form>
    <input type="checkbox" name="hobbys"  value="吃饭">吃饭
    <input type="checkbox" name="hobbys" value="购物">购物
    <input type="checkbox" name="hobbys" value="听音乐">听音乐
    <input type="checkbox" name="hobbys" value="网游">网游
    <input type="checkbox" name="hobbys" value="打球">打球
    <br/>
    <button onclick="selectAll(true)">全选</button>
    <button onclick="selectAll(false)">全不选</button>
  </form>
  <script>
    function selectAll(boo){
      
      
      //获得所有同名元素，返回一个数组
      let hobObjArr=document.getElementsByName("hobbys");
      for (const hobbys of hobObjArr) {
      
      
        if(hobbys.type=="checkbox"){
      
      }
        hobbys.checked=boo;
      } 
    }
  </script>
</body>
</html>

4.5 DOM编程实现级联效果

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>



<body onload="getProvince()">

    <label>省份:</label>
    <select name="province" id="province" onchange="getCity()">
        <option value="">----请选择省份----</option>
    </select>
    <label>城市:</label>
    <select name="city" id="city" onchange="getCounty()">
        <option value="">----请选择城市----</option>
    </select>
    <label>区县:</label>
    <select name="county" id="county">
        <option value="">----请选择区县----</option>
    </select>

    <script>
        let provinceArr = new Array();
        provinceArr[0] = "陕西省";
        provinceArr[1] = "山西省";
        provinceArr[2] = "河南省";
        provinceArr[3] = "河北省";
        provinceArr['陕西省'] = ['西安市', '宝鸡市', '咸阳市', '渭南市', '铜川市', '汉中市', '安康市', '商洛市', '延安市', '榆林市']
        provinceArr['陕西省']['西安市'] = ['雁塔区', '长安区', '未央区', '高新区', '莲湖区']
        provinceArr['陕西省']['宝鸡市'] = ['渭滨区', '陈仓区', '金台区', '凤翔区', '眉县']
        provinceArr['陕西省']['渭南市'] = ['临渭区', '华洲区', '蒲城县', '澄城县', '合阳县']
        provinceArr['河南省'] = ['郑州市', '洛阳市', '开封市', '安阳市']
        provinceArr['河南省']['郑州市'] = ['中原区', '二七区', '管城区', '金水区', '上街区', '惠济区']
        provinceArr['河南省']['洛阳市'] = ['老城区', '西工区', '瀍河回族区', '涧西区', '吉利区', '洛龙区', '孟津县']
        provinceArr['山西省'] = ['太原市', '晋城市', '大同市', '运城市']
        provinceArr['山西省']['太原市'] = ['小店区', '迎泽区', '杏花岭区', '尖草坪区', '万柏林区']
        provinceArr['山西省']['晋城市'] = ['泽州县', '阳城县', '沁水县', '陵川县']
        var proObj, cityObj, countyObj;
        //生成省份
        function getProvince() {
      
      
            proObj = document.getElementById("province")

            for (let province of provinceArr) {
      
      
                //创建城市对象，参数1是显示的值，参数2是value属性
                let proOption = new Option(province, province);
                proObj.options.add(proOption);
            }

        }
        //级联城市
        function getCity() {
      
      
            //获得当前选择的省份
            cityObj = document.getElementById("city")
            //清空原有数据
            cityObj.options.length = 1;
            let cityValue = proObj.value;
            if (cityValue == "") {
      
      
                let cityOption = new Option("-----请选择城市-----", '');
                cityObj.options.add(cityOption);
                return;
            }
            for (const city of provinceArr[cityValue]) {
      
      
                let cityOption = new Option(city, city);
                cityObj.options.add(cityOption);
            }
        }
        //级联市区
        function getCounty() {
      
      
            countyObj = document.getElementById("county")
            let cityValue = proObj.value;
            let countyValue = cityObj.value;
            countyObj.options.length = 1;
            console.log(countyObj.options.length)
            if (countyValue == "") {
      
      
                let countyOption = new ("----请选择区县----", "")
                countyObj.options.add(countyOption);
                return;
            }
            for (const county of provinceArr[cityValue][countyValue]) {
      
      
                let countyOption = new Option(county, county);
                countyObj.options.add(countyOption);
            }
        }
    </script>
</body>

</html>

4.5 DOM编程实现页面上自由移动的DIV

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>

</head>
<style>
    #mainDiv {
      
      
        position: absolute;
        width: 500px;
        height: 400px;
        border: 1px red solid;

    }

    #titleDiv {
      
      
        width: 100%;
        height: 40px;
        background-color: bisque;
        border: 1px red solid;
        color: cadetblue;
    }

    .containerDiv {
      
      
        width: 100%;
        height: 360px;
        background-color: gray;
        border: 1px red solid;
        color: cadetblue;
    }
</style>

<body>
    <div id="mainDiv" style="left: 10px;top:10px;">
        <div id="titleDiv" onmousedown="clickTitle()" onmousemove="move()" onmouseup="mouseUp()">
            标题栏
        </div>
        <div class="containerDiv">

        </div>
    </div>


    <script>
        let obj = null;
        let mouseX;//鼠标点击的位置距离div左边缘的位置
        let mouseY;
        function clickTitle() {
      
      
            obj = document.getElementById("mainDiv");
            document.getElementById("titleDiv").style.cursor = "move";
            mouseX = event.x - parseInt(obj.style.left);
            mouseY = event.y - parseInt(obj.style.top);
            console.log(mouseX);

        }
        function mouseUp() {
      
      
            obj = null;
            document.getElementById("titleDiv").style.cursor = "default";
        }

        function move() {
      
      
            if (obj == null) {
      
      
                return;
            }
            console.log(mouseX + "," + mouseY);
            let x = event.x - mouseX;
            let y = event.y - mouseY;
            obj.style.left = x + "px";
            obj.style.top = y + "px";
        }
    </script>
</body>
</html>

5 Cookie的使用

Cookie:是一段小文本，该文本大小不超过255字节，他是存储在客户端浏览器

cookie的存活周期由开发人员设置，默认存活周期为session周期

5.1 向浏览器中存储cookie

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title></title>
</head>
<body>
   <button onclick="addCookie()">添加Cookie</button>
   <button onclick="readCookie()">读取Cookie信息</button>
   <button onclick="delCookie()">删除cookie</button>
   <script>
       /**
        * 向cookie中添加数据
        */
       function addCookie() {
      
      
           //当前时间
           let nowTime = new Date();

           let seconds = nowTime.getTime();
           nowTime.setTime(seconds + (1000 * 60 * 60 * 24 * 7));
           //expires:设置cookie存活期
           document.cookie = "username=admin;expires=" + nowTime.toGMTString();
       }
       /**
        * 读取cookie
        */
       function readCookie() {
      
      
           //读取cookie中的数据，返回该域所有的cookie字符串
           let cookieStr = document.cookie;
           console.log(cookieStr);
           /***
            * 由于获得的cookie字符串的格式为:key=value;key=value;key=value
            * 在使用时需要从所有的cookie获得key和value
            * 使用字符串分割对cookie进行拆分
            */
           let cookieArr = cookieStr.split(";");
           for (let cookie of cookieArr) {
      
      
               console.log("|" + cookie + "|")
               //使用=分割字符串的key与value
               cookie = cookie.trim();
               console.log("|" + cookie + "|")
               let cookieStrArr = cookie.split("=");
               let key = cookieStrArr[0];
               let val = cookieStrArr[1];
               console.log(key);
               console.log(val);

           }

       }
       /**
        * 删除Cookie中的数据
        * cookie是不能删除的，存活期到了后自动消失
        * 删除key为username的cookie
        * 当将cookie的存活期设置为0或-1时，存活期为session
        */
       function delCookie() {
      
      
           let cookiesStr = document.cookie;
           let cookiesArr = cookiesStr.split(";");
           for (let cookie of cookiesArr) {
      
      
               let cookieArr = cookie.trim().split("=");
               let key = cookieArr[0];
               if (key == "username") {
      
      
                   document.cookie = key + "=" + cookieArr[1] + ";expires=" + new Date().toGMTString();
                   break;
               }
           }
       }
   </script>
</body>

</html>

5.2 使用Cookie实现登录效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<h2>用户登录</h2>
		<input type="text" name="username" id="username" /><br />
		<input type="password" name="password" id="password" /><br />
		<button onclick="login()">登录</button>
		
		<script>
			let users = [
				{
      
      "username":"admin","password":"123456"},
			];
			function login(){
      
      
				let username = document.getElementById("username").value;
				let password = document.getElementById("password").value;
				let isLogin = false;
				for(let user of users){
      
      
					if(username == user.username && password==user.password){
      
      
						document.cookie="username="+username;
						isLogin = true;
						break;
					}
				}
				if(isLogin){
      
      
					//页面跳转
						location.href="index.html";
				}else{
      
      
					alert("您输入的用户名或密码错误，请重新输入");
				}
			}
		</script>
	</body>
</html>

5.3 使用JSON添加注册

JSON：JavaScript Object Notation，指JavaScript的本地对象，是一种轻量级的数据交换格式。

json就是键值对

json对象:键名可以不加双引号

 {
    
    "key1":"value1", "key2":"value2"...}

JSON数组:

[{
    
    "key1":"value1", "key2":"value2"...}, {
    
    "key1":"value1", "key2":"value3"...}...]

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<h2>用户登录</h2>
		<input type="text" name="username" id="username" /><br />
		<input type="password" name="password" id="password" /><br />
		<button onclick="login()">登录</button>
		
		<hr />
		<h2>用户注册</h2>
		<form name="regForm">
			<input type="text" name="username" id="username" /><br />
			<input type="password" name="password" id="password" /><br />
			<button type="button" onclick="reigster()">注册</button>
		</form>
		
		
		<script>
			//数组
			let users = [
				{
      
      "username":"admin","password":"123456"},
				{
      
      "username":"test","password":"test"}
			];
			function login(){
      
      
				let username = document.getElementById("username").value;
				let password = document.getElementById("password").value;
				let isLogin = false;
				for(let user of users){
      
      
					if(username == user.username && password==user.password){
      
      
						document.cookie="username="+username;
						isLogin = true;
						break;
					}
				}
				if(isLogin){
      
      
					//页面跳转
						location.href="index.html";
				}else{
      
      
					alert("您输入的用户名或密码错误，请重新输入");
				}
			}
			
			/**
			 * 用户注册
			 */
			function reigster(){
      
      
				let username = document.regForm.username.value;
				let password = document.regForm.password.value;
				users.push({
      
      "username":username,"password":password});
				console.log(users);
				alert("注册成功");
			}
		</script>
	</body>
</html>

6 表单验证技术

表单验证指在客户端中对用户输入的数据进行有效性(合法性)检测;检测不通过不让提交给服务端;检测通过后才让数据提交给服务端以这种方式来降低服务端的压力,并避免错误出现

  • 有效性主要指:

    1. 是否为空(必填项)
    2. 格式检测
    3. 自定义内容检测(长度，非法字符检测,多次输入一致性检测)

  • form表单中有一个onsubmit事件

​ 该事件为表单提交事件，当单击提交按钮(submit)时会执行该事件

​ onsubmit事件的返回值决定acion是否被执行,当onsubmit事件的返回true时，执行action

​ 当onsubmit事件的返回false时，不执行action

6.1 正则表达式

  1. 元字符

元字符：即为有特定含义的字符，常见的元字符如下

常用的元字符
代码 说明
. 匹配除换行符以外的任意字符
\w 匹配字母或数字或下划线或汉字
\s 匹配任意的空白符
\d 匹配数字
\b 匹配单词的开始或结束
^ 匹配字符串的开始（在集合字符里[^a]表示非（不匹配）的意思
$ 匹配字符串的结束
  1. 反义字符

反义字符：多用于查找除某个字符以外其他任意字符均可以的情况

常用的反义字符
代码/语法 说明
\W 匹配任意不是字母，数字，下划线，汉字的字符
\S 匹配任意不是空白符的字符
\D 匹配任意非数字的字符
\B 匹配不是单词开头或结束的位置
[^x] 匹配除了x以外的任意字符
[^aeiou] 匹配除了aeiou这几个字母以外的任意字符
  1. 限定字符

限定字符多用于重复匹配次数

限定字符
代码/语法 说明
* 重复零次或更多次
+ 重复一次或更多次
? 重复零次或一次
{n} 重复n次
{n,} 重复n次或更多次
{n,m} 重复n到m次
  1. 懒惰匹配和贪婪匹配

贪婪匹配：正则表达式中包含重复的限定符时，通常的行为是匹配尽可能多的字符。

懒惰匹配，有时候需要匹配尽可能少的字符。

懒惰匹配
代码/语法 说明
*? 重复任意次，但尽可能少重复
+? 重复1次或更多次，但尽可能少重复
?? 重复0次或1次，但尽可能少重复
{n,m}? 重复n到m次，但尽可能少重复
{n,}? 重复n次以上，但尽可能少重复

6.2 基于编程式表单验证(基本不用)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    table {
      
      
        width: 400px;
        height: 300px;
        border-collapse: collapse;
    }

    table,
    td {
      
      
        border: 1px solid black;
    }
</style>

<body>
    <h2 align="center">用户注册</h2>
    <!--
    			form表单中有一个onsubmit事件
    			该事件为表单提交事件，当单击提交按钮(submit)时会执行该事件
    			onsubmit事件的返回值决定acion是否被执行,当onsubmit事件的返回true时，执行action
    			当onsubmit事件的返回false时，不执行action
    			
    		-->
   <form action="注册成功.html" onsubmit="return checkForm()" name="regForm" method="post">
        <table align="center">
            <tr>
                <td>用户名:</td>
                <td>
                    <input type="text" name="username" />
                </td>
            </tr>

            <tr>
                <td>密码:</td>
                <td>
                    <input type="password" name="password" />
                </td>
            </tr>

            <tr>
                <td>确认密码:</td>
                <td>
                    <input type="password" name="password1" />
                </td>
            </tr>

            <tr>
                <td>性别:</td>
                <td>
                    <input type="radio" checked="checked" name="sex" value="男" />男
                    <input type="radio" name="sex" value="女" />女
                </td>
            </tr>

            <tr>
                <td>E-mail:</td>
                <td>
                    <input type="text" name="email" />
                </td>
            </tr>

            <tr>
                <td>手机号:</td>
                <td>
                    <input type="text" name="phone" />
                </td>
            </tr>

            <tr>

                <td colspan="2">
                    <button>注册</button>
                    <button type="reset">重置</button>
                </td>
            </tr>
        </table>
    </form>

    <script>
        /***
         *表单验证 
         */
        function checkForm() {
      
      
            //获得页面输入的值
            let username = regForm.username.value;
            //非空验证
            if (username == "") {
      
      
                alert("用户名不能为空!");
                return false;
            }
            //验证username的长度，长度要求在6-18位
            if (username.length < 3 || username.length > 18) {
      
      
                alert("用户名长度只能在3-18位之间!");
                return false;
            }
            //用户名只能由"数字、字母、下划线"三部分组成
            if (!checkUsername(username)) {
      
      
                alert("用户名只能为数字、字母、下划线");
                return false;
            }

            //检测密码
            let password = regForm.password.value;
            //非空验证
            if (password == "") {
      
      
                alert("密码不能为空!");
                return false;
            }
            if (password.length < 6 || password.length > 18) {
      
      
                alert("密码长度不符");
                return false;
            }

            let password1 = regForm.password1.value;
            if (password != password1) {
      
      
                alert("两次密码输入不一致！");
                return false;
            }

            //检测密码
            let email = regForm.email.value;
            //非空验证
            if (email == "") {
      
      
                alert("E-mail不能为空!");
                return false;
            }
            if (!checkEmail(email)) {
      
      
                alert("E-mail不合法");
                return false;
            }



            //检测手机号
            let phone = regForm.phone.value;
            //非空验证
            if (phone == "") {
      
      
                alert("手机号不能为空!");
                return false;
            }
            //判断字符串是否为数字
            if (isNaN(phone)) {
      
      
                alert("请输入合法的手机号!");
                return false;
            }
            if (phone.indexOf(".") != -1) {
      
      
                alert("请输入合法的手机号!");
                return false;
            }
            if (phone.length != 11) {
      
      
                alert("请输入合法的手机号!");
                return false;
            }
            if (phone.charAt(0) != 1 || phone.charAt(1) == 0 || phone.charAt(1) == 1 || phone.charAt(1) == 2) {
      
      
                alert("请输入合法的手机号!");
                return false;
            }

            return true;
        }

        function test() {
      
      
            alert(isNaN('1231.32'));
        }

        /**
         * 检测用户名函数,用户名只能由"数字、字母、下划线"三部分组成
         */
        function checkUsername(username) {
      
      
            //遍历username字符串，获得每个字符，进行判断
            for (let c of username) {
      
      
                if (!(
                    (c >= 0 && c <= 9) ||
                    (c >= 'a' && c <= 'z') ||
                    (c >= 'A' && c <= 'Z') ||
                    c == '_')
                ) {
      
      
                    return false;//非法字符
                }
            }
            return true;
        }

        /**
         * 验证E-mail的格式
         * 	[email protected]|[email protected]|[email protected]
         */
        function checkEmail(email) {
      
      
            //获得@的下标
            let index1 = email.indexOf("@");
            //获得点的下标
            let index2 = email.indexOf(".");
            //检测是否存在@和.两个符号
            if (index1 == -1 || index2 == -1) {
      
      
                return false;
            }
            //判断@和.的位置
            if (index2 - index1 <= 1) {
      
      
                return false;
            }
            //检测@是否在第一个位置，.是否在最后一个位置
            if (index1 == 0 || index2 == email.length - 1) {
      
      
                return false;
            }
            return true;
        }


    </script>
</body>

</html>

6.3 基于正则表达式的表单验证

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h2 align="center">用户注册</h2>
    <!--
			form表单中有一个onsubmit事件
			该事件为表单提交事件，当单击提交按钮(submit)时会执行该事件
			onsubmit事件的返回值决定acion是否被执行,当onsubmit事件的返回true时，执行action
			当onsubmit事件的返回false时，不执行action
			
		-->
    <form action="注册成功.html" onsubmit="return checkForm()" name="regForm" method="post">
        <table align="center">
            <tr>
                <td>用户名:</td>
                <td>
                    <input type="text" name="username" />
                </td>
            </tr>

            <tr>
                <td>密码:</td>
                <td>
                    <input type="password" name="password" />
                </td>
            </tr>

            <tr>
                <td>确认密码:</td>
                <td>
                    <input type="password" name="password1" />
                </td>
            </tr>

            <tr>
                <td>性别:</td>
                <td>
                    <input type="radio" checked="checked" name="sex" value="男" />男
                    <input type="radio" name="sex" value="女" />女
                </td>
            </tr>

            <tr>
                <td>E-mail:</td>
                <td>
                    <input type="text" name="email" />
                </td>
            </tr>

            <tr>
                <td>手机号:</td>
                <td>
                    <input type="text" name="phone" />
                </td>
            </tr>

            <tr>

                <td colspan="2">
                    <button>注册</button>
                    <button type="reset">重置</button>
                </td>
            </tr>
        </table>
    </form>


    <script>
        /***
         *表单验证 
         */
        function checkForm() {
      
      
            //获得页面输入的值
            let username = regForm.username.value;
            //非空验证
            if (username == "") {
      
      
                alert("用户名不能为空!");
                return false;
            }
            let usernameReg = /^\w{3,18}$/;
            //用户名只能由"数字、字母、下划线"三部分组成
            if (!usernameReg.test(username)) {
      
      
                alert("用户名只能为数字、字母、下划线");
                return false;
            }

            //检测密码
            let password = regForm.password.value;
            //非空验证
            if (password == "") {
      
      
                alert("密码不能为空!");
                return false;
            }
            if (password.length < 6 || password.length > 18) {
      
      
                alert("密码长度不符");
                return false;
            }

            let password1 = regForm.password1.value;
            if (password != password1) {
      
      
                alert("两次密码输入不一致！");
                return false;
            }

            //检测密码
            let email = regForm.email.value;
            //非空验证
            if (email == "") {
      
      
                alert("E-mail不能为空!");
                return false;
            }
            let emailReg = /^\w+@\w+\.\w+$/;
            //数字，字母，下划线+@+数字字母下划线+.+数字字母下划线
            if (!emailReg.test(email)) {
      
      
                alert("E-mail不合法");
                return false;
            }



            //检测手机号
            let phone = regForm.phone.value;
            //非空验证
            if (phone == "") {
      
      
                alert("手机号不能为空!");
                return false;
            }
            let phoneReg = /^1[3-9]\d{9}$/;
            if (!phoneReg.test(phone)) {
      
      
                alert("请输入合法的手机号!");
                return false;
            }
            return true;
        }

        function test() {
      
      
            alert(isNaN('1231.32'));
        }

        /**
         * 检测用户名函数,用户名只能由"数字、字母、下划线"三部分组成
         */
        function checkUsername(username) {
      
      
            //遍历username字符串，获得每个字符，进行判断
            for (let c of username) {
      
      
                if (!(
                    (c >= 0 && c <= 9) ||
                    (c >= 'a' && c <= 'z') ||
                    (c >= 'A' && c <= 'Z') ||
                    c == '_')
                ) {
      
      
                    return false;//非法字符
                }
            }
            return true;
        }

        /**
         * 验证E-mail的格式
         * 	[email protected]|[email protected]|[email protected]
         */
        function checkEmail(email) {
      
      
            //获得@的下标
            let index1 = email.indexOf("@");
            //获得点的下标
            let index2 = email.indexOf(".");
            //检测是否存在@和.两个符号
            if (index1 == -1 || index2 == -1) {
      
      
                return false;
            }
            //判断@和.的位置
            if (index2 - index1 <= 1) {
      
      
                return false;
            }
            //检测@是否在第一个位置，.是否在最后一个位置
            if (index1 == 0 || index2 == email.length - 1) {
      
      
                return false;
            }
            return true;
        }

    </script>
</body>

</html>

6.4 及时校验

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    table {
      
      
        width: 600px;
        height: 300px;
        border-collapse: collapse;
    }

    table,
    td {
      
      
        border: 1px solid black;
    }
</style>

<body>
    <h2 align="center">用户注册</h2>
    <!--
			form表单中有一个onsubmit事件
			该事件为表单提交事件，当单击提交按钮(submit)时会执行该事件
			onsubmit事件的返回值决定acion是否被执行,当onsubmit事件的返回true时，执行action
			当onsubmit事件的返回false时，不执行action
			
		-->
    <form action="注册成功.html" onsubmit="return checkForm()" name="regForm" method="post">
        <table align="center">
            <tr>
                <td>用户名:</td>
                <td>
                    <!--
							onfocus:获得焦点事件
							onblur:失去焦点事件
							
						-->
                    <input type="text" name="username" onblur="checkUsername()" />

                </td>
            </tr>

            <tr>
                <td>密码:</td>
                <td>
                    <input type="password" name="password" onkeyup="passwordSecurity(this)" onblur="checkPassword()" />
                </td>
            </tr>

            <tr>
                <td>确认密码:</td>
                <td>
                    <input type="password" name="password1" onblur="checkPassword1()" />
                </td>
            </tr>

            <tr>
                <td>性别:</td>
                <td>
                    <input type="radio" checked="checked" name="sex" value="男" />男
                    <input type="radio" name="sex" value="女" />女
                </td>
            </tr>

            <tr>
                <td>E-mail:</td>
                <td>
                    <input type="text" name="email" onblur="checkEmail()" />
                </td>
            </tr>

            <tr>
                <td>手机号:</td>
                <td>
                    <input type="text" name="phone" onblur="checkPhone()" />
                </td>
            </tr>

            <tr>

                <td colspan="2">
                    <button>注册</button>
                    <button type="reset">重置</button>
                </td>
            </tr>
        </table>
    </form>

    <button onclick="test()">测试</button>

    <script type="text/javascript">


        function passwordSecurity(element) {
      
      
            let value = element.value;
            let marker1 = 0;
            let marker2 = 0;
            let marker3 = 0;
            for (let c of value) {
      
      
                if (c >= 'a' && c <= 'z' || (c >= 'A' && c <= 'Z')) {
      
      
                    marker1 = 1;
                } else if (c >= '0' && c <= '9') {
      
      
                    marker2 = 1;
                } else {
      
      
                    marker3 = 1;
                }
            }
            let msg = "";
            if (marker1 + marker2 + marker3 == 1) {
      
      
                msg = "弱";
            } else if (marker1 + marker2 + marker3 == 2) {
      
      
                msg = "中";
            } else if (marker1 + marker2 + marker3 == 3) {
      
      
                msg = "强";
            }
            showInfo(element, msg, 1);
        }
        /**
         * 显示错误消息
         * element   事件源
         * msg		错误消息
         * type		类型(1,正确，-1错误)
         */
        function showInfo(element, msg, type) {
      
      
            //创建一个HTML标签对象
            let spanEle = document.createElement("span");
            //获得事件源的父元素
            let parentEle = element.parentNode;
            //获得最后一个子元素
            let lastEle = parentEle.lastElementChild;

            //判断子元素是否为span标签
            if (lastEle.nodeName == "SPAN") {
      
      
                //移除子元素
                parentEle.removeChild(lastEle);
            }


            spanEle.style.color = "green";
            //根据类型设置不同的文本颜色
            if (type == -1) {
      
      
                spanEle.style.color = "red";
            }
            //设置错误消息
            spanEle.innerHTML = msg;
            //设置spanEle的显示位置
            //向父元素对象中添加一个子元素
            parentEle.appendChild(spanEle);
        }
        function checkUsername() {
      
      
            //获得当前元素对象
            let element = regForm.username;
            //获得页面输入的值
            let username = element.value;
            let msg = "";
            let usernameReg = /^\w{3,18}$/;
            //非空验证
            if (username == "") {
      
      
                msg = "用户名不能为空!";

            } else if (!usernameReg.test(username)) {
      
      
                msg = "用户名只能为数字、字母、下划线!";
            }
            if (msg != "") {
      
      
                //没有错误
                showInfo(element, msg, -1);
                return false;
            }
            //没有错误
            showInfo(element, "ok", 1);
            return true;
        }

        /**
         * 校验密码
         */
        function checkPassword() {
      
      
            let element = regForm.password;
            //检测密码
            let password = element.value;
            let msg = "";
            //非空验证
            if (password == "") {
      
      
                msg = "密码不能为空!";
            } else if (password.length < 6 || password.length > 18) {
      
      
                msg = "密码长度不符";
            }

            if (msg != "") {
      
      
                //没有错误
                showInfo(element, msg, -1);
                return false;
            }
            //没有错误
            showInfo(element, "ok", 1);
            return true;
        }

        function checkPassword1() {
      
      
            let element = regForm.password1;
            //检测密码
            let password = regForm.password.value;
            let password1 = element.value;
            let msg = "";
            if (password != password1) {
      
      
                msg = "两次密码输入不一致！";

            }
            if (msg != "") {
      
      
                //没有错误
                showInfo(element, msg, -1);
                return false;
            }
            //没有错误
            showInfo(element, "ok", 1);
            return true;
        }

        function checkEmail() {
      
      
            let element = regForm.email;
            //检测密码
            let email = element.value;
            let msg = "";
            let emailReg = /^\w+@\w+\.\w+$/;
            //非空验证
            if (email == "") {
      
      
                msg = "E-mail不能为空!";
            } else if (!emailReg.test(email)) {
      
      
                msg = "E-mail不合法";
            }
            if (msg != "") {
      
      
                //没有错误
                showInfo(element, msg, -1);
                return false;
            }
            //没有错误
            showInfo(element, "ok", 1);
            return true;
        }

        function checkPhone() {
      
      
            let element = regForm.phone;

            //检测手机号
            let phone = element.value;
            let msg = "";
            let phoneReg = /^1[3-9]\d{9}$/;
            //非空验证
            if (phone == "") {
      
      
                msg = "手机号不能为空!";
            } else if (!phoneReg.test(phone)) {
      
      
                msg = "请输入合法的手机号!";

            }
            if (msg != "") {
      
      
                //没有错误
                showInfo(element, msg, -1);
                return false;
            }
            //没有错误
            showInfo(element, "ok", 1);
            return true;
        }
        /***
         *表单验证 
         */
        function checkForm() {
      
      
            if (checkUsername() && checkPassword() && checkPassword1() && checkEmail() && checkPhone()) {
      
      
                return true;
            }
            return false

        }
        function test() {
      
      
            alert(isNaN('1231.32'));
        }

    </script>
</body>

</html>

PS:

typeof(variable) :检测变量的类型

ESESMAScrpit是JavaScrpit的编译器

  • 学习来自于西安加中实训

猜你喜欢

转载自blog.csdn.net/woschengxuyuan/article/details/123974443
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
周排行
让自己的头脑极度开放
CentOS 6.5(x64) 和Redhat6.5操作系误删libc
高可用注册中心
【日记】12.28/【题解】AtCoder AGC041
XML（5）_XML 约束_DTD
Java集合Map（四）
树梅派安装桌面环境教程
pipenv 的 使用和安装
小程序白屏问题和内存研究
C语言简单选择排序
每日归档
更多
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022