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

Posted 葡萄美酒夜光杯

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了第三章 基本概念(第五部分:函数初步)相关的知识,希望对你有一定的参考价值。

  六. 函数初步

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

  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就变成全局变量!

 

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

以上是关于第三章 基本概念(第五部分:函数初步)的主要内容,如果未能解决你的问题,请参考以下文章

第五篇:模块

第五章随笔

基本概念二-字符串初步

第五篇:函数

结构体的初步了解

初步了解URL