js day3 函數

• for(var sum=0,i=0;i<=100;i++){            sum+=i;        }
• 而不能寫成for(var sum=0,var i=0;i<=100;i++)

1. 函數可以封裝任意多條語句， 而且可以在任何地方、任何時候調用執行。
2. JS中的函數也是對象但是它同時也是對象的構造器，所以JS函數可以像其它對象那樣操作和傳遞，我們也常叫JS中的函數爲函數對象。
3. 函數是用來幫助我們封裝、重用、擴展及調用代碼的最方便的工具！

•  

ECMAScript 中的函數使用 function 關鍵字來聲明，後跟一組參數以及函數體。

1. 普通函數聲明
   1. 函數表達式：函數賦值給變量（自執行函數、事件處理函數）

•  

1. 函數的參數包括形參和實參，參數的傳遞是將實參傳遞給形參，函數的形參相當於函數內部的局部變量
2. 函數不介意傳遞進來多少參數，也不會因爲參數不統一而錯誤。
3. 函數體內可以通過 arguments 對象來接收傳遞進來的參數（實參）

•  

函數都有一條return語句，return語句導致函數停止執行，並返回它的表達式的值給調用者。 如果return語句沒有相關的表達式，則返回undefined。

•  

1. 事件，就是文檔或瀏覽器窗口中發生的一些特定的交互瞬間。可以使用偵聽器（或處理程序）來預訂事件，以便事件發生時執行相應的代碼。
2. 鼠標事件，當用戶通過鼠標在頁面上執行操作時觸發；（焦點事件）
   1. 鍵盤事件，當用戶通過鍵盤在頁面上執行操作時觸發;

• (事件處理函數）
•  

任何程序設計語言都有作用域的概念，簡單的說，作用域就是變量與函數的可訪問範圍，即作用域控制着變量與函數的可見性和生命週期。

•  

全局變量：整個程序都有效，即整個代碼中都可以調用。

局部變量：只對函數內部有效，即只能在本變量聲明的函數內部調用。

在函數體內，局部變量的優先級高於同名的全局變量。

1.  

JS的解析過程分爲兩個階段：預編譯期(預處理)與執行期。

1、預編譯期JS會對本代碼塊(script)中的所有聲明的變量和函數進行處理（類似與C語言的編譯），但需要注意的是此時處理函數的只是聲明式函數，而且變量也只是進行了聲明但未進行初始化以及賦值。

2、執行期就是在編譯後的基礎上開始從上到下執行腳本，遇到錯誤時中斷。

•  

遞歸函數是在一個函數通過名字調用自身情況下構成的。

•  

1. 編寫一個函數，計算兩個數字的和、差、積、商。
2. 編寫函數實現任意個數字的求和。
3. 編寫生成4位數字驗證碼的函數。
4. 函數和循環結合打印九九乘法表。
5. 利用遞歸求100的階乘。
6. 利用遞歸求斐波那契數列的前20項。     

 

•  

1. 編寫一個函數，輸入n爲偶數時，調用函數求1/2+1/4+1/6...+1/n,當輸入
2. n爲奇數時， 調用函數求1+1/3+1/5...+1/n.
3. 使用函數完成任意數字階乘的計算

要求：頁面輸入任意數字，點擊按鈕後計算階乘.

1. 某個公司採用公用電話傳遞數據，數據是四位的整數，在傳遞過程中是加密

的，加密規則 如下：每位數字都加上5,然後用除以10的餘數代替該數字，

再將第一位和第四位交換，第二位和第三位交換，請編寫一個函數，傳入原文，

輸出密文。

//1.系統默認的方法彙總:對象下面的，具有功能。

//alert()

//prompt()

//document.write()

//document.getElementById()

//Number()

//String()

//boolean()

//parseInt()

//parseFloat()

//toFixed()

//Math.pow()

 

//所有的方法來自於--函數。

<script type="text/javascript">

//1.普通函數的聲明/創建。(函數如果不調用，當函數不存在)

/*function a(){

函數體:封裝任意多條語句

}*/

 

/*function a(){

alert(1);

alert(2);

}*/

 

//2.函數的調用。

//a();

 

 

/*function fn(){

document.write(123);

}*/

 

//alert(typeof fn);//function

//alert(fn);

 

//函數既屬於對象，同時也是對象的構造器。

//函數名等同於函數體(整個函數聲明的所有代碼)

 

//3.函數的參數

//將實參的值傳遞給形參。

/*function fn(a){//a:形參，類似於變量，形式上存在的佔位符。

alert(a);

}

 

fn(456);//456：實參，實際存在的值。

fn(789);*/

 

/*sum(1,3);//任何地方進行調用。

function sum(a,b){//形參可以定義多個，中間用逗號分隔。

alert(a+b);

}

 

sum(12,12);

sum(123,456);*/

 

 

//4.函數的返回值：函數一定具有返回值，如果沒有顯式定義，函數默認返回undefined

/*function sum(a,b){

return a+b;

}

 

alert(sum(100,200));*/

 

/*function sum(a,b){

alert(a+b);

}

 

alert(sum(10,20));*///30不是函數的返回值，是函數內部某條語句執行的結果。 undefined

</script>

<script type="text/javascript">

//函數的組成：

/*function 函數名(形參){

函數體  

return  //函數的返回值，同時終止函數，return後面的代碼不執行了

}*/

 

/*function fn(str){

console.log(str);

return '返回值：'+str;//函數的返回值，同時終止函數，return後面的代碼不執行了

console.log('hehe');//不會執行了。

}

 

alert(fn('hello,javascript'));*///函數的返回值

 

//1.函數的參數功能是什麼：擴展函數功能。

//2.函數任何地方調用。

//

 

</script>

<script type="text/javascript">

/*var str='<table border=1>';

for(var i=1;i<=3;i++){

str+='<tr>';

for(var j=1;j<=3;j++){

str+='<td>111111</td>'

}

str+='</tr>';

}

str+='</table>';

document.write(str);

 

var str='<table border=1>';

for(var i=1;i<=5;i++){

str+='<tr>';

for(var j=1;j<=5;j++){

str+='<td>111111</td>'

}

str+='</tr>';

}

str+='</table>';

document.write(str);

 

var str='<table border=1>';

for(var i=1;i<=8;i++){

str+='<tr>';

for(var j=1;j<=8;j++){

str+='<td>111111</td>'

}

str+='</tr>';

}

str+='</table>';

document.write(str);*/

 

/*function createTable(a,b){

var str='<table border=1>';

for(var i=1;i<=a;i++){

str+='<tr>';

for(var j=1;j<=b;j++){

str+='<td>111111</td>'

}

str+='</tr>';

}

str+='</table>';

return str;

}*/

 

/*document.write(createTable(3,5));

document.write(createTable(4,8));

document.write(createTable(10,15));*/

//document.body.innerHTML=createTable(6,6);

 

//封裝函數計算任意數字的階乘。

/*for(var i=1,result=1;i<=5;i++){

result*=i;

}

alert(result)*/

 

function jc(n){

for(var i=1,result=1;i<=n;i++){

result*=i;

}

return result;

}

 

for(var j=1,sum=0;j<=5;j++){

sum+=jc(j);

}

 

alert(sum);//153=1+2+6+24+120

</script>

<script type="text/javascript">

//1.普通函數

/*alert(fn(1,2));//3

function fn(a,b){

return a+b;

}

alert(fn(10,20));//30*/

//2.函數表達式:函數表達式賦值給變量

//alert(fn1(120,10));//fn1 is not a function  變量前置訪問，輸出undefined

/*var fn1=function(a,b){

return a+b;

}

 

alert(fn1(12,10));*///22

 

//3.特殊的函數表達式

 

/*function fn(){

alert(123);

}

fn();*/ //函數調用

 

 

//結合：自執行，自己自動執行。

//自執行函數(匿名函數)

/*(function (){//推薦的

alert(123);

})();*/

 

//自執行函數，利用!運算符將函數轉換成表達式

/*!function (){//推薦的

alert(123);

}();*/

 

/*+function (){

alert(123);

}();

 

~function (){

alert(123);

}();*/

</script>

<div id="box" style="background: red;">123456</div>

<script type="text/javascript">

//對象：屬性+方法(被動的/主動的)

//主動的方法

//alert();

 

//被動的方法：事件處理函數

//var box=document.getElementById('box');

 

 

/*function fn(){

box.style.display='none';

}*/

 

//主動的

//fn();

 

//被動的--用於事件。當把一個函數給事件，叫事件處理函數。

//box.οnclick=fn; //事件處理函數

/*box.οnclick=function (){//事件處理函數

box.style.display='none';

}*/

//注意，fn後面不能添加括號，添加括號代碼函數已經執行了，不添加括號代碼着需要我鼠標點擊才執行。

 

 

/*function a(){

alert(1);

}

 

a();

box.οnclick=a;*///此時的a函數是事件處理函數。

</script>

/*var num=10;

function fn(){

var a=100;//函數內部

alert(a);

}

fn();*/

//alert(num);

//alert(a);//a is not defined

 

 

//n函數不介意傳遞進來多少參數，也不會因爲參數不統一而錯誤。

/*function sum(a,b,c,d){

return a+b+c+d;

}

alert(sum(1,2,3));//NaN*/

 

//函數體內可以通過 arguments 對象來接收傳遞進來的參數（實參）

//arguments: length屬性，實參的個數。

//arguments: 利用[下標]獲取實參具體的值，下標默認從0開始自動編號。

function sum(){

//alert(arguments.length);//100

//alert(arguments[0]);//1

for(var i=0,he=0;i<arguments.length;i++){//i=0-99

he+=arguments[i];

}

return he;

}

 

alert(sum(1,2,3,4,5,6,7,8,9,10,1,2,3,4,5,6,7,8,9,10,1,2,3,4,5,6,7,8,9,10,1,2,3,4,5,6,7,8,9,10,1,2,3,4,5,6,7,8,9,10,1,2,3,4,5,6,7,8,9,10,1,2,3,4,5,6,7,8,9,10,1,2,3,4,5,6,7,8,9,10,1,2,3,4,5,6,7,8,9,10,1,2,3,4,5,6,7,8,9,10));

 

 

</script>

<style type="text/css">

*{

padding:0px;

margin:0px;

}

#box{

width: 560px;

     height: 305px;

     border:1px solid #FF0000;

     margin:20px auto;

     position: relative;

}

#box img{

width: 560px;

height: 305px;

display: block;

}

#left,#right{

position: absolute;

color:#fff;

text-decoration: none;

font-size:100px;

top:50%;

margin-top:-50px;

}

#left{

left:20px;

}

#right{

right:20px;

}

</style>

</head>

<body>

<div id="box">

<img src="img/1.jpg" alt="" id="img1" />

<a href="javascript:;" id="left"><</a>

<a href="javascript:;" id="right">></a>

</div>

<script type="text/javascript">

var left=document.getElementById('left');

var right=document.getElementById('right');

var img1=document.getElementById('img1');

var num=1;

right.οnclick=function(){

num++;

if(num>4){

num=1;

}

img1.src='img/'+num+'.jpg'

};

left.οnclick=function(){

num--;

if(num<1){

num=4;

}

img1.src='img/'+num+'.jpg'

}

</script>

<script type="text/javascript">

//輸入一個日期，判斷這個日期是這一年的第幾天   2018-3-12   31+28+12=71

//年月日   2018-5-10  31+28+31+30+10    

//2018-2-14    31+14=45

/*var year=prompt('請輸入年份：');

var month=prompt('請輸入月份：');

var day=Number(prompt('請輸入日期：'));//直接累加

var result=0;//存放天數

for(var i=1;i<month;i++){

if(i==1 || i==3 || i==5 || i==7 || i==8 || i==10){

result+=31;

}else{//包含2月   非閏年：28   閏年：29

result+=30;

}

}

if(month>2 && (year%4==0&&year%100!=0||year%400==0)){//月份大於2同時是閏年

result-=1;

}else if(month>2) {//非閏年

result-=2;

}

result+=day;

alert(result);*/

 

function fn(year,month,day){

/*var year=prompt('請輸入年份：');

var month=prompt('請輸入月份：');

var day=Number(prompt('請輸入日期：'));//直接累加*/

var result=0;//存放天數

for(var i=1;i<month;i++){

if(i==1 || i==3 || i==5 || i==7 || i==8 || i==10){

result+=31;

}else{//包含2月   非閏年：28   閏年：29

result+=30;

}

}

if(month>2 && (year%4==0&&year%100!=0||year%400==0)){//月份大於2同時是閏年

result-=1;

}else if(month>2) {//非閏年

result-=2;

}

result+=day;

return result;

}

 

alert(fn(2018,5,10));

alert(fn(2018,3,12));

</script>

<input type="text"  id="txt" value="請輸入內容"/>

<script type="text/javascript">

//1.事件的類型

//鼠標事件

//onclick:鼠標單擊

//onmouseover:鼠標經過

//onmouseout:鼠標移出

//onmousedown:鼠標按下

//onmouseup:鼠標擡起

//onmousemove:鼠標移動

//onfocus:得到焦點(光標) --表單

//onblur:失去焦點

//鍵盤事件

//onkeydown:按下按鍵

//onkeyup:按鍵擡起

 

//2.事件的概念：就是文檔或瀏覽器窗口中發生的一些特定的交互瞬間。

//可以使用偵聽器（或處理程序）來預訂事件，以便事件發生時執行相應的代碼。

 

 

var txt=document.getElementById('txt');

txt.οnfοcus=function(){

if(txt.value=='請輸入內容'){

txt.value='';

}

}

 

txt.οnblur=function(){

if(txt.value==''){

txt.value='請輸入內容';

}

}

</script>

<script type="text/javascript">

//問題：

//爲什麼變量前置訪問輸出undefined

//爲什麼函數可以任何地方進行調用。

 

//js預解析分爲兩步：1.預編譯期   2.執行期

//1.預編譯期：程序在瀏覽器執行之前要乾的事情--默認完成

//首先找var 和 function

//找到var提前賦值 undefined給變量 ，  找到函數提前將整個的函數體賦值給函數。

//如果函數和變量出現重名，函數優先。

//函數的內部同樣也要做預解析。

//函數的形參就是函數的局部變量(默認有var)

 

 

//2.逐行執行：代碼一行一行逐行解讀，遇到錯誤終止。

//函數聲明跳過，沒有調用，當中函數不存在。

預解析時，在全局中找var和function函數，在函數中找var和函數

 

/*alert(a);//function a(){ alert(123) }//與解析，如果函數和變量出現重名，函數優先

var a=10;//上面a=函數體，現在把a變成變量了，所以下面的a會報錯

function a(){

alert(123);

}

a();//報錯*/

 

 

/*alert(a);//undefined

var a=10;

alert(a)//10*/

 

/*fn();//123，fn是個函數體，加上（）則是執行函數

function fn(){

alert(123);

}

fn()*///123

 

 

</script>

<script type="text/javascript">

//任何程序設計語言都有作用域的概念，簡單的說，作用域就是變量與函數的可訪問範圍

//即作用域控制着變量與函數的可見性和生命週期。

 

//全局變量：整個程序都有效，即整個代碼中都可以調用。

//局部變量：只對函數內部有效，即只能在本變量聲明的函數內部調用。

//在函數體內，局部變量的優先級高於同名的全局變量--作用域鏈

 

/*alert(a);//undefined

var a=10;

alert(a);//10*/

 

/*var a=100;//全局作用域，全局變量。

function fn(){

var a=10;//局部作用域，局部變量

}

fn();

alert(a);*///100

 

/*var a=1;

 

function fn(){

var b=1;//作用於函數內部

var a=3;//局部變量的優先級高於同名的全局變量

alert(a);

}

 

fn();

alert(a);//1*/

 

 

/*var num=1;

function fn(){

num=10;//改變了全局變量的值

}

fn();

alert(num);//10*/

 

 

/*function fn(){

num=5;//如果聲明變量不加var，不是變量，變成window下面的全局的屬性。

}

fn();

alert(num);//5*/

 

 

//作用域鏈

/*var a=1;//全局

function fn(){

//var a=5;//局部

alert(a);//1

}

fn();*/

 

 

var a=1;

function fn(){

//var a=5;

function fn1(){

//var a=10;

alert(a);//10   5   1

}

fn1();

}

fn();

</script>

 

 

<!--<script type="text/javascript">

alert(a);//a is not defined

</script>

<script type="text/javascript">

var a=20;

</script>

 

<script type="text/javascript">

alert(a);

</script>-->

 

 

</body>

//問題：

//爲什麼變量前置訪問輸出undefined

//爲什麼函數可以任何地方進行調用。

 

//js預解析分爲兩步：1.預編譯期   2.執行期

//1.預編譯期：程序在瀏覽器執行之前要乾的事情--默認完成

//首先找var 和 function

//找到var提前賦值 undefined給變量 ，  找到函數提前將整個的函數體賦值給函數。

//如果函數和變量出現重名，函數優先。

//函數的內部同樣也要做預解析。

//函數的形參就是函數的局部變量(默認有var)

 

 

//2.逐行執行：代碼一行一行逐行解讀，遇到錯誤終止。

//函數聲明跳過，沒有調用，當中函數不存在。

 

/*alert(a);//function a(){ alert(123) }

var a=10;

function a(){

alert(123);

}

a();//報錯*/

 

 

/*alert(a);//undefined

var a=10;

alert(a)//10*/

 

/*fn();//123

function fn(){

alert(123);

}

fn()*///123

/*function fn(){

alert(123);

fn();

}

 

fn();*/

 

//遞歸函數就是函數調用函數自身。

//遞歸如果不添加基點，出現棧溢出。

//5!=5*4!;

//4!=4*3!;

//3!=3*2!;

//2!=2*1!;

//1!=1

 

/*function jc(n){

return n*jc(n-1);

}

//RangeError: Maximum call stack size exceeded

alert(jc(5))*/

 

/*function jc(n){

if(n==1){

return 1;

}else{

return n*jc(n-1);

}

}

alert(jc(5));//120*/

 

 

//利用遞歸求斐波那契數列的前20項。（又叫兔子數列）

//1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233，377，610，987，1597，2584，4181，6765

//規則：第一個數+第二個數=第三個數.

 

/*

 

function fb(n){//n:位置

if(n==1 || n==2){//基點

return 1;

}else{

return fb(n-1)+fb(n-2);

}

}

alert(fb(7));

 

*/

1.下面答案是多少
AA();
function AA(){
alert('AA')
};
BB();
var BB = function(){
alert('BB');
};

1. AA 
2. BB is not a function 

2.下面答案是多少
var a=1
function fn(a){
console.log(a)
a=2
console.log(a);
}
fn(a)
console.log(a) 

1. 1 
2. 2 
3. 1 

3.下面答案是多少
var a=1; 
function fn(){
console.log(a)
var a=2; //如果將這個var關鍵字去掉答案是多少
}
fn()
console.log(a)

4.界面會彈出幾次結果？分別是什麼？爲什麼？
alert(a);
a();
var a=3;
function a(){
alert(10);
}
alert(a);
a=6;
a();

Math.random()隨機產生一個0-1之間的數，不包括1