Java0基础_day17_Javaweb前端_JavaScript
2021/11/28 14:11:57
本文主要是介绍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的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
- 2024-11-15JavaMailSender是什么，怎么使用？-icode9专业技术文章分享
- 2024-11-15JWT 用户校验学习：从入门到实践
- 2024-11-15Nest学习：新手入门全面指南
- 2024-11-15RestfulAPI学习：新手入门指南
- 2024-11-15Server Component学习：入门教程与实践指南
- 2024-11-15动态路由入门：新手必读指南
- 2024-11-15JWT 用户校验入门：轻松掌握JWT认证基础
- 2024-11-15Nest后端开发入门指南
- 2024-11-15Nest后端开发入门教程
- 2024-11-15RestfulAPI入门：新手快速上手指南
