标签：function Javaweb JavaScript window alert getElementById day17 var document
标签：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);//NaNNumber有四个重点掌握的函数：
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优化。
标签：function,Javaweb,JavaScript,window,alert,getElementById,day17,var,document 来源： https://blog.csdn.net/zhugeheihei/article/details/121587871
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。