将JavaScript内容移至p标签之下,再次刷新页面,会看到弹出对话框时,页面内容HelloJavaScript已经显示。
由此可知,script脚本与html标签,从上向下执行。
通过引用外部js文件使用JavaScript
在chapter1.js中代码如下
alert("HelloJavaScript")
对原html进行修改,不在使用script里面写代码的方式,而是通过应用外部文件chapter1.js完成该功能。
在head中添加如下代码,注释其他的js代码
刷新网页,仍然可以得到最初的结果,弹出对话框,将这句话一直p标签之后,再次测试,结果与之前一样。
注意:
通过外部文件引用使用javascript时,在他们script标签内不能再写js脚本。
JS基础
语法(unit4/chapter2.html)
1、区分大小写
Test与test意思是不一样的,是两种不同的标识符
2、标识符组成
字母,下划线_,美元符$或数字组成,且字母,数字不能作为开头
3、注释
//单行注释
/**/多行注释
4、直接量
100数字
‘tzhang’或“tzhang”字符串
false布尔值
null对象
{name:
tzhang,school:
nau}对象
[1,2,3,4]数组
5、关键字,保留字
他们已经被使用,不能做为变量名、函数名
关键字
保留字
6、变量
变量声明与初始化
//变量声明
varval;
//变量初始化
val=100;
//上面用整数赋值,下面使用字符串赋值,与java不同,这便是弱类型语言的特点
val='苏州'
//单条语句独占一行,可以不使用分号,若一行有多条语句必须加分号
varvalinit=100
//变量声明并初始化,没有加var,他们的不同点之后介绍
valmeb='杭州'
//同时定义多个变量
varuser='tzhang',
sex='男',
address='xz'
数据类型(unit4/chapter3.html)
typeof
用于检测变量或值的数据类型,会有如下返回值
字符串
描述
undefined
未定义
boolean
布尔值
string
字符串
number
数值
object
对象或null
function
函数
varage;
alert(age);//age是Undefined类型,输出undefined
alert(typeofage);//输出undefined
age变量声明但未初始化
varbol=true;//bol是Boolean类型
alert(typeofbol)//输出boolean
注意类型的首字母大写,typeof返回值为小写。
同理,除function之外,其他几个类似,。
关于对象的示例
varobj={};//定义一个对象varobj=newObject();
varobj=null;//Null类型
alert(typeofobj)//输出object
Function示例
functionfun(){
}
alert(fun);//没有设么数据类型,输出函数的结构
alert(typeoffun)//function
Undefined
声明但未初始化
varage;
alert(typeofage)//undefined
alert(typeofaddr)//undefined
两个输出的都是undefined,但是他们一个有值undefined,一个什么都没有会报错,所以定义变量的时候,尽可能不要只声明,不赋值。
alert(undefined==null)//true两个都是空的,所以认为是相等的,但是他们的数据类型不同
alert(undefined===null)//false恒等,三个等号,表示恒等关系,要求数据类型也要相同
Boolean
vargender='man';
if(gender){
alert('true')
}else{
alert('false')
}
如上,简单的if,else语句,不在多说,我们知道if语句的是true或false,但是此时我们不是传入的boolean值,却可以运行,为何?
隐式转换如下:
数据类型
true
false
Boolean
true
false
String
任何非空字符串
空字符串
Number
任何非0值,包括无穷大
0或NaN
Object
任何对象
Null
Undefined
undefined
Number(unit4/chapter4.html)
除常用的十进制外,还有八进制,十六进制
八进制以0开头
十六进制以0x开头
varx=2.5
alert(0.1+0.2)
alert(Number.MAX_VALUE);//最大值
Number.MIN_VALUE//最小值
0.1+0.2的结果
所以,尽量不要使用浮点型数据进行一些精确地判断
NaN非数值(NotaNumber)是一个特殊的值,这个数值用于表示一个本来要返回数值的操作却未返回数值的情况,这样就不会抛出错误。
如在java中任何数值除以0都会报错,程序终止,但在JavaScript中,不会影响程序执行。
alert(0/0)//NaN
alert(5/0)//Infinity
alert(5/0*0)//NaN
alert(NaN+1)//NaN
alert(NaN==NaN)//false
varval=0/0;
alert(isNaN(val));//true
alert(isNaN(25));//false
alert(isNaN('25'));//false
alert(isNaN('tzhang'));//true
alert(isNaN(true));//false
alert(isNaN(false));//false
isNaN适用于对象,先调用其valueOf方法,然后确定其值是否可以转换成数值,如果不能,则基于这个返回值再调用toString方法,在测试其返回值。
不要求掌握
varbox={
toString:
function(){
return456;//换成tzhang再试试
}
}
alert(isNaN(box))
非数值转换为数值
Number()可以用于任何数据类型
parseInt(),parseFloat()专用于字符串转换成数值
alert(Number(true))//1
alert(Number(false))//0
alert(Number(null))//0
alert(Number(undefined))//NaN
alert(Number(''))//0
alert(Number('12d12'))//NaN
alert(parseInt('123tzhang'))//123
alert(parseInt('tt123tzhang'))//NaN
alert(parseInt('11tt123tzhang'))//11
alert(parseInt(''))//NaN
5、String(unit4/chapter5.html)
可以使用单引号,也可以使用双引号。
转移字符:
\n换行符
\t制表符
\b空格
\\斜杠
\’单引号
\”双引号
字符串拼接+
toString方法
varval=10;
alert(val.toString());
若转型之前我们不知道变量是否是null或者undefined,我们还可以使用转型函数String(para),这个函数能够将任何类型的值转换成字符串。
如果是null或者undefined,则返回”null”,”undefined”。
Object
varobj1={};//字面量创建方法
varobj2=newObject();//通过new创建,括号内传参
varobj3=newObject(3);
alert(obj3)//3toString
运算符
算术运算符(类似java不在举例)
++--正数(+)负数(-)加减乘除取模
请自行学习
关系运算符
<>==!
====等等
逻辑运算符
&&
有一个操作数是null,则返回null,有一个是undefined,则为undefined,但又由于其为短路操作,若前一个是false,则后面不在运算,故上述运算条件要注意。
||
短路操作,若前一个为true,则不在运算后一个
!
流程控制语句(unit4/chapter6.html)
If语句
varval=100;
if(val==100){
document.write("if语句val=100");
}
Ifelse语句
if(val>100){
document.write("ifelse语句val>100");
}else{
document.write("ifelse语句val<=100");
}
Ifelseifelse语句
if(val>100){
document.write("ifelseifelse语句val>100");
}elseif(val==100){
document.write("ifelseifelse语句val=100");
}else{
document.write("ifelseifelse语句val<100");
}
Switch-case语句break
switch(val){
case70:
document.write("switch-case语句val=70");
break;
case80:
document.write("switch-case语句val=80");
break;
case90:
document.write("switch-case语句val=90");
break;
case100:
document.write("switch-case语句val=100");
break;
default:
document.write("switch-case语句default");
break;
}
Dowhile语句
do{
document.write(val--+"");
}while(val>=0);
While语句
while(val<=100){
document.write(val+++"");
}
For循环
for(vari=0;i document.write(i+""); } document.write(" For-in遍历对象 varobj={ name: 'tzhang', age: 80, job: 'progrommer' } document.write("for-in"); for(varooinobj){ document.write(oo+""); } Continue for(vari=0;i<10;i++){ if(i==5){ continue } document.write(i); } 函数(unit4/chapter7.html) 函数的声明 函数本身并不能运行,需要被调用才可以执行 //函数声明 functionfun1(){ document.write("fun1") } fun1()//函数调用,可在声明前,也可在声明后 有参函数 functionfun2(sno,sname){ document.write("sno="+sno+',sname='+sname) document.write(" } fun2('0807','tzhang') fun2('0807') 有返回值 任何函数都可以有返回值,不需要显示声明类型 functionfun3(){ return'fun3' } document.write(fun3()) Argements 不建议显式传进多个参数,传入参数会由argements接收 functionfun4(){ document.write(arguments.length+'--');//请自行使用for循环遍历 document.write(arguments[0]); document.write(arguments[1]); document.write(arguments[2]); document.write(arguments[3]); } fun4(1,2,3) 不存在重载 functionfun5(name,addr){ document.write(name+addr); } functionfun5(name){ document.write(name); } fun5('tzhang','xz') 那个在函数在下方,就会执行那个代码。 对象(unit4/chapter9.html) 对象创建 varobj=newObject();//new可以省略 obj.name='tzhang' obj.age=100; alert(obj.name); varobj1={ 'name': 'tzhang',//属性名name单引号可省 'age': 100 } varobj2={} obj2.name='tzhang' obj2.age=100 alert(obj2['name']);//单引号或双引号 方法赋值 functionfun1(){ return'tzhang' } obj2.me=fun1();//方法调用 obj2.me2=fun1;//方法赋值 //方法调用 alert(obj2.me2()) 创建对象(包含方法) varobj3={ name: 'zhang', meth: function(){ return'zhang' } } alert(obj3.meth()) 数组 vararr1=newArray(); vararr2=newArray(10);//默认值'' vararr3=newArray('java','c#','C++'); alert(arr3[0]); vararr4=['tzhang',50] arr4[1]=30 arr4[2]='徐州'//数组第三个元素为徐州 arr4.length=10//数组长度变成了10 vararr6=['tzhang','xxz']; alert(arr6)//数组之间用逗号隔开 alert(arr6.join("-"));//数组之间使用-隔开 常用方法 vararr6=['tzhang','xxz']; alert(arr6)//数组之间用逗号隔开 alert(arr6.join("-"));//数组之间使用-隔开 //栈方式后进先出 vararr7=['tzhang','yxz'] arr7.push('jfz','jwz');//数组末尾添加多个元素 alert(arr7) alert(arr7.pop())//移除数组最后的元素,并返回移除的元素 alert(arr7) //队列方式先进先出 arr7.push('jwz') arr7.shift();//移除数组开头的元素,并返回移除的元素 alert(arr7) arr7.unshift('张')//在数组前面添加一个元素 //反转 arr7.reverse(); //从小到大排序 arr7.sort() //连接后得到一个新数组 //vararr8=arr7.concat('tzhang') vararr8=arr7.concat(arr6) //slice(start,end) //start规定从何处开始选取。 如果是负数,那么它规定从数组尾部开始算起的位置。 //也就是说,-1指最后一个元素,-2指倒数第二个元素 arr8.slice(1,3) //从下标1开始,取2个元素 vararr9=arr8.splice(1,2) alert(arr8) //在第1个位置插入元素zhangtao,即插入 arr8.splice(1,0,'zhangtao') //在第一个位置插入zhangtttt,并将第一个元素删除,即替换 arr8.splice(1,1,'tzhang')//可使用多个元素arr8.splice(1,1,'tzhang','ddd') 日期(unit4/chapter10.html) //当前日期 vardate=newDate(); alert(date) //返回毫秒数1488729600000 alert(Date.parse('2017/3/6')) //毫秒数转时间 vardate1=newDate(1488729600000); alert(date1) vardate2=newDate('2017/3/7'); alert(date2) //使用具体日期时间 vardate3=newDate(2017,3,6,11,6,30) alert(date3) document.write(date3)//默认调用toString方法 document.write(" document.writeln(date3.toString()) document.write(" document.writeln(date3.toLocaleString())//本地时间格式 document.write(" document.writeln(date3.valueOf())//返回毫秒数 document.write(" document.writeln(date3.getTime())//返回毫秒数 //date3.setTime(10090099)//设置毫秒数 document.write(" document.writeln(date3.getFullYear())//返回年同时也有set方法 document.write(" document.writeln(date3.getMonth())//返回月份同时也有set方法,此处月份值从0开始 document.write(" document.writeln(date3.getDate())//返回日期 关于日期的方法就不一一测试,请参考 正则表达式(unit4/chapter11.html) 对数据表单进行验证,如邮箱,电话号码输入格式是否正确 创建方式 varreg=newRegExp('reg');//模式字符串 //alert(reg)///reg/两个反斜杠包围,正则字面量表示法 //可选参数,模式修饰符i忽略大小写g全局匹配m多行匹配 varreg1=newRegExp('reg','ig'); alert(reg1)///reg/gi varreg2=/reg///字面量方式创建 varreg3=/reg/ig//字面量+修饰符 匹配 test返回true或false exec返回结果数组,否则返回null varp1=newRegExp('reg'); varstr='Reg' document.write(p1.test(str))//false varp2=newRegExp('reg','i'); document.write(p2.test(str copyright@ 2008-2022 冰豆网网站版权所有 经营许可证编号:鄂ICP备2022015515号-1
")
")
")
")
")
")
")
")
")