网页:html构建,CSS美化
为网页添加功能:
页面的动态效果:输入的验证、页面元素的动态显示
等---Javascript 语言,写在html页面上,由浏览器运行
服务器的交互:数据的交互---JSP、AJAX
JavaScript 课程:编程语言
JQuery + AJAX 阿贾克斯
是一套跨浏览器的JavaScript库,简化HTML与JavaScript之间的操作。
.JavaScript是一种网页编程技术 实现页面的动态交互效果
用来向HTML页面添加交互行为
.JavaScript是一种基于对象和事件驱动的解释性脚本语言,具有与Java和C语言类似的语法
- 直接嵌入HTML页面
- 由浏览器解释执行代码,不进行预编译
JavaScript发展史
.正式名称ECMAScript
常用于实现页面验证、动态显示等效果
方式一:直接定义在事件中
方法二:方法写在里的
错误查看:不同的浏览器下有不同的方式
Firefox:错误控制台
.可以使用任何文本编辑工具编写,只需要浏览器就可以执行
.解释执行:事先不编译,逐行执行
.基于对象:内置大量现成对象
.适宜:
- 客户端数据计算
- 客户端表单合法性验证
- 浏览器事件的触发
- 网页特殊显示效果制作
---js特有的,与corejava不同的地方讲
.由Unicode字符集编写
.注释
- 单行://
- 多行:/**/
.语句
- 表达式、关键字、运算符组成
- 大小写敏感
- 使用分号结束(更好) (或者换行结束)
常量、标识符与关键字
.常量
- 直接在程序中出现的数据值 (也称为字面值,用完即丢弃)
.标识符
- 由不以数字开头的字母、数字、下划线(_)、美元符号($)组成
- 常用于表示函数、变量等的名称
- 保留关键字,如break,if等
变量
. 变量声明
- 使用关键字var声明变量,如var x,y;
- 声明的时候不确定类型,变量的类型以赋值为准
. 变量初始化
- 使用 = 赋值
- 没有初始化的变量则自动取值为undefined
- 如:var count = 0;
. 变量命名同标识符的规则,大小写敏感
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
关系运算符特殊的:
.严格相等:=== 类型和数值都相同
.非严格相等:!==
eg:
var n1 = 10;
var n2 = "10";
if(n1 == n2) //true
alert("equal"); //equal
if(n1 === n2)
alert("same");
总结 :
== :比的是值
===:比的是值和类型
条件: 和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();"/>
.javascript是一种基于对象语言
.对象是JS中最重要的元素
.JavaScript包含多种对象
内置对象、自定义对象、浏览器对象、HTML DOM对象、ActiveX对象
.简单数据对象: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]);
}
}
有三种方式:
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();" >