第十节 javascript之第四节函数-优快云博客

本文介绍了JavaScript中的函数定义与调用方法，包括如何通过事件触发函数执行，以及如何利用函数来改变网页元素的样式。此外，还提供了一个简单的计算器实例，展示了如何使用JavaScript进行基本的数学运算。

本文来自赵庆贝博客

一、函数：函数是一段命名的代码块，当调用函数时，函数里的代码块是做为一个整体一起被执行的。

1、定义声明函数：

A、书写位置：一般情况下，写在<head>与</head>之间。

B、定义函数：

function 函数名()

{

函数体代码;

……

}

注意：函数在定义中，函数体语句并没有被执行，只有调用函数时，函数体语句才被执行。

2、调用函数：

A、在javascript语句中调用函数：函数名();

B、在事件中（标记的事件中），调用函数：

把事件作为标记的一个属性：

<标记事件="函数名();">

常见的事件：

单击事件： onmouseout（当鼠标离开）

3、在javascript得到控制对象：

document.getElementById("id名称");

4、在javascript中控制对象的CSS样式属性：

对象.属性:

对象.style.CSS属性

对象.style.color="'

对象.style.fontSize="12px";

例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Untitled Document</title>
<script language="javascript" type="text/javascript">
function over(){
document.getElementById("td1").style.color="#ffffff";
document.getElementById("td1").style.backgroundColor="#990000";
document.getElementById("td1").style.border="1px solid #0000ff";
document.getElementById("td1").style.fontSize="16px";
document.getElementById("td1").style.padding="20px";
}
function out(){
document.getElementById("td1").style.fontSize="12px";
document.getElementById("td1").style.border="1px solid #000000";
document.getElementById("td1").style.padding="10px";
document.getElementById("td1").style.backgroundColor="#ffffff";
document.getElementById("td1").style.color="#000000";
}
</script>
</head>
<body>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td id="td1" onmouseover="over()" onmouseout="out()">赵庆贝技术博客</td>
</tr>
</table>
<script language="javascript" type="text/javascript">
document.getElementById("td1").style.fontSize="12px";
document.getElementById("td1").style.border="1px solid #000000";
document.getElementById("td1").style.padding="10px";
</script>
</body>
</html>

5、函数的参数：

A、定义函数时使用形式：

function 函数名(形参1,形参2)

{

函数体代码;

}

形参：形式参数；其实形参就是函数在执行的过程中，所需要的变量，形参的值是当调用函数时，才传递给它的值。

B、调用函数时必须传递实参（实际参数：函数在执行过程中，真正执行的值）。

函数名(实参1，实参2)

实参的值是对应传递给形参的。

6、if语句

根据条件返回的不同结果，要执行相对应的语句。

if(条件)

{

条件成立执行的语句;

.......

}

else

{

条件成立执行的语句;

.......

}

例：这是一个简单的计算器代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Untitled Document</title>
<script type="text/javascript" language="javascript">
function add_num(num)
{
resultresult.value = result.value + num;
}
function add_btn(fuhao)
{
if(fuhao=="CE")
{
result.value="";
}
else
{
result.value+=fuhao;
}
}
function get_result()
{
result.value = eval(result.value);
}
</script>
</head>
<body>
<div>
<input id="result" type="text" readonly="readonly" />
</div>
<div>
<input id="num_1" type="button" value="1" onclick="javascript:add_num(this.value)" />
<input id="num_2" type="button" value="2" onclick="javascript:add_num(this.value)" />
<input id="num_3" type="button" value="3" onclick="javascript:add_num(this.value)" />
<input id="num_4" type="button" value="4" onclick="javascript:add_num(this.value)" />
<input id="num_5" type="button" value="5" onclick="javascript:add_num(this.value)" />
<input id="num_6" type="button" value="6" onclick="javascript:add_num(this.value)" />
<input id="num_7" type="button" value="7" onclick="javascript:add_num(this.value)" />
<input id="num_8" type="button" value="8" onclick="javascript:add_num(this.value)" />
<input id="num_9" type="button" value="9" onclick="javascript:add_num(this.value)" />
<input id="num_0" type="button" value="0" onclick="javascript:add_num(this.value)" />
<input id="btn_jia" type="button" value="+" onclick="javascript:add_btn(this.value)" />
<input id="btn_jian" type="button" value="-" onclick="javascript:add_btn(this.value)" />
<input id="btn_cheng" type="button" value="*" onclick="javascript:add_btn(this.value)" />
<input id="btn_chu" type="button" value="/" onclick="javascript:add_btn(this.value)" />
<input id="btn_dian" type="button" value="." onclick="javascript:add_btn(this.value)" />
<input id="=" type="button" value="=" onclick="javascript:get_result()" />
<input id="CE" type="button" value="CE" onclick="javascript:add_btn(this.value)" />
</div>
</body>
</html>