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();

目录
相关文章
|
6月前
|
前端开发 JavaScript
个人征信电子版无痕修改, 个人信用报告pdf修改,js+html+css即可实现【仅供学习用途】
本代码展示了一个信用知识学习系统的前端实现,包含评分计算、因素分析和建议生成功能。所有数据均为模拟生成
|
6月前
|
前端开发
个人征信PDF无痕修改软件,个人征信模板可编辑,个人征信报告p图神器【js+html+css仅供学习用途】
这是一款信用知识学习系统,旨在帮助用户了解征信基本概念、信用评分计算原理及信用行为影响。系统通过模拟数据生成信用报告,涵盖还款记录
|
JavaScript 前端开发 开发者
VUE 开发——Node.js学习(一)
VUE 开发——Node.js学习(一)
257 2
|
7月前
|
JavaScript 数据可视化 前端开发
three.js简单实现一个3D三角函数学习理解
1.Three.js简介 Three.js是一个基于JavaScript编写的开源3D图形库,利用WebGL技术在网页上渲染3D图形。它提供了许多高级功能,如几何体、纹理、光照、阴影等,以便开发者能够快速地创建复杂且逼真的3D场景。同时,Three.js还具有很好的跨平台和跨浏览器兼容性,让用户无需安装任何插件就可以在现代浏览器上观看3D内容。
235 0
|
JavaScript
js学习--制作猜数字
js学习--制作猜数字
125 4
js学习--制作猜数字
|
JavaScript
webpack学习五:webpack的配置文件webpack.config.js分离,分离成开发环境配置文件和生产环境配置文件
这篇文章介绍了如何将webpack的配置文件分离成开发环境和生产环境的配置文件,以提高打包效率。
225 1
webpack学习五:webpack的配置文件webpack.config.js分离,分离成开发环境配置文件和生产环境配置文件
|
Web App开发 JavaScript 前端开发
如何学习JavaScript?
如何学习JavaScript?
247 5
|
算法 JavaScript 前端开发
第一个算法项目 | JS实现并查集迷宫算法Demo学习
本文是关于使用JavaScript实现并查集迷宫算法的中国象棋demo的学习记录,包括项目运行方法、知识点梳理、代码赏析以及相关CSS样式表文件的介绍。
127 7
第一个算法项目 | JS实现并查集迷宫算法Demo学习
|
JavaScript 前端开发 索引
JavaScript学习第二章--字符串
本文介绍了JavaScript中的字符串处理,包括普通字符串和模板字符串的使用方法及常见字符串操作方法如`charAt`、`concat`、`endsWith`等,适合前端学习者参考。作者是一位热爱前端技术的大一学生,专注于分享实用的编程技巧。
142 2

热门文章

最新文章