JS第三天学习（循环、函数）

一.JavaScript的循环

1.JavaScript的for循环

// **循环是将代码执行指定的次数。**
// for循环
// for(语句1;语句2;语句3){
//     // 执行的代码
// }
// 语句1：条件的变量的初始值(代码执行前执行) 只执行一次
// 语句2：循环条件
// 语句3：循环(代码块)已被执行后执行的代码(通常是自增或自减

    for (var i = 0; i < 4; i++) {
        // console.log(i,"执行的代码")
        document.write("☆☆☆☆☆<br/>")
    }
    三角形
    var a;
	   var b;
	   for(b=0;b<9;b++){
		 for(a=0;a<0+b;a++){
		 	document.write("@ ")
		 }  
		 document.write("<br/>")
	   }

2.JavaScript的break和continue

   // break：跳出循环  终止
   // for(var i=0;i<10;i++){
   //     if(i==5){
   //         break;//终止循环
   //     }
   //     console.log(i);
   // }

   // continue：跳过循环中的某一步  不终止循环
   var j;
   for(j=10;j>0;j--){
       if(j==5){
           continue;//跳过当前循环
       }
       console.log(j);
   }

3.JavaScript的for…in循环

// **用于遍历对象的属性 多于用对象，数组等数据类型。**
   // for(prop in object){
   //     // prop:对象的属性
   //     // object:被遍历的对象
   // }

   // 数据类型：对象 {}
   var person={
       name:"曹杨",
       age:22
   }

   for(x in person){
       console.log(x,person[x]);
   }

4.JavaScript的while循环

// while循环  当什么什么的时候
   // 只要指定的条件为true,循环就可以一直执行代码   
   // while(条件){
   //     // 条件成立时执行的代码
   //     // 自增或自减
   // }
   
   var i=0;
   while (i<4) {
       // console.log(i,"接力赛继续");
       document.write("@@@@@<br/>")
       i++;
   }

5.JavaScript的do…while循环

// var i=5;
   // while (i<4) {
   //     // console.log(i,"接力赛继续");
   //     document.write("@@@@@<br/>")
   //     i++;
   // }

   var i=10;
   do{
       console.log(i,"接力赛继续");
       // document.write("@@@@@<br/>")
       i++;
   }while(i<4);

6.JavaScript使用循环打印图形

   // 正方形  
   // for (var i = 0; i < 10; i++) {
   //     document.write("@ @ @ @ @ @ @ @ @ @ <br/>")
   // }

   // 执行次数
   // for (var i = 10; i > 0; i--) {
   //     document.write("@ @ @ @ @ @ @ @ @ @ <br/>")
   // }

   // 一行打印5次   打印5行
   // for (var j = 0; j < 5; j++) {
   //     // 打印5行
   //     for (var i = 0; i < 5; i++) {
   //         // 一行打印5次 
   //         document.write("@ ")
   //     }
   //     document.write("<br/>")
   // }


   // 三角形
   // for (var j = 0; j < 8; j++) {
   //     // 打印5行
   //     for (var i = 0; i < j+1; i++) {
   //         // 一行打印？次 
   //         document.write("@ ")
   //     }
   //     document.write("<br/>")
   // }

   // 平行四边形
   for (var j = 0; j < 8; j++) {
       // 打印5行
       for (var i = 0; i < j+1; i++) {
           // 一行打印？次 
           document.write("&nbsp;&nbsp;")
       }
       for (var k = 0; k < 8; k++) {
           // 一行打印？次 
           document.write("@ ")
       }
       document.write("<br/>")
   }
   // while打印倒三角形
   
   for(var m=0;m<8;m++){
       console.log(m+"*"+m+"="+m*m);
   }

二.JavaScript函数

1.JavaScript函数的声明

    // 变量声明 通过var关键字
    var a=10;


    // 函数的声明
    // function 函数名(参数){
    //     函数体
    //     return 返回值
    // }

    // 通过function关键字声明
    // func:函数名
    // x:函数的参数
    // {}:函数体
    function func(x){
        // 执行的代码
        console.log("这是一个函数")
    }

    // console.log(func);

    // 函数的调用  通过函数名调用
    func();
    func();
    func();
    func();

    // 声明提升？ 
    // console.log(i);//undefined
    // var i=10;

    console.log(func2);// 函数声明也存在提升
    function func2(){

    }

2.JavaScript命名函数和匿名函数

// 1.命名函数
    function func(){
        console.log("这是一个命名函数")
    }
    // 调用func
    func();//方法+() 代表立即执行

    // 2.匿名函数
    // document.onclick=function(){
    //     console.log("这是一个点击事件驱动的匿名函数")
    // }

    // 使用变量将匿名函数进行储存 
    var func3=function(){
        console.log("通过变量储存的匿名函数")
    }

    // 通过变量名进行函数的调用
    // func3();
    // func3();
    // func3();

    document.onclick=func3;

    // function func2(){
    //     console.log("这是一个被点击事件驱动的命名函数")
    // }
    // document.onclick=func2;

JavaScript传参函数和无参函数

// 1.无参函数
    function func() {
        console.log("无参函数")
    }
    var func2 = function () {
        console.log("无参函数2")
    }

    // 2.传参函数 f(x)=x+1    
    // 参数：调用方法(函数)时，根据传入的参数的不同，而返回不同的结果。
    
    // x：形参  形式上的参数
    function func3(x) {
        console.log(x)  
    }
    // 调用
    func3(1);//1 实参   实际的参数
    func3(2);//2 实参
    func3(3);
    func3(4);

    // 拼接字符串
    function newStr(str1,str2) {
        console.log(str1+str2)        
    }

    newStr("hello","world");
    newStr("hello","China");
    newStr("hi","Nanjing");
    newStr("你好,","web21");