JS的对象、函数、作用域、事件

1、JS的对象

　　a.JS对象是拥有属性和方法的数据；

　　b.这是给变量设置值：var car = "fiat"

　　对象也是变量，但是对象可以拥有多个变量，这是给对象赋值： var car = {type:"fiat", model: 500, color:"white"};

　　　可以说JS对象是变量的容器；

　　c.这是设置JS对象，可以跨越多行；

var person = {
    firstName:"John",
    lastName:"Doe",
    age:50,
    eyeColor:"blue"
};
定义变量时 发现自己的粗心：应当用“：”号而不是“=”，而且忘记写“；”

　　d.自己写的关于对象的属性的访问

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<h1>我的网页</h1>
<p id="demo" ></p>
<script>
        var liaoxun = {
            firstName :"liao",
            lastName :"xun",
            age :"22",
            sex : "男",
        };
    document.getElementById("demo").innerHTML=liaoxun.firstName+liaoxun.lastName+"是个"+liaoxun.sex+"生"+"今年"+liaoxun.age+"岁";
</script>

</body>
</html>

　　e.对象的方法定义了一个函数，作为对象的属性存储起来

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<p>创建和使用对象方法。</p>
<p>对象方法作为一个函数定义存储在对象属性中。</p>
<p id="demo"></p>
<script>
var person = {
    firstName: "John",
    lastName : "Doe",
    id : 5566,
    fullName : function() 
    {
       return this.firstName + " " + this.lastName;
    }
};
document.getElementById("demo").innerHTML = person.fullName();
</script>
    
</body>
</html>

2、JS的函数

　　a.函数是由事件驱动的或者当他被调用时执行的课重复调用的代码块

　　　　写法：关键字：function

　　　　　　如： function myFunction(){} 这就是一个函数

　　　　带参数的函数：

　　　　　　可以向其传值，这些值就是参数，可以发送任意多的参数，由“，”分隔开就行；

　　　　　　如：function（var1 ， var2）{} 当声明函数时请把参数作为变量来声明；

　　　　　　变量和参数必须以一致的顺序出现。第一个变量就是第一个被传递的参数的给定的值，以此类推；　

　　　　　　意思就是调用的时候，参数的顺序要写对；　　　　　

<p>点击这个按钮，来调用带参数的函数。</p>
<button onclick="myFunction('Harry Potter','Wizard')">点击这里</button>
<script>
function myFunction(name,job){
    alert("Welcome " + name + ", the " + job);
}
</script>

b.带有返回值的函数：使用return就可以实现，

自己写的js实现的计算器只写了加法，其他类似就不写了

<html>
<head> 
<meta charset="utf-8"> 
<title>JS制作计算器</title> 
</head>
<body>
<h1>计算器</h1>
    <table border=1 >
        <tr>
            <td>    
                <p>请输入第一个数：</p>
                <input type="text" id="oneNum">
            </td>
        </tr>
        <tr>
            <td>    
                <p>请输入第二个数：</p>
                <input type="text" id="twoNum">
            </td>
        </tr>
        <tr>
            <td>
                <button id = "addBtn" onclick = "add()">+</button>
                <button id = "subBtn" onclick = "sub()">-</button>
                <button id = "rideBtn" onclick = "ride()">*</button>
                <button id = "devBtn" onclick = "dev()">/</button>
            </td>
        </tr>
        <tr>
            <td>
                <td colspan="2" rowspan="2">
                  <p id="result"></p>
                </td>

        </tr>
    </table>
    <p id="test" ></p>
<script>
    
        var result_1;
        function getOneNum() {
            var oneNum = document.getElementById("oneNum").value;
            return oneNum;
            }
        function getTwoNum() {
            var twoNum = document.getElementById("twoNum").value;
            
            return twoNum;
            }
        
        /*
            加法    
        */
        function add(){
            
            var a = getOneNum();
            var b = getTwoNum();
            var c = Number(a)+Number(b);
            sendResult (c);
        }
        function sendResult(result_1)
        {
              var num = document.getElementById("result")
  num.innerHTML = result_1;
            }
        
    
</script>

</body>
</html>

3、JS的作用域

4、JS的事件

JS的对象、函数、作用域、事件

猜你喜欢