JavaScript基础教程之Javascript学习第四节-职坐标

JavaScript基础教程之Javascript学习第四节

沉沙 2019-06-11 来源：阅读 1304 评论 0

摘要：本篇文章探讨了JavaScript基础教程之Javascript学习第四节，希望阅读本篇文章以后大家有所收获，帮助大家对相关内容的理解更加深入。

本篇文章探讨了JavaScript基础教程之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" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="//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" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="//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>