跟我学JavaScript--对象，函数

来源：互联网发布：硬件和软件是什么编辑：程序博客网时间：2024/06/05 00:22

一、对象

1.使用对象字面量创建对象：
如.

var car={         type:"small",         age:5,         color:"red"         };

对象也是变量，可以包含多个变量

2.对象属性：

JavaScript 对象通常称键值对为对象属性
键值对通常写法为 name : value (键与值以冒号分割)

3.访问对象属性：

car.age;
car[“age”];

4.对象方法

对象的方法定义了一个函数，并作为对象的属性存储
对象方法通过方法名()调用（作为一个函数）

5.访问对象方法
1）.创建对象方法：

对象方法名 : function(){        代码;}

2）.访问对象方法：

对象名.对象方法名();

如.

<body><p id="demo1"></p><p id="demo2"></p><script>    var car={        age:5,        color:"red",        name:"Nico",    changename : function(){    var _name={age:10,name:"pan"};    return _name.name;    }    };document.getElementById("demo1").innerHTML=car.name; //Nico          document.getElementById("demo2").innerHTML=car.changename(); //pan</script></body>

二、函数

1.函数的定义：函数是由事件驱动的，或是被调用时执行的可重复使用的代码块。是完成某个特定功能的一组语句。

2.函数语法：

function 函数名(){   执行代码;}

调用该函数时，会执行函数内的代码

3.调用带参数的函数

在调用函数时，可以向函数传递值，这些值被称为参数
这些参数可以在函数中使用
可以有任意多的参数，用逗号分隔
声明函数时，把参数作为变量来声明

如.

声明函数：         function 函数名(参数1，参数2){             代码;         }调用函数：         函数名('参数3','参数4');

4.带有返回值的函数

使用return语句实现将值返回调用它的地方
使用return语句时，函数会停止执行

以下将带参数和返回值的函数结合：

function myFunc(a,b){  return a*b;}document.getElementById("demo").innerHTML=myFunc(4,5);

仅仅需要退出函数时也可使用return语句，返回值可选：

function myFunc(a,b){  if(a>b)     return;  x=a+b;}

如果a>b，将退出函数myFunc，并不会执行x=a+b;语句

例1：

<body><table border="1">    <tr>        <td>第一个数：</td>        <td><input type="text" id="first"/></td>    </tr>    <tr>        <td>第二个数：</td>        <td><input type="text" id="twice"/></td>    </tr>    <tr>        <td colspan="2" >            &nbsp;            <button style="width:inherit" onclick="add()">+</button>            &nbsp;            <button style="width:inherit" onclick="subtract()">-</button>            &nbsp;            <button style="width:inherit" onclick="ride()">*</button>            &nbsp;            <button style="width:inherit" onclick="devide()">/</button>        </td>    </tr>    <tr>        <td colspan="2" rowspan="2">            <p id="result"></p>        </td>    </tr></table><script>   function getFirstNumber(){        return document.getElementById("first").value;   }    function getTwiceNumber(){        return document.getElementById("twice").value;    }    function sendResult(re){        document.getElementById("result").innerHTML=re;    }    function add(){        sendResult(Number(getFirstNumber())+Number(getTwiceNumber()));    }    function subtract(){        sendResult(Number(getFirstNumber())-Number(getTwiceNumber()));    }    function ride(){        sendResult(getFirstNumber()*getTwiceNumber());    }    function devide(){        sendResult(getFirstNumber()/getTwiceNumber());    }</script></body>

运行结果如下：
这里写图片描述

例2：

<body>看书： <input type="checkbox" name="ch"/> <br />写：   <input type="checkbox" name="ch"/> <br />读：   <input type="checkbox" name="ch"/> <br />念：   <input type="checkbox" name="ch"/> <br /><button onclick="checkboxed('ch')">全选</button><button onclick="uncheckboxed()">全不选</button><script>    function checkboxed(objName){        var objNameList=document.getElementsByName(objName);        if(null!=objNameList){            for(var i=0;i<objNameList.length;i++)                objNameList[i].checked="checked";        }    }    function uncheckboxed(){        var objNameList = document.getElementsByName('ch');        if(objNameList){           for(var i=0;i<objNameList.length;i++)               objNameList[i].checked="";        }    }</script></body>

运行结果如下：
这里写图片描述

0 0