下面两个等价
<input type="button" value="hello" onclick="window.alert('hello world')"/>

<input type="button" value="hello" onclick="alert('hello world')"/>

6、设置多个alert可以一直弹窗

<input type="button" value="hello" onclick="alert(hello java")
                                            alert(hello python')
                                            alert('hello javaScript!)"/>

JS中的字符串可以使用双引号，也可以使用单引号。JS中的一条语句结束之后可以使用分号";"也可以不用。

<input type="button" value="hello" onclick="alert('hello world')"/>无分号，内单外双引号

<input type="button" value="hello" onclick= 'alert("hello jscode");'/> 有分号，内双外单引号

整体代码：


<!doctype html>
<htm1>
   <head>
     <title>JavaScript第一种</title>
   </head>
  <body>

<input type="button" value="hello" onclick="window.alert('hello world')"/>
<input type="button" value="hello" onclick='window.alert("hello jscode")'/> 
<input type="button" value="hello" onclick="alert('hello zhangsan');
                                            alert('hello lisi');
                                            alert('hello wangwu')"/>
 </body>
</html>

弹窗效果：

第二种方式：

脚本如：

   <script type="text/javascript">
 	
        window.alert("Hello JavaScript")

     </script>

如：

  
 <script type="text/javascript">

        window.alert("head ");	
        window.alert("Hello World!")

      </script>
<!doctype html>	
  <html>
    <head>
       <title>HTML中嵌入JS代码的第二种方式</title>
    </head>
    <body>
      <script type="text/javascript">

        window.alert("min");	
        window.alert("Hello World!")

      </script>
<input type="button"value="按钮"/>
</body>

</html>
    
      <script type="text/javascript">

        window.alert("last");
        window.alert("Hello World!")

      </script>

第三种方式：

引入外部独立的js文件如，外部文件路径


<!doctype	html>	
  <html>
    <head>
       <title>HTM中嵌入JS代码的第三种方式:引入外部独立的js文件。</title>
   </head> 
  <body>
  <!--这个src表示路径，在text目录的1.js文件  -->
   <script type="text/javascript" src="text/1.js"></script> 

  </body>
 </html>

在需要的位置引入js脚本文件
引入外部独立的js文件的时候，js文件中的代码会遵循自上而下的顺序依次逐行执行。

如：


<!doctype	html>	
  <html>
    <head>
       <title>HTM中嵌入JS代码的第三种方式:引入外部独立的js文件。</title>
   </head> 
  <body>
  <!--这个src表示路径，在text目录的1.js文件  -->
   <script type="text/javascript" src="text/1.js">
  <!--下面这个不会起作用 -->
     window.alert("hello");
  </script> 
  
<!--需要另外写一个脚本才会生效，如： -->
<script type="text/javascript">
 window.alert("hello");
 </script>

  </body>
 </html>

JavaScript的变量

var 变量名;

如：var i;

var i;
i=true;
i=1.23;
i=new Object();
i="abc";

var i;
//i没有赋初始值默认是undefined

测试代码：

<!doctype html>
<html>
   <head>
       <meta charset="utf-8">
      <title></title>
   </head>
   <body>
       <script type="text/javascript">
       var i;
          alert("i的默认值是"+i);
       </script>
   </body>
</html>

一个变量如果没声明直接用则会报错

<script type="text/javascript">
   alert(i);//i没声明。则会报i is not define的语法错误
</script>

下列的结果是：

       <script type="text/javascript">
       var i,b,c=10;
       alert("i="+i+",b="+b+",c="+c);  
       </script>

结果：

怎么理解强类型和弱类型的语言呢？
java语言存在编译阶段，假设有代码:int i;
那么在Java中有一个特点是;java程序编译阶段就已经确定了 i变量的数据类型，该i变量的数据类型在编译阶段是int类型，那么这个变量到最终内存释放，一直都是int类型，不可能变成其他类型。强制类型转化变得也只是语法面上，对象的类型还是不变。

函数初步

函数必须调用才会生效

js的函数类型没有限制和参数个数没有限制，函数名是唯一标识。

函数的定义格式：

方式①：

<script type="text/javascript">
  function 函数名(形式参数列表){
     函数体; 
  }
</script>

示例：

<script type="text/javascript">
  function sum(a,b,c){
     alert(a+b+c);
  }
</script>
 //函数必须调用才能执行:
sum(10,20,30);

方式②：

<script type="text/javascript">
    函数名= function(形式参数列表){
     函数体; 
  }
</script>

将函数封装在点击事件：

<!doctype html>
<html>
   <head>
       <meta charset="utf-8">
      <title></title>
   </head>
   <body>
       <script type="text/javascript">
         didi=function(a){
           alert("hello"+a);
         }
       </script>
    <input type="button" value="按钮呀"  onclick="didi(' everyone');">
   </body>
</html>

js中的函数不能重载

函数参数中的几个场景

情景1：传入参数不足

     <script type="text/javascript">
         didi=function(a,b){
         alert (a+b);
         }
         didi("hello");
       </script>
  //只传了一个
结果会是第一个参数赋值，另一个没赋值的默认是undefined，所以结果是helloundefined (字符串拼接)

情景2：传入参数过多

     <script type="text/javascript">
         didi=function(a,b){
         alert (a+b);
         }
         didi(1,2,3,4);
       </script>
//传入过多个，只会计算函数参数多少个，所以只取2个，结果是1+2=3

情景3：无参数传入

     <script type="text/javascript">
         didi=function(a,b){
         alert (a+b);
         }
         didi();
       </script>
      //没传参
      结果是NaN，NaN表示具体存在的值，这个表示不是数字(Not a Number)

情景4：多个函数同名

     <script type="text/javascript">
         didi=function(a){
         alert (hello);
         }
         didi=function(a,b){
         alert ("hi");
         }
         didi("xiu")
       </script>
//结果是 hi，因为函数同名后面的会覆盖前面的

函数名不能重名，否则后面的函数会覆盖前面的，因为是自上而下执行程序

变量的种类

①全局变量:

②局部变量:

这和java中的基本一致。

<!doctype html>
<html>
   <meta  charset="utf-8">
   <head>
      <title></title>
   </head>
   <body>
      <script  type="text/javascript">
        var play=100;
        function player(){
          var play="张三";
           alert(play);
        }
        player();//调用
        alert(play);
      </script>

   </body>
 
</html>>

如果一个变量没有var修饰那他就是全局变量，和他所在的位置无关。

如：

 <script  type="text/javascript">
        function player(){
            play="张三";//变量要赋值
        }
        player();//调用
        alert(play);
      </script>

js中的数据类型

虽然js在声明的时候不需要指定类型，但是每个值还是有类型的。

分为：原始类型和引用类型

ES规范（ECMAScript规范）：在ES6之后又在数据类型上面增加了叫Symbol的数据类型

typeof运算符

js中有一种运算符为typeof，这个运算符可以在程序执行过程中动态的获取变量的数据类型

typeof运算符的语法格式:

typeof运算符的运算结果是以下6个字符串之一:（注意字符串都是全部小写）

"undefined"
"number"
"string"
"boolearl"
"object"
"function"

例:，要求a变量和b变量将来的数据类型必须是数字，不能是其他类型。

以下定义的这个sum函效是为了完成两个数字的求和。

<script type="text/javascript">
function sum(a,b){
   if(typeof a=="number"&& typeof b=="number"){
      return a+b;
    }
   alert("a或b中有一个或两个不是数字");
}
 var rel=sum(false,"ab");
  alert(rel);//undefined,因为不符合要求所以没收到返回值,故默认是undefined
  var  ral=sum(1,3);
  alert(ral);//4
</script>

typeof数据类型小测试：

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

var n=100;
alert(typeof n);//number

var s="abcd";
alert(typeof s);//string

var c=null;
alert(typeof i);//object，null属于Null类型，单typeof运算结果是object

var k=false;
alert(typeof i);//boolean

function su(){
}
alert(typeof su);//function

原始类型：

1.Undefined

Undefined类型只有一个值，这个值就是undefined的，当一个变量没有赋初值，系统就会给这个变量赋为undefined，undefined是一个具体的值。

例：

<script type="text/javascript">
  var a;
  var b=undefined;
  var c="undefined";//带""是字符串了
  alert((a==b)+","+(a==c));

</script>

运行结果：

2. Number

number包括整数、小数、负数、正数、不是数字、无穷大(10，3.14，-5，10，NaN，Infinity)都属于Number类型。

什么时候结果是一个NaN呢？

如：

var i=100;
var h="块";
alert(i/h);//数字参与除法本来应该是一个数字，但是现在不会得到一个数字，所以结果是NaN

Infinity表示无穷大(当除数为0时，结果为无穷大)

var i=100;
var h=0;
alert(i/h);//(当除数为0时，结果为无穷大)Infinity

alert(10/3);

结果为3.3333333...

在js中两个数相除，会算尽

常见的函数：

isNaN：

判断不是一个数字，如果是数字返回false，否则true。

alert(isNaN(100));//false是一个数字
alert(isNaN("100"));//true不是一个数字

parseInt：

将字符串转化为数字，并且取整数位。

alert(parseInt("3.667"));//3
alert(parseInt(5));//5不变

parseFloat：

将字符串转化为数字

alert(parseFloat("3.14"));//3.14
alert(parseFloat(5.44));//5.44

Math.ceil():

将一个小数向上取整(如：2.1->3,Math是一个数学类，ceil表示天花板)(向大的整数靠近)

alert(Math.ceil(2.1));//3
alert(Math.ceil(-2.1));//-2

4.Boolean

在js中布尔类型只有两个值，false和true.

Boolean类型终有一个函数：boolean();

在其他需要布尔类型是，直接写数据，js会自动调用boolean()函数。有数据会转化成true，没数据转化成false。

如：

alert(Boolean(1));//true

alert(Boolean(0));// false

alert(Boolean(""));// false

alert(Boolean("abc"));// true

alert(Boolean(null)):// false

alert(Boolean(NaN));//false

alert(Boolean(undefined));// false

alert(Boolean(Infinity));// true
//有数据会转化成true，没数据转化成false。

如：

var kc="kong";
if(kc){
 alert("hello"+kc);
}else{
  alert("数据为空") ;
 }

结果：

Null

Null只有一个值null

<script type="text/javascript">
   alert(typeof null);//object
</script>

String

String类型:
1、在JS当中字符串可以使用单引号。也可以使用双引号。

var s1='abcdef';

var s2="test";

2、在JS当中，有两种方式创建字符串对象

第一种:

var  s="abc";

第二种(使用Js内置的支持类String):

var  s2=new String("abc");

需要注意的是:String是一个内置的类，可以直接用，String的父类是object。
3、无论小string还是大String，他们的属性和函数都是通用的。

①小string(属于原始类型string)

var x="king";
alert(typeof x); // "string"

②大String(属于Object类型)

var y=new String("abc");

alert(typeof y);// "object"

获取字符串的长度的函数

<script type="text/javascript">
   var x="king";
var y=new String("abc");
alert("x的长度"+x.length+",y的长度"+y.length);//3,4
</script>

结果

常用函数

indexOf 获取指定字符串在当前字符串中第一次出现处的索引
lastIndexOf 获取指定字符串在当前字符串中最后一次出现处的索引
replace 替换
substr 截取子字符串
substring 截取子字符串
toLowerCase 转换小写
toUpperCase 转换大写
spIit 拆分字符串

indexOf & lastIndexOf

 alert('abcda'.indexOf("b"));//1
alert('abcb'.lastIndexOf("b"));//3
alert('abcda'.indexOf("f"));//-1不存在的返回-1

replace(只替换了第一个)

alert("next#int#oser".replace("#","%"))

在写一个可以再替换一个，其实在原来替换第一个基础上在替换第一个

alert("next#int#oser".replace("#","%").replace("#","%"))

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

考点:经常问 substr和substring的区别?

 substr(startIndex,length)
  alert("abcdefxyz".substr(2,4));//cdef

   substring(startIndex,endIndex)注意:不包含endIndex
 alert("abcdefxyz".substring(2,4));//cd

Object

创建类的方式

方式①

function 类名(形参){

}

方式②

类名=function(形参){

}

创建对象的语法：

new  类名();

创建类和函数的方式是一样的，所以在调用上就有区别了

<script type="text/javascript">
 function hello(){
   alert("hello javascript And kongchao");
 }
 //当成方法
 hello();
//当成类来创建对象
var obj=new hello();
alert(obj);//[object Object]
 
</script>

运行结果：

图一弹两次窗，图二一次


function User(a,b,c){//abc是形参，属于局部变量。
   //声明属性(this表示当前对象)
  // User类中有三个属性:sno/sname/sage 
   this.sno =a;
   this.sname=b;
   this.sage=c;
}
//创建对象
var u1 = new User(111,"zhangsan", 30);
//访间对象的属性 
alert(u1.sno);//111
 alert(u1.sname); //zhangsan
alert(u1.sage);//30
//访问对象属性的另外一种写法
alert(u1["sno"]);//111
alert(u1["sname"]);//zhangsan
alert(u1["sage"]);//30

    <script type="text/javascript">
   Product=function(pno,pname,price){
//属性
  this.pno=pno;
  this.pname=pname;
  this.price=price;
//函数
  this.getPrice=function(){
  return this.price;
  }
 }
var kong=new Product(100,"🍅",5);
var  pri=kong.getPrice();
alert(pri);

</script>

//可以通过prototype这个属性来给类动态扩展属性和函数
Product.prototype.getName=function(){
   return this.pname;
}
//调用后期动态扩展后的函数
var chao=kong.getName();
alert(chao);

String.prototype.hello=function(){
 alert("hello 🍉")
}
//调用扩展后的函数
"abc".hello();

js中创建类和对象？

User=function(uname,uno){
  this.uname=uname;
 this.uno=nuo;
}
//创建对象(下列都可以)
var u1=new User();
var u2=new User("张三","1");
var u3=new User("李四","1",3);//传入多个参数只会取前两个

null、undefined、NaN的区别

<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(undefined==NaN);// false
</script>

等同和全等运算符

在JS当中有两个比较特殊的运算符

(等同运算符"==":只判断值是否相等)
(全等运算符"===":既判断值是否相等，又判断数据类型是否相等)

alert(null===NaN);// false
alert(null===undefined);// false 
alert(undefined===NaN);// false

小demo：

alert(1==true);//true,值等同所以为true，boolean()函数将1转换为true
alert(1===true);//false，值等同但数据类型不同所以为false

js常用事件

回调函数的概念

任何一个事件都会对应一个事件句柄，事件句柄就是在事件前添加on。

onXXX这个事件句柄出现在标签属性位置上。（事件句柄以属性的形式存在）

如：

function sayHello(){
alert("hello");
}
<input type="button" value="按钮" onclick="sayHello();"/>

当点击这个按钮时，会弹出hello

sayHello()被称为为回调函数

回调函数的特点：

java中也有回调函数的机制：


//java中也有回调函数机制:
public class MyClass{

public static void main(Stringl] args){
//主动调用run()方法，站在这个角度看run()方法叫做正向调用。
  run();
}
//站在run方法的编写者角度来看这个方法，他把run方法叫做回调函数。 
public static void run(){
  System.out.println("run...");
}
}

注册事件的两种方式：

方式①：前面提到的直接将onclick写入标签中：

<input type="button" value="按钮" onclick="sayHello();"/>

方式②：是使用纯js代码完成事件的注册。

一般步骤：


<input type="button" value="按钮1" id="mybtn" />


 <script type="text/javascript">
  function doSome(){
  alert("do some!");
}
//第一步:先获取这个按钮对象(document是全部小写，内置对象，可以直接用。document就代表整个HTML页面)
 var btnObj =document.getElementById("mybtn");
//第二步:给按钮对象的onclick属性赋值
btnObj.onclick=doSome;// 注意:千万别加小括号btnObj.onclick=doSome();这是错误的写法
//这行代码的含义是将回调函数doSome注册到click事件上，


<input type="button" value="按钮2" onclick="sayHello()"/>

var mybtn1=document.getElementById("mybtn1");
mybtn1.onclick = function(){// 这个凶函没有名字,叫做匿名函数,这个匿名函故也是一个回调函故。
alert("test....");//这个函数在页面打开的时候只是注册上，不会被调用，在click事件发生之后才会调用。

常用的写法：

<input type="button" value="按钮3" id="mybtn2" />
<script type="text/javasvript">
document.getElementById("mybtn2").onclick =function(){
  alert("🐅虎虎生威");
</script>

代码的执行顺序

错误示例：

//把input按钮放到script下面则getElementById访问不到id事件，因为是自上而下执行
<script type="text/javasvript">
document.getElementById("mybtn2").onclick =function(){//返回null，因为程序到这里id还没加载到内存
  alert("🐅虎虎生威");
</script>
<input type="button" value="按钮3" id="mybtn2" />

load事件页面全部元素加载完毕才发生

load事件解决：

写法①：

<body onload="ready()">
 <script type="text/javascript">
   function ready(){
    var btn=document.getElementById("btn");
    btn.onclick=function(){
     alert("hello javascript");
   }
  }
 </script>
 <input type="button" value="按钮" id="btn" />
</body>

写法② ：


 <script type="text/javascript">
  window.onload=read;
   function ready(){
    var btn=document.getElementById("btn");
    btn.onclick=function(){
     alert("hello javascript");
   }
  }
 </script>
 <input type="button" value="按钮" id="btn" />

常用写法③：

         <script type="text/javascript">
          window.onload =function(){//页面打开就注册
             document.getElementById("btn").onclick=function(){//页面加载完就注册
               alert("hello javascript");
             }
          }
         </script>
        <input type="button" value="按钮1" id="btn" />

详细分析：

运行结果：

小text：

点击将文本框变成复选框

<script type="text/javascript">
    window.onload=function(){
      document.getElementById("btn").onclick=function(){
        var mytext=document.getElementById("mytext");
        //一个节点对象只要有的都可以"."
        mytext.type="checkbox";
      }
   }
   </script>
   <input type="text" id="mytext"/>
   <input type="button" value="点击将文本框变为复选框" id="btn"/>

捕捉键盘回车事件

<script type="text/javascript">
//①当页面加载完成，调用这个函数
  window.onload=function(){
    //②界面捕捉id为username的元素中发生键盘敲下事件是调用这个函数
     document.getElementById("username").onkeydown=function(event){
       //③当键盘敲下事件的keyCode为13时执行
        if(event.keyCode==13){
         alert("正在验证登录...");
       }
     }
  }
</script>
<input type="text" id="username">

当敲下回车键可以弹出：

void运算符

//void(0)括号中的数字任意，不能不写数字
<a href="javascript:void(0)" onclick="window.alert('test code")"> 保留</ a>

点击文字显示的弹窗效果：

控制语句

1、if

2、while

3、switch

4、do...while...

5、for

6、break

7、continue

8、for in(了解)

9、with(了解)

1-7和java类似，就不多赘述了。

js中创建数组

var 数组名=[数据....]

var arr=[1,2,true,"abc","3.14" ];//什么类型都可以接受

遍历数组

for(var i=0;i<arr.length;i++){
  alert(arr[i]);//i表示的是下标
}

for in 遍历

for(var i in arr){
 alert(arr[i]);
}

//for..in语句可以遍历对象的属性
User =function(username,password){
this.username =username; this.password =password;}
var u=new User("张三"，"444");
alert(u.username +""+u.password);
alert(u["username"]+","+u["password"]);
for(var SXM in u){
//alert(SXM)
//alert(typeof shuXingMing)
//SXM是一个字符串
 alert(u[shuXingMing]);}

with的用法：

在访问类的对象时：

alert(u.username);
alert(u.password);

用with

with(u){
alert(username+password);
}

DOM编程获取value

JavaScript包括三大块:
ECMAScript:JS的核心语法(ES规范/ECMA-262标准)
DOM：document Object Model(文档对象模型:对网页当中的节点进行增删改的过程。)HTML文档被当做一棵DOM树来看待

DOM编程的代表： var domObj=document.getElementById("id");

BOM:Browser Object Model(测览器对象模型)
关闭浏览器窗口、打开一个新的浏览器窗口、后退。前进、浏览器地址栏上的地址等，都是BOM编程。

BOM和DOM的区别和联系？

DOM的顶级对象是document

BOM的顶级对象是window

在document之前有window省略了

点击按钮得到文本框中的值


//点击按钮得到文本框中的值
<script type="text/javascript">
 window.onload=function(){ 
  var name1=document.getElementById("btn1").onclick=function(){
     var useValue =document.getElementById("user1").value;
    alert(useValue);
   }
 }
</script>
<input type="button" id="btn1" value="按钮">
<input type="text" id="user1">

拿到value的值。

按回车把文本框1内容复制到文本框2

    <script type="text/javascript">
      window.onload=function(){
      document.getElementById("user1").onkeydown=function(event){
        if(event.keyCode==13){//回车事件
       
       document.getElementById("user2").value=document.getElementById("user1").value;
      }}
    }
    </script>  
    <input type="txt" id="user1"/ >
    <input type="txt" id="user2"/>

失去焦点后执行这段

//this代表的是当前文本框对象
<input type="text" onblur="alert(this.value)"  />

js中的innerHTML和innerText属性

在head中：

<!DOCTYPE html>
<html>
   <head><meta charset="utf-8">
       <title>javascript测试</title>
   <style type="text/css">
     #div1{
        background-color: aquamarine; 
        width:300px; 
        height:300px;
        border: 1px black solid;  //边框为黑色实线
        position: absolute;   //绝对定位
        top:100px; //距离顶部
        left:100px;
     }
        </style>
          
      </head>
      <body>
     

   <body>
    <div id="div1"></div>

在body中：

        <script type="text/javascript">
            window.onload =function(){
            var btn =document.getElementById("btn");
             btn.onclick=function(){
               //设置div的内容
                //第一步:获取div对象
            var divElt =document.getElementById("div1");
            //第二步:使用innerHTML属性来设置元素内部的内容
              divElt.innerHTML ="<font color='red'>用户名不能为空!</font>"; 
             // divElt.innerText="<font color='red'>用户名不能为空!</font>";
              }
           }
            </script>
   <input type="button" id="btn" value="完了">
    <div id="div1"></div>

运行结果：

innerText和innerHTML属性有什么区别?

相同点:都是设置元素内部的内容。

不同点:
innerHTML:会把后面的“字符串”当做一段HTML代码解释并执行。
innerText:即使后面是一段HTML代码，也只是将其当做普通的字符串来看待。

正则表达式

1、什么是正则表达式，有什么用?

常见的的正则表达式符号

①：

②：

③：

正则表达式当中的小括号()优先级较高。

「1-9]表示1到9的任意1个数字(次数是1次)

[A-Za-z0-9]表示A-Za-z0-9中的任意1个字符

[A-Za-z0-9-]表示A-Z、a-z、0-9、-，以上所有字符中的任意1个字符。

一些正则表达式：

QQ号的正则：^[1-9] [0-9] { 4,}$

邮箱的正则：

^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$

7、怎么创建正则表达式对象，怎么调用正则表达式对象的方法?

正则表达式的test()方法？

true:字符串格式匹配成功
false:字符串格式匹配失败

   <script type="text/javascript">
      window.onload = function(){
     //给按钮绑定click
      document.getElementById("btn").onclick =function(){
      var email =document.getElementById("email").value;
      var emailRegExp=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/; 
       var ok = emailRegExp.test(email);
       if(ok){
        //合法
        document.getElementById("emailError").innerText="邮箱地址合法"
       }
       else{
        // 不合法
         document.getElementById("emailError").innerText="邮箱地址不合法"
        }
      }
       //给文本框绑定focus，当再次点击时后取消提示
      document.getElementById("email").onfocus=function(){
        document.getElementById("emailError").innerText="";
      }
      
    }
      </script>
      <input type="text" id="email" />
      <span id="emailError" style="color: red; font-size:12px;"></span><br>
      <input type="button" value="验证邮箱"id="btn"/>

去除前后空白trim

<script type="text/javascript">
  window.onload=function(){
    document.getElementById("btn").onclick=function(){
     var value=document.getElementById("username").value;  
     var newValue=value.trim();
      alert("--->"+newValue+"<----")
    }
  
  }

</script>
 <input type="text" id="username">
<input type="button" id="btn" value="按钮">

效果：

在IE8不支持trim，所以可以使用prototype扩展这个函数。如

//给String扩展trim
<script type="text/java">
  String.prototype.trim=function(){
    alert("调用自己写的trim");
//正则对象:/.../
   //return this.replace(/^\s+/,"").replace(/\s+$/,"");
   return this.replace(/^\s+|\s+$/g,"");
  }

</script>

小test

复选框的全选和取消全选

   <script type="text/javascript">
        window.onload =function(){
            //给每个复选框绑onclick事件
            var firstChk =document.getElementById("firstChk");
            firstChk.onclick =function(){
            //根据name获得那个值
            var aihaos = document.getElementsByName("aihao");
            // 
                for(var i =0; i<aihaos.length; i++){
                    aihaos[i].checked =firstChk.checked;
            
                }
            }
            var all=aihaos.length;
            for(var i = 0; i < aihaos.length; i++){
                aihaos[i].onclick =function(){
                var checkedCount =0;
                //  总数量和选中的数量相等的时候，第一个复选框选中
                    for(var i = 0; i<aihaos.length; i++){
                            if(aihaos[i].checked){
                            checkedCount++;
                        }
                    }
                        firstChk.checked =(all== checkedCount);
                        /*
                        if(all ==checkedCount){
                        firstChk.checked =true;
                        } else{
                        firstChk.checked =false;}*/
                   
                 }
           }
       }
   </script>
     <input type="checkbox" id="firstChk"/><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>

获取系统当前时间

js中的内置支持类Date,可以用来获取时间/日期

<script type="text/javascript">
//创建Date对象
  var nowTime=new Date();
//输出，这个的等价于java中的sout
document.write(nowTime);
</script>

运行结果：

var nowTime=new Date();
nowTime=nowTime.toLocaleString();
//输出
document.write(nowTime);

运行结果：

js中的换行，在script中不能直接写br。

document.write("<br>")

获取毫秒数

<script type="text/javascript">
var t=new Date();
var times=t.getTime();//一般会使用当前毫秒数当做时间戳
document.write(times);
//document.write(new Date().getTime);//简约一句
</script>

运行结果：

周期函数setInterval

    <script type= text/javascript>
      function displayTime(){
        var time = new Date();
        var strTime =time.toLocaleString();
        document.getElementById("timeDiv").innerHTML=strTime;
    }
      //每隔1秒调用displayTime()函数 
      function start(){
          //从这行代码执行结束开始,则会不间断的，每隔1000毫秒调用一次displayTime()函数。
         //它的返回值可以传递给clearInterval从而取消code周期执行的值
         v=window.setInterval("displayTime()",1000);
      }
         //让时间停下
      function stop() {
        window.clearInterval(v);
        
      }
      </script>
      <br><br>
      <input type="button" value="显示系统时间" onclick="start();"/>
      <input type="button" value="系统时间停止" onclick="stop();"/>
      <div id="timeDiv"></div>

内置支持类Array

//创建长度为0的数组
var arr=[];
//求数组长度
arr.length

var arr2=[1,false,true,"kongchao",null];

for(var i=0;i<arr.length;i++){
   document.write(arr[i]+"<br>");
}

如arr中长度有5，直接arr[7]=true;则会

var arr=[1,false,true,"kongchao",null];
arr[7]=true;
for(var i=0;i<arr.length;i++){
   document.write(arr[i]+"<br>");
}

var arr =new Array();//创建数组长度为0

var arr =new Array(5);//创建数组长度为5

var arr =new Array(1,2);//创建数组长度为2,表示其中有两个值1,2

join方法链接

var a = [1,2,3,9];
var str =a.join("-");
 alert(str);//"1-2-3-9"

//在数组的末尾添加一个元素(数组长度+1)
var a = [1,2,3,9];
 a.push(10);
 alert(a.join("-"));
//将数组末尾的元素弹出 
var endElt =a.pop();
 alert(endElt);

反转数组：reverse()

//反转数组
var a = [1,2,3,9];
 a.reverse();
var str =a.join("-");
 alert(str);

BOM编程

window中open和close方法

<input type="button" value="开启百度" onclick="window.open('http://www.baidu.com')"

//新窗口开启
<input type="button" value="开启百度" onclick="window.open('http://www.baidu.com',_blank)"
//父窗口开启
<input type="button" value="父窗口开启百度" onclick="window.open('http://www.baidu.com',_parent)";
//顶级窗口
<input type="button" value="顶级窗口开启百度" onclick="window.open('http://www.baidu.com',_top)"

<input type="button" value="打开表单验证" onclick="window.open('1-open.html')")>

关闭当前窗口

<input type="button" value="关闭当前窗口" onclick="window.close();">

消息框弹出（alert、confirm）

window.confirm();//弹出消息确认框
window.alert();

示例：

 <script text/javasctipt>
    function again(){
      if(window.confirm("你确定要删除这数据？？")){
        alert("delete date..") 
      }
   }
   </script>

history和location对象

history

//后退
<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)">

location

location获取地址栏

  <script type="text/javascript">
    function goBaidu(){
    // var location0bj=window.location;//写法1
    // locationObj.href="http://www.baidu.com";
    
      window .location.href ="http://www.jd.com";//写法2
      //window.location="http://www.126.com";
      

      //  document.location.href ="http://www.sina.com.cn"; //写法3
      // document.location="http://www.tmall.com";
    }
    </script>
    <input type="button" value="百度" onclick="goBaidu();"/>

什么是JSON，有什么用?

2、JSON是一种标准的轻量级的数据交施格式。特点是:体积小，易解析。

JSON的语法格式：

//创建JSON对象(JSON也可以称为无类型对象。轻量级，轻巧。体积小。易解析。)

  <script text/javasctipt>
 var studentObj={
    "sno":"110","sname":"张三","sex":"男"
};

//访间JSON对象的属性
alert(studentObj.sno+","+studentObj.sname +","+ studentObj.sex)
   </script>

创建JSON数组和遍历

<script type="text/javascript">
// JSON数组
var students =[
      {"sno":"110","sname":"张三","sex":"男"},
      {"sno":"120","sname":"李四","sex":"男"},
      {"sno":"130", "sname":"王五","sex":"男"}
];
// 遍历
for(var i = 0; i<students.length; i++){
var stuObj =students[i];
alert(stuObj.sno+","+stuObj.sname+","+ stuObj.sex);
}
</script>

复杂一些的JSON对象

  <script type="text/javascript">
    var user ={
        "usercode":110,"username":"王五",
        "sex":["男","女"],
        "address":{
              "city":"北京",
              "street":"大兴区",
              "zipcode":"12212121",
              "aihao" : ["smoke","drink","tt"]
         }
   }
      // 访问人名以及居住的城市
      alert(user.username+user.sex[0]+",居住在"+user.address.city+",喜欢"+user.address.aihao[0]);
      </script>

eval函数

如：

window.eval("var i=100:"); alert("i="+i);//i=100

  <script type="text/javascript">
    //这是java程序给发过来的ison格式的"字符串”//将以上的json格式的字符串转换成json对象 
    var fromJava="{\"name\":\"zhangsan!\",\"password\":\"123456\"}";
    window.eval("var jsonObj="+fromJava);//相当于用jsonObj创建了对象
    // 访问json对象
    alert(jsonObj.name +","+jsonObj.password);// 在前端取数据。
    </script>

结果：

面试题：

在JS中：[ ]和 { }有什么区别？

[ ]是数组

{ }是JSON对象

java中的数组：int arr={1,2,3,4};

js中的数组：var arr=[1,2,3,4];

JSON中的数组： var jsonObj={"name ": "张三"，"age":"12"};

table的用法

  <script type="text/javascript">
    var data={
        "total" :4,
        "emps" :[
            {"empno" :110,"ename":"SMiTH","sal": 100},
            {"empno" :120,"ename":"SMiTH","sal": 100},
            {"empno" :130,"ename":"SMiTH","sal": 100},
            {"empno" :140,"ename":"SMiTH","sal": 100}
       ]
    };
    
    window.onload = function(){
        var displayBtnElt =document.getElementById("displayBtn"); 
           displayBtnElt.onclick =function(){
           var emps = data.emps; 
           var html ="";
            for(var i = 0; i<emps.length; i++){
             var emp = emps[i];
              html += "<tr>";
              html +="<td>"+emp.empno+"</td>";
              html +="<td>"+emp.ename+"</td>";
              html +="<td>"+emp.sal+"</td>"; 
              html += "</tr>";
            }
         document.getElementById("emptbody").innerHTML=html;
       document.getElementById("count").innerHTML=data.total;
        }
    }
    </script>
    <input type="button" value="显示员工信息列表" id="displayBtn"/>
    <h2>员工信息列表</h2>
    <hr>
    <table border="1px" width="50%">
     <tr>
         <th>员工编号</th>
        <th>员工名字</th>
        <th>员工薪资</th>
     </tr>
    <tbody id="emptboy">
    </tbody>
    </table>
    总共<span id="count"></span>

三万字速通JavaScript

一、前言

二、什么是JavaScript，有什么用?

三、HTML嵌入JavaScript的方式：

第一种方式：

第二种方式：

第三种方式：

JavaScript的变量

函数初步

函数参数中的几个场景

情景1：传入参数不足

情景2：传入参数过多

情景3：无参数传入

情景4：多个函数同名

变量的种类

js中的数据类型

typeof运算符

原始类型：

1.Undefined

2. Number

什么时候结果是一个NaN呢？

常见的函数：

isNaN：

parseInt：

parseFloat：

Math.ceil():

4.Boolean

Null

String

常用函数

考点:经常问 substr和substring的区别?

Object

创建类的方式

方式①

方式②

js中创建类和对象？

null、undefined、NaN的区别

等同和全等运算符

js常用事件

回调函数的概念

回调函数的特点：

注册事件的两种方式：

常用的写法：

代码的执行顺序

load事件解决：

捕捉键盘回车事件

void运算符

控制语句

js中创建数组

DOM编程获取value

BOM和DOM的区别和联系？

点击按钮得到文本框中的值

按回车把文本框1内容复制到文本框2

失去焦点后执行这段

js中的innerHTML和innerText属性

innerText和innerHTML属性有什么区别?

正则表达式

1、什么是正则表达式，有什么用?

常见的的正则表达式符号

7、怎么创建正则表达式对象，怎么调用正则表达式对象的方法?

正则表达式的test()方法？

去除前后空白trim

复选框的全选和取消全选

获取系统当前时间

获取毫秒数

周期函数setInterval

内置支持类Array

join方法链接

反转数组：reverse()

BOM编程

window中open和close方法

消息框弹出（alert、confirm）

history和location对象

什么是JSON，有什么用?

JSON的语法格式：

创建JSON数组和遍历

复杂一些的JSON对象

eval函数

面试题：

table的用法