3.HTML-javascript(一)
3.1 javascript 简介
3.1.1 基于对象和事件驱动的语言,应用于客户端(浏览器)
基于对象:封装好了对象,可以直接使用
事件驱动 : 由各种点击,滑动来触发,驱动动态效果显示
客户端:专门应用于浏览器
3.1.2 js的特点
(1)信息交互
动态的与用户交互
(2)安全性
不能直接访问用户的磁盘
(3)跨平台向
只要有支持js的浏览器,所有系统都可以使用
3.1.3 javascript和java的关系
(1)java是sun公司,js是网景
(2)java是面向对象,js是基于对象
(3)java是强类型语言,js是弱类型
java: int i=0;
js: var i="a";
var i=1;
(4)java需要编译运行,js只需要浏览器解析就行
3.1.4 js的组成
(1)ECMAScript
ECMA:欧洲计算机协会
由他们来制定js的语法,语句…
(2)BOM
broswer object model,浏览器对象模型,可以操作浏览器
(3)DOM
document object model,文档对象模型,可以操作网页上显示的内容
3.2 js和html的两种结合方式
3.2.1 使用标签
<script type="text/javascript">
//js代码
</script>
3.2.2 使用script标签引用外部js文件
<script type="text/javascript" src="myjs.js">
//js代码(注意,此时script标签内写的js代码就不会生效)
</script>
3.3 js的原始数据类型和声明及语句
<html>
<head>
<script type="text/javascript">
//数据类型
//定义变量都使用关键字var
// string 字符串
var str="abc";
//-number
var i=1;
// boolean
var flag=true;
// null
var ob=new Date();
表示对象的引用为空。
// undefined
var ob;//表示只声明了对象。
typeof();判断当前变量的类型
//js语句
if( ){ }
switch( ){ }
for( ){ }
while( ){ }
do{ }while( )
</script>
</head>
<body>
</body>
</html>
3.4 js运算符
-js里面不区分小数和整数(123/1000*1000=123,而不是0)
-js里面字符串的加减
var str="456"
alert(str+1);//输出4561,字符串相加的运算
alert(str-1);输出455,数字相减的运算
-boolean类型的操作
var flag=true;
alert(flag+1);输出2,true相当于1
var flag=false;
alert(flag+1);输出1,false相当于0
-==和===的区别
==:比较值
===:比较值和类型
补充点:document.write()可以向页面输出文本,代码,值。
3.5 函数(方法)三种创建方法
3.5.1 普通函数
<html>
<head>
<script type="text/javascript">
//无参函数
function text(){
alert("aaa")
}
text();
//带参数的函数,不需要声明参数的类型
function text1(a,b){
var sum = a+b;
alert(sum);
}
text1();
//带返回值的函数
function text2(a,b){
var sum = a+b;
return sum;
}
var result = text2(2,4);
alert(result);
</script>
</head>
<body>
</body>
</html>
3.5.2 匿名函数
<html>
<head>
<script type="text/javascript">
//匿名函数
function(a,b){
var sum = a+b;
alert(sum);
}
text(2,4);
</script>
</head>
<body>
</body>
</html>
3.5.2 动态函数,使用Function对象(用的少)
<html>
<head>
<script type="text/javascript">
//动态函数
var canshu="a,b";
var fangfa="var sum=a+b;return sum";
var add4=new Function(canshu,fangfa);
var sum=add4(3,6);
alert(sum);
</script>
</head>
<body>
</body>
</html>
3.6 js函数的重载
重载:方法名相同,参数不同
js中不存在重载,但是可以通过别的方式模拟重载
<html>
<head>
<script type="text/javascript">
function fun1(){
var len = arguments.length;
var sum =0;
for(var i = 0;i<len;i++){
var a = arguments[i];
sum+=a;
}
alert(sum);
}
var r1 = fun1(1,2);
alert(r1);
var r2 = fun1(1,2,3);
alert(r2);
</script>
</head>
<body>
</body>
</html>
3.7 js的全局变量和局部变量
全局变量
在script标签内定义的变量,所有的函数,script标签都可以访问
局部变量
在函数内部定义的变量,只能在当前函数里访问
3.8 script存放位置
建议放在之后,html是从上向下解析,若把script标签放在head里面,但是script标签里面用到了body里面的标签时,会提示空.
3.9 js的string对象
属性
-length:字符串的长度
方法
html相关的
bold():字体加粗
fontcolor(颜色值):字体颜色
fontsize(1-7):字符串大小
link("链接地址"):将字符串显示成链接
sub()和sup():将字符串显示成下标或者上标
java类似的
concat(str):链接字符串
charAt(index):返回指定位置的字符串,如果下标越界,返回空字符
indexOf(str):返回str字符所在的下标,若字符不存在,返回-1
split(str):按str拆分字符,返回字符数组
replace(str1,str2):把str1替换成str2
substr(index,length):从第index开始,截取length个字符
substring(start,end):从start开始,截取到end [start,end)