JavaScriptDemo | biubiubiu0706

总体分三块,ECMAScript,DOM,BOM

ECMAScript:JS的核心语法(ES规范/ECMA-262标准)
DOM:Document Object Model(文档对象模型:对网页当中的节点进行增删改的过程)HTML文档
被当做一颗DOM树来看待比如 var domObj=document.getElmentById("id")
BOM编程:DOM的顶级对象:document，BOM的顶级对象:window

---------------------------------------------------------------------------------------------------

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>HTML中嵌入JavaScript的第一种方式</title>
   </head>
   <body>
       
       <input type="button" value="hello" οnclick="window.alert('Hello JavaScirpt!!!')"/>
       <input type="button" value="hello" οnclick='window.alert("Hello JavaScirpt!!!")'/>

       <input type="button" value="hello" οnclick='window.alert("Hello JavaScirpt!!!");
                                                   window.alert("Hello zhangsan");
                                                   window.alert("Hello lisi");
                                                   window.alert("Hello wangwu")'/>


                       
       <input type="button" value="hello" οnclick='alert("Hello JavaScirpt!!!")
                                                   alert("Hello zhangsan")
                                                   alert("Hello lisi")
                                                   alert("Hello wangwu")'/>
   </body>
</html>

---------------------------------------------------------------------------------------------------

<script type="text/javascript">
   alert("1")
</script>
<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>HTML中嵌入JS代码的第二种方式</title>
       <script type="text/javascript">
           alert("2")
       </script>
   </head>
   <body>

       <input type="button" value="一个按钮" />



       
       <script type="text/javascript">
       /*
           暴露在脚本块当中的程序,在页面打开的时候执行,
           并且遵守自上而下的顺序依次逐行执行 (这个代码的执行不需要事件)
       */
           alert("3")//alert()函数会阻塞整个HTML页面的加载
           window.alert("Hello World!!!")
       </script>



   </body>
</html>

---------------------------------------------------------------------------------------------------

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>HTML中嵌入JS代码的第三种方式</title>
   </head>
   <body>

       
       <script type="text/javascript" src="js/newJs.js"></script>

       
       <script type="text/javascript" src="js/newJs.js"></script>


       


       <script type="text/javascript">
           window.alert(2)
       </script> -->
   </body>
</html>

--------------------------------------------------------------------------------------------------------

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>关于JS中的变量</title>
   </head>
   <body>

       <script type="text/javascript">
           /*
               javaScript当中的变量
                   声明变量
                       var 变量名;
                   给变量赋值
                       变量名=值
                   javaScript是一种弱类型语言,没有编译阶段,一个变量可以随意赋值,赋什么类型的值都行
                       var i=100;
                       i=false;
                       i="abc";
                       i=new Object();
                       i=3.14;

           */
           //在JS中只声明没有赋值默认undefined 在JS中undefined也是一个值
           var i;
           alert("i="+i)
           alert(undefined)
           var k=undefined;
           alert("k="+k)
           //声明没有赋值是undefined 没有声明是 is not defined
           //JS中一个变量没有声明/定义直接访问
           //alert(age)// F12 console 004-关于JS中的变量.html:32 Uncaught ReferenceError: age is not defined

           var a,b,c=200;
           alert("a="+a)//undefined
           alert("b="+b)//undefined
           alert("c="+c)//200

           a=false;
           a="abc"
           a=1.2
           alert("a="+a)//以最后赋值为准
       </script>
   </body>
</html>

------------------------------------------------------------------------------------------------------------------

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>JS函数初步</title>
   </head>
   <body>


       <script type="text/javascript">
           /*
               1.JS中函数
                   等同于java语言中的方法,函数也是一段可以被重复利用的代码片段
                   函数一般都是可以完成某个特定功能
               2.JS中的变量是一种弱类型的,函数的定义
                   语法格式:
                       第一中方式
                           function 函数名(形式参数列表){
                               函数体
                           }
                       第二种方式
                           函数名=function(形式参数列表){
                               函数体
                           }
                   JS中的函数不需要返回指定类型,返回什么类型都行
           */
           function sum(a,b){//不要写成var a,var b
               //a和b都是局部变量,他们都是形参(a和b都是变量名,变量名随意)
               alert(a+b)
           }
           //函数必须调用才能执行
           sum(10,20)

           //定义函数第二种方式
           sayHello=function(username){
               alert("hello!!"+username)
           }
           //调用函数
           sayHello("zhangsan")
       </script>

       <input type="button" value="hello" οnclick="sayHello('jack')" />
       <input type="button" value="计算10和20求和" οnclick="sum(10,20)" />
   </body>
</html>

----------------------------------------------------------------------------------------------------------

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>JS函数初步</title>
   </head>
   <body>


       <script type="text/javascript">
           /*
               JS当中的函数在调用的时候,参数的类型没有限制,并且参数的个数也没有限制,很随意
               JS中没有重载,同名函数后面的覆盖前面的
           */
           function sum(a,b){
               return a+b;
           }
           //调用函数sum
           var retValue=sum(1,2)
           alert(retValue)//3

           var retValue2=sum("jack")//jack赋值给a变量,b变量没有赋值系统默认undefined
           alert(retValue2)//jackundefined

           var retValue3=sum()
           alert(retValue3)//NaN(NaN是一个具体存在的值,该值表示不是数字.Not a Number)


           function test(a,b){
               console.log(1)
               return a+b;
           }
           function test(a){//后面的会把前面的覆盖掉
               console.log(2)
               return a;
           }

           alert(test(1,2))
       </script>
   </body>
</html>

-----------------------------------------------------------------------------------------------------

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>JS局部变量和全局变量</title>
   </head>
   <body>


       <script type="text/javascript">
           /*
               全局变量:
                   在函数体之外声明的变量属于全局变量,全局变量的生命周期是:浏览器打开时声明,
                   浏览器关闭时销毁,尽量少用.因为全局变量会一直在浏览器的内存当中,耗费内存空间
               局部变量:
                   在函数体当中声明的变量,包括一个函数的形参都属于局部变量,
                   局部变量的声明周期是:函数开始执行时局部变量的内存空间开辟,函数执行结束之后,
                   局部变量的内存空间释放.局部变量的生命周期较短

           */
           //全局变量
           var i=100
           function accessI(){
               //访问的是全局变量
               alert("i="+i)
           }

           accessI()

           //全局变量
           var username="jack"

           function accessUserName(){
               //局部变量
               var username="lisi"
               //就近原则,访问的局部变量
               alert("userName="+username)//lisi
           }
           //调用函数,访问局部变量
           accessUserName()
           //访问全局变量
           alert(username)//jack

           function accessAge(){
               var age=20
               alert("年龄:"+age)
           }

           accessAge();

           //alert("age="+age)//声明了没赋值是undefined,这里连声明都没声明 age is not defined

           //以下语法比较奇怪
           function myfun(){
               myname="asdasd"
           }

           //访问函数
           myfun()

           alert("myname="+myname)//asdasd 原因:JS中如果一个变量声明时没有带var 这个变量就是全局变量
       </script>
   </body>
</html>

-------------------------------------------------------------------------------------------

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>JS中的数据类型</title>
   </head>
   <body>

       <script type="text/javascript">
           /*
               1.JS中的数据类型
                   原始类型,引用类型
                   ES6版本之前有六种:
                       原始类型:1.Undefined 2.Number 3.String 4.Null 5.boolean
                       引用类型:6.Object以及Object的子类
                   ES规范(ECMAScript规范),在ES6之后,又基于以上的6种类型添加了一种新的类型:Symbol
               2.JS中有一个运算符叫做typeof,这个运算符可以在程序的运行阶段动态的获取变量的数据类型
                   typeof运算符的语法格式:
                       typeof 变量名
                   typeof运算符的运算结果是以下6个字符串之一:注意字符串都是全部小写
                       "undefined"
                       "number"
                       "string"
                       "boolean"
                       "object"
                       "function"
               3.在JS当中比较字符串是否相等使用"=="没有equals.
           */
           //typeof的使用示例,求和,要求a变量和b变量将来的数据类型必须是数字,不能其他类型
           // function sum(a,b){
           //    if(typeof a=="number" && typeof b=="number"){
           //        return a+b;
           //    }
           //    alert(a+","+b+"必须都为数字!")
           // }

           // //方法调用
           // var retValue=sum(false,"abc")
           // alert(retValue)
           // var retValue2=sum(1,2)
           // alert(retValue2)

           var i;
           alert(typeof i)//"undefined"

           var k=10;
           alert(typeof k)//"number"

           var f="abc";
           alert(typeof f)//"string"

           var d=null;
           alert(typeof d)//"object" null属于Null类型,但是typeof的结果是"object"

           var flag=false
           alert(typeof flag)//"boolean"

           var obj=new Object()
           alert(typeof obj)//"object"

           function sayHello(){

           }
           alert(typeof sayHello)//"function"
       </script>
   </body>
</html>

----------------------------------------------------------------------------------------------------------

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>Undefined类型</title>
   </head>
   <body>

       <script type="text/javascript">
           /*
               Undefined类型只有一个值,这个值就是undefined
               当一个变量声明后没有赋值,系统默认赋值undefined
               或者也可以给一个变量手动赋值undefined
           */
           var i;//undefined

           var k=undefined//undefined
           alert(i==k)//true
           var y="undefined"//"undefined"
           alert(i==y)//false
       </script>
   </body>
</html>

-------------------------------------------------------------------------------------------------------------------

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>Number类型</title>
   </head>
   <body>


       <script type="text/javascript">

           /*
               1.Number类型包括哪些值
                   -1，0，3.14，NaN,Infinity
                   整数,小数,正负,负数,不是一个数字,无穷大都属于Number类型
               2.isNaN():结果是true表示不是一个数字,结果是false表示是一个数字(注意字符串里是数字的话也会是false)
               3.parseInt()函数
               4.parseFloat()函数
               5.Math.ceil()函数:(Math是一个数学类,数学类当中有个函数叫做ceil(),作用是向上取整)
           */
           var v1=1
           var v2=3.14
           var v3=-100
           var v4=NaN
           var v5=Infinity

           //"number"
           alert(typeof v1)
           alert(typeof v2)
           alert(typeof v3)
           alert(typeof v4)
           alert(typeof v5)

           //关于NaN(表示Not aNumber,不是一个数字,但属于Number类型)
           //什么情况下结果是一个NaN呢?运算结果本来应该是一个数字,最后算完不是一个数字的时候,结果是NaN
           var a=100
           var b="中国"
           alert(a/b)//除号显然结果应该是一个数字,但是运算的过程中导致最后不是一个数字,那么最后的结果是NaN

           var e="abc"
           var f=10
           alert(e+f)//+两边有一个是字符串,就会做字符串拼接

           //Infinity(当除数为0的时候,结果为无穷大,java中报错)
           alert(10/0);//Infinity

           //思考:在JS中10/3=?
           alert(10/3)//3.3333333333333335

           //关于isNaN函数
           //用法:isNaN(数据),结果是true表示不是一个数字,结果是false表示是一个数字
           //isNaN:is Not a Number
           function sum(a,b){
               if(isNaN(a)||isNaN(b)){//isNaN 如果是"2"字符串数字结果为false
                   alert("参与运算的必须是数字")
                   return;
               }
               return a+b
           }
           alert(sum(1,"2"))


           //parseInt()函数:可以将字符串自动转换成数字,并且取整数位
           alert(parseInt("3.999"));//3
           alert(parseInt(2.22222));//2
           //parseFloat()函数:将字符串自动转换为数字
           alert(parseFloat("3.33"))
           alert(parseFloat("3.33")+1)
           //Math.ceil()函数:(Math是一个数学类,数学类当中有个函数叫做ceil(),作用是向上取整)
           alert(Math.ceil(2.1))
           alert(Math.ceil("2.1"))
       </script>
   </body>
</html>

----------------------------------------------------------------------------------------------------

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>Boolean类型</title>
   </head>
   <body>

       <script type="text/javascript">
           /*
               1.JS中的布尔类型永远都只有两个值:true和false(这一点和java相同)
               2.在Boolean类型中有一个函数叫做:Boolean().
                   语法格式:
                       Boolean(数据)
                   Boolean()函数的作用是将非布尔类型转成布尔类型
           */
           // var username=""
           // if(Boolean(username)){//其实是Boolean(username) 有实际值
           //    alert("欢迎您"+username)
           // }else{//空字符串,null,声明未赋值
           //    alert("用户名不能为空")
           // }
           var username=0
           if(username){//其实是Boolean(username) 有实际值
               alert("欢迎您"+username)
           }else{//空字符串,null,声明未赋值
               alert("用户名不能为空")
           }

           //规律:"有就是真,没有就是false"
           alert(Boolean(1))//true
           alert(Boolean(0))//false
           alert(Boolean(""))//false
           alert(Boolean("asd"))//true
           alert(Boolean(null))//false
           alert(Boolean(NaN))//false
           alert(Boolean(undefined))//false
           alert(Boolean(Infinity))//true

           while(10/3){
               alert("hehe")
           }

           for(var i=0;i<10;i++){
               alert("i="+i)
           }

           //Null类型只有一个值,null
           alert(typeof null)
       </script>
   </body>
</html>

--------------------------------------------------------------------------------------------------------------

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>String类型</title>
   </head>
   <body>
       
       <script type="text/javascript">
           //小String(属于原始类型String)
           var x="abc";
           alert(typeof x)//"string"
           //大String(属于Object类型)
           var y=new String("abc");
           alert(typeof y)//"object"

           //获取字符串长度
           alert(x.length)
           alert(y.length)

           alert("http://www.baidu.com".indexOf("http"))//0
           alert("http://www.baidu.com".indexOf("https"))//负数

           //判断一个字符串中是否包含某个子字符串
           alert("http://www.baidu.com".indexOf("https")>=0?"包含":"不包含")

           //replace()只替换了第一个
           alert("name=value%name=value%name=value".replace("%","&"))
           alert("name=value%name=value%name=value".replace("%","&").replace("%","&"))

           //想全部替换需要使用正则表达式


           //考点:经常问 substr和substring的区别
           alert("asdwesdsc".substr(2,4))//dwes 截取下标从2开始截取4个
           alert("asdsdsdsc".substring(2,4))//ds 截取下标从2到4 含头不含尾
       </script>
   </body>
</html>

--------------------------------------------------------------------------------------------------------

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>Object类型</title>
   </head>
   <body>

       <script type="text/javascript">
           /*
               Object类型:
                   1.Object类型是所有类型的超类,自定义的任何类型,默认继承Object
                   2.Object类包括哪些属性
                       prototype属性(常用):作用是给类动态扩展属性和函数
                       constructor属性:
                   3.Object类方法
                       toLocaleString()
                       toString()
                       valueof()
                   4.在JS当中定义的类默认继承Object,会继承Object类中所有的属性以及函数
                   也就是说,自己定义的类中也有prototype属性
                   5.在JS当中怎么定义类,怎么new对象?
                       定义类的语法
                           第一种方式:
                               function 类名(形参){

                               }
                           第二种方式:
                               类名=function(形参){

                               }
                       创建对象的语法:(如果没有new就是普通调用函数,如果前面有new就是创建对象)
                           new 构造方法名(实参);//类名就是构造方法名,类名和构造方法名一致

           */
           function sayHello(){

           }
           //把sayHello当做一个普通的函数来调用
           sayHello();

           //这种方式就表示把sayHello当作一个类来创建对象
           new sayHello()

           //这种方式就表示把sayHello当作一个类来创建对象
           var obj=new sayHello();//obj是一个引用,保存内存地址指向堆中的对象

           //定义一个学生类
           function Student(){
               alert("Student....")
           }

           //当作普通函数调用
           Student()

           //当作类来创建对象
           var stu=new Student()
           alert(stu)

           //JS中类的定义,同时又是一个构造函数的定义
           //在JS中类的定义和构造函数的定义是放在一起来完成的
           function User(a,b,c){
               //声明属性(this表示当前对象)
               //User类中有三个属性:sno/sname/sage
               this.sno=a;
               this.sname=b;
               this.sage=c;
           }
           //创建对象
           var u1=new User(111,"zhangsan",30)
           //访问对象的属性
           alert(u1.sno)
           alert(u1.sname)
           alert(u1.sage)

           var u2=new User(222,"jackson",55)

           alert(u2.sno)
           alert(u2.sname)
           alert(u2.sage)

           //访问一个对象的属性,还可以使用这种语法
           alert(u2["sno"])
           alert(u2["sname"])
           alert(u2["sage"])

           //定义类的另一种语法
           Emp=function(a,b){
               this.ename=a
               this.sal=b
           }

           var e1=new Emp("SMITH",800)
           alert(e1["ename"]+","+e1["sal"])

           Product=function(pno,pname,price){
               //属性
               this.pno=pno
               this.pname=pname
               this.price=price
               //函数
               this.getPrice=function(){
                   return this.price
               }
           }

           var xigua=new Product(111,"西瓜",4.0)
           var pri=xigua.getPrice()
           alert(pri)//4.0

           //可以通过prototype这个属性来给类动态扩展属性以及函数
           Product.prototype.getPname=function(){//扩展函数类.prototype.函数名=function{}
               return this.pname
           }

           //调用后期扩展的getPname()函数
           // var pname=xigua.getPname();
           // alert(pname)
           alert(xigua.getPname())

           //给String扩展一个函数
           String.prototype.suiyi=function(){
               alert("pilipala这是给String类型扩展的一个函数")
           }

           "asd".suiyi()

       </script>
   </body>
</html>

------------------------------------------------------------------------------------------------------------

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>null NaN undefined这三个值有什么区别</title>
   </head>
   <body>

       <script type="text/javascript">
           //null NaN undefined 数据类型不一样
           alert(typeof null)//"object"
           alert(typeof NaN)//"number"
           alert(typeof undefined)//"undefined"

           //null和undefined可以等同
           alert(null==NaN)//false
           alert(null==undefined)//true
           alert(NaN==undefined)//false

           //在JS当中有两个比较特殊的运算符
           //==(等同运算符:只判断值是否相等)
           //===(全等运算符:即判断值是否相等,又判断数据类型是否相等)
           alert(null===NaN)//false
           alert(null===undefined)//false
           alert(NaN===undefined)//false
       </script>
   </body>
</html>

------------------------------------------------------------------------------------------------------------------

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>JS的常用事件</title>
   </head>
   <body>

       <script type="text/javascript">
           /*
               JS中的常用事件:
                   1.blur 失去焦点
                   2.focus 获得焦点

                   3.click 鼠标单击
                   4.dblclick 鼠标双击 dbl就是double

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

                   7.mousedown 鼠标按下
                   8.mouseover 鼠标经过
                   9.mousemove 鼠标移动
                   10.mouseout 鼠标离开
                   11.mouseup 鼠标弹起

                   12.reset 表单重置
                   13.submit 表单提交

                   14.change 下拉列表选中项改变,或文本框内容改变
                   15.select 文本被选定
                   16.load 页面加载完毕(整个HTML页面中所有的元素全部加载完毕之后发生)

               任何一个事件都会对应一个事件句柄,事件句柄是在事件前添加on
               onXXX这个事件句柄出现在一个标签的属性位置上.(事件句柄以属性的形式存在)
           */
           //对当前程序来说,salHello函数被称为回调函数(callback函数)
           //回调函数的特点:自己把这个函数代码写出来,但是这个函数不是自己负责调用,由其他程序负责调用该函数
           function sayHello(){
               alert("hello js")
           }

       </script>
       
       <input type="button" value="hello" οnclick="sayHello()" />


       <input type="button" value="hello2" id="myBtn" />
       <input type="button" value="hello3" id="myBtn3" />
       <input type="button" value="hello4" id="myBtn4" />
       <script type="text/javascript">
           /*
               第二种注册事件方式,是使用纯jS代码完成事件的注册
           */
           //第一步:先获取这个按钮对象(document是全部小写,内置对象,可以直接用,document就代表整个HTML页面)
           var btnObj=document.getElementById("myBtn")
           btnObj.οnclick=doSome//注意这里调用千万别加()
           /*
               整个浏览器叫window
               页面url以下部分做为 document
           */

           function doSome(){
               alert("do some!")
           }

           var btnObj3=document.getElementById("myBtn3")
           btnObj3.οnmοuseοver=function(){//可以用匿名函数
               alert("一阵烟飘过")
           }



           document.getElementById("myBtn4").οnmοuseup=function(){
               alert("又一阵烟飘过")
           }

       </script>
   </body>
</html>

-------------------------------------------------------------------------------------------------------------

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>JS代码的执行顺序</title>
   </head>
   
   <body οnlοad="ready()">

       <script type="text/javascript">
           // document.getElementById("btn").οnclick=function(){
           //    alert("hello js")
           // }
           //拆分上面的一句话
           //第一步:根据id获取节点对象
           var btn=docment.getElementById("btn")//返回null(因为代码执行到此处的时候,"btn"元素还没有加载到内存)
           //第而不:给节点对象绑定事件
           btn.οnclick=function(){
               alert("hello js")
           }



           function ready(){
               document.getElementById("btn").οnclick=function(){
                   alert("hello js")
               }
           }
       </script>

       <input type="button" value="hello" id="btn"/>
   </body>
</html>

-------------------------------------------------------------------------------------------------

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
   </head>
   <body>
       <script type="text/javascript">
           // window.οnlοad=ready;//注意后面不要加括号
           //    function ready(){
           //        document.getElementById("btn").οnclick=function(){
           //            alert("hello js")
           //        }
           //    }
           //上面和下面原理一样
           //页面加载过程中,将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>
</html>

-----------------------------------------------------------------------------------------------------

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
   </head>
   <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="将文本框修改为复选框" id="btn"/>
   </body>
</html>

------------------------------------------------------------------------------------------------------

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
   </head>
   <body>
       <script type="text/javascript">
           //登录时候用户不一定去点击登录,实现功能比如说如果用户按了回车键,就登录
           window.οnlοad=function(){
               var usernameElt=document.getElementById("username");
               //键盘按下事件回车键的键值是13 ESC键的键值是27
               usernameElt.οnkeydοwn=function(event){//变量名随意任何事件都可以用个变量接收叫event 取名随意
                   //获取键值
                   console.log(event)//[object KeyboardEvent]
                   alert(event)
                   //对于键盘事件对象来说,都有keyCode属性用来获取键值
                   if(event.keyCode==13){
                       alert("按了回车键")
                   }
               }
           }

       </script>

       <input type="text" id="username"/>
   </body>
</html>

---------------------------------------------------------------------------

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>JS的void运算符</title>
   </head>
   <body>
       页面顶部<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
       <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
       <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
       <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
       <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
       
       <a href="javascript:void(asd)" οnclick="window.alert(1)">
           既保留住超链接的样式,同时用户点击该超链接的时候执行一段JS代码,但页面不能跳转
       </a><br>
       
       <a href="javascript:void(你好)" οnclick="window.alert(1)">
           既保留住超链接的样式,同时用户点击该超链接的时候执行一段JS代码,但页面不能跳转
       </a>
   </body>
</html>

------------------------------------------------------------------------------------------------------

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>JS的控制语句</title>
   </head>
   <body>


       <script type="text/javascript">
           /*
               1.if
               2.switch

               3.while
               4.do...while...
               5.for

               6.break;
               7.continue

               JS中特殊存在的
               8.for....in
               9.with语句
           */
           //创建JS数组
           var arr=[];
           var arr1=[false,"123",321,3.14];//JS中数组元素类型随意,元素个数随意
           //遍历数组
           for(var i=0;i<arr1.length;i++){
               alert(arr1[i])
           }
           //for...in var i这个i是数组下标
           for(var i in arr1){
               alert(arr1[i])
           }

           //for...in语句可以遍历对象的属性
           User=function(a,b){ //定义类要放在上面
               this.username=a
               this.password=b
           }

           var u=new User("张三",34)
           alert(u.username+","+u.password)
           alert(u['username']+","+u['password'])


           for(var a in u){
               alert(a)//a是对象属性名分别是username 和 password
               alert(typeof a)
               alert(u[a])
               alert(u.a)
           }

           //with的用法
           with(u){
               alert(username+","+password)//省略了alert(u.username+","+u.password)
           }

           //这里额外说明一下,当调用方法时,方法在前在后无所谓
           Asd();
           function Asd(){
               alert(1)
           }

           //但是定义类时
           // 比如
           // xxx=function(){

           // }
           // xxx()需要先声明类在调用



       </script>
   </body>
</html>