学习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>