玩转JavaScript

javascript:运行在浏览器上的脚本语言
网景公司(目前被美国在线收购)
不需要程序员手动编译,编写完代码后,浏览器直接打开解释执行
js的目标程序一普通文本形式保存,这种语言都叫脚本语言
js到底是干啥的?
配合HTML
js包含三块:ECMAScript,DOM,BOM
ECMAScript:是JECMA指定的262表准,js和JScript都遵守这个标准,ECMAScript是js的核心语法
DOM编程是通过javaScript对HTML中的dom节点进行操作,DOM是有规范的,DOM规范是W3C制定的
BOM编程是对浏览器本身操作,例如:前进,后退,地址栏,关闭窗口,弹窗。由于浏览器有不同
   的厂家制造,所以BOM缺少规范,一般只有一个默认的行业规范。
在HTML嵌入JavaScript代码的方法?
①<input type='button' value='hello' οnclick='alert('hello js')'/>
js是一门事件驱动型的编程语言,依靠事件去驱动,然后执行对应得程序
在js中有很多事件,其中有一个事件叫做:鼠标单击,单词:click。并且任何事件都会对应一个事件句柄叫做:onclick.
事件和事件句柄的区别是:事件句柄是在事件单词前添加一个on,而事件句柄是以HTML标签的属性存在的
原理:οnclick='js代码',页面打开时,js代码并不会执行,只是把这段代码注册到按钮的click事件上了,等到这个按钮发生click之后,注册在onclick上的代码会被浏览器自动调用
-在js中有一个内置的对对象叫做window全部小写,可以直接拿来使用,window代表的是浏览器对象。window对象有一个函数叫做:alert,用法是:window.alert("消息");这样就是弹窗了。
-js中的字符串可以使用双引号,也可以使用单引号
-js中的一条语句结束后可以使用分号,也可以不用
window.可以省略
②脚本快(位置随意)
<script type=''text/javascript''/>
              window.alert("hello world!");
           </script>
暴露在脚本块当中的程序,在页面打开的时候执行,
并且遵守自上而下的顺序依次逐行执行
③(推荐)引入外部独立的文件
<srcipt type="text/javascript" src='js/1.js'></script>
标识符和关键字
标识符命名规则:数字,字母,下划线,美元符号
不能以数字开头
严格区分大小写
标识符不能与关键字冲突
标识符命名规范:类名和接口名:驼峰命名法,
方法名和变量名:首字母小写后面单词首字母大写,
常量名:全部大写,单词间用下划线连接

script 中的变量
声明变量:var变量名;
赋值:变量名=值
js是一种弱类型的语言,没有编译阶段,一个变量可以随意赋值,赋什么值都行
var i=100;
i=false;
i="abc"
i=new object();
i=3.14;
重点:js是一种弱类型的编程语言。

js函数初步
<script type="text/javacript"></script>
等同于Java的方法
格式:
js中的方法不需要指定返回值类型,返回啥类型都行

①function 函数名(形参列表){  函数体 }
②函数名=function(形参列表){函数体 ;}
function sum(a,b){
//a和b都是局部变量,他们都是形参(a和b都是变量名,变量名随意)
alert(a+b);  
}
函数必须调用才能执行
sum(10,20)
java中得方法有重载机制,js中有吗?
重载:方法名或者函数名一样,形参不同(个数、类型、顺序)
js中如果有同名函数,后面的函数会替代前一个
在js中定义的函数尽量不要重名,在js中分辨函数就靠函数名分辨,
js得去全局变量,和局部变量
①生命周期不一样,在函数体之外声明的变量属于全局变量,全局变量得生命周期是:浏览器打开时声明,关闭时销毁
  尽量少用,应为他会一直暂用浏览器得内存空间
②局部变量:函数体内,函数的形参也属于局部变量
 局部变量得生命周期是:从函数开始执行时局部变量的内存空间开辟,函数执行结束后,局部变量得内存空间释放
局部变量得生命周期较短
如果变量在声明时没有使用var关键字,无论在哪里声明得都是全局变量
js中得数据类型
赋值时数据还是有类型得
js中数据类型:原始类型,引用类型
原始类型:undefined\Number\String\Boolean\Null
引用类型:Object以及其子类
2、在es规范之后又基于以上的六种类型之外又添加一种Symbol
3、js中有一个运算符叫做typeof,这个运算符可以在程序的运行阶段动态的获取变量的数据类型
typeof运算符的语法格式    typeof 变量名
typeof运算符的运算结果是以下6个字符串之一:全部小写
“undefined”"number" "string" "boolean" "object" "function"
4、在js中比较字符串是否相等使用“==”完成,没有equals
//求和,要求a\b变量将来的数据类型必须是数字,不能是其他类型
function sum(a,b){
    if(typeof a=="number" && typeof b=="number"){
                    return a+b;
                     }
                   alert(a+","+b+"必须为数字");
}
null属于Null类型,但是typeof的结果是object
当一个变量没有手动赋值,系统默认赋值
number类型包括小数,正数,负数,整数,无穷大
NaN:表示not a number,不是一个数值,但属于number类型
、、运算结果本来因该是一个数字,最后算完不是一个数字的时候不是一个数字,就会出现他
+号两端只要有一个不是数字。加号就不会做求和运算,做字符串拼接
Infinity(当除数为0时,结果为无穷大)
isNaN函数?
①isNaN(数据),结果是true表示不是一个数字,结果是false表示是一个数字
is not a number
②parseInt()函数可以将字符串自动转换成数字,并且取正整数位
③parseFloat()函数将字符串自动转换成数字,
④Math.ceil()函数(Math是数学类,数学类当中有一个函数叫做ceil(),作用是向上取整。)
Math.ceil("2.1")---------3
js中布尔类型:
①true,false
②在布尔类型中有一个函数叫做:boolean(),作用:将非布尔类的数据转换成布尔类型
转换规律:有就转换成true没有就转换成false
String类型:
1.在js当中字符串可以使用单引号,也可以使用双引号
2,创建字符串对象的方式
   --var s="abc";
   --String是js内置的支持类,可以直接用,String的父类object 
     var s2=new String("abc");
小string属于原始类型string
大String 属于Object
3.无论大小,他们的属性和函数都是通用的
4.关于String类型的常用属性和函数?
     属性:length  获取字符串长度
     函数:indexof :获取指定字符串在当前支付穿中第一次出现处的索引
               lastIndexof:获取指定字符串在当前支付穿中最后一次出现处的索引
               replace:替换
               substr :截取子字符串
               substring:截取子字符串
               toLowerCase 转换大小写
               toUpperCase
               split:拆分字符串
alert(“HTTP://baidu.com”.indexof("http"))-------0
alert(“HTTP://baidu.com”.indexof("https"))-------(-1)
--判断一个字符串中是否包含某个子字符串?
alert(“HTTP://baidu.com”.indexof("http"))-------(>=0?包含:不包含)

replace
alert("name=value%name=value%name=value".replace("%","&"))--将%替换成&(只替换第一个)
继续调用replace就会继续替换
正则表达式来实现替换所有
substr和substring有啥区别?
substr(startIndex,length)
alert("abcdefxyz".substr(2,4));//cdef
substr(startIndex,endIndex)     注意:不包括endIndex
alert("abcdefxyz".substring(2,4));//cd

Object类型:
 1、Object类型是所有类型的超类,自定义的任何类型,默认继承object
2、object类包括哪些属性?
    prototype属性(常用的,主要是这个):作用是给动态的扩展属性和函数。
  constructor属性
3.object类包括那些函数?
 toString()
 valueof()
  toLocaleString()
4.在js中定义的类默认继承object,会继承object类中所有的属性以及函数。
  换句话说,自己定义的类中也有prototype属性
5.在js中怎样定义类?怎样new对象?
定义的语法:
 ①function 类名(形参){}
② 类名=function(形参){}
创建对象的语法:new 构造方法名(实参)//构造方法名和类名一致
定义一个函数sayHello  
 function sayHello(){}
①把sayHello当成一个普通函数来调用sayHello(); 
②把sayHello当作一个类来创建对象
    var obj=new Student();obj是一个引用,保存内存地址指向堆中的对象
JS中类的定义,同时又是一个构造函数的定义
在JS中类的定义和构造函数的定义是放在一起来完成的
function User(a,b,c){abc是形参,局部变量
    声明属性this表示当前对象
user类中有3个属性:sno\sname\sage
this.sno=a;
this.sname=b;
this.sage=c;
}
//创建对象
var u1=new User(111,"zansan",30);
//访问对象属性
alert(u1.sno);
alert(u1.sname);
alert(u1.sage);

var u2=new User(222,"zansan",30);
alert(u2["sno"]);
alert(u2["sname"]);
alert(u2["sage"]);

Emp=function(ename,sal){ this.ename=ename;this.sal=sal; }

Product =function(pno,pname,price){
   //属性
    this.pno=pno;
    this.pname=pname;
    this.price=price;
  //函数
   this.getPrice=function(){
    return this.price;
   }
}
 
var pro=new Product(111,"xigua1",4.0);
var pri=pro.getPrice();
alert(pri);
可以通过prototype这个属性来给类动态扩展属性以及函数
Product.prototype.getPname=function(){
  return this.pname;
 }
//调用扩展的函数
var pname=pri.getPname();
alert(pname);
 
给String扩展一个函数
String.prototype.suiyi=function(){
 alert("这个是给String类型扩展的一个函数");
}
"abc".suiyi();

User=function(username,password){
 this.username=username;
this.password=password;
 }
var u=new User ();
var u=new User("zahng1");
var u=new User("zahng",333);
null NaN undefined区别?
①数据类型不一致 object,number,undefined
②null和undefined可以等同
alert(null==undefined)//true
//在JS中有两个比较特殊的运算符
==;等同运算符:只判断值是否相等
===;全等运算符:既判断值是否相等,有判断数据类型是否相等
JS中常用事件:
 1.blur失去焦点
 2.foucus获得焦点

3.change下拉列表选项中项改变,或文本框内容改变

4.keydown键盘按下
5.keyup键盘弹起

6.mousedown鼠标按下
  mouseover鼠标经过
  mousemove鼠标移动
  mouseout鼠标离开
  mouseup鼠标弹起

   reset表单重置
   submit表单提交

7.load页面加载完毕(页面中的所有元素全部加载完毕之后发生)

8.select文本被选定

任何一个事件都会对应一个事件句柄,事件句柄是在事件前加on
onxxx这个事件句柄出现在一个标签的属性位置上。(事件句柄以属性的形式存在)

回调函数(自己把这个函数代码写出来了,但是这个函数不是自己负责调用,由其他程序负责调用该函数)
①注册事件的第一种方式,直接在标签中使用事件句柄
function sayHello(){alert ("hello js")}
以下代码的含义是:将sayHello函数注册到按钮上,等待click事件发生后,该函被浏览器调用。我们成这个函数为回调函数;
<input type='button' value="hello" οnclick="sayHello()"/>
②事件注册的第二种方式(使用纯JS代码完成事件的注册)
 
<input type="button" value="hello" id="mybtn"/>
<script 
第一步:先获取这个按钮对象(document,内置对象,可以直接用,document就是代表整个HTML页面)
var btnobject=document.getElementById("mybtn");
第二部:给按钮对象的onclick属性赋值
btnobj.οnclick=回调函数;//注意千万别加小阔号(回调函数)
这行代码的含义是,将回调函数注册到click事件上
var btnobject1=document.getElementById("mybtn1");
mybtn1.οnclick=function(){ 
 alert("text")
}
这个函数没有名子,叫做匿名函数,这个匿名函数也是一个回调函数
这个函数在页面打开的时候只是注册上,不会被调用,在click事件发生之后才会调用

终极格式
document.getelementbyId("mybtn").οnclick=function(){
 alert("hello")
}
</script>

关于JS代码的执行顺序
<body οnlοad="ready()">
<script type="text/javascript">
function ready(){
   var btn=document.getElementById("btn");
  btn.οnclick=function(){
  alert("hello js");
  }
}
</script>
<input type="button" value="hello" id="btn">
</body>
-------------------------------------------------------------
变形(推荐)
<body >
<script type="text/javascript">
//页面加载的过程中,将a函数注册给了load事件
//页面加载完毕后,load事件发生了,此时执行回调函数a
//回调函数A执行的过程中,把b函数注册给了id=“btn”的click事件
//当id="btn"的节点发生click事件之后,b函数被调用并执行
window.οnlοad=function(){//回调函数a
   document.getElementById("btn").οnclick=function(){//回调函数b
  alert("hello js");
  }
}
}
</script>
<input type="button" value="hello" id="btn"/>
</body>

JS代码设置节点的属性
<body>
<script type="text/javascript">
   window.οnlοad=function(){
      document.getElementById("btn").οnclick=function(){
                    var mytext=document.getElementById("mytext");
                         //一个节点对象中只要有的属性都可以“.”
                        mytext.type="checkbox"
             }
    }
</script>
<input type="text" id="mytext"/>
<input type="button" value=”hello“ id="btn">
</body>

//捕捉回车键
<body>
 <script type="text/javascript">
     window.οnlοad=function(){
      var mytext=document.getElementById("mytext");
      mytext.onkeydow=function(event){event是局部变量,会接受一个事件对象
                //获取键值回车键的键值是13,esc的键值是27
               //对于键盘事件对象来说,都有keyCode属性用来获取键值
              if(event.keyCode===13){ alert("正在进行验证。。。");}
 }
    }
</script>
<inpout type="text" id="mytext"/>
</body>

运算符之void(javascript:void(0)的用法)
<a href="javascript:void(0)" οnclick="window.alert('hello world')"></a>
void运算的语法:void(表达式)
运算原理:执行表达式,但不返回任何结果
javascript:的作用是告诉浏览器后面是一个代码而不是一个路径
另外()里必须有表达式

JS的控制语句
①if
②switch
③while
④do...while
⑤for
⑥break
⑦continue
⑧for...in语句(了解)
⑨with(了解)
//创建JS数组(js中的数组写啥都行,类型随意,元素的个数随意)
var arr=[false,true,1,2,"abc",3.14];
//遍历数组
for(var i=0;i<arr.length;i++){ alert(arr[i]);}
//for...in
for(var i in arr){
 arr(i);
}
(i是数组元素的下标,for..in语句可以遍历对象的属性,在对象中是String类型的属性名)

alert(u.username);
alert(u.password);
with(u){alert(password,password);}
以上with语句不推荐使用
-------------------------------------------------------------------------------------------------------------------(DOM)

  js包含三块:ECMAScript,DOM,BOM
1,    ECMAScript:js核心语法(ES规范/ECMA-262标准)
    DOM编程是:文档对象模型:对网页当中的节点进行增删的过程。HTML文档被当作DOM树来看待
    BOM编程是:关闭浏览器窗口,打开一个新的浏览器窗口,后退,前进,浏览器地址栏上的地址等,都是BOM编程
2,DOM和BOM的区别和联系?
BOM的顶级对象是window
DOM的顶级对象是document
实际上BOM是包括DOM的!

DOM-设置和获取文本框的value
<body >
<script type="text/javascript">
window.οnlοad=function(){
        document.getElementById("btn").onclick()=function(){
                  //获取username节点
   //      alert(document.getElementById("username").value);
             //还可以修改value
           document.getElementById("username").value="张三"
 }
    }
</script>
<input type="text" id="username"/>
<input type="button" value="获取文本框的value值" id="btn"/>
</body>

案例二:将第一个文本框里的内容赋值到第二个文本框内
   <body>
    <script type="text/javascript">
   window.οnlοad=function () {
       document.getElementById("btn").οnclick=function () {
            document.getElementById("text2").value=document.getElementById("text1").value;
       }
   }
</script>
<input type="text" id="text1"/><br>
<input type="text" id="text2"/><br>
<input type="button" value="将文本框1内的值赋给文本框2中" id="btn"/>
   </body>

<!--blur事件:失去焦点事件-->
<input type="text" οnblur="alert(this.value)"/>

DOM-innerHTML和innerText操作div和span
<script type="text/javascript">
    window.onload = function () {
        document.getElementById("btn").onclick = function () {
            //获取div对象
            //document.getElementById("div1").innerHTML="<font color='aqua'>用户名不能为空!</font>";
            document.getElementById("div1").innerText = "<font color='aqua'>用户名不能为空!</font>";

        }
    }
</script>
<input type="button" value="设置div中的内容" id="btn">
<div id="div1" align="center"></div>

innerText和innerHTML都是属性,都是设置元素内部的内容

<!--正则表达式
1.正则表达式主要用在字符串格式匹配
2.正则表达式实际上是一门独立的学科,在Java语言中支持,c语言中也支持,JS中也支持,等大部分的语言都支持。目前计算机编程领域。用作字符串格式匹配。包括
搜索方面
3.在Javascript当中,怎么创建正则表达式对象(new对象)
  在javascript当中,正则表达式对象有哪些方法(调方法)
4.要快速从网络上找到自己需要的正则表达式。并且测试其有效性

①常见的正则表达式符号?
.  匹配除换行符以外的任意字符
\w \W(不是) 匹配字母或数字或下划线或汉字
\s  \S(不是)匹配任意的空白符
\d  \D(不是)匹配数字
\b  \B(不是)匹配单词的开始或结束
^   匹配字符串的开始
$   匹配字符串的结束
[^x] 匹配除了x以外的任意字符
[^aeiou] 匹配除了aeiou这几个字母以外的任意字符

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


5.简单的正则表达式要会写
  QQ号正则表达式:^[1-9][0-9]{4,}$
[1-9]表示1-9的任意1个数字(次数是一次)
[A-Za-z0-9]表示A-Za-z0-9中任意1个字符
[A-Za-z0-9-]表示A-Z、a-z、0-9、-,以上所有字符中的任意1个字符
|  表示或者
创建正则表达式对象,怎么调用正则表达式对象的方法?
方法一;
 var regExp=/正则表达式/flags;
方法二:
  var regExp=new RegExp("正则表达式","flags");
  
  关于flags:
    g:全局匹配
    i:忽略大小写
    m:多行搜索(当前面是正则表达式的时候,m不能用。只有前面是普通字符串的时候,m才可以使用)
-->
案例:邮箱验证

<script type="text/javascript">
    window.onload = function () {
        document.getElementById("btn").onclick = function () {
            var email = document.getElementById("email").value;
            var eamilRegExp = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
            var ok = eamilRegExp.test(email);
            if (ok) {
                document.getElementById("emailerror").innerText = "邮箱地址合法!";
            } else {
                document.getElementById("emailerror").innerText = "邮箱地址不合法!";
            }
            document.getElementById("email").onfocus=function () {
                document.getElementById("emailerror").innerText="";
            }
        }}
</script>
<input type="text" id="email"/>
<input type="button" value="验证邮箱" id="btn"><br>
<span id="emailerror" style="color: red;font-size: 12px;"></span>


 

去除字符串的前后空白:trim()函数
document.getElementById("aaa").value.trim();

//低版本的IE浏览器不支持字符串的trim函数
//可以自己对String类扩展一个全新的trim函数
String.prototype.trim=function(){
 //在当前的方法中的this代表的就是当前字符串
//return this.replace("前空白","").replace("后空白","")
return this.replace(/^\s+/,"").replace(/\s+$/,"");
}
案例:
<!--
  表单验证:
    ①用户名不能为空
    ②用户名必须在6-14位之间
    ③用户名只能有数字和字母组成,不能含有其他符号
    ④密码和确认密码一致,邮箱地址合法
    ⑤统一失去焦点验证
    ⑥错误提示信息统一在span标签中提示,并且要求字体12号,红色
    ⑦文本框再次获得焦点后,清空错误提示信息,如果文本框中数据不合法要求清空文本框的value
    ⑧最终表单中所有项均合法方法可提交
-->
判断所有表单项合法,然后提交表单

document.getElementById("submitbtn").onclick=function () {
                  //当所有信息合法的时候提交表单
            //触发username的blur password2的blur Email的blur
            document.getElementById("username").focus();
            document.getElementById("username").blur();

            document.getElementById("password2").focus();
            document.getElementById("password2").blur();

            document.getElementById("email").focus();
            document.getElementById("email").blur();
            if (usernameerrorspan.innerText=="" && passwordspan.innerText=="" && emailerrorspan.innerText=="")
            {
                var userformEle=document.getElementById("userform");
                userformEle.action="http://localhost:8080/jd/save";
                userformEle.submit;
            }

复选框的全选和取消全选

<body>
<script type="text/javascript">
    window.onload = function () {
        var aihaos = document.getElementsByName("aihao");
        document.getElementById("firstcheck").onclick = function () {
            for (var i = 0; i < aihaos.length; i++) {
                aihaos[i].checked = firstcheck.checked;
            }
        }
        var all=aihaos.length;
        for (var i = 0; i < aihaos.length; i++) {
            aihaos[i].onclick = function () {
                //总量复选框等于选中量的时候,第一个复选框被选中
                var flag=0;
                for (var i=0;i<aihaos.length;i++){
                    if (aihaos[i].checked){
                        flag++;
                    }
                }
                firstcheck.checked=(all==flag);
            }
        }
    }
</script>
<input type="checkbox" id="firstcheck"/><br>
<input type="checkbox" name="aihao" value="smoke"/>吸烟<br>
<input type="checkbox" name="aihao" value="drink"/>喝酒<br>
<input type="checkbox" name="aihao" value="tt"/>烫头<br>
</body>


 


获取下拉列表选项中项的value(οnchange=alert("this.value"))

<select onchange=alert("this.value")>
    <option value="001">--请选择省份--</option>
    <option value="002">河南省</option>
    <option value="003">江苏省</option>
    <option value="004">云南省</option>
    <option value="005">河北省</option>
    <option value="006">安徽省</option>
</select>

/*
    * 关于JS中的内置类:Date,可以用来获取事件和日期
    * */
    //获取系统当前时间
    var nowTime=new Date();
    //输出
    document.write(nowTime);
//转换成具有本地语言环境的日期格式
    nowTime=nowTime.toLocaleString();
    document.write(nowTime);
案例:获取系统当前时间(不断更新)

<script type="text/javascript">
    function displayTime() {
          var time=new Date();
          var timeStr=time.toLocaleString();
          document.getElementById("timeDiv").innerText=timeStr;
    }
 //每格一秒调用函数
    function start() {
        window.setInterval("displayTime()",1000);//每个一秒调用displaytime函数
    }
</script>


<br><br>
<input type="button" id="timebtn" value="获取当前时间" οnclick="start();"/>
<div id="timeDiv"></div>

//每格一秒调用函数
    function start() {
       v= window.setInterval("displayTime()",1000);//每个一秒调用displaytime函数
    }
    //时间停止函数
    function stop() {
       window.clearInterval(v);
    }

①window.setInterval("displayTime()",1000);//每个一秒调用displaytime函数
②window.clearInterval(v);

数组内置Array
//创建长度为0的数组
     var arr=[];
     var arr2=[1,2,3,false,"abc",3.14];
     //添加元素
     arr2[7]="test";
     document.write("<br>");
     for (var i=0;i<arr2.length;i++){         //数组中没有的会用undefined代替
         document.write(arr2[i]+"<br>");
     }

     //另一种创建数组的对象的方式
     var a=new Array();//长度为零
     var a2=new Array(3);//长度为3
     var a3=new Array(3,2);//长度为2(3和2代表两个元素)
     
     var a=[1,2,3,9];
     var str=a.join("-");//”1-2-3-9“
     
     //在数组的末尾添加一个元素(数组长度+1)
     a.push(10);
     
     //将数组末尾的元素弹出(数组长度-1)
     var endElt=a.pop();
     //注意:JS中的数组可以自动模拟栈数据结构:后进先出,先进后出
--------------------------------------------------------------------------------------------------------------(BOM)
1.BOM编程中,window对象是顶级对象,代表浏览器窗口
2.window有open和close方法,可以开启窗口和关闭窗口
window.open('http://www.baidu.com','s_self');
window.close();//关闭当前页

弹出消息框和确认框
window.alert("消息框");
var ok=window.confirm("亲,确认删除数据吗?")
根据这个🆗返回值类型来判断删与不删

history对象
window.history.back();
window.history.go(-1);
设置浏览器地址栏上的URL
①var locationobj=window.location;//获取地址栏的地址
locationobj.herf="http://www.baidu.com"
②window.location.herf="http://jd.com";
③window.location="http://jd.com";
④document.location.herf="http://www.jd.com";
⑤document.location="http://www.jd.com";


总结:有哪些方法可以通过浏览器网服务器发请求?
1,表单from的提交
2,超链接
3,document.location
4,window.location
5,window.open("url")
这几种方式都可以携带数据给服务器,只有通过表单提交的数据才是动态的

将当前窗口设置成顶级窗口
长时间不操作的话,会显示重新登录,但是登录页还是显示在工作区的窗口中,但是其他位置还是正常的。
这样我们就需要将登陆页面设置成顶级窗口

if(window.top!=window.self){
//将当前窗口设置为   
window.top.location = window.self.location;
}

将005页面引入到当前网页中
<iframe src="005.html" width="" height=""></iframe>


JSON
1.什么是JSON?
JavaScript Object Notation.(数据交换格式)
JSON主要的作用是:一种标准的数据交换格式。(目前非常流行,90%以上的系统,系统A与系统B交换数据的话,都是采用JSON)
2.JSON是一种标准的轻量级的数据交换格式。特点是:
                                体积小,易解析
3.在实际的开发中有两种数据交换格式,使用最多,其一是JSON,另一个是XML
    XML体积较大,解析麻烦,但是有其优点是:语法严谨。(通常银行相关的系统之间进行数据交换的话会使用XML)
HTML和XML有一个父亲:SGML(标准通用标记语言)
HTML主要做页面展示:所以语法松散。很随意
XML主要做数据存储和数据描述:所以语法相当严格。

//创建JSON对象(无类型对象。)
var jsonObj={
 "sno":"110",
"sname":"张三",
"sex" :"男"
};

//访问json对象的属性
alert(studentObj.sno+","+studentObj.sname+","+studentObj.sex);

var students=[{"sno":"110","sname":"zahngsam","sex":"男"},{.......},{........}];

案例:

 var user={
        "son":"001",
        "name":"张三",
        "sex":"男",
        "address":{
            "city":"北京",
            "street":"大兴区",
            "zipcode":"52125"
        },
        "aihao":["somke","drink"]
    };


    //访问人名和城市
    alert(user.name+","+user.address.city);

eval函数的作用是:
  将字符串当作一段代码解释并执行。
window.eval("var i=100;");
alert("i="+i)//i=100
//java连接数据库,查询数据之后,将数据在Java程序中拼接成JSON格式的”字符串“,将JSON格式的字符串相应到浏览器
//也就是说Java响应到浏览器上的仅仅是一个“JSON格式的字符串”,还不是一个JSON对象
//可以使用eval函数,将json格式的字符串转换成json对象
例子:

var fromjava="{\"name\":\"zzahnsan\",\"password\":\"123\"}";//这是Jav程序相应过来的json格式的字符串
//将以上格式的字符串转换成json对象
window.eval("var jsonObj="+fromjava);
//访问json对象
alert(jsonObj.name+jsonObj.pasword);//在前端取数据

面试题:
 在JS当中:[]和{}有什莫区别?
[] 是数组
{}是JSON

Java中的数组:int [] arr={1,2,3,4,5};
json中的数组:var arr=[1,2,3,4,5];
JSON:var jsonObj={"email":"zahnsan@123.com","age":25};

访问JSON对象的属性
json.username
json["username"]

//案例:

var data = {
        "toal": 4,
        "emps": [
            {"sno": "01", "sname": "咋还能", "sex": "男"},
            {"sno": "02", "sname": "六的哈", "sex": "女"},
            {"sno": "03", "sname": "麻花疼", "sex": "男"}
        ]
    };
    window.onload = function () {
        var displaybtn = document.getElementById("display");
        displaybtn.onclick = function () {
            var html = "";
            var emps = data.emps;
            for (var i = 0; i < emps.length; i++) {
                var emp = emps[i];

                html += "<tr>"
                html += "<td>"+emp.sno+"</td>"
                html += "<td>"+emp.sname+"</td>"
                html += "<td>"+emp.sex+"</td>"
                html += "</tr>"
            }
            document.getElementById("emptbody").innerHTML=html;
        }
    }

<input type="button" value="显示员工信息表" id="display"/>
<h2>员工信息表</h2>
<hr>
<table border="1px" width="50%">
    <tr>
        <td>编号</td>
        <td>姓名</td>
        <td>性别</td>
    </tr>
    <tbody id="emptbody">
    </tbody>
</table>
</body>


---------------------------------------------------------------------JS完结
以后纯js的机会会很少:
一般都会使用JS框架
jQuery

---------------------------------------------------------------
稍后会学
XML
servlet
Filter
Listener
JSP
EL
JSTL
AJAX
MVC架构模式
动态代理
Maven

----------------------------------------------到这基础学完了
然后框架
Spring
SpringMVC
MyBatis

SSM三大框架

  • 24
    点赞
  • 24
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

知识冷不丁进了脑子

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值