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 οnclick="haha()">改变</button>
<!-- ---------------------------------------------------------------------------------------------------- -->
<script type="text/javascript">
/* who button when onclick what 改变背景颜色 */
function haha(){
document.body.style.backgroundColor = "red";
}
</script>
</body>
点击按钮改变图片:
<button οnclick="haha1()">红</button>
<button οnclick="haha2()">黄</button>
<button οnclick="haha3()">蓝</button>
<button οnclick="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 οnclick="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 οnclick="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" οnclick="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 οnclick="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 οnclick="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 οnclick="jia()">加</button>
<button οnclick="jian()">减</button>
<button οnclick="cheng()">乘</button>
<button οnclick="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 οnclick="heihei(1)">加</button>
<button οnclick="heihei(2)">减</button>
<button οnclick="heihei(3)">乘</button>
<button οnclick="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>