js基础要点

/*
*js的数据类型总结
*js拥有动态数据类型
*/
//数字类型
var a = 1;       
var a = 1.0;
var a = 1e2;
//字符串类型
var a = 'Eric';
//数组
var a = [11,22,33]
//布尔
var a = true;
var a = false;
//js没有确切的字典定义，和字典一样效果的是js对象
var a = {
    'name':'Eric',
    'age':18,
    'height':170
}
//undefined, null
//undefined表示变量不含值
//给变量赋值null可以清空变量
typeof(g);     //不存在的变量g,此处打印undefined
var a = null;
typeof(a);     //此处打印object 空对象
=========================================
/*
*js序列化和转义
*/
s = {
    'name':'Eric'
}
s_2_tring = JSON.stringify(s);             //对象转字符串
string_2_obj = JSON.parse(s_2_string);     //字符串转对象
h = "http://www.baidu.com?md=麻花藤";
encodeURI(h);              //转义中文字符
encodeURIComponent(h)      //转义中文字符和所有符号
============================================
/*
*eval和时间操作
*/
//eval是python中eval和exec的功能和
eval("1+2");    //3
eval("if(1==1){console.log('eric');}");    //执行此段代码，结果eric
var ccc = new Date();    //实例化日期类
console.log(ccc);    //Sat Jul 07 2018 22:00:43 GMT+0800 (中国标准时间)
ccc.getMinutes();    //get获取
ccc.setMinutes(10);  //set设置Sat Jul 07 2018 22:10:43 GMT+0800 (中国标准时间)
============================================
/*
*js的函数类型
***/
//普通函数
function a(name){
    console.log(name);
}
a('eric');

//匿名函数，定时器里面是匿名函数
a = setInterval(function(){
    console.log('Eric');
}, 3000);
clearInterval(a);

//自执行函数
(function(args){
    args += 1
    console.log(args);
})(1)

=====================================================
/*
*javascript作用域明白代码
*/

//和python一样以函数内为作用域而非其他语言的代码块内作用域
function a(){
    if(1==1){
        var name = "Eric";    //代码块内声明变量
    }
    console.log(name);        //可以打印Eric
}
a();

//情况二
name = "Eric";      //声明全局变量
function a(){
    var name = 'Tom';
    function b(){
        var name = "Alice";
        console.log(name);   //此处打印Alice
    }
    b();
}
a();

//情况三
name = "Eric";      //声明全局变量
function a(){
    var name = 'Tom';
    function b(){
        console.log(name);   //此处打印Tom
    }
    return b;
}
var func = a();
func();

//情况四
name = "Eric";      //声明全局变量
function a(){
    var name = 'Tom';
    function b(){
        console.log(name);   //此处打印Jack
    }
    var name = "Jack";    //变量作用域在声明阶段已经确定，下面的name重设上面name
    b();
}
a();

//情况五
function a(){
    console.log(name);      //此处打印undefined
    var name = 'Eric';      //声明阶段，只是声明了变量名 var name;
}
a();
==================================================================
/*
*面向对象和原型
***/
//创建类的方式一
function Foo(name){
    this.name = name;
    this.sayName = function(){
        console.log(this.name);
    }
}
//实例化的时候，内存中有重复的内容
o1 = new Foo('eric');
console.log(o1.name);
o1.sayName();
o2 = new Foo('alice');
console.log(o2.name);
o2.sayName();

//使用原型定义类，避免重复
function Foo(name){
    this.name = name;
}
Foo.prototype = {
    'sayName':function(){
        console.log(this.name);
    }
}
//实例化的时候就不会重复开辟空间
o1 = new Foo('eric');
console.log(o1.name);
o1.sayName();
o2 = new Foo('alice');
console.log(o2.name);
o2.sayName();
=============================================
/*
*Dom样式操作
*/
i1 = document.getElementById('i1');
i1.className = "c1 c2";         //设置c1 c2样式
i1.classList;      //获取样式的列表形式
i1.className;      //获取字符串形式的样式，以空格隔开
i1.classList.add('c3');    //新增c3样式
i1.classList.remove('c3'); //删除c3样式
i1.style.fontSize = '15px';    //精细设置某个样式
i1.style.backgroundColor = 'green';    //设置背景色
=======================================================
/*
*DOM属性操作
*/
i1 = document.getElementById('i1');
i1.setAttribute('xxx', 'Eric');      //设置属性
i1.attributes;                  //获取标签的所有属性值
i1.getAttribute('xxx');         //获取某个属性
i1.removeAttribute('xxx');      //删除某个属性
=======================================================
/*
*Dom操作标签元素
*/
//增加方式一
tag = '<input type="text">';
i1 = document.getElementById('i1');
i1.insertAdjacentHTML("beforeEnd", tag);    //在div最后面添加tag标签

//增加方式二
a = document.createElement('input');
a.setAttribute('type', 'text');
a.style.color = 'red';
i1 = document.getElementById('i1');
i1.appendChild(a);
=============================================
/*
*其他
*/
//可以给页面中的标签绑定onclick事件，在js里找到form并提交
f = document.getElementById('f1');
f.submit();

//打印
alert('123');
console.log('123');
var r = confirm('确实删除吗？');    //点击确定r是true，取消r是false

//URL
location.href    //获取当前的URL
location.href = "www.baidu.com"    //跳转到百度
location.href = location.href     //跳转到自己，相当于刷新当前页面
location.reload()     //重新加载

//定时器
var s = setInterval(function(){}, 2000);    //一直执行
clearInterval(s);                  //清楚定时器s
var s1 = setTimeout(function(){}, 2000)     //只执行一次
clearTimeout(s1);                  //清楚定时器s1
=============================================
i1.addEventListener('click', function(){console.log("i1")}, false); //false是冒泡
i2.addEventListener('click', function(){console.log("i2")}, false);
i1.addEventListener('click', function(){console.log("i1")}, true); //true是捕捉
i2.addEventListener('click', function(){console.log("i2")}, true);
/*
*词法分析：
*1、形参
*2、局部变量
*3、函数声明表达式 优先级最高，会覆盖其他
*/

//AO:active object  函数和变量初始化的时候生成的活动对象
function t1(age){
    console.log(age);      //function
    var age = 12;
    console.log(age);      //12
    function age(){}
    console.log(age);    //12
}
t1(3);