Java教程

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
         -->
        <!-- 框架Spring,Springmvc,mybatics,ssm三大框架 -->

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

 

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