JavaScript 3

最新推荐文章于 2024-04-05 02:45:00 发布

原创最新推荐文章于 2024-04-05 02:45:00 发布 · 465 阅读

0 ·

CC 4.0 BY-SA版权

JavaScript 专栏收录该内容

4 篇文章

订阅专栏

12.javascript中的对象、属性、方法/函数

    对象、属性、方法基本和java的中的理解保存一致.
   特别的对javascript中的方法/函数稍作说明:
   12.1 形式

        //无参的
        function test1(){

        }
        //有参的
        function test2(name){

        }
        //多个参数的
        function test3(v1,v2){
            alert(v1+v2);
        }
        //有返回值的
        function test4(v1,v2){
            return v1+v2;
        }
        //匿名函数 在上面自定义对象的例子中有使用过
        function(){
            //....
        }

   12.2 位置
       定义在<script>标签中或者是外部的.js文件中
       注意:定义函数并不是执行函数

   12.3 调用
       在<script>标签中调用定义的函数
           例如:可以先调用后定义

           <script type="text/javascript">
                test();
                function test(){
                    alert("hello world");
                }
                test();
            </script>

在html元素的事件属性中调用定义过的函数
例如:可以先调用后定义

            <script type="text/javascript">
                function test(){
                    alert("hello world");
                }
            </script>

            <input type="button" value="点击" onclick="test()" />

例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
//方法
//语法 function method_name(args...){}
//方法不会自己执行，方法都要手动调用
//或者基于事件调用
//注意：有多个同名的函数的时候
//js只会调用到最后一个函数，和函数中的参数无关
//test();
function test(){
	document.write("test......");
	/* console.log("test......."); */
}
function test(msg){
	document.write("test......"+msg);
	/* console.log("test......."+msg); */
}
function test2(v,v1){
	document.write(v+"---"+v1);
}
//有返回值的函数只要加return语句
function test3(a,b){
	return a+b;
}
var add=test3(12,23);
document.write(add);
//test();
</script>
</head>
<body>
<!-- 事件触发方法 -->
   <input type="button" onclick="test2()" value="提交"/>
   <p onclick="test()">这是段落</p><br>
   <div onclick="test()">test</div>
</body>
</html>

13.javascript中的局部变量和全局变量

    13.1局部变量:
       在 JavaScript 函数内部声明的变量（*使用 var *）是局部变量，所以只能在函数内部访问它。（该变量的作用域是局部的）。

       可以在不同的函数中使用名称相同的局部变量，因为只有声明过该变量的函数才能识别出该变量。

       只要函数运行完毕，局部变量就会被删除。
   13.2全局变量:
       在函数外声明的变量是全局变量，网页上的
       所有脚本和函数都能访问它。
       注意:全局变量都默认是window对象的属性
       ,所以一个全局变量name也可以用
       window.name来访问,方法window的属性的
       是都可以省去window不写,直接写属性名字
       就可以了.window的方法也是同样的.
       window是javascript中的一个内置对
       象可以直接使用表示浏览器窗口
   13.3变量的声明周期:
       javaScript 变量的生命期从它们被声明的时间开始。
       局部变量会在函数运行以后被删除。
       全局变量会在页面关闭后被删除。
   13.4向未声明的 JavaScript 变量分配值
       如果您把值赋给尚未声明的变量，该变量将被自动作为全局变量声明。
       name="tom";
       将声明一个全局变量 name，即使它在函数内执行。
       例如: 注意全局变量会在页面关闭后被删除。

           <script type="text/javascript">
                function test(){
                    var name = "tom";
                }
                
                function test1(){
                    alert(name);
                }
                
                test();
                test1();

            </script>

例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
//变量（全局变量和局部变量）
//局部变量：定义在函数（方法）内部的变量
//作用范围：只在函数（方法）内部使用，函数执行完成变量也就销毁
//注意：局部变量赋值但是没有声明的，自动转换为全局变量。例：age=44;
function test(){
	//局部变量
	var age=33;
	age=44;
	document.write(age+"*****");
}
//ReferenceError: age is not defined
/* document.write(age+"^^^^^^");  */
 //全局变量：在函数外部定义的变量
 //作用范围：整个页面script脚本中
 //页面关闭的时候变量销毁
 //全局变量
 var age=55;
 test();
 document.write(age+"^^^^^^"); 
</script>
</head>
<body>
<script type="text/javascript">
document.write(age+"&&&&&&")
</script>
</body>
</html>

14.javascript中的运算符

14.1 算术运算符

        +         加法     
        -         减法     
        *         乘法     
        /         除法     
        %         取模
        ++        自增     
        --        自减

14.2 赋值运算符

          给定 x=10 和 y=5
         =     x=y                x=5
        +=     x+=y     x=x+y     x=15     
        -=     x-=y     x=x-y     x=5
        *=     x*=y     x=x*y     x=50
        /=     x/=y     x=x/y     x=2
        %=     x%=y     x=x%y     x=0

14.3字符串的 + 运算符

    连接多个字符串:
            txt1="What a very";
            txt2="nice day";
            txt3=txt1+txt2;
        
            txt1="What a very";
            txt2="nice day";
            txt3=txt1+" "+txt2;

14.4字符串和数字进行加法运算

     例如:
            x=5+5;
            y="5"+5;
            z="Hello"+5;

            x,y, 和 z 输出结果为:
            10    数字类型
            55    字符串类型
            Hello5  字符串类型

15.javascript中的比较

15.1 比较运算符

        对于给的变量x=5:
        ==     等于     
            x==8     false
            x==5     true
            x=="5"   true

        === 绝对等于/恒等于 (值和类型均相等)
            x==="5"  false     
            x===5    true

        !=      不等于     
            x!=8     true
        !==  绝对不等于 (值和类型均不相等)
            x!=="5"  true
            x!==5    false

        >      大于     
            x>8      false
        <      小于     
            x<8      true
        >=      大于或等于     
            x>=8     false
        <=      小于或等于     
            x<=8     true

15.2 逻辑运算符

        对于给的变量 x=6 以及 y=3:
        &&     and     (x < 10 && y > 1) 为 true
        ||     or      (x==5 || y==5)    为 false
        !      not     !(x==y)           为 true

注意:& |运算结果是0或者1

    15.3 条件运算符
       java中的三目运算符:
       var msg =(age<18)?"年龄太小":"年龄已达到";

16.条件语句

16.1 if语句

        if (condition){
            // 当条件为 true 时执行的代码
        }
        -----------------------------------
        if (condition){
            //当条件为 true 时执行的代码
        }
        else{
            //当条件不为 true 时执行的代码
        }
        -----------------------------------
        if (condition1){
            //当条件 1 为 true 时执行的代码
        }
        else if (condition2){
            //当条件 2 为 true 时执行的代码
        }
        else {
            //当条件 1 和 条件 2 都不为 true 时执行的代码
        }

16.2 switch语句

   例如:
        var day=new Date().getDay();
        var x = "";
        switch (day){
            case 0:
              x="Today it's Sunday";
              break;
            case 1:
              x="Today it's Monday";
              break;
            case 2:
              x="Today it's Tuesday";
              break;
            case 3:
              x="Today it's Wednesday";
              break;
            case 4:
              x="Today it's Thursday";
              break;
            case 5:
              x="Today it's Friday";
              break;
            case 6:
              x="Today it's Saturday";
              break;
            default:
              x="error!!!";
        }

17.循环

17.1 for循环

        for (var i=0; i<5; i++){
            document.write("hello world");
        }
        -----------------------------
        for (i=0; i<5; i++){
            document.write("hello world");
        }

    注意:千万不要写成了for(int i=0;...)

    17.2 for-in循环

        var person={fname:"John",lname:"Doe",age:25};

        for (x in person){
             alert(x+":"+person[x]);
        }
        -------------------------------------
        var arr = [1,3,4,5];
        for(x in arr){
            alert(x+" : "+arr[x]);
        }

17.3 while循环 do-while循环

        var i=0;
        while (i<5){
              document.write("hello world");
              i++;
        }
        ------------------------------
        var i=0;
        do{
            document.write("hello world");
            i++;
        }while(i<6);

18. javascript中break 、continue 、标签用法和java中的一样.

break可以跳出当前标记代码块:

    test1:{
        test2{
            document.write("hello world");
            document.write("hello world");
            document.write("hello world");
            break test1;
        }
        document.write("hello world");
        document.write("hello world");
        document.write("hello world");
    }

19.javascript中的错误

19.1 try-catch

        try{
            alert1("test");
            alert("hello");
        }
        catch(err){
            alert(err);
        }

注意:如果是语法错误SyntaxError,catch就捕获不到

19.2 throw

       try{
            var x = 3;
            if(x=="")    throw "empty";
            if(isNaN(x)) throw "not a number";
            if(x>10)     throw "too high";
            if(x<5)      throw "too low";
        }
        catch(err){
            alert(err);
        }

例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
/* var str="test"+"hello";
var str1="test"+1;
var num=1+1;
var n="tom"+true;
document.write(str+"<br>");
document.write(str1+"<br>");
document.write(num+"<br>");
document.write(n+"<br>"); */
//比较运算符

//==：只比较值的大小，不比较类型
/* 	var n=5;
	document.write((n==5)+"<br>");//true
	document.write((n=="5")+"<br>");//true
	document.write((n==4)+"<br>");//false */

//===：既比较值的大小还比较类型
/* 	var n=5;
	document.write((n===5)+"<br>");//true
	document.write((n==="5")+"<br>");//false
	document.write((n===4)+"<br>");//false */
	
//!=：看值的大小，不关注类型
	/* var n=5;
	document.write((n!=5)+"<br>");//false
	document.write((n!="5")+"<br>");//false
	document.write((n!=4)+"<br>");//true  */
	
//!==：看值的同时，还要看类型
/*     var n=5;
	document.write((n!==5)+"<br>");//false
	document.write((n!=="5")+"<br>");//true
	document.write((n!==4)+"<br>");//true */
	
//&&:并且(and)
//T&&T=T T&&F=F F&&T=F F&&F=F
//document.write((3<10&&3>4)+"<br>");//false

//||:或(or)
//T||T=T T||F=T F||T=T F||F=F
//document.write((3<10||3>4)+"<br>");//true

//& 并且 得到的结果是0或1
//T&T=1 T&F=0 F&T=0 F&F=0
//document.write((3<10&3>4)+"<br>");//0

//| 或 得到的结果是0或1
//T|T=1 T|F=1 F|T=1 F|F=0
//document.write((3<10|3>4)+"<br>");//1

//三目运算
/* var name=prompt("请输入名字:");
var ms=(name=="tom")?"欢迎":"拒绝";
document.write(ms); */

//if语句
/* var name=prompt("请输入名字:");
if(name=="tom"){
	document.write("欢迎");
}else if(name=="jake"){
	document.write("拒绝");
}else{
	document.write("稍等");
} */

//switch语句
/* var name=prompt("请输入星期:");
document.write(typeof(name));
//js中将字符串转化为数字类型
var na=parseInt(name);
switch (na) {
case 1:
	document.write("星期天");
	break;
case 2:
	document.write("星期一");
	break;
case 3:
	document.write("星期二");
	break;
case 4:
	document.write("星期三");
	break;
case 5:
	document.write("星期四");
	break;
case 6:
	document.write("星期五");
	break;
default:
	document.write("星期六");
	break;
} */

//for循环
/* for( i=0;i<10;i++){ */
/* for(var i=0;i<10;i++){
	document.write(i+"<br>");
} */
//for-in循环：主要遍历数组和js对象
/* var arr=["test",33,true,new Date()];
//其他全用und修饰
arr[100]='huzl';
 for(i in arr){
	document.write(i+"---"+arr[i]+"<br>");
	}  */
/* for(var i in arr){
	document.write(i+"---"+arr[i]+"<br>");
	} */
	
	 /* var person={
			name:"tom",
			age:33,
			gender:true,
			say:function(msg){
				document.write("test......"+msg);
			}};
	for(i in person){
		//i指的是属性的名字和方法的名字
		document.write(i+"---"+person[i]+"<br>");
		}   */
		
//while循环
 /* var sum=0;	
 var i=0;
while(i<=100){
   sum+=i;
   i++;
}
document.write(sum+"<br>"); */

//do while循环
/* var sum=0;	
var i=0;
do {
	 sum+=i;
	   i++;
} while (i<=100);
document.write(sum+"<br>"); */

//break & continue
 /* for(var i=0;i<10;i++){
	if(i==5){
		//break; 
		continue;
	}
	document.write(i+"<br>");
}  */
//break 跳出代码块（必须指明跳出那个代码块）
/* test1:{
	document.write("test<br>");
	document.write("test1<br>");
	document.write("test2<br>");
	test2:{
		document.write("tom1<br>");
		document.write("tom2<br>");
		break test1;
		document.write("tom3<br>");
	}
	document.write("briup<br>");
	document.write("briup1<br>");
} */

//try-catch
//catch中的参数异常内容，名字随便起
//注意：try-catch不能捕获语法错误
/* try {
	//int num=10;
	document.write("test....");
	// TypeError: document.writ is not a function
	// document.writ("test....");
	window.alert1(1111);
} catch (e) {
	alert(e);
}
function alert1(msg){
	document.write("test...."+msg);
} */

//isNaN()：判断一个值是不是一个数字
/* var name=prompt("请输入一个数字:");
var b=isNaN(name);
//false不是 不是一个数字-》是数字
//true是 不是一个数字-》不是数字
document.write(b);//12  false */

/* var name=prompt("请输入一个数:");
try {
	if(name==5)throw"不能为5";
	if(isNaN(name))throw"必须为一个数字";
	document.write("test.....ok");
} catch (e) {
	alert(e);
} */
function test(){
	//跳转到一个新的资源
	//让浏览器重新加载一个新的资源
	window.location.href="test5.html";
}
</script>
</head>
<body>
<!-- <a href="test5.html">点击</a> -->
<!-- <a href="javascript:void(0)">点击</a> -->
<!-- <a href="javascript:void(0)" onclick="test()">点击</a>
<div onclick="test()">divtest</div> -->
<div>test1</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div id="dd">test2</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div><a name="tt">test3</a></div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<a href="#">回到顶部</a>
<a href="#dd">回到test2</a>
<a href="#tt">回到test3</a>
</body>
</html>

20.void关键字

javascript:void(0) 是我们经常在超链接中用到的代码.

   href="#"与href="javascript:void(0)"的区别:
       # 包含了一个位置信息，默认的锚是#top
       也就是网页的上端。
       而javascript:void(0), 仅仅表示一个死链接。
       <a href="javascript:void(0);">
       点我没有反应的!</a>
       <a href="#pos">点我定位到指定位置!</a>