html(JS-02)-day04

一、流程控制

1. 作用

控制代码的执行顺序

2. 分类

1）顺序结构

从上到下依次执行代码语句

2）分支/选择结构

1. if语句

• 简单if结构

  if(条件表达式){
  	表达式成立时执行的代码段
  }
  

  注意 : 除零值以外，其他值都为真，以下条件为假值false

  if(0){}
  if(0.0){}
  if(""){} //空字符串
  if(undefined){}
  if(NaN){}
  if(null){}
  

  特殊写法 :
  { }可以省略,一旦省略，if语句只控制其后的第一行代码
• if - else结构

  if(条件表达式){
  //条件成立时执行
  }else{
  //条件不成立时选择执行
  }
  

• 多重分支结构

    if(条件1){
    	//条件1成立时执行
    }else if(条件2){
    	//条件2成立时执行
    }else if(条件3){
    	//条件3成立时执行
    }...else{
    	//条件不成立时执行
    }
  

2. switch语句

• 语法 :

switch(value){
	 case 值1 :
	 //value与值1匹配全等时,执行的代码段
	 break; //结束匹配
	 case 值2 :
	 //value与值2匹配全等时,执行的代码段
	 break;
	 case 值3 :
     //value与值3匹配全等时,执行的代码段
	 break;
	 default:
 	 //所有case匹配失败后默认执行的语句
 	 break;
}

• 使用 :

1. switch语句用于值的匹配，case用于列出所有可能的值；只有switch()表达式的值与case的值匹配全等时，才会执行case对应的代码段
2. break用于结束匹配，不再向后执行；可以省略，break一旦省略，会从当前匹配到的case开始，向后执行所有的代码语句，直至结束或碰到break跳出
3. default用来表示所有case都匹配失败的情况，一般写在末尾，做默认操作
4. 多个case共用代码段
  		case 值1:
  		case 值2:
  		case 值3:
  		//以上任意一个值匹配全等都会执行的代码段

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lXas1ctw-1610273013323)(assets\条件语句1.png)]

<script>
    var month = prompt('请输入月份');
    // if(month == 1){
    // }else if(month == 2){
    // }else if(month == 3){
    // }
    switch(Number(month)){
    
      // case的值和switch中的条件全等 执行case中的语句
      // switch-case的结构在匹配单个值时会更快
      case 1:
      case 3:
      case 5:
      case 7:
      case 8:
      case 10:
      case 12:alert('31天');
              break;
      case 2:alert('28天');
              break;
      case 4:
      case 6:
      case 9:
      case 11:alert('30天');
              break;
      // 以上全部匹配失败 默认执行
      default:
      alert('输入不合法，请重试')
    }
  
  </script>

3）循环结构

• 作用
  根据条件，重复执行某段代码
• 分类

1. while循环

定义循环变量;
   while(循环条件){
   条件满足时执行的代码段
   更新循环变量;
}

2. do-while循环

do{
	循环体;
	更新循环变量
}while(循环条件);

与 while 循环的区别 :

• while 循环先判断循环条件，条件成立才执行循环体

• do-while 循环不管条件是否成立，先执行一次循环体

  <script>
      // console.log(1)
      // console.log(2)
      // console.log(3)
  
      var i = 1;
      while(i<=10){
        console.log(i);
        i++;
      }
  
      // 接收用户输入 如果用户输入不是laowang 就继续输入 直到是laowang为止
      // var uname = prompt('请输入用户名');
      // while(uname!='laowang'){
      //   uname = prompt('请输入用户名');
      // }
  
      // while(true){
      //   var uname = prompt('请输入用户名');
      //   if(uname == 'laowang'){
      //     break;
      //   }
      // }
  
      // 错误 
      // while(uname == 'laowang'){
      //   var uname = prompt('请输入用户名');
      // }
  
      do{
        var uname = prompt('请输入用户名');
      }while(uname!='laowang');
    </script>
  

3. for 循环

for(定义循环变量;循环条件;更新循环变量){
	循环体;
}

循环控制 :

1. break 强制结束循环
2. continue 结束当次循环，开始下一次循环
   循环嵌套 :
   在循环中嵌套添加其他循环
   

 <script>
    // var i = 1;
    // while(i<=10){
    //   console.log(i);
    //   i++;
    // }
  
    // for(声明循环变量;循环条件;更新循环变量){}

    // for(var i=1;i<10;i++){
    //   console.log(i)
    // }

    // 执行顺序
    // var i = 1
    // for(;i<=10;){
    //   console.log(i);
    //   i++
    // }


    // 打印1～20之间的偶数 跳过所有的奇数
    for(var i=1;i<=20;i++){
      // if语句后面如果只有一句话 可以不写{}
      if(i%2) continue;
      console.log(i);
    }
  </script>

二、函数

1. 作用

封装一段待执行的代码

2. 语法

  //函数声明
  function 函数名(参数列表){
  	函数体
  	return 返回值;
  }
  //函数调用
  函数名(参数列表);

3. 使用

函数名自定义，见名知意，命名规范参照变量的命名规范。普通函数以小写字母开头，用于区分构造函数(构造函数使用大写字母开头，定义类)

<script>
    // var uname = prompt('请输入用户名');
    // 
    function sayHello(uname){
      console.log('hello '+uname);
    }
    // console.log(sayHello);
    // 如果函数定义形参后 调用函数时没有实参传递 参数默认值为undefined
    // sayHello();

    var a = 10;
    var b = 20;
    // 传参数必须按照定义的形参传值，否则NaN,如果不给返回值，则得到undefined
    function myAdd(a,b=10){
      // console.log(a+b);
      var res = a+b;
      return res;
    }
    var res = myAdd(a,b)
    console.log('a和b相加的结果为：'+res)
  </script>

4. 匿名函数(加小括号，保留，没名字的话直接在后面加()表示直接运行)

匿名函数：省略函数名的函数。语法为：

• 匿名函数自执行

 (function (形参){
  
 })(实参);

• 定义变量接收匿名函数

 var fn = function (){};
 fn(); //函数调用

<button id="btn">click me</button>
  <!-- 14:57~15:12 -->
  <script>


    // οnclick="sayHello()"
    // 分离事件的绑定
    // 1.通过DOM方式 查找页面元素
    // 通过id属性查找页面元素
    var btn = document.getElementById('btn');
    // dom对象/原生js对象
    // console.log(btn);
    // 通过操作对象的方式 操作页面元素
    // console.log(btn.onclick);
    // 页面中的功能大部分情况下不需要反复执行 通常会根据用户的操作执行或在特定条件下执行
    // 建议使用匿名函数实现功能
    ///将匿名函数直接给到事件，单击事件直接执行匿名函数，不需要给函数命名。
    //btn.οnclick=sayhello
    btn.onclick = function(){
      console.log('hello world');
    }  


    // 声明提前
    // 通过关键字声明的变量或函数 会自动提前到代码的最上方
    // 如果变量声明提前 会将变量名提前到最前面 值留在原地
    // 如果函数声明提前 会将整个函数体一同提前 
    //如果函数声明和变量声明的名字一样，会使用函数声明的结果。

    // console.log(sayHello);//undefined
    // function sayHello(){
    //   console.log('hello world');
    // }
    // var sayHello = function (){
    //   console.log('hello world');
    // }

    
    // sayHello()

    //匿名函数
    // 通过()临时保存一个没有函数名的函数 
    // 需要马上使用
    // (function(){})() 
    // (function (){
    //   console.log('hello world');
    // })()

    // 将匿名函数赋值给变量
    // 通过变量名找到函数 调用函数
    // var sayHello = function (){
    //   console.log('hello world');
    // }
    // sayHello();
  </script>

5. 作用域

JavaScript 中作用域分为全局作用域和函数作用域，以函数的{ }作为划分作用域的依据

1. 全局变量和全局函数
   • 只要在函数外部使用 var 关键字定义的变量，或函数都是全局变量和全局函数，在任何地方都可以访问
   • 所有省略 var 关键字定义的变量，一律是全局变量
2. 局部变量/局部函数
   • 在函数内部使用 var 关键字定义的变量为局部变量，函数内部定义的函数也为局部函数，只能在当前作用域中使用，外界无法访问
3. 作用域链
   局部作用域中访问变量或函数，首先从当前作用域中查找，当前作用域中没有的话，向上级作用域中查找，直至全局作用域
   

<script>

    var a = 10;   
    function fun4(a){
      // 将参数a自增 函数结束后 参数释放不影响全局内容
      a++;
      console.log(a);//11
    }
    // 将全局变量a作为参数传递给函数 
  
    fun4(a);
    console.log(a);//10

    function fun5(){
      // 直接使用全局变量 修改全局变量
      a++;
      console.log(a);
    }
    fun5();


    
    function fun3(){
      var a,b=10;   //声明a,b，a有值，b无值
      console.log(a,b); //undefined 10
    }
    fun3();
    // console.log(b);//ReferenceError
    // console.log(a);//ReferenceError

    function fun2(){ 
      var a = b = c = 10;
    }
    fun2();
    // a是函数内部声明的变量 是局部变量
    // console.log(a);//ReferenceError
    // b,c没声明但是有值 是全局变量
    console.log(b);//10
    console.log(c);//10


    // var a = 10;
    // function fun(){
    //   // var a = 1;
    //   // 变量如果没声明但是有值时 为全局变量
    // 当函数内部没有这个变量时，会在全局变量中寻找，使用全局变量时，如果局部变量没有声明时，则修改为全局变量。
    //全局变量,函数内部的是局部变量，函数内部的变量在执行后如果不返回，则会被释放。
    //   // a = 11;
    //   // a = a+1
    //   // a+=1
    //   // a++;
    //   console.log(a);//?11
    // }
    // fun();
    // console.log(a);//?11
  </script>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>全局函数和局部函数</title>
</head>
<body>
  <button id="btn1">btn1</button>
  <button id="btn2">btn2</button>
  <button id="btn3">btn3</button>
  <script>
    // 16:57~17:12
    // 通过标签名查找一系列元素
    var btns = document.getElementsByTagName('button');
    // console.log(btns);//页面元素的集合
    // console.log(btns[0]);//第一个按钮
    // 0~2的循环
    // 遍历页面元素
    for(var i=0;i<btns.length;i++){
      // console.log(btns[i]);
      btns[i].onclick = function(){
        // 函数内没有i向外查询 使用全局变量i
        console.log(`第${i+1}个按钮`);
      }
    }


    // var btn1 = document.getElementById('btn1')
    // var btn2 = document.getElementById('btn2')
    // var btn3 = document.getElementById('btn3')

    // btn1.onclick = function(){
    //   console.log('hello world')
    // }
    // btn2.onclick = function(){
    //   console.log('hello world')
    // }
    // btn3.onclick = function(){
    //   console.log('hello world')
    // }



    //局部函数只能在内部调用。
    // function fun(){
    //   function inner(){
    //     console.log('hello')
    //   }
    //   return inner
    // }
    // fun()();
    // inner();//ReferenceError: inner is not defined
  </script>
</body>

上面优化：
<body>
  <button id="btn1">btn1</button>
  <button id="btn2">btn2</button>
  <button id="btn3">btn3</button>

  <script>
    // 通过标签名查找一系列元素
    var btns = document.getElementsByTagName('button');
    // console.log(btns);//页面元素的集合
    // console.log(btns[0]);//第一个按钮
    // 0~2的循环
    // 遍历页面元素
    for (var i = 0; i < btns.length; i++) {
      // console.log(btns[i]);
      // btns[i].onclick = function () {
      //   // 函数内没有i向外查询 使用全局变量i
      //   console.log(`第${i + 1}个按钮`);
      // }
      //闭包函数的0.1.2功能保留，等点击时，会调用之前的环境。
      btns[i].onclick = (function (i) {
        return function () {
          // 实现具体功能
          console.log(`第${i + 1}个元素`);
        }
      })(i);
    }

    // 提供运行环境
    // function fun(i){
    //   return function(){
    //     // 实现具体功能
    //     console.log(`第${i+1}个元素`);
    //   }
    // }
  </script>
  <script>
    // 嵌套的函数 
    // 外层函数返回内层函数
    // 内层函数中引用外层函数的变量
    function fun(i) {
      return function () {
        // 实现具体功能
        console.log(`第${i + 1}个元素`);
      }
    }

    console.log(fun());//function
    var res = fun(0);
    res();
    var res2 = fun(1);
    res2();
    var res3 = fun(2);
    res3();
  </script>
</body>

6. 获取多个DOM元素和控制属性

1. 根据标签名获取元素节点列表

var elems = document.getElementsByTagName("");
/*
参数 : 标签名
返回值 : 节点列表,需要从节点列表中获取具体的元素节点对象,添加相应下标。
*/

2. 根据 class 属性值获取元素节点列表

var elems = document.getElementsByClassName("");
/*
参数 : 类名(class属性值)
返回值 : 节点列表
*/

3. 元素节点对象提供了以下属性来操作元素内容

innerHTML : 读取或设置元素文本内容,可识别标签语法
innerText : 设置元素文本内容,不能识别标签语法
value : 读取或设置表单控件的值

4. 获取 DOM 树中的属性值
   

5. 设置 DOM 树中的属性值：

elem.getAttribute("attrname");//根据指定的属性名返回对应属性值
elem.setAttribute("attrname","value");//为元素添加属性,参数为属性名和属性值
elem.removeAttribute("attrname");//移除指定属性

 <input type="text" id="text">
  <button id="btn">显示</button>
  <h1 id="show">xxx</h1>
//id属性在使用时可以直接写id.value得到值。只有ID属性。
  <script>
    // var text = document.getElementById('text');
    console.log(text,btn,show);
    // 当按钮被点击的时候
    // 获取text的值 放入 show中显示
    btn.onclick = function(){
      // 获取表单元素的值时 使用 对象.value
      console.log(text.value);
      // 获取普通页面元素的内容时 使用对象.innerHTML
      console.log(show.innerHTML);  
      //innerHTML可以认识嵌套的标签，innertext只能获取文本
      // console.log(show.innerText);
      show.innerHTML = text.value;
    }
  </script>