1.JavaScript的函数

Js中的函数相当于java中的方法。

Java中的方法：

【访问修饰符】返回值类型方法的名（【方法的参数………】）{

  方法体

  【return】返回值类型

}

1.1定义函数

使用函数可以实现特定的功能，在使用函数前必须对函数进行定义。定义函数和其他的普通JavaScript代码一样，都需要放置在<script>和</script>之间，需要使用关键字function。

JS的语法

function 函数的名字（[参数…….]）{

  //函数体

  【return】函数的返回值

}

1.2函数定义规则

定义函数有以下几个规则：

使用function关键字，function后是函数名，与c#语言不同，不必说明返回值的类型
函数的命名规则与变量名的命名规则相同
函数名后的()，可以包含若干参数，也可以选择不带任何参数
最后是一对{}，包含具体实现特定功能的若干语句

1.3形参和返回值类型

1.对于函数外部的语句而言，函数内部语句是不可见的，这时就需要一种沟通机制，参数就是它们沟通的桥梁。

2.参数也是一种变量，但这种变量只能被函数体内的语句使用，并在函数被调用时赋值，通常它们被称为形式参数。

3.函数的参数是外部语句对函数内部语句的信息传递，函数的返回值刚好相反，能够将一个结果返回给外部语句

使用

1.4系统函数

1.4.1 ParseInt转换成整形

1.png

1.4.2ParseFloat转换成浮点类型

2.png

1.4.3 ISNAN（IS not a number）不是一个数字

3.png

2.JavaScript的事件

JavaScript是基于对象、采用事件驱动的脚本语言。通过鼠标或按键在浏览器窗口或网页元素上执行的操作，称为事件（event）。

事件的理解：

先在在元素上面绑定一个事件（静态绑定，动态绑定）
触发一个事件
触发事件，就通过函数来执行。

Js中常见的事件有哪些：

2.1页面点击事件 onlick

</head>
<script type="text/javascript">
    function show(obj){
    alert("您选择的性别："+obj.value);
}
</script>
<body>
    性别：<input type="radio" name="gender" value="男" onclick="show(this)">男
          <input type="radio" name="gender" value="女" onclick="show(this)">女

</body>

2.2 页面加载onload事件

<body onload = "document.title = '欢迎，欢迎，热烈欢迎！！！'">

2.3失去焦点事件onblur

<body>
    <p>请输入密码：<input type ="password" id="txtPwd" onblur="checkPwd()"> </p>
    <script type="text/javascript">
        function checkPwd(){
            var pwd = document.getElementById("txtPwd").value;
            if(pwd.length <= 6){
                alert("密码的长度必须在6位以上");
            }
        }
    </script>
</body>

2.4选项发生改变事件 onchange

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript">
            function changeBg() {
                var _select = document.getElementById("city").value ;
                if(_select ==='长沙') {
                    document.bgColor ='gray' ;
                } else if(_select==='北京') {
                    document.bgColor ='red' ;
                } else if(_select ==='上海') {
                    document.bgColor ='pink';
                }
            }
        </script>
    </head>
    <body>
         <select name="city" id="city" onchange="changeBg()">
             <option value="">========请选择=======</option>
             <option value="长沙">长沙</option>
             <option value="北京">北京</option>
             <option value="上海">上海</option>
         </select>
    </body>
</html>

2.5 鼠标移除事件onmouseout

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .content {
                width: 300px;
                height: 300px;
                border: 1px solid red ;
            }
        </style>
        <script type="text/javascript">
            function changeColor(color) {
                var _div = document.getElementById("content") ;
                _div.style.background = color ;
            }
        </script>
    </head>
    <body>
        <div id="content" class="content" onmousemove="changeColor('red')" onmouseout="changeColor('green')"></div>
        
    </body>
</html>


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        
        <marquee direction="left" onmousemove="this.stop()" onmouseout="this.start()">
            <img src="images/21.jpg" />
        </marquee>
    </body>
</html>

JavaScript函数和事件