跟我学JavaScript--对象，函数

最新推荐文章于 2024-08-18 23:49:04 发布

panlu666_pl

最新推荐文章于 2024-08-18 23:49:04 发布

阅读量692

点赞数

分类专栏：跟我学JS 文章标签： javascript 对象函数

本文链接：https://blog.csdn.net/panlu666_pl/article/details/70227230

版权

跟我学JS 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

一、对象

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>