JavaScript自学代码--（三）

//通过 id 查找 HTML 元素
var x = document.getElementById("demo");

//通过标签名查找 HTML 元素
//本例查找 id="main" 的元素，然后查找 id="main" 元素中的所有 <p> 元素：
var x = document.getElementById("main");
var y = x.getElementsByTagName("p");

//修改HTML属性
document.getElementById("demo").attributes = "New value";
//本例改变了 <img> 元素的 src 属性：
document.getElementById("image").src="landscape.jpg";

//如需改变 HTML 元素的样式，请使用这个语法：
document.getElementById("demo").style.property=new style
document.getElementById("p2").style.color="blue";
document.getElementById("p2").style.fontFamily="Arial";
document.getElementById("p2").style.fontSize="larger";
/*
<button type="button"
onclick="document.getElementById('id1').style.color='red'">
点我!</button>
<h1 onclick="this.innerHTML='Ooops!'">点击文本!</h1>
<p onclick = "this.innerHTML='Fuck you!'">Click</p>
*/

function displayDate(){
    document.getElementById("demo").innerHTML = Date();
}
//<button onclick = displayDate()>display</button>

document.getElementById("myBtn").onclick=function(){displayDate()};

function checkCookies()
{
    if (navigator.cookieEnabled==true)
    {
      alert("Cookies 可用")
    }
    else
    {
      alert("Cookies 不可用")
    }
}

//JavaScript HTML DOM EventListener
//创建新的 HTML 元素
//如需向 HTML DOM 添加新元素，您必须首先创建该元素（元素节点），然后向一个已存在的元素追加该元素

function AddElement(){
    //这段代码创建新的<p> 元素：
    var para = document.createElement("p");
    //这段代码创建了一个文本节点：
    var node = document.createTextNode("This is a new Node.");
    //然后您必须向 <p> 元素追加这个文本节点：
    para.appendChild(node);
    //最后您必须向一个已有的元素追加这个新元素。
    //
    //这段代码找到一个已有的元素：
    var element = document.getElementById("DIV");
    //以下代码在已存在的元素后添加新元素：
    element.appendChild(para);
}


//删除已经有的新元素
function DeleteElement(){
    var para = document.getElementById("Div");
    var child = document.getElementById("p1");
    para.removeChild(child);


    var para1 = docuemnt.getElementById("div1");
    var child1 = document.getElementById("p2");
    para1.removeChild(child1);
}

//JS 高级教程

function ObjectDemo(){
    //求一个字符串的长度
    var message = "Hello World!";
    var L = message.length; //获取对象的产度

//    将对象转换为大写
    var Upper = message.toUpperCase();


//    这个例子创建了对象的一个新实例，并向其添加了四个属性：
    person = new Object();
    person.firstName = "yanlong";
    person.lastName = "Wu";
    person.age = 23;
    person.eyesColor = "Black";

//    本例使用函数来构造对象：
    function person(firstName,lastName,age,eyecolor){
        this.firstName = firstName;
        this.lastName - lastName;
        this.age = age;
        this.eyesColor = eyecolor;
        //在JavaScript中，this通常指向的是我们正在执行的函数本身，或者是指向该函数所属的对象（运行时）

        function ChangeName(fname,lname){
            this.lastName = lname;
            this.firstName = fname;
        }

        function ChangeAge(age){
            this.age = age;
        }

        function ChangeEyeColor(color){
            this.eyesColor = color;
        }
    }

//    创建对象
    var myFather = new person("Jone","Doe",50,"Blue");
    var myMother = new person("Sally","Hello",50,"BLack");
    myFather.lastName;//访问名
    myFather.firstName;//访问姓

}

//JavaScript 是面向对象的语言，但 JavaScript 不使用类。
//在 JavaScript 中，不会创建类，也不会通过类来创建对象（就像在其他面向对象的语言中那样）。
//JavaScript 基于 prototype，而不是基于类的。

function ForDemo(){
    var x ;
    var text = "";
    var person = {fName :"Jone",lName:"Doe",age:50};
    for (x in person){
        text += person[x];
    }
    document.getElementById("demo").innerHTML=text;
}

//JavaScript Number 对象
//JavaScript采用IEEE754标准定义的64位浮点格式表示数字，它能表示最大值为±1.7976931348623157 x 10308，最小值为±5 x 10 -324
//如果前缀为 0，则 JavaScript 会把数值常量解释为八进制数，如果前缀为 0 和 "x"，则解释为十六进制数。
//默认情况下，JavaScript 数字为十进制显示。
//但是你可以使用 toString() 方法 输出16进制、8进制、2进制。

//当数字运算结果超过了JavaScript所能表示的数字上限（溢出），结果为一个特殊的无穷大（infinity）值，在
// JavaScript中以Infinity表示。同样地，当负数的值超过了JavaScript所能表示的负数范围，结果为负无穷大
// ，在JavaScript中以-Infinity表示。无穷大值的行为特性和我们所期望的是一致的：基于它们的加、减、乘和
// 除运算结果还是无穷大（当然还保留它们的正负号）

function Infinity(){
    var myNumber = 2;
    while(myNumber != Infinity){
        myNumber*=myNumber;
    }
}

//NaN - 非数字值
//NaN 属性是代表非数字值的特殊值。该属性用于指示某个值不是数字。可以把 Number 对象设置为该值，来指示其不是数字值。
//你可以使用 isNaN() 全局函数来判断一个值是否是 NaN 值。

function testNaN(){
    var x = 1000/"ABCD";
    isNaN(x);
    //return true;
    var y = 100;
    isNaN(y);
    //return false
}

//数字可以是数字或者对象
//数字可以私有数据进行初始化，就像 x = 123;
//JavaScript 数字对象初始化数据， var y = new Number(123);
function testNumber(){
    var x = 123;
    var y = new Number(123);
    typeof(x);//results Number
    typeof(y);//results Object
    b = (x === y); // is false because x is a number and y is an object.
    typeof(b);//return false

}

function IndexOf(){
    var str = "Hello world Welcome!";
    //字符串使用 indexOf() 来定位字符串中某一个指定的字符首次出现的位置：
    var n = str.indexOf("Welcome");//return the Position of "Welcome"
    //如果没找到对应的字符函数返回-1
    //lastIndexOf() 方法在字符串末尾开始查找字符串出现的位置。
    var n1 = str.lastIndexOf("Welcome");
    //match()函数用来查找字符串中特定的字符，并且如果找到的话，则返回这个字符。
    document.write(str.match("world")+"<br>");
    document.write(str.match("World")+"<br>");
    document.write(str.match("world"));

    //replace() 方法在字符串中用某些字符替换另一些字符。
    var n2 = str.replace("Hello","Fuck");
    //字符串大小写转换使用函数 toUpperCase() / toLowerCase():
    var strUpper = str.toUpperCase();
    var strLower = str.toLowerCase();
}
//字符串使用strong>split()函数转为数组:
function myFunction()
{
var str="a,b,c,d,e,f";
var n=str.split(",");
document.getElementById("demo").innerHTML=n;
}

function DateDemo(){
    new Date() // 当前日期和时间
    new Date(milliseconds) //返回从 1970 年 1 月 1 日至今的毫秒数
    new Date(dateString)
    new Date(year, month, day, hours, minutes, seconds, milliseconds)

//    设置日期
    var myDate = new Date();
    myDate.setFullYear(2015,3,3);
    //在下面的例子中，我们将日期对象设置为 5 天后的日期
    myDate.setDate(myDate.getDate()+5);
    //注意: 如果增加天数会改变月份或者年份，那么日期对象会自动完成这种转换。

}

function CompareDate(){
    var x = new Date();
    x.setFullYear(20100,3,3);
    var today = new Date();

    if(x > today){
        alert("hehe");
    }
    else{
        alert("hah");
    }

}

//JavaScript Array（数组） 对象
function TestArray(){
    var myArray = new Array();
    myArray[0] = "a";
    myArray[1] = "b";
    myArray[2] = "c";
    myArray[3] = "d";
}

Array.prototype.ucase = function()
{
    for (i = 0;i<this.length;i++){
        this[i] = this[i].toUpperCase();
    }
};
//数组的基本操作函数
//合并两个数组 - concat()
//合并三个数组 - concat()
//用数组的元素组成字符串 - join()
//删除数组的最后一个元素 - pop()
//数组的末尾添加新的元素 - push()
//将一个数组中的元素的顺序反转排序 - reverse()
//删除数组的第一个元素 - shift()
//从一个数组中选择元素 - slice()
//数组排序（按字母顺序升序）- sort()
//数字排序（按数字顺序升序）- sort()
//数字排序（按数字顺序降序）- sort()
//在数组的第2位置添加一个元素 - splice()
//转换数组到字符串 -toString()
//在数组的开头添加新元素 - unshift()

//JavaScript Boolean（布尔） 对象

function MathDemo(){
    document.getElementById("n1").innerHTML = Math.round();
    document.getElementById("n1").innerHTML = Math.random();
    document.getElementById("n1").innerHTML = Math.max(1,5);
    document.getElementById("n1").innerHTML = Math.min(1,5);

//    Math函数的操作
    var x = Math.PI;
    var y = Math.sqrt(16);

    //JavaScript 提供 8 种可被 Math 对象访问的算数值
    //你可以参考如下Javascript常量使用方法：
    Math.E;
    Math.PI;
    Math.SQRT2;
    Math.SQRT1_2;
    Math.LN2;
    Math.LN10;
    Math.LOG2E;
    Math.LOG10E;