• Document


    1、认识函数

    /*
    函数概念:
    函数就是把完成特定功能的一段代码[抽象出来],使之成为程序中的一个[独立实体],起个名字(函数名)。可以在同一个程序或其他程序中多次重复使用(通过函数名调用)。
    */

    /*
    【注】用户自己起的名字是标识符。 函数名也属于标识符。
    1、见名思意
       函数语法:
       无参函数
    函数的声明:相当于写了一份说明书,给计算机一本书,这个代码写在第41页上。
    格式:
    function 函数名(){
      函数体;(一段代码)
    }
    函数的调用:
    格式:函数名();
    【注】封装函数相当于写一份说明书。
    */

    		/*function print(){
    			for(var i = 0; i < 10; i++){
    				document.write("hi world! <br/>");
    			}
    		}*/
    		var print = function(){
    			for(var i = 0; i < 10; i++){
    				document.write("hi world! <br/>");
    			}
    		}
    
    
    
    		print();
    
    
    		//员工教用户使用手机
    		/*for(var i = 0; i < 10; i++){
    			document.write("hello world! <br/>");
    		}*/
    		
    		/*
    			100行代码以后
    		*/
    		print();
    
    
    
    		/*
    			
    		*/
    		print();
    		print();
    		print();
    

    /*
    1、代码太乱
    2、重复代码太多。
    3、后期代码维护,相当困难
    4、太难阅读了。
    */

    /*
    使程序变得更简短而清晰
    有利于程序维护
    可以提高程序开发的效率
    提高了代码的重用性(复用性)
    */

    2、函数

    1、内置函数/系统函数

    // alert();   doucment.write()  Math.random()  Math.pow()

    2、用户自定义函数
    			【重点】函数名的声明,除了要遵守标识符声明的规则以外,还要遵守以下规则。  
    			 <1>函数名必须体现其功能    
    			 <2>函数的功能尽可能保证单一。   
    			 【注】函数是当它被调用时执行的可重复使用的代码块。
    			      可以重复使用的说明书。
    
    无参函数
    /*          function print(){
    			for(var i = 0; i < 10; i++){
    				document.write("hi world! <br/>");
    			}
    		}*/
    
    带参的函数

    形参:形式参数
    声明函数的时候,用的假设的参数,叫做形参。
    实参:实际参数
    调用函数的时候,用的实际参数,叫做实参。
    【注】调用函数的时候,如果使用实参。形成传参(传递参数)。
    传递参数:用实参给形参赋值。

    		/*
    			计算两个数之和
    		*/
    		function add(num1, num2){ //形参 num1 = 10, num2 = 20;
    			alert(num1 + num2);
    		}
    
    
    		//调用
    		add(10, 20); //实参
    
    		add(30, 40);
    

    3、返回值

    【注】有返回值,因为我们要在别的地方是用函数调用的执行结果。
    通过关键字return。
    函数(就是表达式):
    1、功能
    2、值
    【注】return 后面的值,
    return后面可以跟任意表达式。

    /*
    			计算两个数之和
    		*/
    		/*
    			函数的设计:
    			1、形参如何确定,分析该函数中有哪些值不确定的。
    			2、函数结果,就直接看return后面跟了什么,函数调用的值,就是return后面所跟表达式的值。
    		*/
    		function add(num1, num2){ //形参 num1 = 10, num2 = 20;
    			// return num1 + num2;
    			/*
    				100行代码
    			*/
    			return "hello world";
    		}
    
    
    		//调用
    		var res = add(10, 20); //实参
    		alert(res);
    
    		add(30, 40);
    

    4、arguments

    封装一个函数,sum求和的函数,求任意个数的和。

    arguments 数组
    【注】每一个函数,都内置一个 arguments,是一个数组。
    【功能】在调用函数的时候,将传入的实参,保存在arguments这个数组中。

                    function sum(){
    				// alert(arguments.length); //object Arguments
    				/*alert(arguments[0]);
    				alert(arguments[2]);*/
    				var sum = 0;
    				for(var i = 0; i < arguments.length; i++){
    					sum += arguments[i];
    				}
    				return sum;
    			}
    
    
    			function amass(){
    				var sum = 1;
    				for(var i = 0; i < arguments.length; i++){
    					sum *= arguments[i];
    				}
    				return sum;
    			}
    
    			var res = amass(10, 20, 30);
    			alert(res);
    
    
    			/*var res = sum(10, 20, 30, 40);
    			alert(res);*/
    

    5、return

    return进阶版使用方式。
    【重点】函数在执行的时候,如果遇到return就直接终止后续代码运行。
    【注】return 代表函数运行结束,return后面的表达式,是函数的结果。
    break 用来终止循环。

    /*          function sum(){
    				
    					// 100代码
    				
    				alert(1);
    				return "我是函数的值";
    				alert(2);
    			}
    
    			var res = sum();
    			alert(res);*/
    
    
    			function add(){
    				var sum = 0;
    				for(var i = 0; i < arguments.length; i++){
    					sum += arguments[i];
    					alert(i);
    					break;
    					
    				}
    				return sum;
    			}
    			var res = add(10, 20, 30);
    			alert(res);
    

    6、练习

    /*
    	编写一个函数,计算两个数字的和、差、积、商
    				要求:使用传参的形式
    			*/
    			/*function counter(num1, operator, num2){
    				// operator 是字符串  num1 和 num2 数字
    				//根据传入的 operator,进行不同的运算
    				// return 结果;
    				var sum = 0;
    				if(operator == "+"){
    					sum = num1 + num2
    				}else if(operator == "-"){
    					sum = num1 - num2
    				}else if(operator == "*"){
    					sum = num1 * num2
    				}else{
    					sum = num1 / num2
    				}
    				return sum;
    				
    			}*/
    
    			function counter(num1, operator, num2){
    				var res = 0;
    				//1、运算符判断
    				switch(operator){
    					case "+":
    						res = num1 + num2;
    						break;
    					case "-":
    						res = num1 - num2;
    						break;
    					case "*":
    						res = num1 * num2;
    						break;
    					case "/":
    						res = num1 / num2;
    						break;
    					default:
    						alert("error");
    						break;
    				}
    				return res;
    			}
    
    
    			/*var result = counter(10, "%", 20);
    			alert(result);*/
    
    
    
    			/*
    
    				
                  编写一个函数,输入n为偶数时,调用函数求1/2+1/4+...+1/n,当输入n为奇数时,调用函数求 1+1/3+...+1/n 
    			*/
    
    			/*function sum(n){
    				var sum = 0;
    				//1、判断n是奇数还是偶数
    				if( n % 2 == 0){
    					for(var i = 2; i <= n; i += 2){
    						sum += 1 / i
    					}
    				}else{
    					for(var i = 1; i <= n; i += 2){
    						sum += 1 / i
    					}
    				}
    
    				return sum;
    			}
    */
    
    			function sum(n){
    				//1、判断n奇偶
    				if(n % 2 == 0){
    					var even = 0;
    					//偶数
    					for(var i = 2; i <= n; i += 2){
    						even += 1 / i;
    					}
    					return even;
    				}else{
    					var odd = 0;
    					//奇数
    					for(var i = 1; i <= n; i += 2){
    						odd += 1 / i;
    					}
    					return odd;
    				}
    			}
    			var res = sum(4);
    			alert(res);
    
    以前的习题封装成函数
    function factorialSum(n){
    				var sum = 0;
    				for(var i = 1; i <= n; i++){
    					var amass = 1;
    					for(var j = 1; j <= i; j++){
    						amass *= j;
    					}
    					sum += amass;
    				}
    				return sum;
    			}
    
    			var res = factorialSum(5);
    			alert(res);
    
    
    			function printDate(year, month, date){
    				var currentDay = 0;
    				switch(month){
    					case 12:
    						currentDay += 30;
    					case 11:
    						currentDay += 31;
    					case 10:
    						currentDay += 30;
    					case 9:
    						currentDay += 31;
    					case 8:
    						currentDay += 31;
    					case 7:
    						currentDay += 30;
    					case 6:
    						currentDay += 31;
    					case 5:
    						currentDay += 30;
    					case 4:
    						currentDay += 31;
    					case 3:
    						currentDay += 28;
    					case 2:
    						currentDay += 31;
    					case 1:
    						currentDay += date;
    						break;
    					default:
    						alert("error");
    						break;
    				}
    				if(month > 2){
    					//判断闰年,+1天
    					
    				}
    				return currentDay;
    			}
    
    
    			var res = printDate(2018, 5, 21);
    			alert(res);
    

    7、作用域

    封装函数 -> 代码段
    函数名/变量 -> 存着代码的地址

    1、调用函数的时候,在内存中开辟空间运行该函数。一般情况下,空间的大小由在函数内部,声明的变量和形参的数量决定。
    2、函数调用结束以后,会把这段内容还给系统,函数内使用的所有的变量和形参会随之销毁。

    作用域:
    总结:函数大括号,会形成作用域。在这个作用域下声明的变量、和函数的形参叫做局部变量。
    【注】在函数声明形参和在该作用域下声明变量等价。
    全局变量:声明在全局的变量叫做全局变量,可以在任意函数中调用。
    局部变量:声明在局部函数中的变量叫做局部变量,生命周期就是从这个函数开始,到这个函数调用结束。 {}
    【注】如果全局变量和局部变量相同,就近原则,谁近用谁。

    var a = "省长";
    
    			function qingdao(){
    				var a = "市长";
    				alert(a);
    			}
    
    			function shibei(){
    				var a = "区长";
    				alert(a);
    			}
    
    			function xinqu(){
    				alert(a);
    			}
    			alert(a);
    			qingdao();
    			shibei();
    			xinqu();
    
    
    
    			/*var a = 10;
    			function show(){
    				a++;
    				alert(a);
    			}
    
    
    			alert(a); //10
    
    
    			show();   //11
    			show();   //12
    			alert(a); //12*/
    
    			/*var a = 10;
    			function show(){
    				var a = 6;
    				a++;
    				alert(a);
    			}
    			alert(a); // 10
    			show();   // 7
    			show();   // 7
    			alert(a); // 10*/
    			
    			
    		/*	var a = 10;
    			function show(a){ // a = 10
    				a++;
    				alert(a);
    			}
    
    			alert(a); //10
    			show(10); //11
    			show(10); //11
    			alert(a); //10
    			*/
    

    【注】如果使用变量的时候,++忘记写var声明变量++,那么++系统会强制声明成全部变量++。

                function show(){
    				a = 10;
    			}
    
    			show();
    			alert(a);
    

    8、判断是否是正确的年月日

    /*
    				【注】1、函数一定要保证其功能单一性。    
    				     2、函数里面调用函数,和在使用系统函数alert一样操作。   
    			*/
    			/*
    				年月日分别为自定义函数的参数,判断是否为正确的日期      
    			*/
    			function isTrueDate(year, month, day){// year = 2018, month = 2 day = 29
    				//1、判断月份是否是正确的月份
    				if(month > 12 || month < 1){
    					return false;
    				}else{
    					//2、月份正确,判断该月天数
    					switch(month){
    						case 1:
    						case 3:
    						case 5:
    						case 7:
    						case 8:
    						case 10:
    						case 12:
    							//31天
    							if(day < 1 || day > 31){
    								return false;
    							}else{
    								return true;
    							}
    							break;
    						case 2:
    							//28,判断是否是闰年
    							var isLeap = leapYear(year);
    							if(isLeap){
    								if(day < 1 || day > 29){
    									return false;
    								}else{
    									return true;
    								}
    							}else{
    								if(day < 1 || day > 28){
    									return false;
    								}else{
    									return true;
    								}
    							}
    							break;
    						default:
    							//30天
    							if(day < 1 || day > 30){
    								return false;
    							}else{
    								return true;
    							}
    							break;
    					}
    				}
    			}
    
    			var res = isTrueDate(2000, 2, 29);
    			alert(res);
    
    			/*
    				判断是否是闰年
    				传入:year
    				传出:true/false
    			*/
    			function leapYear(year){ //year = 2018
    				if(year % 400 == 0 || year % 4 == 0 && year % 100 != 0){
    					return true;
    				}else{
    					return false;
    				}
    			}
    
    			/*var res = leapYear(2018);
    			alert(res);*/
    

    9、DOM操作(输入查奇偶)

    ++document.getElementById(id)
    // 获取的是返回值是标签input或者button等;
    // input.value与button.value获取的是标签的值,值是字符串类型;
    ++

    Document
    </head>
    <body>
    	<input  id = "input1" type="text" placeholder="请输入一个数" />
    	<button id = "btn">判断奇偶</button>
    </body>
    <script>
    	// 通过buttonid属性,获取到button这个标签
    
    	/*
    		document.getElementById(id)
    		参数:id的值
    		返回值:该id对应的标签。
    	*/
    	var oBtn = document.getElementById("btn");
    	var oInput = document.getElementById("input1");
    	//oInput.value  获取/设置 输入框的值,值是字符串类型。
    	
    
    	// alert(oBtn);
    
    	/*
    		给按钮编写,点击按钮以后要执行的代码。(暂时先用着,咋们还却知识,后续会详细讲解)
    		点击: onclick
    	*/
    	oBtn.onclick = function(){
    		//写点击按钮以后要执行的代码
    		// alert("单击了一下");
    		//获取输入框的值
    		// alert(typeof Number(oInput.value));
    		isEvenOrOdd(Number(oInput.value));
    	}
    
    
    	//判断奇偶函数
    	function isEvenOrOdd(num){
    		if(num % 2 == 0){
    			alert("这是个偶数");
    		}else{
    			alert("这是个奇数");
    		}
    	}
    
    	/*
    		输入n
    		点击按钮 输入1~n的和。
    	*/
    </script>
    

    10、DOM操作(输入求和)

    <!DOCTYPE html>
    <html lang="en">
    	<head>
    		<meta charset="UTF-8">
    		<title>Document</title>
    
    	</head>
    	<body>
    		<input  id = "input1" type="text" placeholder="请输入一个数" />
    		<button id = "btn">求和</button>
    	</body>
    	<script>
    		// 通过buttonid属性,获取到button这个标签
    
    		/*
    			document.getElementById(id)
    			参数:id的值
    			返回值:该id对应的标签。
    		*/
    		var oBtn = document.getElementById("btn");
    		var oInput = document.getElementById("input1");
    		//oInput.value  获取/设置 输入框的值,值是字符串类型。
    
    		// alert(oBtn);
    
    		/*
    			给按钮编写,点击按钮以后要执行的代码。(暂时先用着,咋们还却知识,后续会详细讲解)
    			点击: onclick
    		*/
    		oBtn.onclick = function(){
    			/*var res = sumFunc(Number(oInput.value));
    			alert(res);*/
    
    			alert(sumFunc(Number(oInput.value)));
    		}
    
    		//求和的函数
    		function sumFunc(n){
    			var sum = 0;
    			for(var i = 1; i <= n; i++){
    				sum += i;
    			}
    			return sum;
    		}
    
    
    		//判断奇偶函数
    		function isEvenOrOdd(num){
    			if(num % 2 == 0){
    				alert("这是个偶数");
    			}else{
    				alert("这是个奇数");
    			}
    		}
    
    		/* 
    			输入n
    			点击按钮 输入1~n的和。 
    		*/
    	</script>
    </html>
    

    11、声明提前

            var a;  
    

    /*
    预解析:程序在真正执行之前,会有一个准备状态,这个准备状态叫做预解析。
    程序真正运行的时候,所有的空间都分配好了。
    声明提前/声明前置
    */

    /*          alert(a);  //undefined
            	var a = 10;*/
    
    			alert(a);
    			a = 10;
    			alert(a);
    
    /*          var a = 10;
    			var b = a + 20;
    			var c = b + 30;*/
    

    //变量的声明都在,都在程序运行的最顶端,所以叫做声明提前。

                var a;
    			var b;
    			var c;
    
    			a = 10;
    			b = a + 20;
    			c = b + 30;
    

    12、递归函数

    /*
    递归:
    函数自己调用自己。
    递归:循环能做的事,递归全能做,递归能做的事,循环不一定能做。
    特点:
    1、函数自己调用自己。
    2、递归要有参数
    3、递归必须有return,但是return后面可以不跟值。

    最强王者法则:
    1、找出临界值,临界值就是,不用计算,直接心算得出的值。
    2、找出第n次和n-1次的关系
    3、假设函数已经可以使用,写出n和n-1之间的公式。

    				sum(n) = sum(n - 1) + n;
    				sum(100) = sum(99) + 100;
    

    【注】如果有人为,会不会递归,面试官水平可以,对你要求很高。
    但是公司禁止使用递归。(写递归,前提,写好绝对没有问题的容错)
    */

    /*function sum(n){
    				if(n == 1){
    					return 1;
    				}
    				return sum(n - 1) + n;
    			}
    
    			alert(sum(100));*/
    
    
    			/*
    				输入n,输出n和hello world!
    			*/
    			function print(n){
    				if(n == 0){
    					return; //如果return后面没有值,仅代表终止函数。
    				}
    
    				document.write("hello world!<br />");
    				return print(n - 1);
    			}
    
    			print(5);
    
    
    
    			/*function print(n){
    				for(var i = 0; i < n; i++){
    					document.write("hello World!<br />");
    				}
    			}
    
    			print(10);*/
    
    
    			/*
    				1~n的和
    				1~n的积
    				n的阶乘
    			*/
    			/*function sumFunc(n){
    				var sum = 0;
    				for(var i = 0; i < n; i++){
    					sum += (i + 1);
    				}
    				return sum;
    			}
    			alert(sumFunc(100)); //5050*/
    
  • 相关阅读:
    Spring Boot学习——AOP编程的简单实现
    Spring Boot学习——表单验证
    Spring Boot学习——数据库操作及事务管理
    Spring Boot学习——Controller的使用
    Spring Boot学习——Spring Boot配置文件application
    Spring Boot学习——第一个Spring Boot程序
    Spring Boot学习——Spring Boot简介
    activeMQ队列模式和主题模式的Java实现
    Markdown语法格式
    Java基础知识系列——Exception
  • 原文地址:https://www.cnblogs.com/zhongchao666/p/9275480.html
Copyright © 2020-2023  润新知