Web Collection 05 episodios (declaraciones de control de JavaScript, funciones de JS)

1. Control de procesos

1. Función

Orden de ejecución del código de control

2. Clasificación

1) Estructura de la secuencia

Ejecute declaraciones de código secuencialmente de arriba a abajo

2) Estructura de rama / selección

1. declaración if

• Estructura simple si

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

  Nota: Excepto por el valor cero, todos los demás valores son verdaderos, las siguientes condiciones son falso valor falso

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

  Escritura especial:
  {} se puede omitir, una vez omitido, la instrucción if solo controla la primera línea de código después de ella

• estructura if-else

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

• Estructura de múltiples ramas

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

2. La declaración de cambio

• Sintaxis:

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

• Usar:

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

3) Estructura de bucle

• Función
  Según las condiciones, ejecute repetidamente una determinada pieza de código
• clasificación

1. mientras que bucle

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

2. bucle de hacer mientras

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

La diferencia con el ciclo while:

• El bucle while juzga primero la condición del bucle y ejecuta el cuerpo del bucle cuando se satisface la condición
• El ciclo do-while ejecuta el cuerpo del ciclo una vez independientemente de si la condición es verdadera o no

3. en bucle

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

Control de ciclo:

1. romper forzado para terminar el bucle
2. continuar Finaliza el bucle actual e inicia el siguiente
   bucle Bucle anidado:
   agrega otros bucles anidados en el bucle

En segundo lugar, la función

1. Función

Encapsular un fragmento de código para ejecutar

2. Gramática

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

3. Utilice

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

Demo 【Función】

<script>
        // function sayHello(){
        //     alert('hello world');
        //     //没有返回值 默认返回undefined
        //     return 'hello world'
        // }
        // alert(sayHello());
        function sayHello(name){
            alert('hello '+name);
        }
        sayHello('Demo');
        //定义参数但没有传值时 默认为undefined
        // sayHello();
    </script>

4. Funciones anónimas

Función anónima: una función que omite el nombre de la función. La sintaxis es:

• Función anónima autoejecutable

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

• Definir variables para recibir funciones anónimas

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

Nota:

• Declarar de antemano
• Las variables y funciones globales se declararán de antemano cuando se declaren
• La variable avanzará el nombre de la variable al valor superior y permanecerá en su lugar
• El nombre de la función avanzará a la parte superior con el contenido de la función.

Demostración 【Función anónima】

  <button id="btn" >
        click me! 
 </button>
<script>
    // 元素绑定事件方式
   //1.查找元素 通过ID查找元素
     var btn = document.getElementById('btn');
	 //找到的是DOM对象
    // console.log(btn.onclick);
   // 2.为元素的点击效果绑定一个匿名函数
   btn.onclick = function(){
    
    
       alert('hello world');
 }
</script>

5. Alcance

El alcance en JavaScript se divide en alcance global y alcance de función, y el {} de la función se usa como base para dividir el alcance.

1. Variables globales y funciones globales
   ① Siempre que las variables definidas por la palabra clave var fuera de la función, o las funciones sean variables globales y funciones globales, se puede acceder a ellas desde cualquier lugar
   ②Todas las variables definidas al omitir la palabra clave var son variables globales
2. Variables locales / funciones locales
   Las variables definidas por la palabra clave var dentro de la función son variables locales, y las funciones definidas dentro de la función también son funciones locales, que solo pueden usarse en el ámbito actual y no pueden ser accedidas por el mundo exterior.
3. Cadena de alcance Para
   acceder a una variable o función en un alcance local, primero búsquelo en el alcance actual, si no hay ninguno en el alcance actual, búsquelo en el alcance superior hasta el alcance global.

### Demostración 01 Alcance 01】

<script>
        function up(num){
     
     
            return function(){
     
     
               console.log(num +1);
            }
        }
        // res = up(1);//获取到内部返回的匿名函数
        // res();//调用内部函数
        up(1)();
</script>

Demo 【Alcance 02】

<script>
         var a = 10;
        function up(){
    
    
            // a++;
            // a += 1
            a = a+1;//没声明  但有值 全局变量
        }
        up();
        console.log(a);
</script>

Demostración 【Llamada a función】

<script>
 sayHello();
        // sayHello2(); //声明提前的变量值为 undefined ,报错
        function sayHello(){
     
     
            alert('this is function sayHello');
        }
        var sayHello2 = function(){
     
     
            alert('this is function sayHello2');
        }
        sayHello2();
</script>

6. Obtenga varios elementos DOM y atributos de control

1. Obtenga la lista de nodos de elementos según el nombre de la etiqueta

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

2. Obtenga la lista de nodos de elementos según el valor del atributo de clase

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

3. El objeto de nodo de elemento proporciona los siguientes atributos para manipular el contenido del elemento

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

4. Obtenga el valor del atributo en el árbol DOM
   

5. Establezca el valor del atributo en el árbol DOM:

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

Demostración 【Completa】

<style>
        ul,li{
     
     
            padding: 0;
            margin: 0;
            list-style: none;
        }
        ul{
     
     
            width: 600px;
            /* height: 50px; */
            background-color: #4f8dfe;
            /* overflow: hidden; */
        }
        ul>li{
     
     
            /* width: 50px; */
            width: auto;
            height: auto;
            text-align: center;
            float: left;
            /* color: #fff; */
            padding: 5px 10px;
            margin: 5px 10px;
        }
        ul>li:hover{
     
     
            cursor: pointer;
            color: #01318a;
        }
        .clear{
     
     
            clear: both;
        }
    </style>
</head>
<body>
    <ul>
        
        <!-- <li>
            <a href="">首页</a>
        </li> -->
        <li>首页</li>
        <li>免费课</li>
        <li>会员课</li>
        <li>直播课</li>
        <li >精品课</li>
        <div class="clear"></div>
    </ul>

    <script>
        // 找元素
        var lis = document.getElementsByTagName('li');
        console.log(lis);//HTML 元素集合
        // console.log(lis[0]);
        for(var i = 0;i<lis.length;i++){
     
     
            // 获取每一个li标签
            console.log(lis[i]);
            // 获取标签中的内容
            console.log(lis[i].innerText);
            // 为每一个li添加onclick
            // onclick = function(){}
        }
    </script>

<script>
var lis = document.getElementsByTagName('li');
        for(var i=0;i<lis.length;i++){
            lis[i].onclick = function(){
                alert('第'+(i+1)+'个标签');
            }
        }
        console.log(i);