js的简单使用

目标：

js的一些简单使用

---

大纲：

1、 js的数据类型，关系运算符，逻辑运算符
2、 js的函数、对象
3、 数组
4、 事件

---

内容：

一、js的基本数据类型、关系运算符、逻辑运算符

定义类型时不管是什么类型都使用 var ,具体和const的区别不深入探究

a)、基本数据类型：数字（number）、字符串（String）、布尔类型（boolean）、函数（function）

b)、关系运算符：比较特殊的

1. 等于==:粗略比较值
2. 全等于===：不仅比较值，类型也进行比较

 var a1=12;
    var a2='12';
    alert(a1==a2)//返回true
    alert(a1===a2)//返回false

c)、逻辑运算：单独的值可以为true或者假,0,null,undefined,空串为假

1. &&运算：全部为真，返回最后一个值，存在假返回第一个假值
2. ||运算：全部为假时，返回最后一个值，存在真返回第一个真值

    var a = true;
    var b = "abc";
    var c = false;
    var d = null;
    
   alert(a&&b);//abc
   alert(b&&a);
    alert(a && c);//false
    alert(d && c);//null

    
   alert(a||b)//true
    alert(c || d)//null

二、js的函数和对象

1、函数的定义
a)方式一：function 函数名（形参列表）{ 内容}
b)方式二：var 函数名=function（形参列表）{ 内容}
c)隐含参数：argument类似java的不定项参数

    function fun1() {
        alert("无参调用")
    }
    var fun4=function(a,b) {
        return a+b;
    }
/**
     * 隐含参数的使用
     */

    var fun5=function (a,b) {
        var result=0;
        for(var i=0;i<arguments.length;i++){
            result+=arguments[i];
        }
        return result;
    }
/**
*函数调用
*/
fun1();
alert(fun4(34,12));
alert(fun5(12,12,13,13))//返回50

2、对象的定义和使用
a)、方式一：

						 var 对象名=new Object();
						 对象名.属性=值；
						对象名.函数名=function(){
						}	

b)方式二：

				var 对象名={
				属性:值
				函数名:function(){
					  }
				}

c)在对象内部可以使用this.属性名进行调用

var ob1={
        name:'张三',
        age:13,
        f1:function (){
            alert('姓名'+this.name+'\t年龄'+this.age);
        }
    };
    alert(ob1.age);
    ob1.f1();

   /* var ob2=new Object();
    ob2.name='张三';
    ob2.age=13;
    ob2.f1=function () {
        alert('姓名'+this.name+'\t年龄'+this.age);
    };


    alert(ob2.name);
    ob2.f1();*/

三、数组

a)数组格式：

	var 数组名=[]       空数组
     var 数组名=[1，true,'afs']

b)数组调用：

 var arr = [1, 212, 2213];
    for(var i=0;i<arr.length;i++){
        alert(arr[i])
    }

四、事件

a)事件：执行某些指定方法时需要执行的代码块
b）事件的注册方式

1. 静态注册：通过标签进行动态绑定，如< button οnclick=“调用的函数名()”>
2. 动态注册：在页面加载之后通过dom获取标签的id，然后进行注册

c)常用事件：

	* onload:页面加载完成之后，用于做页面js代码的初始化操作
     * onclick:按钮的点击事件
     * onblur:常用用于输入框失去焦点后验证输入内容是否合法
     * onchange:常用用于下拉列表和输入框内容发生改变后的操作
     * onsubmit:用于表单提交前，验证所有表单项是否合法

d)

<button onclick="onclickFun()">按钮1</button>
<button id="bt1">按钮2</button>
<br>
姓名:<input type="text" onblur="onblurFun()"><br>
年龄:<input type="text" id="ipt1"><br>


 function onclickFun() {
            alert('这是静态按钮点击事件')
        }
        
 function onblurFun(){
          console.log('失去焦点')
     }

  window.onload = function () {
            //     alert('这是动态事件的注册')
            var bt1 = document.getElementById('bt1');
            bt1.onclick = function () {
                alert('这是动态点击事件')
            }

            var ipt1=document.getElementById('ipt1')
            ipt1.onblur=function () {
                console.log('动态失去焦点')
            }