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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(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(循环条件){
   条件满足时执行的代码段
   更新循环变量;
}
  1. 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>
    
  1. 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("");
/*
参数 : 标签名
返回值 : 节点列表,需要从节点列表中获取具体的元素节点对象,添加相应下标。
*/
  1. 根据 class 属性值获取元素节点列表
var elems = document.getElementsByClassName("");
/*
参数 : 类名(class属性值)
返回值 : 节点列表
*/
  1. 元素节点对象提供了以下属性来操作元素内容
innerHTML : 读取或设置元素文本内容,可识别标签语法
innerText : 设置元素文本内容,不能识别标签语法
value : 读取或设置表单控件的值
  1. 获取 DOM 树中的属性值
    在这里插入图片描述

  2. 设置 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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值