JavaScript基本内容

注释：

/*多行
注释*/

//单行注释

变量：

//变量均为对象，常用类型：String、Number、Boolean、Array、Object
var value = "hello";    //变量声明只能用var，不能用具体类型，变量本身的类型会在声明后类型推断
value = 9;  //而且类型推断，还具有动态类型
document.write(value);

使用id表示元素，再访问该元素：

<head>
    <script>
        document.getElementById("test").innerHTML="test";
    </script>
</head>
<body>
    <p id="test">操纵html元素</p>
    <!--将js放在最后，可以确保在所有元素创建完毕之后，再执行脚本-->
    <script>
        document.getElementById("test").innerHTML="test";
    </script>
</body>

由于js可以用document.write向页面写入含有标签的文本，但是又可以通过标签的id的属性来改变其值，所以这就是写入动态的文本。

//document.write('<p id="test">hello</p>');     //可以在字符串中使用引号，只要不匹配包围字符串的引号即可
document.write("<p id='test'>hello</p>");
document.getElementById("test").innerHTML = "test";

数字(使用科学记数法)：

//所有 JavaScript 数字均为 64 位(2^64，8B)
var y = 123e5;      // 123 * 10^5 = 12300000
var z = 123e-5;     // 0.00123
var a = 0377;   //八进制(前缀为0)
var b = 0xFF;   //16进制

日期对象Date：

//Date 对象自动使用当前的日期和时间作为其初始值
var fullDate = new Date();
//设定指定时间
fullDate.setFullYear(2008, 11, 20);     //年，月(0-11 — 11:12月)，日
//仅设置日期：如果增加天数会改变月份，那么Date对象会自动完成转换
fullDate.setDate(fullDate.getDate() + 5);
document.write(fullDate + "<br />");
//获得时分秒
document.write(fullDate.getHours() + "<br />");     //分、秒都是同样的做法

创建数组：

var car1 = new Array();
car1[0] = "hello";
car1[1] = 123;
// or condensed array
var car_2 = new Array(3);
var car2 = new Array("Audi", "BMW", "Volvo");
// or literal array
var car3 = ["Audi", "BMW", "Volvo"];

逻辑对象Boolean：

如果逻辑对象无初始值或者其值为 0、-0、null、""、false、undefined 或者 NaN，那么对象的值为 false；其他情况为true。

算数对象Math：

//使用内置的Math对象
document.write(Math.round(4.4) + "<br />");    //四舍五入
document.write(Math.random() + "<br />");      //随机小数：0到1
document.write(Math.floor(Math.random() * 100) + "<br />");     //随机小数*扩大倍数M，再通过下舍入函数floor生成最后的随机数：0到M
document.write(Math.max(1, -1) + "<br />" + Math.min(1, -1) + "<br />");    //比大小

正则对象RegExp：

//RegExp对象常用3个方法：test、exec、compile
var pattern = new RegExp("e");
document.write(pattern.test("hello") + "<br />");   //输出bool值
document.write(pattern.exec("hello") + "<br />");   //找到则返回pattern(模式)的值，否则为null
//第二个参数: exec方法会改变：找到第一个模式(pattern)，并记录位置；如果再次执行exec，则从上次的位置后检索
var pattern1 = new RegExp("e", "g");
do {
    var result = pattern1.exec("hello");
    document.write(result);
} while (result != null);
document.write("<br />");
//compile方法用于改变RegExp，如改变模式(pattern)、增删第二个参数
pattern.compile("h");
document.write(pattern.test("hello") + "<br />");

创建自定义对象：

直接创建实例、对象构造器（函数）：

//直接创建实例
person1 = new Object();
person1.age = 56;
document.write(person1.age + "<br />");
//写法二
var person2 = {
    //属性，以键值对形式存在
    firstname: "Bill",
    lastname: "Gates",
    id: 5566
};
document.write(person2.lastname + "<br />");
document.write(person2["lastname"] + "<br />");

//使用函数定义，对象构造器，再实例化
function person3(age)
{
    this.age = age;
}
var boy = new person3(10);
document.write(boy.age + "<br />");
//此外，对已存在的对象(不管是通过哪种方式创建的)，还可以随时添加新的属性、方法
boy.firstname = "Bill";
document.write(boy.firstname + "<br />");

添加方法：

//添加方法
function hello()
{
    alert("hello");
}
function person()
{
    this.hello = hello;
}
var girl = new person();
girl.hello();
//对已经存在的对象，添加新的方法
document.hello = hello;
document.hello();

遍历一个对象的所有属性：

var person = { fname: "Bill", lname: "Gates", age: 56 };
for(x in person)
{
    document.write(x + ": " + person[x] + "<br />");    //这里不能写成person.x
}

函数：

全局变量：在函数外的变量为全局，任何脚本都能用。

数字+字符串：会将数字当作字符串处理。

for循环：

var person={fname:"Bill",lname:"Gates",age:56};
for (x in person)
{
    txt = txt + person[x];
}

抛出自定义异常：

function CustomException()
{
    try
    {
        throw "customException";
    }
    catch(err)
    {
        alert(err);
    }
}
CustomException();

在数据被发送到服务器之前，进行表单验证。

当网页被加载时，浏览器会创建页面的DOM模型树，即构造对象之间的树形关系(模型)：

找到HTML元素：通过id、标签名、class：

<p id="test" class="test">test文本</p>
<script>
    var x = document.getElementById("test");
    var y = document.getElementsByTagName("p");     //这个对象中的所有p元素
    var z = document.getElementsByClassName("test");
    document.write("id: " + x.innerHTML + "<br />");
    document.write("TagName: " + y[0].innerHTML + "<br />");
    document.write("class: " + z[0].innerHTML + "<br />");
</script>

改变HTML属性：

<img id="test" src="1.png" />
<script>
    //document.getElementById(id).attribute = new value
    var x = document.getElementById("test");
    x.src = "2.png";
</script>

改变 HTML 元素的样式 (CSS)：

<p id="test">Hello</p>
<script>
    //document.getElementById(id).style.property = new style
    var x = document.getElementById("test");
    x.style.color = "#FF0000";
</script>
<h1 id="id1">Header</h1>
<button onclick="document.getElementById('id1').style.color = '#FF0000'">点击测试</button>

处理 HTML DOM 事件：

<h1 onclick="this.innerHTML='谢谢!'">请点击该文本</h1>

<h2 id="test2">Hello</h2>
<script>
    var x = document.getElementById("test2");
    x.onclick = function () { changeText() };
    function changeText()
    {
        x.innerHTML = "Thanks";
    }
</script>

onload可用来处理cookie等事务：

<script>
    document.onload = checkCookies();
    function checkCookies()
    {
        //是否使用Cookies
        if (navigator.cookieEnabled == true)
            alert("Enabled cookies");
    }
</script>

onchange事件：

<!--在点击页面中的其他地方后（离开输入字段），会触发onchange事件-->
<input id="test" type="text" onchange="TextChange()" />
<script>
    function TextChange()
    {
        var x = document.getElementById("test");
        x.value = x.value.toUpperCase();
    }
</script>

鼠标相关操作：

<p onmouseover="mOver(this)" onmouseout="mOut(this)">测试文本</p>
<p onmousedown="mDown(this)" onmouseup="mUp(this)">测试文本</p>
<script>
    //放上去，又拿开
    function mOver(obj)
    {
        obj.innerHTML = "鼠标放在了这里";
    }
    function mOut(obj)
    {
        obj.innerHTML = "鼠标离开了这里";
    }
    //点击下去，又松开，就点完了（有了down、up，就不用click了）
    function mDown(obj)
    {
        obj.innerHTML = "点击不放";
    }
    function mUp(obj)
    {
        obj.innerHTML = "松开";
    }
</script>

添加或删除 HTML 元素：

<!--添加新元素：创建新元素，再将新元素加入某个元素-->
<div id="div1">
    <p>段落</p>
</div>
<script>
    //创建
    var p = document.createElement("p");
    var text = document.createTextNode("新段落");
    p.appendChild(text);

    //添加
    var element = document.getElementById("div1");
    element.appendChild(p);
</script>

类似的，删除：

<div id="div1">
    <p id="p1">段落1</p>
    <p id="p2">段落2</p>
</div>
<script>
    //通过这个元素的父亲，来删掉它
    var child = document.getElementById("p1");
    child.parentNode.removeChild(child);      //child.parentElement.removeChild(child);
    //易懂的写法
    //var child = document.getElementById("p1");
    //var parent = document.getElementById("div1");
    //parent.removeChild(child);
</script>

创建三种消息框——警告框、确认框、提示框：

//警告框alert：下面换行
alert("hello" + "
" + "world");    //应该用concat方式，写在一起达不到效果
//确认框：往往需要根据返回值，来确定选择结果
var result = confirm("choose");
if (result == true) {
    alert("OK");
}
else {
    alert("no");
}
//提示框：往往用于，进入一个页面之前提示用户输入某些值：prompt("提示文本","默认值")。点击确认后，返回值为输入框的值；取消，为null
document.write(prompt("请输入姓名", "Bill Gates"));