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