web前端JavaScript学习-JavaScript 基本语法之函数
小职 2021-06-25 来源 :「小智RE0」 阅读 379 评论 0

摘要:本文主要介绍了web前端JavaScript学习-JavaScript 基本语法之函数,通过具体的内容向大家展现,希望对大家前端Javascript开发的学习有所帮助。

本文主要介绍了web前端JavaScript学习-JavaScript 基本语法之函数,通过具体的内容向大家展现,希望对大家前端Javascript开发的学习有所帮助。

web前端JavaScript学习-JavaScript 基本语法之函数

函数

类似于面向对象语言中的方法;在JS中也具有实现某些功能的一些代码;被封装到函数中;可以反复调用.


函数是定义一次但却可以调用任意多次的一段完成某种特定功能的JS 代码。

函数中的语句是一个独立的部分,它不会在外部脚本执行时被执行,而只是作为函数的定义而存在。只有调用它时才执行。

函数调用是指通过函数名来使用这段代码。

函数在定义以后可以被重复调用,以此通常将常用的功能写成一个函数.


定义及调用函数

函数被关键字function声明;有函数名,函数参数列表,函数体,返回值;(不需要定义,参数以及返回值的类型)

基本语法:


function  functionName([arguments]){

javascript statements

[return expression]


function: 声明函数的关键字;

functionName:函数名;

arguments:传递给函数的参数列表,各个参数之间用逗号隔开,可以为空;

statements: 实现函数功能的函数体;

return expression:函数将返回expression的值,同样是可选的的语句。


在调用函数时;可以直接调用;也可以在别的函数中调用;还可以通过对象调用.


案例:


<script type="text/javascript">

 //函数案例name0;形式参数为 a;

 function name0( a){

        console.log(a);

        console.log("自定义的函数");

        //返回值不需要声明类型;

         return a+56;

}

//调用函数;这个20就是实际传入的参数;

var  res=name0(20);

//获得返回值;

console.log(res);

</script>


web前端JavaScript学习-JavaScript 基本语法之函数


可以使用事件驱动函数;


案例:在按钮事件中调用函数;


<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

<script type="text/javascript">

            //函数案例name0;形式参数为 a;

function name0( a){

console.log(a+10);

}

</script>

</head>

<body>

    <!-- 在按钮事件中调用函数 -->

<input type="button" onclick="name0(2)" value="按钮名" />

</body>

</html>


点击一次按钮就会调用一下;

web前端JavaScript学习-JavaScript 基本语法之函数



变量的作用域

全局变量:在函数外部定义的变量,在声明后,任何位置都可用。

局部变量:在函数内部定义的变量,作用范围为函数内部。

类似于面向对象语言的变量作用域


<script type="text/javascript">

//全局变量a;

var a=10;

//函数;

function name1(){

//局部变量b;

var b=6;

console.log(b);

console.log(a);

name1();

</script>


全局函数

web前端JavaScript学习-JavaScript 基本语法之函数

案例:

parseInt(arg) 整数格式化


<script type="text/javascript">

//parseInt(arg)案例;

var   a=10;//整数类型的a;

var   b=12.54;//浮点数类型的b;

var   c="12";//字符串类型的整数c;

var   d="12.33";//字符串类型的浮点数d;

var   e="124qwq10";//字符串类型,以整数开头的e;

var   f="124.55qwq10";//字符串类型,以浮点数开头的f;

var   g="qaq";//字符串类型,以字母开头的g;

console.log(a+b);            //整数与浮点数直接相加; 结果: 22.54

console.log(a+parseInt(b)); //整数与 使用parseInt(arg)函数后的浮点数 相加;(浮点数b被格式化为整数;); 结果: 22

console.log(a+c);           //整数与字符串类型的整数相加; 仅拼接了字符串; 结果: 1012

console.log(a+parseInt(c)); //整数与 使用parseInt(arg)函数后的字符串类型整数 相加;(字符串类型的整数被格式化);结果: 22

console.log(a+c*1);         //由于运算符的优先级;通过对字符串类型的整数进行隐式转换; 结果: 22

console.log(a+d);          //整数与字符串类型的浮点数相加; 仅拼接了字符串; 结果: 1012.33

console.log(a+parseInt(d));//整数与 使用parseInt(arg)函数后的字符串类型浮点数 相加;(字符串类型的浮点数被格式化);结果: 22

console.log(parseInt(e));  //使用parseInt(arg)函数后的字符串类型,以整数开头的e;  结果:124

console.log(parseInt(f));  //使用parseInt(arg)函数后的字符串类型,以浮点数开头的f;结果:124

console.log(parseInt(g));  //使用parseInt(arg)函数后的字符串类型;以字母开头的g; 结果:NaN

</script>


parseFloat(arg) 浮点数格式化


<script type="text/javascript">

//parseFloat(arg)案例;

var   a=10;//整数类型的a;

var   b=12.54;//浮点数类型的b;

var   c="12";//字符串类型的整数c;

var   d="12.33";//字符串类型的浮点数d;

var   e="124qwq10";//字符串类型,以整数开头的e;

var   f="124.55qwq10";//字符串类型,以浮点数开头的f;

var   g="qaq";//字符串类型,以字母开头的g;

//使用parseFloat(arg)浮点数格式化函数;

console.log(parseFloat(a));//整数类型的;                结果:10

console.log(parseFloat(b));//浮点数类型的;              结果:12.54

console.log(parseFloat(c));//字符串类型的整数;          结果:12

console.log(parseFloat(d));//字符串类型的浮点数;        结果:12.33

console.log(parseFloat(e));//字符串类型,以整数开头的;   结果:124

console.log(parseFloat(f));//字符串类型,以浮点数开头的; 结果:124.55

console.log(parseFloat(g));//字符串类型,以字母开头的;   结果:NaN

</script>


typeof (arg)判断数据类型


<script type="text/javascript">

//typeof (arg)返回arg值的数据类型。

var   a=10;//整数类型的a;

var   b=3.1415926;//浮点数类型的b;

var   c="10qwer";//字符串类型的c;

var   d; //未赋值的变量d;即未知类型的;

var   f=new Date();//对象类型的f;

//使用typeof (arg)判断变量类型;

console.log(typeof(a));//结果: number

console.log(typeof(b));//结果: number

console.log(typeof(c));//结果: string 

console.log(typeof(d));//结果: undefined

console.log(typeof(f));//结果: object

</script>


eval(arg) 可以把字符串当做js语言执行


<script type="text/javascript">

//eval(arg)  可运算(把字符串可以作为js脚本执行)某个字符串。

//案例;

var a=10;

var b="a+a+17";

//使用eval(arg);可运算字符串;

console.log(eval(b));

eval("alert('对话框');");//虽然这里的对话框是作为字符串类型;但是会被执行(弹出对话框);

</script>



我是小职,记得找我

✅ 解锁高薪工作

✅ 免费获取基础课程·答疑解惑·职业测评

web前端JavaScript学习-JavaScript 基本语法之函数

本文由 @小职 发布于职坐标。未经许可,禁止转载。
喜欢 | 0 不喜欢 | 0
看完这篇文章有何感觉?已经有0人表态,0%的人喜欢 快给朋友分享吧~
评论(0)
后参与评论

您输入的评论内容中包含违禁敏感词

我知道了

助您圆梦职场 匹配合适岗位
验证码手机号,获得海同独家IT培训资料
选择就业方向:
人工智能物联网
大数据开发/分析
人工智能Python
Java全栈开发
WEB前端+H5

请输入正确的手机号码

请输入正确的验证码

获取验证码

您今天的短信下发次数太多了,明天再试试吧!

提交

我们会在第一时间安排职业规划师联系您!

您也可以联系我们的职业规划师咨询:

小职老师的微信号:z_zhizuobiao
小职老师的微信号:z_zhizuobiao

版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
 沪公网安备 31011502005948号    

©2015 www.zhizuobiao.com All Rights Reserved

208小时内训课程