JavaScript学习(六)

简介: 目录函数函数的定义函数的调用函数的简单调用在事件响应中调用函数通过超链接定义函数函数参数的使用 使用函数的返回值嵌套函数递归函数javascript中的内置函数(1)pa...

目录

函数

函数的定义

函数的调用

函数的简单调用

在事件响应中调用函数

通过超链接定义函数

函数参数的使用

 

使用函数的返回值

嵌套函数

递归函数

javascript中的内置函数

(1)parseInt()函数:

(2)parseFloat()函数

(3)isNaN()函数

(4)isFinite()函数

(5)encodeURI()函数

(6)decodeURI()函数

Function()构造函数与函数直接量


函数

函数的定义

在javascript中,函数是由关键字function 、函数名加一组参数以及置于大括号中需要执行的一段代码定义的。基本语法如下:

function functionName(【parameter 1、parameter 2...】){

statement;  [return expression;]

}

functionName:必选项。用于指定函数名。在同一个页面中,函数名必须是唯一的,并且区分大小写。

parameter:可选性。用于指定参数列表。当使用多个参数时,参数间使用逗号进行分隔。一个函数最多可以有255个参数。

statement:必选项。是函数体,用于实现函数功能的语句。

expression:可选项。用于返回函数值。expression为任意表达式变量或常量。

 

函数的调用

函数的简单调用

函数的定义语句通常会放在HTML文件的<head>段中,而函数的调用语句通常被放在<body>段中,如果在函数定义前调用函数,执行将会出错。函数的定义及调用语法如下:

<html>  <head>

<script type="text/javascript">

    function functionName(parameters){ some statement; } //定义函数

</script>

</head>

<body>

     functionName(parameter);//调用函数

</body>

</html>

functionName:函数名称

parameter:参数名称

在事件响应中调用函数

当用户单击某个按钮或选择某个复选框时都将触发事件,通过编写程序对事件做出反应的行为称为响应事件,在javascript语言中,将函数与事件相关联就完成了响应事件的过程。如当用户单击某个按钮时执行相应的函数。

<html>
    <head>
        <meta charset="utf-8">
        <title>JS基本语法</title>
        <script type="text/javascript">
            function test(){      //定义函数
                alert("test");
            }
        </script>
    </head>
    <body>
        <form action="" method="post" name="form1">
            <input type="button" value="提交" onclick="test();"> //在按钮事件触发时调用自定义函数
        </form>
    </body>
</html>

通过超链接定义函数

函数除了可以在响应事件中被调用外,还可以在超链接中被调用。在<a>标记中的<href>标记中使用"javascript:关键字"超链接来调用函数,当用户单击该超链接时,相关函数将被执行。下面的代码实现了通过超链接接调用函数。

<html>
    <head>
        <meta charset="utf-8">
        <title>JS基本语法</title>
        <script type="text/javascript">
            function test(){      //定义函数
                alert("test");
            }
        </script>
    </head>
    <body>
        <a href="javascript:test()">test</a> <!--在超链接中调用自定义函数-->
    </body>
</html>

函数参数的使用

function 自定义函数名(形参1,形参2...){ 函数体 }

定义函数时,在函数名后面的圆括号内可以指定一个或多个参数(参数之间用“,”分隔)。指定参数的作用在于,当调用函数时,可以为被调用函数传递一个或多个值。

在定义函数时指定的参数被称为形式参数,而把调用函数时实际传递的值称为实际参数。

 

使用函数的返回值

有时需要在函数中返回一个数值供在其他函数中使用,为了能够返回给变量一个值,可以在函数中添加return语句,将需要返回的值赋予变量,最后将此变量返回。

<script type="text/javascript">
            function functionName(parameters){      //定义函数
                var results=somestaments;
                return results;
            }
 </script>

results:函数中的局部变量

return:函数中返回变量的关键字。(返回值在函数调用中不是必须的)

嵌套函数

所谓的嵌套函数就是在函数内部再定义一个函数,这样定义的优点在于可以使内部函数轻松获得外部函数的参数以及函数的全局变量等。

语法:

<script type="text/javascript">
            function functionName(parameter1,parameter2){      //定义函数
                function innerFunction(){
                    somestatements;
                }                
            }
</script>

functionName:外部函数名称

innerFunction:内部函数名称

递归函数

所谓递归函数就是函数在自身的函数体内调用自身,使用递归函数时一定要当心,处理不当将会使程序进入死循环,递归函数只能在特定的情况下使用,如处理阶乘问题。

语法:

<script type="text/javascript">
            function functionName(parameter1){      //定义函数
                function functionName(parameter2){        
                }                
            }
</script>

 

javascript中的内置函数

在使用javascript语言时,除了可以自定义函数之外,还可以使用javascript的内置函数,这些内置函数是由javascript语言自身提供的。

(1)parseInt()函数:

主要将首位为数字的字符串转换成数字,如果字符串不是以数字开头,那么将返回NaN.

语法:parseInt(StringNum,[n])

StringNum:需要转换成整型的字符串。

n:提供在2-36之间的数字表示所保存数字的进制数。这个参数在函数中不是必需的。

(2)parseFloat()函数

parseFloat()函数主要将首位为数字的字符串转换成浮点型数字,如果字符串不是以数字开头,那么将返回NaN.

语法:parseFloat(StringNum)

StringNum:需要转换成浮点型的字符串。

(3)isNaN()函数

语法:isNaN(Num)

Num:需要验证的数字。

(4)isFinite()函数

isFinite()函数主要用于检验某个表达式是否为无穷大。

语法:isFinite(Num)

Num:需要验证的数字。

(5)encodeURI()函数

encodeURI()函数主要用于返回一个URI字符串编码后的结果。

语法:encodeURI(url)

url:需要转换为网络资源地址的字符串。

(6)decodeURI()函数

decodeURI()函数主要用于将已编码为URI的字符串解码成最初的字符串并返回。

decodeURI(url)

url:需要解码的网络资源地址。

 

Function()构造函数与函数直接量

除了使用基本的function语句定义函数之外,还可以使用另外两种方式来定义,即使用Function()构造函数和函数直接量定义。

构造函数Function()允许在运行时动态创建和编译javascript代码,而函数直接量却是程序结构的一个静态部分,就像函数语句一样。

每次调用构造函数Function()都会解析函数体,并且创建一个新的函数对象。

Function()创建的函数使用的不是静态作用域,相反的,该函数总是被当作顶级函数来编译。

function maskingKeyboard(){
                if(event.keyCode==8){  //判断是否为Backspace键
                    event.keyCode=0;
                    event.returnValue=false;
                    aler("当前设置不允许使用Backspace键");
                }
                if(event.keyCode==13){  //判断是否为Enter键
                    event.keyCode=0;
                    event.returnValue=false;
                    aler("当前设置不允许使用Enter键");
                }
                if(event.keyCode==116){  //判断是否为F5键
                    event.keyCode=0;
                    event.returnValue=false;
                    aler("当前设置不允许使用F5刷新键");
                }
                //判断是否为Alt+方向键←或方向键→
                if((event.altKey)||((window.event.keyCode==37)||(window.event.keyCode==39)){
                    event.returnValue=false;
                    aler("当前设置不允许使用Alt+方向键一或方向键→");
                }
                if(event.ctrlKey)&&(eventkeyCode==78){  //判断是否为Ctrl+N快捷键
                    event.returnValue=false;
                    alert("当前设置不允许使用Ctrl+N新建IE窗口")
                }
                if(event.shiftKey)&&(event.keyCode==121){  //判断是否为Ctrl+N快捷键
                    event.returnValue=false;
                    alert("当前设置不允许使用Shift+F10");
                }
            }
            function rightKey(){
                if(event.button==2){
                    event.returnValue=false;
                    alert("禁止使用鼠标右键! ");
                }
            }
            document.onmousedown=rightKey();
            document.onkeydown=maskingKeyboard();

目录
相关文章
|
1月前
|
JavaScript 前端开发 开发者
VUE 开发——Node.js学习(一)
VUE 开发——Node.js学习(一)
70 3
|
2月前
|
JavaScript
ES6学习(9)js中的new实现
ES6学习(9)js中的new实现
|
5天前
|
存储 JavaScript 前端开发
JavaScript学习第一章
本文档介绍了JavaScript的基础知识,包括其在网页中的作用、如何通过JavaScript动态设置HTML元素的CSS属性,以及JavaScript中的变量类型(`var`、`let`、`const`)和数据类型(基本数据类型与引用数据类型)。通过实例代码详细解释了JavaScript的核心概念,适合初学者入门学习。
|
1月前
|
JavaScript
js学习--制作猜数字
js学习--制作猜数字
38 4
js学习--制作猜数字
|
1月前
|
JavaScript
webpack学习五:webpack的配置文件webpack.config.js分离,分离成开发环境配置文件和生产环境配置文件
这篇文章介绍了如何将webpack的配置文件分离成开发环境和生产环境的配置文件,以提高打包效率。
48 1
webpack学习五:webpack的配置文件webpack.config.js分离,分离成开发环境配置文件和生产环境配置文件
|
2月前
|
算法 JavaScript 前端开发
第一个算法项目 | JS实现并查集迷宫算法Demo学习
本文是关于使用JavaScript实现并查集迷宫算法的中国象棋demo的学习记录,包括项目运行方法、知识点梳理、代码赏析以及相关CSS样式表文件的介绍。
第一个算法项目 | JS实现并查集迷宫算法Demo学习
|
2月前
|
JavaScript 前端开发 API
紧跟月影大佬的步伐,一起来学习如何写好JS(上)
该文章跟随月影老师的指导,探讨了编写优质JavaScript代码的三大原则:各司其职、组件封装与过程抽象,通过具体示例讲解了如何在实际开发中应用这些原则以提高代码质量和可维护性。
紧跟月影大佬的步伐,一起来学习如何写好JS(上)
|
1月前
|
JavaScript
js学习--制作选项卡
js学习--制作选项卡
37 4
|
1月前
|
JavaScript
js学习--商品列表商品详情
js学习--商品列表商品详情
19 2
|
1月前
|
JavaScript
js学习--九宫格抽奖
js学习--九宫格抽奖
18 2