学习Js-day04

今天学习了函数，主要还是逻辑思维的锻炼，头脑要灵活。总结：多做算法题！！！????

// 自定义函数的定义以及调用     // 1.使用function关键词匿名函数（没有名字的函数）     /* function (形参（可省略）) {         函数体（代码）     } //直接调用 */     /* (function(){         console.log('匿名函数');     })() */     // 匿名函数，声明比较少，没有复用价值 </script> <script>     // 自执行的匿名函数，只执行一次，没有复用价值     (function(){         console.log('匿名函数');     })() </script> <script>     // 1.使用function关键词 定义具名函数      // function函数名（形参，形参.....）{     //     函数体（代码）     // }     // 声明 具名函数（第一种）形参是形容的参数     function sayhello(name){         console.log('hello');     }     // 调用     sayhello('李四') //传进去的是实参 根据你要的参数个数来传递对应的参数     // 具名函数的变种声明 （第二种）     var sayhi = function(){         console.log('hi');     }     // 调用     sayhi()//这种声明，调用只能放在定义之后，因为没有赋值     // 具名函数的两种声明，调用速度来看，第一种更快     // function 和 var 在预编译阶段就会声明     // var关键词修饰的变量在预编译阶段不会赋值      // 使用new Function （new 后面的内容首字母绝对是大写的）     // var 函数名 = new function函数名（‘形参，形参1’，‘函数体’）     var sayBye = new Function('console.log("bye bye!!") ')     sayBye()     var sayBye = new Function('username','console.log("bye bye!!") ')     sayBye('李四')     // 在参数执行之前，有个预编译过程，他会声明对应的function和var关键词修饰的变量（开辟内存的操作）     // 对应的function的内存空间开辟以后他会将对应的代码块放在其中 等待调用     // var 修饰的关键词 只会开辟一个空间 并不会进行赋值（默认给他一个undefined的值）       // return 关键词     // return返回对应的数据的 他是在函数内容进行数据返回的（当你调用了return操作，后面的内容将不再执行）     function sum(a,b){         return a+b;         console.log('不会执行的代码');     }     console.log(sum(1,2));//返回对应的a+b的值     // 如果没有return关键词，返回的一个undefined的值     function sayHi(){         console.log('hi');     }     console.log(sayHi());      // 函数执行过程      // 1.方法栈 （执行栈） 把对应的开辟的function内存里面的代码丢给方法栈去执行     // 2.执行栈就会自动取执行对应的方法 执行完返回对应的结果。     // 3.      function say(){         var a = 10;         a++;         console.log(a);     }     say();     say(); </script>

示例：

<script>     // 阶乘计算     function compute(n) {         var sum = 0;         // 循环1-n         for (var i = 1; i <= n; i++) {             sum += i;         }         return sum     }     console.log(compute(10)); </script> <script>     // 计算最小公倍数     // 方法一     function double(a, b) {         if (a > b) {             for (var i = 1; i <= a * b; i++) {                 a *= i;                 if (a % b == 0) {                     return a;                 }             }         } else {             for (var i = 1; i <= a * b; i++) {                 b *= i;                 if (b % a == 0) {                     return b;                 }             }         }     }     console.log(double(12, 8));      //方法二     function fn(number1, number2) {         var max = number1 > number2 ? number1 : number2         for (var i = max; i <= number1 * number2; i++) {             if (i % number1 == 0 && i % number2 == 0) {                 return i;             }         }     }     console.log(fn(12, 8)); </script> <script>     // 判断是否闰年     function year(time) {         if (time % 4 == 0 && time % 100 != 0 || time % 400 == 0) {             console.log('是闰年');             return;         } else {             console.log('不是闰年');             return;         }     }     year(1696); </script> <script>//判断素数 方法一     var count = 0;      function fn1(number) {         for (var i = 1; i <= number; i++) {             if (number % i == 0)                 count++         }         if (count == 2) {             console.log('素数');         } else {             console.log('不是素数');         }     }     fn1(8) </script> <script>//判断素数 方法二     var count = 0;      function fn3(number) {         for (var i = 2; i < number; i++) {             if (number % i == 0) {                 count++;                 break;             }         }         if (!count) {             console.log('素数');         } else {             console.log('不是素数');         }     }     fn3(2) </script> <script>     function fn4(year) {         if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {             console.log('是闰年');             return;         } else {             console.log('不是闰年');             return;         }     }     function checkDay(day,max){         if(day>0 && day<=max){             console.log('当前日期合法');         }else{             console.log('当前日期不合法');         }     }     function fn2(year,month,day){         if(month>0 && month<=12){             if(month==2){                 if(fn4(year)){                     checkDay(day,29);                 }else{                     checkDay(day,28);                 }             }else{                 switch(month){                     case 4: case 6: case 9: case 11:                         checkDay(day,30);                         break;                     default:                          checkDay(day,31)                            }             }         }     }     fn2(2007,2,30) </script>

函数的嵌套：函数的嵌套: 函数内部可以再包含其他函数; 函数之间允许相互调用，也允许向外调用, 但是不可以调用同级函数的嵌套函数;

<script>     function fn1(){         console.log('函数1');         function fn2(){             console.log('函数2');             //fn3() 死循环             // fn1() 没有结果就是死循环         }         function fn2(){             console.log('函数3');             // 调用函数2             fn2()         }         fn2()         fn3()     }     fn1() //函数1 函数2 函数3 函数2 </script>

函数中的arguments数组

<script>     // arguments是一个伪数组（有部分的数组特性）（可以通过length对应的长度[]）     // 下标来访问里面的元素）     function sum(){//不清楚参数个数         // 获取里面传递的所有参数 arguments 长度length         var result = 0;         for(var i=0;i<arguments.length;i++){             result += arguments[i]         }         return result;     }     console.log(sum(1,3,5));     console.log(sum(1,5));     console.log(sum(1,5,7,9,8)); </script> <!-- 所有的函数都具备arguments（对象） --> <!-- 访问length属性访问长度 --> <!-- []加下标（从0开始）访问里面的元素 -->

函数作用域：

<!-- <script>     // 因为作用域的导致 下面找不到number     var number = 2; //全局作用域 var 关键词声明的是伪全局作用域     function factorial(n){         console.log(number);//undefined         number = 1;//局部变量 位于某一个代码的里面 称为全局变量         // 解决方法 变量提升 用全局变量去提升         return number;     }     // 作用域链     // 先往同级的地方找 找不到向上找 一直向上 直到找到为止     factorial()     console.log(number); //如果外面没有声明number就找不到number（报错）      // 作用域：当前一个变量的作用范围 分为局部作用域（在一个函数内或者在一个代码块内他的作用范围就是当前代码块）和全局作用域（他的作用范围是全局的）     // 当前的作用域内没有找到,就会一直向上找,这个过程就叫做作用域链。 </script> --> <script>     var a = 20;     function fn(){         console.log(a);//20         a = 10;         if(10>9){             console.log(a);//10             a =30;             if(5>4){                 console.log(a);//30                 a = 40;                 if(a>10){                     console.log(a);//40                 }             }         }     }     fn() </script>   <script>     var a = 20;     function fn(){         console.log(a);//20         // a = 10;         if(10>9){             console.log(a);//20             // a =30;             if(5>4){                 console.log(a);//20                 // a = 40;                 if(a>10){                     console.log(a);//20                 }             }         }     }     fn() </script>  <script>     var a = 20;     function fn(){         console.log(a);//undefined         var a = 10;         if(10>9){             console.log(a);//10             var a =30;             if(5>4){                 console.log(a);//30                 var a = 40;                 if(a>10){                     console.log(a);//40                 }             }         }     }     fn() </script>

Dom的简单操作：

<!DOCTYPE html> <html lang='en'> <head> <meta charset='UTF-8'> <meta http-equiv='X-UA-Compatible' content='IE=edge'>  <meta name='viewport' content='width=device-width, initial-scale=1.0'> <title>Document</title> <link rel='stylesheet' href=''> </head> <body>     <input id="number" type="text">     <button id="btn">判断奇数偶数</button> </body> </html> <script>     function handlerClick(){     // document.getElementById('btn').onclink = function(){         // 拿到input框里面的内容 获取到input框         var inputValue = document.getElementById('number').value         // console.log(typeof inputValue);         // 判断         if(inputValue%2==0){             console.log('偶数');         }else{             console.log('奇数');         }     }     // 首先需要点击按钮 获取按键 加点击事件     // 事件触发自动调用对应的函数（事件驱动）     document.getElementById('btn').onclick = handlerClick       // 1.获取对应的标签（通过id获取）     // document.getElementById('id的属性值')     // 2.input框的值获取value属性     // document.getElementById('input框的id').value     // 3.点击事件 onclink     //  </script>

 输入搜索内容打印出来，同按钮实现：

<!DOCTYPE html> <html lang='en'> <head> <meta charset='UTF-8'> <meta http-equiv='X-UA-Compatible' content='IE=edge'>  <meta name='viewport' content='width=device-width, initial-scale=1.0'> <title>Document</title> <link rel='stylesheet' href=''> </head> <body>     <input id="number" type="text" placeholder="请输入电影名">     <button id="btn">搜索</button>     <script>         function handlerClick(){             // 拿到input框里面的内容 获取到input框             var search = document.getElementById('number')             console.log(search.value);             // 将value为空值             search.value = ""         }         // 首先需要点击按钮 获取按键 加点击事件         // 事件触发自动调用对应的函数（事件驱动）         document.getElementById("btn").onclick = handlerClick     </script> </body> </html>

 今日练习！！！

<!DOCTYPE html> <html lang='en'> <head> <meta charset='UTF-8'> <meta http-equiv='X-UA-Compatible' content='IE=edge'>  <meta name='viewport' content='width=device-width, initial-scale=1.0'> <title>Document</title> <link rel='stylesheet' href=''> </head> <body>     <input type="text" id="number1">     <select name="" id="s">         <option value="+">+</option>         <option value="-">-</option>         <option value="*">*</option>         <option value="/">/</option>     </select>     <input type="text" id="number2">     =     <input type="text" id="result">     <button id="btn">计算</button>     <script>         // 简易计算器         function computer(){             // 获取两个输入框的值             var number1 = document.getElementById('number1').value             var number2 = document.getElementById('number2').value             // 获取下拉列表的值             var s = document.getElementById('s').value             // 设置结果             document.getElementById('result').value = fn2(Number(number1),Number(number2),s)         }         document.getElementById('btn').onclick = computer     </script> </body> </html> <script>     function fn1() {         // 遍历数组         var result =1;         for(var i = 0;i<arguments.length;i++){             result *= arguments[i]         }         return result     }     console.log(fn1(1,2,3)); </script> <script>     // 实现加减乘除运算     // function fn2(n1,n2){     //     var sum = n1+n2;     //     var reduce = n1 - n2;     //     var product = n1*n2;     //     var quotient = n1/n2;     //     console.log('两数相加为' + sum);     //     console.log('两数相减为' + reduce);     //     console.log('两数相乘为' + product);     //     console.log('两数相除为' + quotient);     // }     // fn2(3,2) </script> <script>     // 第二种方法     function fn2(number1,number2,s){         var result = 0             switch(s){                 case '+':                     result = number1+number2                     break                 case '-':                     result = number1-number2                     break                 case '*':                     result = number1*number2                     break                 case '/':                     result = number1/number2                     break                 default:                     console.log('参数错误');             }             return result         }         console.log(fn1(10,20,'+')); </script> <script>//写个函数实现n的阶乘     function fn3(n){         if(n==1){             return 1;         }else {             return fn3(n-1)*n         }     }     console.log(fn3(3)); </script> <script>//找出0-100之间7的倍数，和包含7的数字     for(i=1;i<=100;i++){         if(i%7==0 || i%10==7 || parseInt(i/10)==7){             console.log(i);         }     } </script> <script>//不用循环，计算0-100以内的数字和     function fn4(n){         if(n==1){             return 1;         }else{             return fn4(n-1)+n;         }     }     console.log(fn4(100)); </script> <script>//兔子繁殖问题，设有一只新生兔子，从第四个月开始他们每个月, 月初都生一只兔子, 新生的兔子从第四个月 //月初开始又每个月生一只兔子按此规律，并假定兔子没有死亡, // n(n<=20)个月月末共有多少只兔子？     function fn5(n){         if(n==1 || n==2 || n==3){             return 1;         }else{             return fn5(n-1)+fn5(n-3)         }     }     console.log(fn5(20)); </script>