Java0基础_day17_Javaweb前端_JavaScript

本文主要是介绍Java0基础_day17_Javaweb前端_JavaScript，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

标签：JS、JavaScript

1.JS概述

JS，全称JavaScript，一门专门用于浏览器解析和执行的语言规范，属于事件驱动语言。

本次学习主要包括四大部分，即JS基础语法、DOM编程、BOM编程以及JSON格式。

2.JS基础语法→ES6规范/ECMA-262规范

首先明确一点，即JS是一门弱类型语言，不同于java的强类型语言，java中变量在使用前必须声明为某个特定的类型，然后一直放在对应类型的容器中，而JS则不需要指定具体的类型，变量的类型由其右侧赋予的值动态决定！

2.1 数据类型、变量

第一部分：数据类型综述

JS中数据类型分为原始类型和引用类型：

原始类型：String、Boolean、Number、Undefined、Null
引用类型：Object及其子类

特别的，我们用typeof 变量名来求变量的类型：

typeof a 
结果6选1："undefined"、"number"、"object"、"boolean"、"string"、"function"

【注意】JS中用==判断是否值相等，===判断值和类型是否完全一致。

var i;
alert(typeof i);
var x = false;alert(typeof x);
var y = 10;alert(typeof y);
var z = null;alert(typeof z);//返回“object”；
var w = "sadfd";alert(typeof w);
var obj = new Object();
alert(typeof obj);//返回“object”；
function a(){}
alert(typeof a);//"function"
alert(typeof a());//"undefined"

下面为等号测试：

alert(typeof null);//"object"
alert(typeof undefined);//undefined""
alert(typeof NaN);//number""
alert("我是==分割线");
alert(null==NaN);//false
alert(null==undefined);//true????????
alert(undefined==NaN);//false	
alert("我是===分割线");
alert(null===NaN);//false
alert(null===undefined);//false
alert(undefined===NaN);//false

alert("我是true和1的分割线");
alert(1==true);//true  类似于equals方法；
alert(1===true);//false

第二部分：变量

第一点：变量声明：

var 变量名;

【注意】变量声明了但是没有赋值则默认为unidefined，如果未声明就使用变量则会报错。

第二点：变量分类

JS中变量分为全局变量和局部变量，区别在于是否在函数内声明。

特别的，如果在函数内部直接赋值，但是并未声明，则JS默认其为全局变量！

【注意2】全局变量消耗内存，非必要建议使用局部变量。

第三部分：数据类型详解

第一个：Number类

Number类可以是：Infinity、NaN、3、9.44、-33、-4.44；

NaN：当期待的结果是数字但是经过运算后发现不是数字的时候，就返回NaN：

var a =3;
var b ="dasf";
alert(a/b);//NaN

Number有四个重点掌握的函数：

	isNaN(a) //判断a是否是NaN类型，如果isNaN为true，则是一个NaN
	//parseInt(),parseFloat(),Math.ceil();
	alert(parseInt(3.33));
	alert(parseInt("3.33"));
	alert(parseFloat(3.333)+22);
	alert(Math.ceil('-2.22'));
	alert(Math.ceil('2.22'));

第二个：Boolean类

最重要的就是Boolean()函数，将非布尔类型转换为布尔类型：

	//总结：“有”就转换为true；没有就转换为false；
	alert(Boolean(1));//true
	alert(Boolean(0));//false
	alert(Boolean(""));//false
	alert(Boolean(" "));//true;
	alert(Boolean(null));//false
	alert(Boolean(undefined));//false
	alert(Boolean(NaN));//false
	alert(Boolean(Infinity));//true!!!!
	while(0.000000000000000){//认为0.0==0；
		alert("hh");
	}
	alert(typeof null)//返回"object"

第三个：Undefined类

此类型只有undefined这个值，可以默认赋值，也可以手动赋值为undefined。

var uni;
alert(typeof nui);//"unidefined";
var un2 = unidefined;

第四个：String类

属性：
        prototype属性   
        constructor属性
函数：
        toString()；
        valueOf()；
        toLocalString()；

在JS中，String有两种创建方法，称之为小String和大String

var lowString = "saf";
alert(typeof lowString);//"string"
var bigString = new String("jjj");
alert(typeof bigString );//"object"

不管怎样，他们共享如下方法：

alert("abcdefgh".substr(2,4));//从2开始的长度为4个的字符串；
alert("abcdefgh".substring(2,4));//从2到3的子串；
alert("ABCDEFFEDBCA").repalce("A","g")//替换首次出现的字符；可以用正则表达式；
alert("abcdefgh".indexOf("a"));//子串匹配；
alert("ABCDEFFEDBCA").toLowerCase());//全部转换为小写；

第五个：Object类

该类是所有引用类的老祖宗，其中最重要的属性是protype属性。

第一个：如何创建对象？

第一步：创建自定义类

法1：function ObjectClass(name,id){
    this.name = name;
    this.id = id;
}
法2：ObjectClass2 = function(name,id){
     this.name = name;
     this.id = id;
     this.getId = function(){
        return this.id;
        }
}

第二步：new对象

var x1 = new ObjectClass("张三",300);
var x2 = new ObjectClass2("李四",600);

值得注意的是，如果直接调用ObjectClass()则是函数调用，new才是对象创建。

第三步：属性访问

法1：alert(x1.name);
法2：alert(x2["id"]);

第二个：如何随意拓展类的属性

第一点：拓展自定义类

ObjectClass.protype.getName = function(){

    return this.name;
}
alert(x1.getName());//注意，这里拓展的是方法；

第二点：拓展内置类

String.protype.prt = function(){

    return "nihao";
}
alert("sadf".prt());//注意，这里拓展的是方法；

第六个：Null类

2.2 函数

在JS中，将完成某些功能的语句称为函数，关键字：function

第一个：语法

法1：
function 函数名(形参列表){函数体}
法2：
函数名= function (形参列表){	函数体}

由于JS是弱类型，因此函数参数类型、返回值类型都不用加上！

第二个：函数赋值过程

function sum(a,b){
	return a+b;
}	

var s = sum(1,2);
alert(s);

var t= sum("jaav+");//赋给第一个形参，第二个默认赋值undefined；
alert(t);
var t3= sum();//返回NAN值，一个具体的不存在的值，该值不是参数；；；
alert(t3);

alert(sum(100,9,3));//返回前两个数之和；

第三个：函数重名的解析过程

function test(s){alert("test text");}
function test(){
	alert("test");
}//JS中函数不能重名，否则此时会直接覆盖前面定义的函数；
test(300);

第四个：函数的void用法

void用于实现这样的需求：有超链接样式，但是点击后不跳转。

<a href="javascript:void(0)" onclick = 'window.alert("点击成功")' >

这里加上javascript的意思是告诉浏览器，我这一段是自带代码，不是路径名。

此时你会看到这种效果：

2.3 控制语句

除了JAVA中的选择(if-else，switch)、循环(for、while、break、continue)外，JS中有with和for ...in语句，可以简单了解！

//1.遍历数组
var arr = [1,2,false,"fasdf"];
for(var i in arr){
    alert(arr[i];//i是数组下标
}

//2.迭代对象 for...in

User = function(name,pwd){
			this.name=name;
			this.pwd=pwd;}
var u =new User("zhagnsan",12456);
for(var shuxing in u){
    alert(u[shuxing]);
    alerrt(u.shuxing);}//注意shuxing自动为string类型；


//3.自动赋值  with
with(u){
    alert(name);//等价于 alert(u.name);}

2.4 事件

JS是事件驱动型的语句，怎么理解？可以理解为浏览器是一个监视者，无时无刻等待着用户发出如点击鼠标、敲键盘等动作，一旦指定动作发送，则执行某些操作，这就实现了交互性。

2.4.1 事件分类

分类：
blur
focus


click
dbclick

mousedown
mouseover
mousemove
mouseout
mouseup

reset
submit

change 下拉列表改变/文本框内容改变
select 文本被选中
load 整个html页面所有页面元素加载完毕后发生

与此相关的概念是事件句柄，我们说事件是实实在在发生的动作，可以理解为调用某个函数，那么与此相关的事件句柄则是指该动作对象，规则是在事件前加上on关键字，如onclick就是点击事件句柄。

2.4.2 事件注册

将事件与想定义的规则联系起来就称为事件注册，例如将onclick注册到打印输出“你好”，这就是一个案例。

//注册方式1
<input type = "button" value="hello onclick='sayhello()'"/>
//这里是注册到这里，事件发生后才去调用；
function sayhello(){
	alert("sfa");}

//第二种方式：纯js代码
<input type ="button" value="hello2" id="mybt"/>
<script type="text/javascript">
	/* 
	  第一步：获取按钮对象；
	 */
	function doSome(){
		alert("dosome");
	}
		var bnobj = document.getElementById("mybt");
		//第二步：给按钮对象的onclick属性赋值
		bnobj.onclick = doSome;
//注意千万不要加小括号，bnobj.onclick = doSome();是错误的 加了就会先执行函数！！
		//这行代码的意思是将doSome函数注册到onclick事件上；
		var s= document.getElementById("mybt");
		s.onclick = function (){//匿名函数
			alert(434);
		}
		//一行代码：
		document.getElementById("mybt").onclick = function(){
			alert("kkk"); 
		}

</script>

<script type="text/javascript">
	window.onload = function (){
		document.getElementById("mybt").onclick = function(){
			alert("sajdfjsf");
		}			
	}
//页面打开时开始注册大function到onload，onload执行后在执行大function时再注册内部onclick；
</script>
<input type="button" value="呵呵"  id="mybt"/>

【执行顺序】首先明确，JS代码是自上而下执行的。左侧为onload注册，表示等页面底部按钮加载后执行该右侧绑定的函数，然后当按钮点击事件发生后，此时执行内部的函数，即弹窗。

与此相关的是回调函数的概念，其本质是看待问题的角度不一样，其理解是自己写代码别人调用的函数，以java举例如下：

public class hh(){
    public static void main(String[] args){
	    run();//站在我的角度，run是正向调用；}
public static void run(){
 System.out.println("run...");//站在run的角度，我写出来被别人调用，故我是回调函数；}

2.4.3 获取指定对象

在java中万物皆对象，JS中也是一样，如标签对象，点击按钮对象等等。

<script>
<input type ="button" value="hello2" id="mybt"/>
<script type="text/javascript">
	document.getElementById("mybt").onclick = function(){
		alert("kkk"); }
</script>

2.5 项目：回车键捕捉演示

需求：捕捉用户在文本框按下回车键，弹窗显示

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS捕捉回车键</title>
</head>
<body>
<script type='text/javascript'>

window.onload = function(){
	var x = document.getElementById("username");
	x.onkeydown = function(event){
		//这里左边一定要加上on才是时间句柄；
		//这里当event不写的时候相当于传过来keydown事件；
		//这里event是浏览器new出来的该事件对象，左边绑定的事件；；
		//对于键盘事件来说，有keycode属性；
		// document.getElementById("login").onclick = function(){
			// alert(event.keyCode);
			//改进：获取键值；esc 值为27，回车键为13；
			//敲回车登录：
			// document.getElementById("login").onclick = function(){
			// 	alert("登录成功，恭喜你");
			// }
			// alert(event.keyCode);//注意这里必须是大写的KeyCode！！
			// 	// document.getElementById("login").click();
			// alert(event.keyCode);
			 if(event.keyCode===13){
			
				alert("正在测试");
			 }		
		//}
		 // document.getElementById("login").onclick();
	}
}

</script>
<input type="text"  value = "请输入用户名" id="username" />
<BR/>
<input type="button"  value = "登录" id="login" />


</body>
</html>

3.DOM编程

DOM即Document Object Model，文档对象模型，对网页中的结点进行属性设置，其顶级对象是document。

3.1 修改结点值

//实现点击上下文本框内容互换；
window.onload = function(){
	document.getElementById("bu").onclick = function(){
		// alert(document.getElementById("te").value);//属性不能加括号，这里的value本质上是下面的input文本框重的value！
		// alert(document.getElementById("te").value = "lisi");//属性不能加括号，这里的value本质上是下面的input文本框重的value！
		// alert(document.getElementById("te").value );//属性不能加括号，这里的value本质上是下面的input文本框重的value！
		// //修改.value的值！！！
		alert(typeof document.getElementById("te").value);
	var x =document.getElementById("te").value;
	document.getElementById("te").value = document.getElementById("te2").value;
	document.getElementById("te2").value = x;
		// document.getElementById("te2").value = document.getElementById("te").value;
		// document.getElementById("te").value ="";
	}
}

</script>

<!-- <input type="button" value="nihao" id="one"/> -->

<input type="text"  id="te"/>
<br/>
<input type="text"  id="te2"/>	<br/>
	<input type="button" value="上下文转移" id="bu"/>
	<input type = "text" value="nihoa" onblur ="alert(this.value)"/>
	<!--这里的失去焦点指的是光标移除！，this代表当前input对象；-->

3.2 innerHtml和innerText值

<script type="text/javascript">
	//innerHTML和innerText都是div的属性，前者会认为是html代码，后者是字符串；
	window.onload = function(){
		document.getElementById("btn").onclick = function(){			
			// alert(11);
			//第一步获取div；
			var x =document.getElementById("div1");
			//第二步：利用innerHTML属性设置元素内部的内容；
			x.innerHTML = "<h1>你好啊</h1>"; //当成html代码
			// x.innerText = "<h1>你好啊</h1>";//全部当成字符串处理；
		}	
	}

//调试错误：在F12打开控制台看是否出错；

</script>
<input type="button"  value="设置div"  id="btn" />
<div id="div1">  </div>

3.3 checkbox复选框项目

需求：点击全选按钮就，全部选中，再点击，全部取消；同时如果全部已经选中则全选按钮自动点亮。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>checkbox</title>
	</head>
	<CENTER>
	<body>
		<script type="text/javascript">
		window.onload = function(){
			var names = document.getElementsByName("aihao");//修改位置，因为这里需要无关鼠标单击第一个框；
			var zt = document.getElementById("allcheck");
			zt.onclick = function(){
				for(var i =0;i<names.length;i++){
					names[i].checked = zt.checked;
				}
			}
			var totalcount = names.length;
			
			for(var i =0;i<names.length;i++){//这个for循环页面加载的时候进行；
				names[i].onclick = function(){//这个for循环在点击某一个按钮后全局搜索；
				var checkcount =0;
				for(var i =0;i<names.length;i++){
					if(names[i].checked){
						checkcount++;
					}
				}
				zt.checked = (checkcount==totalcount);
				}	
			}}
		</script>
		<input type="checkbox" id="allcheck"/>全选<br/>
		<input type="checkbox" name="aihao"/ >烫头<br/>
		<input type="checkbox" name="aihao"/>吃饭<br/>
		<input type="checkbox" name="aihao"/>喝酒<br/>
		
	</body>
</CENTER>	
</html>

以下为初次尝试的总结：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>checkbox</title>
	</head>
	<CENTER>
	<body>
		<script type="text/javascript">
		window.onload = function(){
			//检测第一个标签的状态；
			var names = document.getElementsByName("aihao");//修改位置，因为这里需要无关鼠标单击第一个框；
			//从上到下：
			var zt = document.getElementById("allcheck");
			zt.onclick = function(){
				// zt.checked = (zt.checked?false:true);
				//这里不需要手动复制，浏览器已经知道你点击就是checkedbox=true/false；
				// zt.checked = true;	
				for(var i =0;i<names.length;i++){
					names[i].checked = zt.checked;
				}
			}
			var totalcount = names.length;
			
			// for(var i =0;i < totalcount;i++){
			// 	if(names[i].checked){
			// 		checkcount++;
			// 	}
			// }
			// zt.checked = (checkcount==totalcount);
			for(var i =0;i<names.length;i++){//这个for循环页面加载的时候进行；
				names[i].onclick = function(){//这个for循环在点击某一个按钮后全局搜索；
				var checkcount =0;
				for(var i =0;i<names.length;i++){
					if(names[i].checked){
						checkcount++;
					}
				}
				zt.checked = (checkcount==totalcount);
				}	
				// zt.checked = (checkcount==totalcount);
				// alert(names[i]);
				//测试，每次点击就
			}
				
		}				
			// for(var i =0;i<names.length;i++){
			// 	var checkednum =0;
			// 	if(names[i].checked){
			// 		checkednum++;
			// 	}	
			// }
			// zt.checked=(checkednum==total);
			
		// 	//从下到上：
		// 	var total = names.length;
		
		// 	for(var i =0;i<names.length;i++){
		// 			var checkcount = 0;
		// 		names[i].onclick = function(){
		// 			checkcount = (names[i].checked?checkcount++;checkcount--);
		// 			alert(checkcount);
		// 		}
		// 	zt.checked = (checkcount == total?true;false);		
		// 	}		
		}

		</script>
		<input type="checkbox" id="allcheck"/>全选<br/>
		<input type="checkbox" name="aihao"/ >烫头<br/>
		<input type="checkbox" name="aihao"/>吃饭<br/>
		<input type="checkbox" name="aihao"/>喝酒<br/>
	</body>
</CENTER>	
	
	
</html>

3.4 获取下拉列表的值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
		window.onload = function(){
			var list = document.getElementById("hh");
			list.onchange = function(){
				alert(list.value);
			}	
		}
		</script>
		<!-- 	//上下两种方法都可以 -->
		<select onchange="alert(this.value)" id="hh">
			<option value="">请选择省份</option>
			<option value="001">重庆市</option>
			<option value="002">江苏省</option>
			<option value="003">上哈市</option>
		</select>
	</body>
</html>

3.5 自带时钟类

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>显示网页时钟！</title>
	</head>
	<body>
		<script type="text/javascript">
	// 	/*JS内置支持类  Date；
	// 	*/
	// 	var nowtime = new Date();
	// 	 document.write(nowtime);//类比java
	// 	 //Sat Nov 27 2021 21:59:25 GMT+0800 (中国标准时间)
	// 	 nowtime = nowtime.toLocaleString();
		 
	// 	 document.write(nowtime);//2021/11/27 下午9:41:31
		 
	// 	 //如何自定义日期格式；
		 
	// 	 var t =new Date();
	// 	 var year = t.getFullYear();
	// 	 var month = t.getMonth();//月份是0-11；
	// 	 var day = t.getDay();//日期是一周的第几天，周六为6；
	// 	 //0～6；
	// 	 //day应该是dayOfWeek；
	// 	 document.write("<BR/>");
	// 	document.write(year+"年"+month+"月"+day+"日"+t.getDate()+"号");
		
	// 	//怎么获取总毫秒数：从1970 1-1 0:0:0
	
	// 	alert(t.getTime());
	// 	//作用：返回时间戳；
		<script type="text/javascript">
			// function displaytime(){
			// }
		// displaytime();
		window.onload = function(){
			document.getElementById("button").onclick = function(){
					var time = new Date();
					var Strtime = time.toLocaleString();
					document.getElementById("divtime").innerHTML = Strtime;
				
			}
			
		}
		</script>
		<input type="button" value="显示时间" />
		<!-- //注意加引号； -->
		<BR/>
		<div id="divtime"></div>
	</body>
</html>

据此，可以完成时钟小项目，点击开始按钮，时钟开始，结束按钮，时钟停止：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	<script type="text/javascript">
		function displaytime(){
			 // time= ;//显示当前时间；
			var Strtime = new Date().toLocaleString();
			document.getElementById("divtime").innerHTML = Strtime;
		}
		function start(){
			//每隔一秒调用函数；
			v = window.setInterval("displaytime()",1000);	
		}
		function stop(){
			//停止并记录当前时间；
			window.clearInterval(v);//方法；
		}
	</script>
		<input type="button"  id = "jj" value="显示时间" onclick="start()"/>
		<input type="button"  id = "sop" value="停止按钮" onclick="stop()"/>
		<BR/>
		<div id="divtime" ></div>
		
		
	</body>
</html>

3.6 内置Array数组类

var a = [];
var a2 = [1,2,false,"dsf"];
alert(a2.length);
alert(a.length);

alert(a2[a2.length]);//undefined
//新的创建方法；
var s = new Array(3);//这个3表示数组的长度！！；
alert(s.length);


var s2 = new Array(99,8,7);//这个表示数组的长度为3，3个元素！！；

alert(s2.length);
alert(s2[0]);
//数组拼接
alert(s2.join("-"));//按照顺序连接


//push在尾巴加入元素；
s2.push(100);
alert(s2);

//pop:弹出末尾元素
alert(s2.pop());
alert("长度为"+s2.length);

//JS的数组自自动模拟数据结构，先进后出；
s2.reverse();
alert(s2);

3.7 正则表达式

正则表达式，regular expression，用于字符串匹配，java中、javascript、python中都支持。

第一个：基本规则

.匹配除换行符以外的任意字符
\w匹配字母或数字或下划线或汉字
\s匹配任意的空白符
\d匹配数字
\b匹配单词的开始或结束
^匹配字符串的开始
$匹配字符串的结束

*重复零次或更多次
+重复一次或更多次
?重复零次或一次
{n}重复 n 次
{n,}重复 n 次或更多次
{n,m}重复 n 到 m 次

//反义词；
\W匹配任意不是字母，数字，下划线，汉字的字符
\S匹配任意不是空白符的字符
\D匹配任意非数字的字符
\B匹配不是单词开头或结束的位置
[^x]匹配除了 x 以外的任意字符
[^aeiou]匹配除了 aeiou 这几个字母以外的任意字符

第二个：创建正则表达式

法1：var reg = /正则表达式/flags；
法2：var regexp = new RegExp('正则表达式',"flags")；
//flags可取：
	g：全局匹配
	i：忽略大小写
	m：多行查找；[]ES规范制定后才指定；如果上面/中是正则表达式时，m不能用；

第三个：正则表达式的test()方法

<script>
window.onload = function(){
		var reg = /^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,})$/;
			// reg.test(document.getElementById("email").value)?alert("合法"):alert("非法！");
		var x ;
			//实现效果：输入正确则返回合法，否则提醒重新输入，并且当光标放在输入框时显示请重新输入的文字一字样；
		document.getElementById("btn").onclick = function(){
				if(!(x=reg.test(document.getElementById("email").value))){
					document.getElementById("emailtest").innerText = "不合法不合法";
					document.getElementById("email").onfocus = function(){
						document.getElementById("emailtest").innerText="";
					}
				}
				else{
				document.getElementById("emailtest").innerText = "恭喜终于合法了";	
				}
				// else{
				// 	document.getElementById("emailtest").innerText = "非常合法";
				// }	
			}
			//增加功能，光标回去时显示内容初初始值；
		}
</script>
    <input  type="text"  id="email" /><br/><br/>
    <input  type="button"  value="yanzheng" id="btn" /><br/><br/>
    <span id ="emailtest"  style="color:red;font-size:33px" > </span><br/><br/>

3.8 字符串string的trim拓展

window.onload = function(){
	document.getElementById("password").onclick = function(){
		var s = document.getElementById("username").value;
		s = s.trim();
		alert("对象是="+s+"=对象");
		alert("http://www.baidu.chhomg/".replace(/\//g,"-"));
		//这里不能加^和$符号，因为是字符串的一部分；
		//假设IE不能trim怎么办？
		//扩展trim函数；
	}		
}
String.prototype.trim = function(s){
	// var reg = /^\S*\S*$/;
	// alert("我是重写的trim方法");
	//this表示本字符串
	return this.replace(/^\s*/,"").replace(/\s*$/,"");
	//合并：return this.replace(/^\s|\s*$/,"");
	//这里注意\^和$/是可以分开的，正则表达式；
}

</script>
<input type="text" id="username"/>
<input type="button"  value= "登录" id="password"/>

3.9 大项目：表单验证

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
		window.onload = function(){
			var username;
			document.getElementById("bd").onclick = function(){
				username = document.getElementById("shurukuang").value;
				document.getElementById("sp").innerText = isgood(username);
				document.getElementById("shurukuang").onfocus = function(){
					document.getElementById("sp").innerText = "";
					if(isgood(username)=="登陆失败"){
						document.getElementById("shurukuang").value="";
					}
				}
			}
			//写一部调试异一步；	
		}
		
		isgood = function (username){
		if(username!="" && username.length<=14 && username.length>=6 ){
			//可以直接写if username！
			//注意要去掉前后空白；
			var regexp = /^[0-9a-zA-Z]*$/;
			if(regexp.test(username)){
				if(document.getElementById("pwdinput").value===realpwd){
					return "验证成功";
				}
			}
		}
		return "登陆失败";
		}
		var realpwd = "123456";
		
		<!-- <span id ="emailtest"  style="color:red;font-size:33px" > -->
		
		</script>
		<form action ="http://www.baidu.com" id="form"  method = "post"></form>
		用户名：<input type="text" name="username" id="shurukuang"/><br/><br/>
		密码：<input type="password" name="password" id="pwdinput"/>
		<!-- <span id="sp" style="color:red;font-size:23px"></span><br/><br/> -->
		<span id ="sp"  style="color:red;font-size:33px" ></span><br/><br/>
		<input type="button" value="提交" id="bd"/><BR/><BR/>
		<input type="submit" value=登录""/><BR/><BR/>
		<input type="reset" value=重置""/>
	</body>
</html>
<!--DIV独占一行，span增加一行-->

4.BOM编程

bom，即browser object model，浏览器对象模型，如关闭浏览器窗口、前进后退、获取地址栏URL参数等操作都是属于该模型，可以理解为浏览器的正文上的框内的功能。

4.1 window.open和close方法

<script type="text/javascript">	
</script>
<input type="button" value="开启百度(新窗口)" onclick="window.open('http://www.baidu.com/')"/>
<input type="button" value="开启百度(self 当前窗口)" onclick="window.open('http://www.baidu.com/','_self')"/>
<input type="button" value="开启百度(blank 新窗口)" onclick="window.open('http://www.baidu.com/','_blank')"/>
<input type="button" value="开启百度(parent 父窗口)" onclick="window.open('http://www.baidu.com/','_parent')"/>
<input type="button" value="开启百度(top 顶级窗口)" onclick="window.open('http://www.baidu.com/','_top')"/>
<input type="button" value="开启" onclick="window.open('开启测试.html')"/>
<input type="button" value="guanbi(新窗口)" onclick="window.close('开启测试.html')"/>

4.2 弹出提示框

<body>
	<script type="text/javascript">
	function del(){
		var ok = window.confirm("确认删除数据吗？");
		alert(ok);
	}
	//if(window.confirm("确认删除数据吗？"))
	</script>
	<!--删除操作一定要提醒用户；-->
	<input type="button" value="弹出消息框" onclick="del()"/>
	
</body>

4.3 history历史记录窗口

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1>niahao</h1>
	</body>
	<input type="button" value="后撤" onclick="window.history.back()"/>
	<!-- <input type="button" value="后撤" onclick="window.history.go(-1)"/> -->
    <input type="button" value="前进" onclick="window.history.go(1)"/>
</html>

4.4 顶级窗口设置

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		4444444
		<!-- 如果不是顶级窗口，设置为顶级窗口 -->
		<script type="text/javascript">
			function setTop(){
				console.log(window.top!=window.self);//false;
				if(window.top!=window.self){
					
					window.top.location=window.self.location;
					// window.top=window.self;
					//window.top是顶级窗口设置 窗口
					//window.self是顶级窗口2 窗口
					// window.top.href=window.self;
				}
				
			}
		</script>
		<BR/><input type="button" onclick ="setTop()" value="如果设置为顶级窗口"/>
		<!-- <iframe src="顶级窗口2.html" width="800px" height="500px"></iframe> -->
	</body>
</html>

4.5 浏览器拿到URL方式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
		/*哪些可以通过浏览器网服务器发请求：
		 1.表单form
		 2.超链接
		 3.document.location
		 4.window.location
		 5.window.open("url")
		 6.直接输入URL回车；
		 6.以上所有数据可以携带数据，表单是动态的，超链接是静态的；*/
		gobaidu = function (){
			// window.open("http://www.baidu.com");
			//拿到地址栏的参数；
			// var locationObj = window.location;
			// locationObj.href = "http://www.baidu.com";
			// window.location.href = "http://www.jd.com";
			// document.location.href = "http://www.taobao.com";
			document.location = "http://www.qq.com";
		}
		</script>
		<!-- <iframe src="顶级窗口2.html" width="800px" height="500px"></iframe> -->
	</body>
		<input type="button" value="百度" onclick="gobaidu()"/>
		<!-- <input type="button" value="百度" onclick="window.open(www.baidu.com)"/> -->
		<!-- <input type="button" value="百度" onclick="http://www.baidu.com"/> -->
</html>

5.JSON详解

5.1 json概述

json，javascript object notation，读音：杰森，与XML格式同为通用的数据交换格式，实际开发中使用较多，体积小、易解析、轻量级，而XML体积大、语法严格，一般用作银行，例如前面在javaweb后端的servlet中web.xml我们已经见识过了。

5.2 创建json对象_方法1

//单个json对象
var jsonobj = {
			"sno":"110",
			"sname":"zahgnsan",
			"sex":"男"		};
alert(jsonobj.sno+","+jsonobj.sname+","+jsonobj.sex);

//JSON对象数组
var students = [
	{"sno":"110","sname":"张三","sex":"女"},
	{"sno":"200","sname":"王五","sex":"男"},
	{"sno":"300","sname":"李四","sex":"男"}
		];//注意分号和逗号的使用；
//遍历
for(var i=0;i<students.length;i++){
	alert(students[i].sno+","+students[i].sname+","+students[i].sex);
}
//json嵌套
var user = {
	"usercode":"110",
	"username":"zahgnsan",
	"sex":"男",
	"address":{
		"city":"北京",
		"street":"大兴",
		"zipcode":"40234",
		"aihao":["smoke","drink","tt"]//爱好是数组，其他是json
	}	
};
alert(user.address.city);

【注意】JSON在JS中以{}表示，核心为属性及值，各属性之间用逗号隔开；

5.3 创建json对象_方法2_eval函数的使用

eval是js自带函数，作用是把一串字符串当成js命令解释执行，一般情况下实际开发中是java传过来json格式的string字符串，需要将其转化为json对象。

window.eval("var i=100;");
alert("i="+i);//100
//JDBC连接数据库查询的数据在java程序拼接位JSON格式的字符串，但是还不是json对象！
//可以使用eval函数将其转换为JSON对象；
var fromjava = "{\"name\":\"zhagnsan\",\"password\":\"200\"}";//jaVa发过来的
window.eval("var jsonObj ="+fromjava);//新建一个对象；
alert(jsonObj.name);
alert(jsonObj.password);

5.4 大项目：json建表

<!DOCTYPE html>
<html>
	<CENTER>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
		var jsonObj ={
			"total":3,
			"emps":[
			{"empid":100,"name":"smith","sal":800}	,
			{"empid":200,"name":"haha","sal":900}	,
			{"empid":300,"name":"zdafsf","sal":3000},
			]	
		};
		window.onload = function(){
			document.getElementById("display").onclick = function(){	
				// window.eval("<tbody>");
				var html="";
				for(var i=0;i<jsonObj.total;i++){
							var rowInfo = jsonObj.emps[i];
							html  += "<tr>";
							html  += "<td>"+rowInfo.empid+"</td>";
							html  += "<td>"+rowInfo.name+"</td>";
							html  += "<td>"+rowInfo.sal+"</td>";
							html  += "</tr>";		
							// window.eval(str);//要加入到Tbody的innerHtml中；
			}
			document.getElementById("tby").innerHTML = html;
			document.getElementById("count").innerText = jsonObj.total;
		}}
		</script>
		<input type="button" value="显示员工信息" id="display"/>
		<h2>员工信息表</h2>
		<hr>
		<table border="4px">
			<th>员工编号	</th>
			<th>员工姓名	</th>
			<th>员工薪资	</th>
			<TR/>
			
		<tbody id="tby">
		</tbody>	
			
			
		</table>
		总共<span id="count">0</span>条数
	</body>
	</CENTER>
</html>
<!-- <tbody>
				<tr>
					<td>100</td>
					<td>smith</td>
					<td>800</td>
				</tr>
				<tr>
					<td>200</td>
					<td>haha</td>
					<td>900</td>
				</tr>		
						
				<tr>
					<td>300</td>
					<td>zdafsf</td>
					<td>1000</td>
				</tr>		
				
			</tbody> -->

6.总结

6.1 js调试

在js开发中，一定要写一步调试一步，即测试时打开浏览器的F12，看控制台的报错信息，定位错误。

6.2 JS中[]和{}有什么区别

[]是数组，{}JSON格式；
       java数组：int[] a ={1,2,3,4,5};
       js数组：var x =[1,2,3,4];
       JSON: var obj ={"name":"99","pass":003};
       JSON是一种数据交换标准，在JS中是一个对象的形式存在；
       var obj ={"name":"99","pass":003};
       法1：obj.name;
       法2：obj["name"]

6.3 后续学习路线

//一般是学习JS框架：
       XML
       servlet
       JSP
       EL
       JSTL
       AJAX
       MVC
       动态代理
       Maven
       -->
       

特别的，国企看javase，小公司问项目，直接上手做；大公司问偏原理的东西；sql优化。

这篇关于Java0基础_day17_Javaweb前端_JavaScript的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

Java教程

Java0基础_day17_Javaweb前端_JavaScript

1.JS概述

2.JS基础语法→ES6规范/ECMA-262规范

2.1 数据类型、变量

第一点：变量声明：

第二个：如何随意拓展类的属性

2.2 函数

2.3 控制语句

2.4 事件

2.5 项目：回车键捕捉演示

3.DOM编程

4.BOM编程

5.JSON详解

5.4 大项目：json建表

6.总结

前端开发

后端开发

移动端开发

数据库

服务器运维

人工智能

区块链

游戏开发

网站运营

大数据/云计算

软件工程

软件/开发工具使用

资讯