java web 第二课javascript

一、javascript概述：
    1、javascript：客户端脚本语言
        What：运行在浏览器上，纯文本的内容
        Why：可以给网页添加交互功能，省事，省时间，省流量
交互：获取页面数据--浏览器处理数据--浏览器返回处理结果提示信息。
        特点：类java和c对语法
   自上向下解释执行
   使用文本编写，直接嵌入HTML中执行
    2、Javascript应用场景：
表单验证；客户端数据计算；特效动画
    3、first javascript:
        1)、事件中：鼠标在浏览器中触发的操作：
如：单击，焦点转移，鼠标滑过
 语法:on事件名="js语句"
缺点：不可重用；不适合复杂逻辑
        2)、head中的<script>标签下：页面中专门集中放置js语句的区域。
语法：
   step1：
   <script>
function method1(){
    js语句;
}
   </script>
   step2：
          on事件名="方法名()"
缺点：仅当天页面可用。无法全网站公用。
        3)、js文件：专门保存js脚本的独立文件。纯文本
范围：全网站公用。
步骤：Step1：新建文本文件，扩展名为js
       Step2：网页中引入外部js文件
       <script src="js文件路径"></script>
    4、javascript调试：
        When：页面加载时，或单击按钮时，希望出现的效果没有出现，说明出错！要打开错误控制台调试
        How：工具-->Web开发者-->错误控制台
如IE：F12
二、基础语法：
    1、变量：
        动态类型：变量的类型不必提前限定，后续赋值什么类型，会自动认为是什么类型
        声明：var 变量名=值
如：var count=0;
变量作用域：——同java
    2、数据类型：
        1)、String：表示字符串，首尾由单引号或双引号包裹
拼接：
   var str="bye";alert(str+str);//byebye
   var n="5";alert(n+n);//55
        2)、Number：所有数字
强调：不区分整数和小数
      64位浮点数格式，相当于double
计算：var n=5;alert(n+n);//10
        3)、Boolean：只有两个值true和false
        4)、隐式转换：
如：var s1="a"; var s2="b"; 
    var n1=1; var n2=2;
    var b1=true; var b2=false;
    alert(n1+s2);//1b 
   强调：数字+字符串：数字转为字符串
    alert(b1+b1);//2
   强调：布尔类型做加法：都被转为数字计算
    alert(n2+b1);//3
   强调：数字+布尔：布尔类型转为数字
    alert(s1+b1);//atrue
   强调：字符串+布尔：布尔转为字符串
        5)、显示转换：使用函数转换数据类型——直观、规范、可控
i、查看变量类型：
When：不确定变量类型时使用
语法：typeof(变量)：返回类型的名称
Ii、转换为字符串：变量.toString()：所有数据类型均可以转为字符串类型。
iii、转换为整数：
   语法：parseInt(变量)
   说明：数字或以数字开头的变量可以转为数字
         如果不能转，返回NaN（not a number）
   如：parseInt("6.12");//6
        parseInt("");//NaN
        parseInt(22.5);//22
        parseInt("1234abcd");//1234
parseInt("12px")+2=14+"px"
        parseInt(true);//NaN
    说明：**自动去除前后空格；**自动去除数字后的字母。
iv、转换为浮点数：
    语法：parseFloat
    如：parseFloat("6.12");//6.12
         parseFloat("6.12abcd");//6.12
        6)、验证是否数字：
When：验证用户的输入是否为数字时使用
语法：isNaN(变量)
      is not a number：返回true——不是数字
    返回false——是数字如：isNaN("")//false**
    isNaN(22.5)//false
    isNaN("10")//false 可以被强制转为整数
    isNaN("1234blue")//true**
    isNaN(true)//false** 可以隐式转换为1
    isNaN(NaN)//true
    alert(NaN==NaN)//false
**vs parseInt:
1234abcd：isNaN认为不是数字，但parseInt可以强制转换。
true：isNaN认为是数字，但parseInt，无法转换
"true"：isNaN返回true，不是数字
        7)、DEMO：
i、如何获取页面控件：
   语法：
var 变量名 = document.getElementById("id值")
   在页面中. 按id选择一个元素("id值")
ii、控件的内容：
   语法：
    控件对象.value:得到控件的内容文本
   强调：文本框的value永远是"内容"字符串
        8)、null与undefined:
i、null：空对象指针
When：主动清空一个对象时使用。但是变量还在
如：var car=null; typeof(car);//object
判断null：if(变量==null)
ii、undefined：
When：想要使用一个未声明或声明但从未赋值的变量时，会出异常undefined
typeof(sss);//undefined
var sss;
typeof(sss);//undefined
var sss=null;
typeof(sss);//object
iii、undefined判断：
语法：if(变量===undefined)
强调：
＝＝＝严格相等：类型必须一样，内容也要一样
    3、严格相等：
        var a="10";  var b=10;
if(a==b) 判断a是否等于b
if(a===b) 判断a的类型是否等于b而且内容也等于b
if(a!==b) 只要a和b的数据类型或值有一个不一样就返回true
    4、DEMO：
        1)、失去焦点事件：
当光标离开控件时，控件失去焦点，触发事件
语法：onblur(this)
   其中：this:谁触发事件，this就代表谁
       使用this.value可以一次获得当前控件的内容。
三、javascript内置对象：
    1、什么是内置对象：
封装了常用的功能和属性，可以快速调用，来解决开发中重复的关键问题。
    2、String对象：
        1)、查找和替换：
语法：查找子字符串：
     字符串对象.indexOf("子字符串")
     返回：子字符串第一次出现的位置
     从指定位置开始查找子字符串：
     字符串对象.indexOf("子字符串”,开始位置)
如果未找到：返回-1

      替换：
      字符串对象.replace("子字符串","目标字符串")；
       说明：只替换第一次出现的匹配子字符串
             一般都与indexOf配合循环使用
         2)、String中使用正则表达式：
语法：字符串对象.函数(/正则表达式/属性后缀)
三个函数：
str.match(/正则表达式/属性后缀)
    What:获得字符串中匹配的子字符串数组
    如果不加属性后缀，则默认只得到第一个
    如果加属性后缀：g，后去全局中匹配的所有项，保存在数组中
    如果加属性后缀：i，表示忽略大小写
    如果没有找到：返回0个元素的数组
str.replace(/正则表达式/属性后缀,"目标字符串")
        3)、正则表达式对象：
When：对字符串进行格式、长度等模式匹配时使用。
创建：方法一：
   var 变量名=/正则表达式/gi;
      方法二
var 变量名=new RegExp("^正则表达式$","gi");
   强调：如果使用第二种方式证明正则表达式
          双引号中的如\d，必须转义为\\d


        4)、表单验证：
验证格式匹配：
语法：var regEx = /正则表达式/
       regEx.test(要验证的内容);
返回：true：验证通过
      false：验证失败
补充：^：表示必须以正则表达式内容开始
      $：表示必须以正则表达式内容结束
      ^正则表达式＄:必须完全匹配
        5)、Math对象：用于执行数学计算
强调：无需赋值，直接调用。
  常用属性：Math.PI
       保存了数学计算常用的常量
  常用方法：如三角函数、反三角函数等
            随机数：
    语法：Math.random()：默认生成0-1之间的随机数。可能为0，但绝不会为1
    如：60-100之间的随机数
    60+（100-60）*Math.random()
    min+(max-min)*Math.random();
看图：6_Math fun.png
乘方计算：
Math.pow(底数,次方)：
如：Math.pow(0.85,3) 0.85的3次方
        6)、Number对象：
number.toFixed(小数位数)：按指定小数位数四舍五入
说明：如果number的小数位数超过则四舍五入
      如果number的小数位不足，用0补齐
        7)固定资产折旧：
10000:8500
       8500*（1-15%）
       8500*（1-15%）*（1-15%）

           10000*Math.pow(0.85,year)

3、Array对象：
    1)、创建：
语法：var 变量名 = new Array(元素个数);
元素个数可以省略
         初始化：
var 变量名 = new Array(元素1,元素2,元素3...)
强调：数组中的元素，不限定类型：
如：var test = new Array(100,"a",true);
简写：var 变量名 = [元素1，元素2，...];常用
         访问元素：
数组变量名[下标]
         二维数组：
          var test = new Array(7);
          test[0] = new Array(2);
      **区分：new Array(7)：有7个元素的数组
   **7不是最大上限，可以超过
    new Array([7])：只有一个元素的数组，第一个元素是7.
    new Array():0个元素的数组，但是后续可以初始化任意多个元素
    2)、方法和属性：
        回顾：str.match(/js/g); 返回一个数组
   返回值.length：数组中元素的个数
i、获取数组中元素个数：.length
ii、打印所有元素：
    数组.toString():默认使用都好分割每个元素
   自定义连接符：
    数组.join('连接符')：使用自定义的连接符分割每个元素。
    3)、连接数组：把两个数组连接起来。返回连接后的新数组
         语法：
数组.concat(元素1，元素2，元素3)：直接将元素追加到数组后，形成新数组
        或数组A.concat(数组B)：将数组B的元素追加到数组后，形成新数组
强调：原数组均不变。
    4)、获取子数组：
        语法：数组.slice(开始位置,结束位置)
强调：结束位置省略，表示获取从开始位置先后所有元素
　　　**前包含后不包含
    5)、数组排序：
        i、默认排序：按元素转化为字符串后进行排序
语法：数组.sort()
强调：**排序会直接修改原始数组
        ii、自定义排序：
语法：
    Step1：定义排序逻辑
        排序函数：
        function 函数名(参数1,参数2)
{
   比较逻辑；
   return 大于0或小于0的数;
}
    Step2：
数组.sort(函数名)
说明：所有浏览器无论采用什么办法，都只有从小到大的排列。把小的数放签名，把大的数放后边
      人为颠倒逻辑，就好像骗过浏览器，让他以为原来的a-b>0;其实是-(a-b)>0;


    
如果比较逻辑相反：即为倒叙
    6)、数组元素颠倒：把原数组所有元素前后颠倒
         语法：数组.reverse()

4、Date对象：
    1)、创建：var now = new Date();
说明：实例化一个日期对象
      同时默认获得当前系统时间
    var date2 = new Date("2013/3/20 11:12");
    2)、常用的方法：
         i、日期处理：
         日期对象.getDate()：获得时间中，日期部分。
         日起对象.toLocaleString();包含日期和时间的完整格式化。自动转化为浏览器系统格式
      .toLocaleDateString():只显示日期部分
      .toLocaleTimeString():只显示时间部分
  说明：无24小时转12小时的函数，要自己计算和拼接字符串
         修改日期：日期对象.setDate(天数)：根据天数和现在的日起对象，自动计算出新的日期
     如：4.25.setDate(44)=4.44=>5.14
        ii、小时处理：
语法：.getHours()：日期中小时部分
总结：日期的每个组成部分，都有get方法对应
      日期中的每个组成部分，都对应有set方法。
      set方法都会自动判断时间进位。
    5、Function对象：
        1)、现象：同名，不同参数两个函数，无论调用时传递多少个参数，永远只执行最后一个。
原因：javascript中一切都是对象。方法也是对象
实际上：javascript方法是：
var 变量名/方法名 = 
new Function(
   "参数1","参数2",...."参数n",
   "方法体"
          );
简写：var 变量名/方法名 = 
function(参数列表){
方法体
}——时髦
        2)、Function对象的常用属性和方法：
length属性：获得方法的参数个数
.toSrting()方法：打印完整方法内容
        3)、arguments：函数内部悄悄保存所有传入参数的数组。
所有function中都隐含着arguments数组，可以直接使用。
i、强调：javascript中方法定义不用声明形参列表，就可任意传参。
      所有传入的参数，自动被arguments数组全部保存。
      所有参数都可以使用arguments数组的下标访问。
     6、全局函数：不用赋值和实例化，即可直接使用的函数
        常用：parseInt/parseFloat isNaN
        1)、编码解码：
When：使用URL向服务器传递表单参数时，如果包含多字节字符，会出现乱码。
解决：需要在发送前对内容进行编码
    编码：把多字节文字转换为单字节编码
      接收方需要解码后才能看到正常内容
      解码：把单字节编码还原回多字节内容
encodeURI(带汉字的字符串):编码
    返回的是编码后的ASCII字符串
decodeURI(编码后的ASCII字符串)：解码
    返回的是转换后的带汉字的字符串
        2)、eval函数：可以计算表达式的值，还可以执行字符串中的javascript语句
When：执行一条字符串形式的语句时使用
强调：eval函数如果接受的字符串是非法的js语句，则抛出异常，需要做异常处理！
  var r = 2+3;
  var r = eval("2+3");
错误：
  var r = 2+3=;
  var r = eval("2+3=");
  以上两句都有报语法错误
异常处理：
  try{
       eval语句;
  }catch(error){显示error}
其中error包含的就是异常的信息，可以直接显示