javascript基础

BOM事件
    confirm  //确认
    alert  //警告框
    prompt  //提示框

DOM事件
    onclick   //用户点击.HTML. 元素    
    onmouseover  //用户移动鼠标在一个HTML元素上
    onmouseout   //用户从一个HTML元素上移开鼠标
    onkeydown    //用户按下键盘按键
    onload    //浏览器已完成页面的加载
    onmousedown  //按下鼠标
    onmouseup   //松开鼠标
    onfocus   //点击输入获得焦点


js更改HTML和css
    document.getElementById("image").src="landscape.jpg";
    document.getElementById("p2").style.dispaly="block";
    document.getElementById("demo2").innerHTML='输入文本';

HTML输入样式
    <button type="button" onclick="document.getElementById('id1').style.color='red';"></button> 
    <h1 onmouseover="style.color='red'"onmouseout="style.color='black'">将鼠标移至文部上</h1> 

    document.write("当前时间:" + Date()+ "<br>");
    document.write("可用宽度: " + screen.availWidth + '<br>');
    document.write("可用高度: " + screen.availHeight);


字符串
    var a = 'hello'
    a.length; 字符串长度5
    a[0]; 索引结果h
    s.toUpperCase(); 转化为大写
    s.toLowerCase(); 转化为小写
    s.indexOf('e'); 搜索指定字符串出现的位置从0开始
    s.substring(0, 5); 返回指定索引区间的子串
    s.substring(7);  从索引7开始到结束


数组:
    var arr = [1, 2, 3.14, 'Hello', null, true];
     a[0];  返回1
     arr.length;  返回6
     arr[1] = 99;  修改第1列元素为[1, 99, 3.14, 'Hello', null, true]
     arr.indexOf(1);  元素1的索引为0 
     arr.slice(0, 3);  从索引0开始，到索引3结束[1, 2, 3.14]
     arr.slice();  从头到尾截取所有元素[1, 2, 3.14, 'Hello', null, true]
     arr.push('A', 'B');  向数组末尾添加元素
     arr.pop();  删除数组末尾元素
     arr.pop(); arr.pop(); arr.pop();  连续删除3次
     arr.unshift('A', 'B');  头部添加若干元素
     arr.shift();  删掉第一个元素
     arr.sort();  进行排序
     arr.reverse(); 元素倒序排列

     splice(); 删除若干元素，然后再从该位置添加若干元素
     var arr = ['Microsoft', 'Apple', 'Yahoo', 'AOL', 'Excite', 'Oracle'];
    从索引2开始删除3个元素,然后再添加两个元素;
    arr.splice(2, 3, 'Google', 'Facebook');  返回删除的元素 ['Yahoo', 'AOL', 'Excite']
    arr;   ['Microsoft', 'Apple', 'Google', 'Facebook', 'Oracle']
    只删除,不添加;
    arr.splice(2, 2);  ['Google', 'Facebook']
    arr;   ['Microsoft', 'Apple', 'Oracle']
    只添加,不删除;
    arr.splice(2, 0, 'Google', 'Facebook');  返回[],因为没有删除任何元素
    arr;  ['Microsoft', 'Apple', 'Google', 'Facebook', 'Oracle']

    concat(); 两数组连接
    var arr = ['A', 'B', 'C'];
    var added = arr.concat(1, 2, [3, 4]);
    added; ['A', 'B', 'C', 1, 2, 3, 4]

    join(); 每个元素的字符串连接成一个字符串
    var arr = ['A', 'B', 'C', 1, 2, 3];
    arr.join('-');  'A-B-C-1-2-3'
	



 对象
    var abs = {
        info: 'information',
        // 嵌套对象
        inner:{
            id: 0,
            value: 100
        },
        // 嵌套数组
        arr:['one','1','two'],
        // 嵌套函数
        sayhello: function(name){
            return abs.inner;
            console.log("你好"+name+"!");
        }
    };
    // 访问属性
    abs.info;
    abs.inner.value;
    abs.arr[0];
    abs.sayhello('王二');
    abs['info'];    // 访问对象属性

    var xiaohong = {
        name: '小红',
        'middle-school': 'No.1 Middle School',   //属性名包含特殊字符，就必须用''括起来
    };
    xiaohong['middle-school']   //访问这个属性也无法使用.操作符
    xiaoming.age = 18;   新增一个age属性
    delete xiaoming.age;  删除age属性
    'name' in xiaoming;  对象中是否包含某key
    xiaoming.hasOwnProperty('name');  判断一个属性是否是xiaoming自身拥有的，而不是继承得到的

 
Map:一组键值对的结构
	var m = new Map([['Michael', 95], ['Bob', 75], ['Tracy', 85]]);
	m.get('Michael'); // 95
	m.set('Adam', 67); // 添加新的key-value
	m.has('Adam'); // 是否存在key 'Adam': true
	m.get('Adam'); // 67
	m.delete('Adam'); // 删除key 'Adam'
	
	
Set:一组key的集合，但不存储value

	过滤重复元素
	var s = new Set([1, 2, 3, 3, '3']);
	s; // Set {1, 2, 3, "3"}
	s.add(4); 添加元素到Set中
	s.delete(3); 删除元素
	
	
sort:从小到大排序
   var atrr = [1, 3,2,12,31,4,5,2]
	atrr.sort(function (x, y) {
		console.log(atrr)
		return x - y;
	})
	document.getElementById("demo").innerHTML= atrr;
	
	
split:把字符串转换为数组
	a = '1234'
    atrr =  a.split(",")
    
	
把[1, 3, 5, 7, 9]变换成整数13579
	var arr = [1, 3, 5, 7, 9];
	arr.reduce(function (x, y) {
		return x * 10 + y;
	}); // 13579
    
    
把数组所有数字转化为字符串

	var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
	arr.map(String); // ['1', '2', '3', '4', '5', '6', '7', '8', '9']
    
    
重新排序后的键值对拼接
        var a = {
            "cid": 1,
            "aame": 2,
            "brice": 3
        };

        var array = [];
        for (var v in a) {
            array.push(v);
        }
        array.sort();
        console.log(array);

        var string = '';
        for (let i = 0; i < array.length; i++) {
            let key = array[i];
            string += array[i] + '=' + a[key] + '&';
        }
        document.write(string);


空字符判断函数	
    function isNull(str) {
		if (str != null && str != '' && typeof (str) != "undefined") {
			return false;
		} else {
			return true;
		}
	};
    
    
返回最大值:apply()把参数打包成Array再传入；call()把参数按顺序传入
	Math.max.apply(null, [3, 5, 4]); // 5
	Math.max.call(null, 3, 5, 4); // 5
    
    
随机数
    var r = Math.random();    

符号运算
    ==  比较内容不比较类型
    ===  比较内容和类型
    % 求余运算10%3 =>1
    && 与运算
    || 或运算
    ! 非运算
    isNaN(x): 非数字
    Math.abs(1 / 3 - (1 - 2 / 3)) < 0.0000001  比较两个浮点数是否相等，计算它们之差的绝对值是否小于某个阈值

初始值x=0,y=1
     x=++y:  x=1	y=1
     x=y++:  x=0	y=1
     x+=y:  等同于 x=x+y

    字符串与,null(空值),相加,null,转化为字符串
    数字与,null(空值),相加,null ,转化为数字0
    数字和布尔值相加,布尔值.false,转成0,true.转成1

    var result1=5+5+"abc";    //结果将是"10abc"
    var result2= ""+5+5+"abc";    //结果将是"55abc"


	
数据转换
    typeof "John"        // 数据类型
    parseFloat(x)        //提取字符串前面数字或浮点数
    parseInt(x)           //提取字符串前面数字或整数数
    String(x)              //将变量 x 转换为字符串并返回
    Number("3.14")   //将字符串转换为数字

    x.value       //获取输入框内容
    if (person !=null && person!="") {}
	
	


编码格式转换
    JSON.parse()	  //用于将一个 JSON 字符串转换为 JavaScript 对象
    JSON.stringify()  //用于将 JavaScript 值转换为 JSON 字符串
        var text1 = '{ "sites" : [' +
        '{ "name":"Runoob" , "url":"www.baidu.com" },' +
        '{ "name":"Google" , "url":"www.google.com" },' +
        '{ "name":"Taobao" , "url":"www.taobao.com" } ]}';
        obj = JSON.parse(text1);
        var oSrA = document.getElementById("demo4");
        oSrA.innerHTML = obj.sites[1].name + " " + obj.sites[1].url;

		
获取时间
    var myDate = new Date();

    myDate.getYear(); //获取当前年份(2位)
    myDate.getFullYear(); //获取完整的年份(4位,1970)
    myDate.getMonth(); //获取当前月份(0-11,0代表1月)
    myDate.getDate(); //获取当前日(1-31)
    myDate.getDay(); //获取当前星期X(0-6,0代表星期天)
    myDate.getTime(); //获取当前时间(从1970.1.1开始的毫秒数)
    myDate.getHours(); //获取当前小时数(0-23)
    myDate.getMinutes(); //获取当前分钟数(0-59)
    myDate.getSeconds(); //获取当前秒数(0-59)
    myDate.getMilliseconds(); //获取当前毫秒数(0-999)
    myDate.toLocaleDateString(); //获取当前日期
	Math.floor((this.getMonth() + 3) / 3) //季度 
    var mytime=myDate.toLocaleTimeString(); //获取当前时间
    myDate.toLocaleString( ); //获取日期与时间
		
		
函数
    局部变量: 在函数中通过var声明的变量
    全局变量:  在函数外通过.var.声明的变量或变量在函数内没有使用var关键字
	
	规范: 所有变量和函数全部绑定到一个全局变量中
	// 唯一的全局变量MYAPP:
	var MYAPP = {};

	// 其他变量:
	MYAPP.name = 'myapp';
	MYAPP.version = 1.0;

	// 其他函数:
	MYAPP.foo = function () {
		return 'foo';
	};
		
	
	
    函数内改变全局变量
        var a;
        function Func(){
                a=4;
        }
        Func()
        document.write(a);   //结果为4

    var和let: let 声明的变量只在其声明的块或子块中可用
    var声明
        function varTest() {
            var x = 1;
            if (true) {
				var x = 2;  // 同样的变量!
				console.log(x);  // 2
            }
            console.log(x);  // 2
        }
    let声明
        function letTest() {
            let x = 1;
            if (true) {
				let x = 2;  // 不同的变量
				console.log(x);  // 2
            }
            console.log(x);  // 1
        }

    传参
        function myFunction(a,b){
            return a*b;
        }
        document.getElementById("oStr").innerHTML=myFunction(4,3);

    隐式参数
        function myFunction(x, y) {
            y = y || 0;
            return x * y;
        }
        document.getElementById("demo").innerHTML = myFunction(4);   //结果为0

    函数的自我调用
        (function () { document.getElementById("demo").innerHTML = "hello kity"; })()

        函数作为值使用
            function myFunction(a, b) {
                return a * b;
            }
            var x = myFunction(4, 3) * 2;
            document.getElementById("demo").innerHTML = x;  //结果24

        函数作为方法调用
            var myObject = {
                firstName:"John",
                lastName: "Doe",
                fullName: function() {
                    return this.firstName + " " + this.lastName;
                }
            }
            document.getElementById("demo").innerHTML = myObject.fullName(); 


    子函数: 内部函数可以访问外部函数定义的变量，反过来则不行
        function a(){     //父函数
            var a =12;
            function b(){    //子函数
                var c =13
				alert(a);  				//子函数可以调用父函数的局部变量
				
			}
            b();    //弹12
			var  d = a+c   //父函数不能调用子函数内的变量
        }
        a();


    函数间的调用
        function Btn1(){
            alert('this is a alert') ;
        }
        function Btn2(){
            var oDiv = document.getElementById('Str');
            oDiv.onclick = Btn1;   //调用func1()函数
        }
        Btn2()



语句
    if语句
    var age = 3;
    if (age >= 18) {
        alert('adult');
    } else if (age >= 6) {
        alert('teenager');
    } else {
        alert('kid');
    }

            a%2==0?alert("a为双数"):alert("a为dan数");    //三目写法

    switch语句
        switch (key) {
            case value1 :
                语句1
                break;
            case value2 :
                语句2
                break;
            default:
                break;
        }

    for循环
        var i;
        var cars = ["a", "b", "c"];
        for (i = 0; i < cars.length; i++)
        for (i = 0, len=cars.length; i < len; i++)
        {
            document.write(cars[i] + "<br>");
        }

        添加 x +才显示遍历
        var x="";
            for (i=0;i<5;i++){
                x= x +"这个数字是" + i + "<br>";
            }


    for in循环
        function myFunction(){
            var x;
            var txt=" ";
            var person={fname:"Bill",lname:"Gates",age:56}; 
            for (x in person){
                txt=x + person[x];
            }
            document.getElementById("demo").innerHTML=txt;
        }
		
		example:
		var a = ['A', 'B', 'C'];
		for (var i in a) {
			console.log(i); // '0', '1', '2'
			console.log(a[i]); // 'A', 'B', 'C'
		}

    while循环
        function myFunction(){
            var x="",i=0;
            while (i<5){
                x=x + "该数字为 " + i + "<br>";
                i++;
            }
            document.getElementById("demo").innerHTML=x;
        }

正则匹配
    function myFunction() {
        var str = "Visit  where!"; 
        var n = str.search(/e/i);    // 显示匹配的起始位置, i 执行对大小写不敏感的匹配。
        var n = str.search("e");
        var txt = str.replace(/where/i,"Runoob");    //替换 "where" 为 "Runoob" 
        var txt = str.replace("where","Runoob");
        document.getElementById("demo4").innerHTML = n;
    }

    test()    //方法用于检测一个字符串中是否存在匹配字符,返回bool值
    var patt1 = new RegExp("e");
    document.write(patt1.test("The best things in life are free"));

    exec()   //方法用于检测一个字符串中是否存在匹配字符，返回匹配的字符，或null
    var patt1 = new RegExp("e");
    document.write(patt1.exec("The best things in life are free"));

正则表达式表单验证实例
    function    isDecimal(strValue )  {  
    var  objRegExp= /^\d+\.\d+$/;    /*是否带有小数*/
    var reg=/^[\u4E00-\u9FA5]{2,4}$/;     /*校验是否中文名称组成 */
    var reg=/^[0-9]{8}$/;        /*校验是否全由8位数字组成 */
    var reg= /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/;    /*校验电话码格式 */
    var reg=/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+$/;    /*校验电话码格式 */
    return  objRegExp.test(strValue);  
    }  

面向对象编程
    
    function Person(name, sex) {   // 构造函数

        this.name = name;           // 添加对象属性
        this.sex = sex;
    }

    Person.prototype.showName = function () {   // 对象添加方法
        alert(this.name);
    };

    Person.prototype.showSex = function () {
        alert(this.sex);
    };

    //-------------------------------------

    function Worker(name, sex, job) {
        //this->new出来的Worker对象
        //构造函数伪装	调用父级的构造函数——为了继承属性
        Person.call(this, name, sex);

        this.job = job;
    }

    //原型链	通过原型来继承父级的方法
    //Worker.prototype=Person.prototype;

    for (var i in Person.prototype) {
        Worker.prototype[i] = Person.prototype[i];
    }

    Worker.prototype.showJob = function () {
        alert(this.job);
    };

    var oP = new Person('zgz', '男');   // 创建对象
    var oW = new Worker('zgz', '男', '打杂的');

    oP.showName();   // 调用对象方法
    oP.showSex();

    oW.showName();
    oW.showSex();
    oW.showJob();


    // 小程序常用面向对象方法

    var o = {
        name: "zhanggongze",
        ege: 28,
        worker: 'web前端',
        printName: function () {
            return this.name;
        },
        printEge: function () {

            return this.ege;
        },
        printWorker: function () {
            return this.worker;
        },
        printNEW: function () {
            return this.printName() + this.printEge() + this.printWorker();
        }
    }

    var printNEW = o.printNEW();
    console.log(printNEW);


// --------------------结束-------------------------