第三章基本概念(第五部分:函数初步)

葡萄美酒夜光杯 葡萄美酒夜光杯     2022-08-02     177

关键词:

  六. 函数初步

  无论在哪门语言,函数都是一个相当核心的概念。通过函数可以封装任意多的语句,刻意在任何地方调用执行。函数实质上是一个短小的脚本,需要反复做一件事时,可以利用函数避免重复键入过多重复的代码。良好的编程习惯要求,先定义函数,再使用它们。定义函数用法如下:

  function 函数名(参数){函数代码;}

   比如封装以下代码:

var beatles=["Joln","Paul","George","Ringo"];

for(var count=0;count<beatles.length;count++){alert(beatles[count]);};

声明为函数shout并调用的语句是:

function shout()

{var beatles=["Joln","Paul","George","Ringo"];

for(var count=0;count<beatles.length;count++){alert(beatles[count]);}};

//以下是调用。

shout();

 

  1. 返回值

   就是函数的的执行结果。函数可以没有返回值。一个空函数返回的是undefined。因此可以通过return语句来给函数指定一个返回值,这样函数会更加实用。请注意:执行完return之后,函数后边的语句将不会执行。

  一个函数应该只返回一种类型的值。

当然,把结果直接返回给这个函数的语句,会更加实用。因此引出return语句。

  【例1】12mol/L 的HCl溶液转换为g/ml计量是多少?

  HCl摩尔质量(Molar Mass)为36.5g/mol,体积重量(volume)的化学计算公式为36.5g/mol * 1mol/L * 1/1000=0.0365g/ml。

   因此在js中定义函数

//定义函数体积重量换算法则:

function ConverToVolume(temp){var resaut=temp*36.5/1000;return temp;};

//函数只有一个参数,用temp代替。

var  temp_MolarConcentration=12;

//当摩尔浓度为12mol/L时

var volume=ConverToVolume(temp_MolarConcentration);

/*赋予体积重量为变量volume。为函数表达式ConverToVolume(temp_MolarConcentration),已返回值到volume。*/

alert(volume);

//显示volume的值。

 

  2. 参数(argument)

  在数学函数中,二元函数可以表示为f(x,y)。在JS中,x,y就是这个二元函数的参数。

  比如f(x,y)=x+y

  在js应该定义为复合函数,应该这样写

function f(x,y){var total=x+y;alert(total);}

//声明函数。

x=3;

y=7;

f(x,y);

  输出结果为10。如果直接调用f(),输出结果为NaN(Not a Number)。更简单地,可以直接书写:

  f(3,7);

  参数分为可变参(不定参)和不变参。

 

  function(arguments){}

  arguments:参数的个数是可变的。

 

 

  【例2】任意多个数据求和函数:

 

function sum () {

    arguments

    var result=0

    for(i=0;i<arguments.length;i++){

        result+=arguments[i];

    }

    alert(result);

    // body...

}

sum(2,3,5,7)

  理论上js可以传递任意个参数。参数在js的表述就是arguments。

 

 

 

  【例3】自己封装一个实用的css函数:模拟一个jq(Jquery)函数。jq的css既可以设置又可以获取。(xxx.css(名字,属性)格式)

  html代码如下:

 

<div id="div1" style="width:200px;height:200px;background:red">
</div>

  js代码

 

function css () {

    if(arguments.length==2){//获取

        return arguments[0].style[arguments[1]];

    }else if (arguments.length==3) {//设置

        arguments[0].style[arguments[1]]=arguments[2];

        /*对象.样式=属性值*/

    };

    // body...

}

//以下是调用过程 window.onload
=function(){ var oBtn=document.getElementById(‘btn1‘); var oDiv=document.getElementById(‘div1‘); oBtn.onclick=function(){ //css(oDiv,‘background‘,‘green‘)     //以上语句可选:可选设置绿色 //alert(css(oDiv,‘width‘)); //以上语句可须按:获取宽度 //此CSS参数有可能是2个参数,也可能是3个参数 } }

 

 

  以上函数只能设置行间样式,但实际工作中很少去写行间样式。问题来了,如何去取非行间的样式呢?

 

  用currentStyle来取计算后的样式。把上述代码的style替换为currentStyle就可以了。currentStyle取哪的样式都可以。但是浏览器兼容性会出现问题。只能在ie9以上的ie下能用!

 

  那怎么办呢?用getComputedStyle!意思还是获取计算后的样式。

 

  getComputedStyle(对象,false).属性

 

  但是在ie下getComputedStyle又是用不了的。

 

  现在要做ie和火狐的兼容。

 

  封装一个获取计算后样式的函数:

 

function getStyle(obj,attr){

    //元素,样式

    if(obj.currentStyle){

        return obj.currentStyle[attr]

    }else{

        return getComputedStyle(obj,false)[attr];

    }

}

  调用时:

 

function css () {

    if(arguments.length==2){//获取

        return getStyle(arguments[0],arguments[1]);  

    }else if (arguments.length==3) {//设置

        arguments[0].style[arguments[1]]=arguments[2];

        /*对象.样式=属性值*/

    };

}


window.onload=function(){

    var oBtn=document.getElementById(‘btn1‘);

    var oDiv=document.getElementById(‘div1‘);


    oBtn.onclick=function(){

        //css(oDiv,‘background‘,‘green‘)

        alert(css(oDiv,‘width‘));

        //获取宽度

        //此CSS参数有可能是2个参数,也可能是3个参数

    }

}

 

  这个函数就算完整了。

 

  改善可读性:

 

  arguments[0].style[arguments[1]]=arguments[2];

 

  这样的代码读起来太不友好了。不如改善一下。实际上在函数中定义若干个参数,本质上1和argument[]是一一对应的。所以写函数时

 

  function(obj,attr,value){};

 

  后边引用时就有较好的观赏性了。

 

  obj.style[attr]=value

 

  3. 局部变量和全局变量

 

变量类型(按作用域分)

 

用法

全局变量

范围是整个脚本。可以在脚本的任何位置引用。

temp=x*x

局部变量

只存在于声明它函数的内部,在外部无法使用。

function f(x){var temp=x*x;return temp}

这样temp就不会在函数范围外时生效。

当省略了var符时,temp就变成全局变量!

 

  函数的特点:应该是一个自给自足的脚本。定义函数时,一定要把内部的变量全部声明为局部变量。

第三章——基本概念

在函数中,基本语法有两种: 这是函数的声明在函数中,可以传入多个参数,函数也不介意用户传入几个参数。JS中的参数在内部是用一个数组表示的。接收器接收到的是这个数组。在函数体内,可以通过arguments对象来访问... 查看详情

高等数学本科少学时类型第4版上册课后习题答案同济大学数学系

...率问题举例及相关变化率第七节函数的微分第二章复习题第三章中值定理与导数的应用第一节中值定理第二节洛必达法则第三节泰勒中值定理第四节函数的单调性和曲线的凹凸性第五节函数的极值和最大?最小值第六节函数图形... 查看详情

高等数学李秀珍课后答案高等数学文科类答案

...数的求导法则第三节高阶导数第四节函数的微分总习题二第三章微分中值定理与导数的应用第一节微分中值定理第二节洛必达法则第三节函数的单调性与曲线的凹凸性第四节函数的极值与最大值最小值总习题三第四章不定积分第... 查看详情

基本概念二-字符串初步(代码片段)

这节的开始需要牢记一条关于Python的规定:Python在打印所有字符串时,都使用引号将其括起(注意这里说的打印不是指使用print函数)。这是因为Py在打印值的时候,保留了其在代码中的样子,而不是希望用户看到的样子。1.python... 查看详情

第三章基本概念

3.1语法  区分大小写:ECMAScript中的一切(变量、函数名和操作符)都区分大小写。  标识符:标识符可以是按照下列格式规则组合起来的一或多个字符:  ?第一个字符必须是一个字母、下划线(_)或一个美元符号($)... 查看详情

从零开始做第三方支付开发-----初步了解概念

这是第三方支付开发的第一篇.目前很多公司在做海外支付,但是不知道怎么开始.本人公司就是做海外产品,涉及到paypal和stripe支付,有比较多的经验,希望可以帮助需要的朋友.我是做Java开发,所以这一系列的所有例子都用Java编写,其... 查看详情

第五篇:函数

 函数基本操作一、函数基本概念1、函数是对程序逻辑进行结构化或过程化的一种编程方法2、将整块代码巧妙地隔离成易于管理的小块3、把重复代码放到函数中而不是进行大量的拷贝,这样既能节省空间,也有助于保持一致... 查看详情

c语言:c语言程序设计初步

  .:.:第三章:c语言程序设计初步:.:. 第三章:C语言程序设计初步C语言程序设计本课介绍C语言程序设计的基本方法和基本的程序语句。从程序流程的角度来看,程序可以分为三种基本结构,即顺序结构、分支结构、循... 查看详情

第三部分数据结构[专业课考试3]

...内容:单链表,双向链表,环形链表,带哨兵节点的链表;栈的基本概念和性质,栈ADT及其顺序,链接实现;栈的应用;栈与递归;队列的基本概念和性质,队列ADT及其顺序,链接实现;队列的应用;向量基本概念和性质;向量ADT及其数组、链接实 查看详情

结构体的初步了解

...后面专门研究,一旦到了一定程度来个大杂烩。今天就学基本的标题内容。结构体的基本定义示意图:如何初始化请看下面的例子:第三种初始化跟第二种一样,但是有点特殊,它少了最后一种数据类型。打印方法一样。就有初... 查看详情

javascript高级程序设计(第3版)第三章(基本概念)

3.1语法  1.不以数字开头的数字,字母,下划线,美元符号  2.注释:html<!---->css/**/js单行//多行/**/    3.ES5引入了严格模式(strictmode)。即为js定义的一种不同的解析与执行模型。可以在整个脚本头部或者... 查看详情

javascript初步+基本函数

JavaScript基本写法<scripttype="text/javascript">functionrec(){    //函数定义varmymessage=confirm("你是女人嘛");if(mymessage==true){document.write("你是女士!");}else{document.write("你是男士!");}} </script> 查看详情

oo第二次博客作业

...——多线程电梯作业概述:第五次作业是在第三次作业的基本上增加多线程的概念,说起来好像挺容易的,但其实真正做起来花费了很多时间,最先开始,我对于多线程的印象只有老师在课堂上讲的概念和简单的例子,所以要上... 查看详情

javascript高级程序设计(第3版)笔记——chapter3:基本概念(函数部分)

3.7函数3.7.1理解参数ECMAScript函数不介意传递进来多个参数,也不在乎传递进来的参数是什么数据类型。因为在ECMAScript中的参数在内部是用一个数组来表示的。在函数体内可以通过arguments对象来访问这个参数数组,从而获取传递... 查看详情

javascript初步+基本函数

JavaScript基本写法<scripttype="text/javascript">functionrec(){    //函数定义varmymessage=confirm("你是女生嘛");if(mymessage==true){ document.write("你是女士!");}else{document.write("你是男士!");}}</script>函数使用 查看详情

一线架构师第三部分——细化架构

... 接口:对于实际模组的抽象表示,也是系统内部交互的基本单位。  子系统:对于分割的层次再次划分,大而化小,分而治之。  交互机制:定义系统之间的调用、消息传输、面向接口的编程。  而对于架构师来说,想... 查看详情

第三章基本概念

3.1语法3.1.1 区分大小写3.1.2 标识符3.1.3 注释3.1.4 严格模式strictmode"usestrict"3.1.5 语句3.2关键字和保留字 3.3 变量  3.4  数据类型  查看详情

面向对象和面向过程的初步概念

面向对象和面向过程  面向过程好比开车,有明确的第一步,第二步,第三步,不需要多人协作:1:第一步点火2:第二步踩离合3:第三步踩油门 面向对象好比造车,很难分出明确的步骤,需要多人协作:1.造车玻璃2... 查看详情