JS学习之路Day04

网页：html构建，CSS美化
为网页添加功能：
   页面的动态效果：输入的验证、页面元素的动态显示
   等---Javascript 语言，写在html页面上，由浏览器运行

   服务器的交互：数据的交互---JSP、AJAX

JavaScript 课程：编程语言
JQuery + AJAX 阿贾克斯
是一套跨浏览器的JavaScript库，简化HTML与JavaScript之间的操作。

1 Javascript概述

1.1 什么是JavaScript

.JavaScript是一种网页编程技术 实现页面的动态交互效果  
   用来向HTML页面添加交互行为

.JavaScript是一种基于对象和事件驱动的解释性脚本语言，具有与Java和C语言类似的语法
  - 直接嵌入HTML页面
  - 由浏览器解释执行代码，不进行预编译

  JavaScript发展史
  .正式名称ECMAScript
  

1.2 JavaScript作用

   常用于实现页面验证、动态显示等效果

 

1.3 JavaScript的写法

   方式一：直接定义在事件中
   方法二：方法写在里的
    
    
    
   

1.4 找脚本错误

  错误查看：不同的浏览器下有不同的方式
     Firefox:错误控制台

1.5 JavaScript的特点

.可以使用任何文本编辑工具编写，只需要浏览器就可以执行
.解释执行：事先不编译，逐行执行
.基于对象：内置大量现成对象
.适宜：
 - 客户端数据计算
 - 客户端表单合法性验证
 - 浏览器事件的触发
 - 网页特殊显示效果制作

2 基础语法

---js特有的，与corejava不同的地方讲

2.1 编写JavaScript代码

.由Unicode字符集编写
.注释
  - 单行：//
  - 多行：/**/
 .语句
  - 表达式、关键字、运算符组成
  - 大小写敏感
  - 使用分号结束（更好） （或者换行结束）

 常量、标识符与关键字
.常量
  - 直接在程序中出现的数据值 （也称为字面值，用完即丢弃）
.标识符
  - 由不以数字开头的字母、数字、下划线(_)、美元符号($)组成
  - 常用于表示函数、变量等的名称
  - 保留关键字，如break,if等

变量
. 变量声明
 - 使用关键字var声明变量，如var x,y;
 - 声明的时候不确定类型，变量的类型以赋值为准 
. 变量初始化
 - 使用 = 赋值
 - 没有初始化的变量则自动取值为undefined
 - 如：var count = 0;
. 变量命名同标识符的规则，大小写敏感

2.2 数据类型

JavaScript数据类型：
  1）基本类型
      Number:数字
      String:字符串
      Boolean:布尔
  2）特殊类型
      Null:空
      Undefined:未定义
  3）复杂类型
      Array:数组
      Object:对象

string数据类型
.表示文本
  - 由Unicode字符、数字、标点符号组成的序列
.首尾由单引号或者双引号括起
.特殊字符需要转义符
  - 转义符，如：\n, \\, \‘, \"
  var aa="\u4f60\u597d\n\"JavaScript\"";
  alert(aa);

number数据类型
.不区分整型数值和浮点型数值
 - 所有数字都采用64位浮点格式存储，类似于double格式

boolean数据类型
.两个值：true false
 - 也代表1和0
.多用于结构控制语句

数据类型之间的转换
.隐式转换：直接转---默认的规则
 规则：
   数字+字符串：数字转换为字符串
   数字+布尔值：true转换为1，false转换为0
   字符串+布尔值：布尔值转换为字符串true或false
   布尔值+布尔值：布尔值转换为数值1或0

. 显式转换：利用转换的方法
   toString
   parseInt()--能转,如果不能转则返回NaN
   parseFloat()
   isNaN()--判断文本是否转换为数值
   typeof--查询数值当前类型，返回string/number/boolean/object
           如，typeof("test"+3)="string"
       eg:
       var x=100;
       var y="100";
       alert(typeof(x)); //number
       alert(typeof(y)); //string

示例

数学计算--NaN--not a number 非数

eg:myJs.js
//js代码示例
function secondMethod(){
  alert("function in js file");
}

//计算录入数值的平方
function getSquare(){
    //得到录入的文本
    var s = document.getElementById("txtNumber").value;
    //判断
    if(isNaN(s)){
        alert("录入错误");
    }
    else{
        //转换为数值类型
        var n = parseInt(s);
        //计算平方
        alert(n*n);
    }
}

day04.html

    
        

        
    
    
        

                         οnclick="alter('hello world');" />
                         οnclick="firstMethod();" />  
                         οnclick="secondMethod();" />
            

            
                         οnclick="getSquare()"/>
        

    

2.3 运算符

关系运算符特殊的：
.严格相等：===   类型和数值都相同
.非严格相等：!==

eg:
var n1 = 10;
var n2 = "10";
if(n1 == n2) //true
    alert("equal"); //equal
if(n1 === n2)
    alert("same");

总结 ：
  == ：比的是值
  ===：比的是值和类型   

2.4 流程控制：程序默认情况下顺序执行，改变或者控制执行顺序

条件: 和corejava一样
   if/else
   switch/case
循环
   for
   while
  
  eg:
  //计算1到20的累加和
   function getSum(){
    var data = 0;
    for(var i=0;i<=20;i++){  //注意声明变量 var i
        data +=i;
    }
    alert(data);
   }

       οnclick="getSum();"/>

3 常用内置对象 

3.1 什么是JavaScript对象

 .javascript是一种基于对象语言
.对象是JS中最重要的元素
.JavaScript包含多种对象
  内置对象、自定义对象、浏览器对象、HTML DOM对象、ActiveX对象

3.2 常用内置对象

.简单数据对象：String、Number、Boolean
.组合对象：Array、Math、Date
.高级(复杂)对象：Functon、RegExp

1 ) String对象
.创建 字符串对象
 var str1="hello world";
 var str2=new String("hello world");

.String对象的属性：length
      alert(str1.length);

.方法（同corejava）
   常用：
    toLowerCase/toUpperCase
    indexof/lastIndexof
    substring(start,end)--获取子串，不包括end

    charAt(index)--返回指定字符，index:字符位置
    charCodeAt(index)--返回字符的Unicode编码
    
    replace(旧的，新的)
    split() --拆分  a,b,c
    

正则表达式回顾：纯文本的表达式，表示某种匹配模式
    在不同的语言环境下，执行或者使用正则表达式实现文本的各种处理

匹配模式：
    g--global,全局
    m--multilin,多行
    i--ignore,忽略大小写

String对象有几个方法可以结合正则表达式使用
  replace("js","*"); --   s = s.replace(/js/gi,"*");  // js中的正则表达式写在两个/中间
  match--得到匹配的结果
  search--得到匹配的位置

eg:
myJs.js
//实验 String对象的方法，将所有js都替换为*
function replaceString(){
    //得到录入的文本
    var s = document.getElementById("txtString").value;
    //判断s中是否还有js
  
    /*
    //循环的方式实现
    var index = s.indexof("js");
    while(index>-1){
        s = s.replace("js","*");
        index = s.indexof("js");
    }
    document.getElementById("txtString").value = s;
    */
    //var newString = s.replace("js","*"); //一次只能替换一个js
    //document.getElementById("txtString").value = newString;

    //用正则表达式实现：js中的正则表达式写在两个/中间
    s = s.replace(/js/gi,"*");
    s = s.replace(/\d+/g,"*"); a123a->a*a
    document.getElementById("txtString").value = s;
}

day04.html
文本框，录入文本，录入完毕(失去焦点:事件 onblur)，
将文本框中的js替换为*--模拟过滤敏感字符
    οnblur="replaceString();" />

2) Array对象--一列多个数据
 JS中只有数组没有集合
 JS是松散类型的语言

 (高级语言中；
数组：个数确定 相同数据类型的元素组成的集合
集合：个数不确定
)

.创建数组对象
 可以给数组长度也可以不给数组长度
 var cnweek = new Array(7);
 var books = new Array();
.初始化数组对象

 方式一：var arr = ["mary",10,true];

 方式二：var arr = new Array("mary",10,true);
 
 方式三： var arr = new Array();
 arr[0]="mary";
 arr[1]=10;
 arr[2]=true;
 
 alert(arr[3]);--undefined
.获取数组元素的个数：length属性

创建二维数组
.通过制定数组中的元素为数组的方式创建二维甚至多维数组
 
 var cnweek = new Array(7); 
 for(var i=0;i<=6;i++){
     cnweek[i]=new Array(2);
 }
 cnweek[0][0]="星期日";
 cnweek[0][1]="Sunday";
 cnweek[1][0]="星期一";
 cnweek[1][1]="Monday";
 ...
 cnweek[6][0]="星期六";
 cnweek[6][1]="Saturday";

.数组的方法：
    xxx.toString()--输出数组的内容，形如10,20,30
    xxx.join("*")--10*20*30
    xxx.concat(value,...)--数组相加 连接
      eg:
      var a=[1,2,3];
      var b=a.concat(4,5);
      alert(a.toString()); //1,2,3
      alert(b.toString()); //1,2,3,4,5

    xxx.slice(start,end)--获取子数组
      eg:
      var arr1=['a','b','c','d','e','f','g','h'];
      var arr2=arr1.slice(2,4); 
      alert(arr2.toString());//c,d
      
      var arr3=arr1.slice(4);
      alert(arr3.toString());//e,f,g,h

  xxx.reverse()--反转
  xxx.sort()--排序,默认按照字符串大小排序
  xxx.sort(sortfunc):数组排序
    - sortFunction:可选项，用来确定元素顺序的函数的名称
    
    function sortFunc(a,b){
      return a-b;
    }
    

    eg:
    var arr1=[32,12,111,444];
    arr1.sort();
    alert(arr1.toString());//111,12,32,444
    
    arr1.sort(sortFunc);
    alert(arr1.toString());//12,32,111,444

    eg:
    function operateArray(type){
    //得到文本
    var s = document.getElementById("txtArray").value;
    //拆分为数组
    var array = s.split(",");
    //根据类型做操作
    switch(type){
        case 1:
            array.reverse();
            break;
        case 2:
            array.sort();
            break;
        case 3：
            array.sort(sortFunc);//将方法对象作为参数传入
            break;
    }
    //显示
    alert(array.join("|"));
    }

    //排序的比较方法
    function sortFunc(a,b){
        return a-b; //升序
        //return b-a;
    }

    文本框，录入逗号隔开的数值：
   
        οnclick="operateArray(1);" />
        οnclick="operateArray(2);" />
        οnclick="operateArray(3);" />

3、Math对象--数学计算相关的
   不需要创建，直接使用--类似于高级语言的静态类
   var data = Math.PI;

.Math对象的常用属性：都是数学常数
   - Math.E(自然数)
   - Math.PI(圆周率)
   - Math.LN2(ln2)
   - Math.LN10(ln10)等

.Math对象的常用方法
  Math.sin(x)
  Math.sqrt(x)、Math.log(x)、Math.exp(x)
  Math.abs(x)、Math.max(x,y,...)、Math.random()、Math.round(x)
 
Math.random();-- 正小数 [0,1)
Math.floor(); --地板 向下舍入  3.7 -> 3
Math.ceil(); --天花板 向上舍入  3.7 -> 4

计算：随机得到3到9之间的一个整数（包含3，不包含9）
Math.random();  [0,1)
x 6 :  [0,6)
+ 3 :  [3,9)
取整 : parseInt  Math.floor

eg.
//随机数 [1,34)
function getRandom(){
    var min = 1;
    var max =34;
    var seed = Math.random();
    var n = Math.floor(seed*(max-min)+min);
    alert(n);
}

οnclick="getRandom();"/>

4、Number对象
.常用方法
 toString():数值转换为字符串
 toFixed(n):数值转换为字符串，并保留小数点后n位数
  - 如果必要，该数字会被舍入，也可以用0补足

  eg:var data = 23.5676;
     alert(data.toFixed(2)); //23.57

     data = 23.5;
     alert(data.toFixed(2)); //23.50

5、正则表达式对象

js中正则表达式的应用分为两类：
一类：是和String对象的三个方法结合使用，实现对string的操作
             --replace/match/search
二类：正则表达式对象
  var r = /\d{6}/; //r是一个正则表达式对象
  r.test(string);  //对象的方法 --true/false
   输入验证：邮编 \d{6}

eg:
//输入验证
function valiData(){
    var s = document.getElementById("txtName").value;
    //验证：用户名是3到5位的小写字母
    var reg = /^[a-z]{3,5}$/; //从头到尾只能是3到5位的小写字母
    //验证三个汉字 
    var reg1 = /^[\u4e00-\u9fa5]{3}$/;
    if(reg.test(s))
        alert("正确");
    else
        alert("重新录入");
}

输入验证： 

/*

onblur 事件会在对象失去焦点时发生。

onblur 经常用于Javascript验证代码，一般用于表单输入框。

*/

6、Date对象(日期对象)
.创建
  var d = new Date();   //当前日期和时间
  var d = new Date("2013/01/01 12:12:12");
.方法
getXXX：getDate/getDay/getMonth/getFullYear/...--得到日期中的内容
setXXX: setDay/setDate...--设置
toXXX ：得到字符串格式的表示，
     页面显示
      toString
      toDateString
      toTimeString
      toLocalTimeString
     
    eg:
    var d = new Date();
    //alert(d.toString());  //Wed Aug 31 2016 15:16:55 GMT+0800(中国标准时间)
    alert(d.toDateString()); //Wed Aug 31 2016
  
  xxx.toLocaleTimeString()--11:11:11
  11时11分11秒--getHour()+"时"+getMinutes+"分"+getS...+"秒"

7、Function对象
.函数实际上是功能完整的对象
.Function对象可以表示开发者定义的任何函数

.函数的定义
 function 函数名（参数）
 {
    函数体;
    return 返回值;
 }

.函数的调用
 可以通过其名字加上参数进行调用,多个参数用逗号隔开
 
 eg:
 function sum(iNum1,iNum2){
    return iNum1+iNum2;
 }
 
 var iResult = sum(1,1);
 alert(iResult);// 输出“2”

8、arguments对象

是一种特殊对象，在函数代码中，表示函数的参数数组
 在函数代码中，可以使用arguments访问所有参数
    - arguments.length:函数的参数个数
    - arguments[i]:第i个参数

* js中，没有传统意义上的重载(方法名相同，但参数不同)，
 即，如果方法名称相同，则以最后一次定义的为准

* js中如果需要实现类似于重载的效果，使用arguments代表当前方法被传入的所有的参数，形成一个数组

eg:
//模拟一个方法的重载：一个参数计算平方；两个参数计算求和
function testMethod(){
    if(arguments.length==1){
        var data = arguments[0];
        data = parseInt(data);
        alert(data*data);
    }
    else if(arguments.length==2){
      alert(arguments[0]+arguments[1]);
    }
}

    
        
    
    
        

            方法重载：
                         οnclick="testMethod(12,11);" />
        

    

4 js中如何创建一个方法 

有三种方式：

1） 使用function关键字明文的声明一个方法
  function AA(a,b){alert(a+b);}
  --最常用，用于功能相关的方法，页面直接要用的功能

2） 使用Function对象创建一个函数，
 最后一个参数是方法体，前面的其他参数是方法的参数
 var functionName = new Function("a","b","alert(a+b);");
 functionName(10,20); //30
-- 需求：有些方法不需要显式的存在，
  只是为其他方法里所使用--类似于corejava内部类
-- 缺陷：方法体不能较复杂

3）匿名方法(函数) -- 在方法中要用的方法，优先选择方式三
    var f=function(a,b){
         alert(a+b);
          };
    f(11,22);

  eg:
  function testFunction(){
    /*
    var f = new Function("a","b","alert(a+b);");
    f(11,22);
    */
    /*
    var array = [12,3,45,9];
    var f = new Function("a","b","return a-b;");
    array.sort(f);
    alert(array.toString());//3,9,12,45
    */
    //使用匿名函数
    var array = [12,3,45,9];
    var f = function(a,b){
                return a-b;
            };
    array.sort(f);
    alert(array.toString());
}

   value="实验创建方法的不同方式,数值的排序（Function和匿名函数）" 
  οnclick="testFunction();" >