HTML-javascript(一)

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(24);
            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(24);
           
		</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)
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值