/**
 * Created by ubt on 18-1-8.
 */

var words = "Hello World";
console.log(words); //打印日志
alert(words);       //弹窗

//单选注释
/*多行注释 */

var Words = "区分大小写";
var keyWord = "CamelCase 变量驼峰命名法";

//数据类型
var fullName = "姓名", weight = 160;
typeof (fullName);  //获取数据类型
typeof (weight);
console.log(fullName + weight);

var weightIncrease = "2.5斤";
parseFloat(weightIncrease); //转成float
parseInt(weightIncrease);   //转成int

//字符串处理
var word = "字符串处理字符方法";
word.length;    //字符串长度
word.charAt(0); //字符串第一个字符
word.charAt(word.length - 1);   //最后一个字条
word.indexOf("字");  //字符第一次出现的位置
word.lastIndexOf("字");//字符最后出现的位置
word.substring(0, 3);   //取字符串前3位
word.replace("处理", "加持");//替换字符串
var wordArr = word.split("串");//分割字符串
wordArr[0];//取数组第一位


//数组
var testArr = ["长城", "法外", "朦胧"];
testArr.length;     //数组长度
testArr[3] = "aaaa";    //增加一个元素
testArr.push("111", "222");//尾部增加两个元素
testArr.unshift("first");//在开头增加两个元素

testArr.pop(); //删除数组最后一个值，并返回值的内容
testArr.shift(); ////删除数组第一个值，并返回值的内容

delete testArr[3]; //返回boolean，删除3元素的值，但元素不会删除，数组长度不变
testArr.splice(3); //返回删除3元素的值，数组长度-1

var testArr2 = ["0000", "6666"];
testArr.concat(testArr2); //合并两个数组


//流程控制
var weather = '晴天', temperature = 27;
//if选择
if (weather === '晴天' && temperature <= 27){
    console.log("心情不错");
} else {
    console.log("心情糟糕");
}

//switch选择
switch (temperature){
    case 25:
        console.log("心情不错");
        break;

    case 27:
        console.log("心情糟糕");
        break;

    default:
        break;
}

//while循环
var i = 0;
while (i<10){
    i++;
    if (i%2 === 0){
        continue;
    }
    console.log(i);
}

//for循环
for(var i = 0; i< 10; i++){
    console.log(i);
}


//函数
function alertMessage(msg){
    alert(msg);
}
alertMessage("hello");

var alertMessage = function (msg) {
    console.log("匿名函数表达式"+ msg);
}
alertMessage("hello33");


//对象
var beyond = {};
// var beyond = {'1983', '香港'}; //添加属性方法一
beyond.formedIn = '1983';           //添加属性方法二
beyond['foundedIn'] = '香港';     //添加属性方法三
beyond.artist = ['aaa', 'bbb', 'ccc', 'ddd']; //添加数组
console.log(beyond);
beyond.formedIn = '1988';       //修改属性值
delete beyond.formedIn;         //删除属性

//为对象定义一个方法
beyond.showArtist = function () {
    for (var i=0; i<this.artist.length; i++){
        document.writeln(this.artist[i]);
    }
};
//调用对象的方法
beyond.showArtist();

//循环输出对象属性
var property;
for (property in beyond){
    //如果属性是方法，不打印
    if (typeof beyond[property] !== 'function'){
        console.log('property => ' + beyond[property]);
    }
}



//==========  文档树DOM  ==========//

//通过id获取 getElementById
var pageTitle = document.getElementById('page-title');
console.log(pageTitle);

//通过html标签获取 getElementsByTagName
var list = document.getElementsByTagName('li');
console.log(list[0]);

//查询选择器下的所有元素
var queryList = document.querySelectorAll('.artist-list li');
console.log(queryList);
//查询选择器下的所有元素的第一位元素
var queryListFirst = document.querySelector('.artist-list li');
console.log(queryListFirst);

//访问元素的属性
pageTitle.nodeName; //元素的名称
pageTitle.innerText; //包含的内容
pageTitle.parentNode; //元素的父节点名称
pageTitle.previousElementSibling; //元素的上一个兄弟元素
pageTitle.nextElementSibling;   //元素的下一个兄弟元素
console.log(pageTitle.nextElementSibling.innerHTML);   //元素的下一个兄弟元素的内容

var artistList = document.querySelector('.artist-list');
artistList.childNodes;  //元素的所有子节点
artistList.childElementCount; //元素所有子节点的数量
artistList.firstElementChild;   //元素的第一个子节点
artistList.lastElementChild; //元素的最后一个子节点

//插入新节点
var newMember = document.createElement('li');   //创建一个li
var newMemberText = document.createTextNode('张三');  //创建文本内容
newMember.appendChild(newMemberText);   //给li添加文本内容
document.querySelector('.artist-list').appendChild(newMember); //找到要添加的节点位置添加子节点
document.querySelector('.artist-list').removeChild(newMember);  //找到要删除的节点位置删除子节点
var artistList  = document.querySelector('.artist-list');
artistList.insertBefore(newMember, artistList.firstChild);  //在节点的第一个子节点前插入新节点
//指定位置插入节点
var bandMember = document.createElement('h3');  //创建一个h3节点
bandMember.innerText = '乐队成员';      //给节点添加文本
artistList.parentNode.insertBefore(bandMember, artistList.previousSibling); //给当前节点前添加兄弟节点



//事件处理
window.onload = function () {
/*
    //一般事件监听
    var btn = document.querySelector('.btn');
    btn.onclick = function () {
        console.log('被点击了');
    }
    btn.onmouseover = function () {
        console.log('上来了');
    }
    btn.onmouseout = function () {
        console.log('移走了');
    }
 */

    //通过addEventListener监听
    var btn = document.querySelector('.btn');
    function showMessage(event) {
        console.log('addEventListener方式被点击')
    }
    btn.addEventListener('click', showMessage, false);  //第三个参数用来传播事件：true（由外而内）、false（由内而外）


    //事件的传播
    var picList = document.querySelector('.pic-list');
    function showMessage(event) {
        console.log(event.target.alt);
    }
    picList.addEventListener('click', showMessage, false);

}