1. 程式人生 > 其它 >JavaScript 10.29

JavaScript 10.29

JavaScript第四天 函式

1.1函式的概述

我們現在的電腦科學 還沒有脫離數學的範疇。 是應用數學的另一種表現形式。 計算中很多的術語都源於數學。所以 函式這個名詞其實也是源於數學。


我們之前學過很多語句,例如

if(){} 條件語句 控制大括號程式碼塊 是否執行。
for(){} 迴圈語句, 控制大括號程式碼塊 執行多少次。
function(){} 函式,控制大括號程式碼塊 何時執行。 函式實在呼叫的時候才會去執行。

1.2 函式的宣告和呼叫

函式宣告:

function 名字(){
程式碼塊

}

函式呼叫:
函式名();

<script type="text/javascript">

/* 函式宣告之後 程式碼是不執行的 */
function haha(){

document.write("123");
document.write("123");
document.write("123");

}

/* 只有呼叫函式的時候 才會去執行 並且呼叫多少次 就 執行多少次 */
haha();
haha();
haha();


</script>

1.3 函式事件繫結

點選頁面按鈕 改變背景顏色

<body>



<button onclick="haha()">改變</button>

<!-- ---------------------------------------------------------------------------------------------------- -->

<script type="text/javascript">
/* who button when onclick what 改變背景顏色 */

function haha(){
document.body.style.backgroundColor = "red";
}

</script>
</body>





點選按鈕改變圖片:

<button onclick="haha1()"></button>
<button onclick="haha2()"></button>
<button onclick="haha3()"></button>
<button onclick="haha4()"></button>

<img id="foo" src="" width="200" height="200">

<!-- ---------------------------------------------------------------------------------------------------- -->

<script type="text/javascript">

function haha1(){
foo.src = "img/d_1.png";
}
function haha2(){
foo.src = "img/d_2.png";
foo.style.width = "800px";
}
function haha3(){
foo.src = "img/d_3.png";
}
function haha4(){
foo.src = "img/d_4.png";
}
</script>


1.4 紅藍切換

1.4.1 判斷當前狀態的思想


<button onclick="haha()">/</button>
<!-- ---------------------------------------------------------------------------------------------------- -->

<script type="text/javascript">

function haha(){

if( document.body.style.backgroundColor == "red" ){
document.body.style.backgroundColor = "blue";
}else{
document.body.style.backgroundColor = "red";
}

}


</script>




<button onclick="haha()">/</button>

<div id="foo" >123</div>

<!-- ---------------------------------------------------------------------------------------------------- -->

<script type="text/javascript">

function haha(){
if(foo.style.backgroundColor == "blue"){
foo.style.backgroundColor = "red";
foo.style.width = "400px";
foo.style.height = "400px";
}else{
foo.style.backgroundColor = "blue";
foo.style.width = "200px";
foo.style.height = "200px";
}
}


</script>




<button id="foo" onclick="haha()">已讀</button>

<!-- ---------------------------------------------------------------------------------------------------- -->

<script type="text/javascript">

function haha(){

if( foo.innerHTML == "已讀" ){
foo.innerHTML = "未讀";
foo.style.backgroundColor = "red";
}else{
foo.innerHTML = "已讀";
foo.style.backgroundColor = "green";
}

}


</script>

1.4.2 記錄點選次數


<button onclick="haha()">改變顏色</button>

<script type="text/javascript">

/* 思考題:為什麼i定義 要在函式外面 寫到裡面有什麼問題*/
var i = 0;

function haha() {
if(i%2 == 0){
document.body.style.backgroundColor = "red";
}else{
document.body.style.backgroundColor = "yellow";
}

i++;
}
</script>

1.5 猜數字

<input id="foo" ><button onclick="guess()"></button>
<div id="bar">請開始猜數字</div>


<script type="text/javascript">

var b = parseInt( Math.random() *100 ) ;

function guess(){

// 1 獲取 input中輸入的內容
var a = foo.value;
// 2 和正確答案比較
if(a>b){
// 3 將結果顯示到div中
bar.innerHTML = "猜大了";
}else if (a<b){
bar.innerHTML = "猜小了";
}else{
bar.innerHTML = "猜對了";
}
}

</script>

1.6 簡易計算器

<body>

<p>
一個數 <input id="haha">
</p>
<p>
一個數 <input id="hehe" >
</p>
<button onclick="jia()"></button>
<button onclick="jian()"></button>
<button onclick="cheng()"></button>
<button onclick="chu()"></button>

<div id="foo"></div>


<script type="text/javascript">
function jia(){
// 1 獲取兩個輸入框的值
// 2 將兩個 值相加
// 3 將結果顯示到div中
foo.innerHTML = Number(haha.value) + Number(hehe.value);
}
function jian(){
foo.innerHTML = Number(haha.value) - Number(hehe.value);
}
function cheng(){
foo.innerHTML = Number(haha.value) * Number(hehe.value);
}
function chu(){
foo.innerHTML = Number(haha.value) / Number(hehe.value);
}
</script>
</body>

1.7 函式中的引數


引數就是函式中可變部分,用來在函式執行的時候 區分執行內容
引數就是一個特殊的變數。因為其宣告是在函式的小括號中,賦值是在函式的呼叫小括號中

<script type="text/javascript">


function haha(a,b,c) {

document.write("你好 世界"+a+b+c);

}


haha();
haha(1);
haha(1,2);
haha(1,789,456);

</script>

使用引數來優化 前面計算器程式碼
<body>

<p>
一個數 <input id="haha">
</p>
<p>
一個數 <input id="hehe" >
</p>
<button onclick="heihei(1)"></button>
<button onclick="heihei(2)"></button>
<button onclick="heihei(3)"></button>
<button onclick="heihei(4)"></button>

<div id="foo"></div>

<script type="text/javascript">
function heihei(a){
if(a == 1) foo.innerHTML = Number(haha.value) + Number(hehe.value);
if(a == 2) foo.innerHTML = Number(haha.value) - Number(hehe.value);
if(a == 3) foo.innerHTML = Number(haha.value) * Number(hehe.value);
if(a == 4) foo.innerHTML = Number(haha.value) / Number(hehe.value);
}

</script>


</body>