码迷,mamicode.com
首页 > 编程语言 > 详细

java web 第二课javascript

时间:2016-04-29 19:43:29      阅读:242      评论:0      收藏:0      [点我收藏+]

标签:

一、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包含的就是异常的信息,可以直接显示
























java web 第二课javascript

标签:

原文地址:http://blog.csdn.net/qq632544991p/article/details/51227203

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!