JavaScript、DOM

JavaScript是基于对象和事件的脚本语言。

一、JavaScript特点

1、交互性：信息的动态交互
2、安全性：不允许直接访问本地硬盘），它可以做的就是信息的动态交互。
3、跨平台性：只要是可以解释Js的浏览器都可以执行，和平台无关。

二、JavaScript与Java不同

1、JavaScript是Netscape公司的产品，Java是Sun公司的产品
2、JavaScript是基于对象，Java是面向对象。
3、JavaScript只需解释就可以执行，Java需要先编译成字节码文件，再执行。
4、JavaScript是弱类型，Java是强类型。

三、JavaScript的组成

JavaScript语法基础
使用JS操作网页（DOM）
使用JS操作浏览器（BOM）

四、JS引入方式与引入位置

向HTML页面插入JavaScript的主要方法，就是使用。使用中。

使用script标签的src属性引入一个js文件。（方便后期维护，扩展）
例：
注：规范中script标签中必须加入type属性。

注意：

1、页面上可以有多个关闭，而不能

注意：如果一个变量没有初始化值的时候，其类型为undefined类型。表示没有定义。

3、流程控制语句

判断 if()

if (condition) statement1 else statement2

选择switch() case

function test6() {
        var color = "xx";
        var value1 = "red", value2 = "green";
        switch(color) {
            case value1:
                alert("红色");
                break;
            case value2:
                alert("绿色");
                break;
            default:
                alert("执行默认default");
        }
    }

循环

while循环

//while循环
var i = 0;
while (i < 10) {
  i += 2;
}

for循环

iCount = 6;
for (var i = 0; i < iCount; i++) {
  alert(i);
}

for in 语句: 用于枚举对象的属性或者遍历一个数组的元素

for (sProp in window) {
  alert(sProp);
}

with 语句 : 在存取对象属性和方法时就不用重复指定参考对象。

99乘法表案例

4、数组

指定长度
var arrs=new Array(20);
指定元素
var arrs=new Array("hello");
创建一个包含3个字符串的数组
var arrs=["aa","bb","cc"];
数组遍历：

        for(var i = 0; i < arr.length; i++){
            alert(arr[i]);
        }   
        或
        for( var i in arr ){
            // i 是遍历出的数组中的索引，从0开始，一直到最大索引。
            // 如果有其他属性，也会遍历出来，其实索引就是数组对象的属性。
            alert(arr[i]);
        }

注意:

JS数组可以动态增长：

5、JS的函数

函数格式
    Function 函数名(参数列表){
    代码;
    return 返回值; //return 不是必须的.
}
    示例:
        function foo() {
            alert("test");
        }
        function foo2( a ){
            alert(a);
            return; // 没有返回值，表示方法执行完了，后面如果有代码就不会执行了
        }
        function foo3( a, b ){
            alert(a + b);
        }
        function foo4( a, b ){
            return a + b;
        }

特点：

1、使用function关键字定义函数。
2、没有任何的返回值类型。
3、函数的定义优先执行，与顺序无关。
4、可以通过函数名赋值函数，函数变量的类型是function对象。
5、参数列表不能有var关键字。
6、函数的参数列表在具体调用的时候实参个数可以和形参个数不同。
7、JavaScript函数天然的支持可变参数。
8、同名的函数最后声明会覆盖前面以声明。JavaScript中没有函数重载。

六、JavaScript对象

1、String对象

//通过构造函数创建String 对象
var b = new String("java");
var c = new String("java");
document.write(b + "," + c);
document.write(b == c);
//false
//比较字符串的值是否相等
document.write(b.valueOf() == c.valueOf());

属性：length 字符串的长度
document.write(a.length);

方法

1、与HTML相关的方法
bold() 将字体加粗
fontcolor()设置字体的颜色
fontsize设置字体的大小
link()设置链接
sub()显示为下标
sup()显示为上标
2、与java相似的方法
concat()连接字符串
charAt()返回指定位置的下标，若字符位置不存在则返回空字符串
indexOf()检索字符串的位置，若不存在返回-1
split() 将字符串切分为字符数组
replace()替换与正则表达式匹配的子串replace("a","b") b替换a
substr()从第几位开始向后截取几位
substring()提取字符串中两个指定的索引号之间的字符(两个参数，包头不包尾)

2、Array对象

方法

concat()连接两个数组，返回一个新的数组
join()根据指定字符将数组分割(替换一般数组中用逗号进行数组分隔)
push()向数组的末尾添加一个或多个元素，并返回新的长度
pop()删除并返回最后一个元素
reverse()颠倒数组中元素的顺序
sort()对当前数组进行排序，并返回已经进行了排序的此Array对象
shift()移除数组中的第一个元素并返回该元素。如果该数组为空，那么将返回 undefined。
unshift([item1[, item2 [, . . . [, itemN]]]])将指定的元素插入数组开始位置并返回该数组。
splice(start, deleteCount, [item1[, [, . . . [,itemN]]]])移除从 start 位置开始的指定个数的元素，并插入新元素

3、Date对象

获取当前时间var date = new Date();
toLocaleString()将时间转化为中国习惯的年月日小时分钟

getFullYear从 Date 对象以四位数字返回年份
getMonth()从 Date 对象返回月份 (0 ~ 11)
getDate()从 Date 对象返回日（1~31）
getDay()从 Date 对象返回星期（0~6）
getHours()返回 Date 对象的小时 (0 ~ 23)
getMinutes()返回 Date 对象的分钟 (0 ~ 59)
getSeconds()返回 Date 对象的秒数 (0 ~ 59))

//获取系统时间
    var date = new Date();
    //获取年 月 日时分秒
    var str = date.getFullYear() + "年" + (date.getMonth() + 1) + "月" 
    + date.getDate() + "日" + "星期" + date.getDay() + " " + date.getHours() + "时" 
    + date.getMinutes() + "分" + date.getMinutes() + "分" + date.getSeconds() + "秒"

getTime()返回 1970 年 1 月 1 日至今的毫秒数

4、Math对象（静态方法：Math.方法）

ceil()对一个数进行上舍入
floor()对一个数进行下舍入
round()四舍五入
random()返回 0 ~ 1 之间的随机数

例：获得一个1~10的随机数

 document.write(Math.ceil(Math.random()*10));

5、JS的全局函数

eval()执行JavaScript代码
excape()对字符(中文)串进行编码
decodeURI解码某个编码的 URI
isNaN检查某个值是否是数字（是数字返回false,不是数字返回true）
parseInt将字符串类型转化为整数。

6、JS中的重载

JavaScript中没有重载，但是可以通过其他方式模拟重载

7、JS的BOM对象

全称 Browser Object Model，浏览器对象模型。
document.write(navigator.appName);获取当前浏览器的名称
screen获取屏幕的宽和高

       document.write("屏幕的宽："+screen.width);
       document.write("
");
       document.write("屏幕的高："+screen.height);

location获取到请求的URL地址

      document.write("请求的URL地址："+location.href);

window窗口对象，顶层对象（所有的BOM对象都在window中操作）
alert()在页面弹出一个框
window.confirm()显示带有一段消息以及确认按钮和取消按钮的对话框。

        var flog = window.confirm("是否删除")
        if(flog == true){
            alert("删除成功")
        }else{
            alert("删除失败")
            alert("删除失败")
        }

定时器

setInterval()按照指定的周期（以毫秒计）来调用函数或计算表达式。
setTimeout()在指定的毫秒数后调用函数或计算表达式。
clearInterval()取消由 setInterval() 设置的定时。
clearTimeout()取消由 setTimeout() 方法设置的定时。

8、JS的DOM对象

DOM全称Document Object Model，即文档对象模型。
可以使用dom提供的对象的属性个方法对标记型文档进行操作

浏览器在解析HTML页面标记的时候，其实不是按照一行一行读取并解析的，
而是将HTML页面中的每一个标记按照顺序在内存中组建一颗DOM树，
组建好之后，按照树的结构将页面显示在浏览器的窗口中。

节点层次

HTML网页是可以看做是一个树状的结构，如下：
    html
     |-- head
     |     |-- title
     |     |-- meta
     |     ...
     |-- body
     |     |-- div
     |     |-- form
     |     |     |-- input
     |     |     |-- textarea
     ...   ...   ...

    这是一颗树，是由多个节点（Node）组成的，节点的类型有很多种。
    节点最多有一个父节点，可以有多个子节点。

9、document对象

Document对象代表整个 HTML 文档，可用来访问页面中的所有元素。
document.write()输出内容
document.getElementById()获取指定 id 的对象的引用。

document.getElementsByName()返回带有指定名称的对象集合。

document.getElementsByTagName()返回带有指定标签名的对象集合。

案例：在ul末尾添加结点

    

        
1111
        
2222
        
3333
        
4444
    
    

    

10、元素对象(element对象)

getAttribute()获取属性里面的值
setAttribute("a","b")添加属性和值
removeAttribute()删除属性里面的值

getElementsByTagName()获取标签下面的子标签

11、Node对象

nodeType 节点类型

        nodeType 属性可返回节点的类型。    
        ---------------------------------
        元素类型 节点类型 
        ------------------
          元素        1       就是标签元素，例
..
          文本        3       标签元素中的文本
          注释        8       表示为注释

nodeName 节点名称

        nodeName 属性含有某个节点的名称。
        --------------------------------
        元素节点的 nodeName 是标签名称 
        属性节点的 nodeName 是属性名称 
        文本节点的 nodeName 永远是 #text 
        文档节点的 nodeName 永远是 #document 

nodeValue 节点值

        nodeValue
        对于文本节点，nodeValue 属性是所包含的文本。
        对于属性节点，nodeValue 属性是属性值。
        对于注释节点，nodeValue 属性注释内容。
        nodeValue 属性对于文档节点和元素节点是不可用的。

获取标签对象

获取属性

获取文本

哈哈哈哈
    

针对标签的操作

父节点：parentNode
子节点：childNodes firstChild lastChild
获取下兄弟(获取弟弟)：nextSibling
获取大哥: previousSibling

        //获取父节点.
        alert(form.parentNode.nodeName);
        // 获取子节点(Node 包含 文本,注释,标签)
        var childArr = form.childNodes;
        alert(childArr.length);
        // 获取第一个孩子.
         var first = form.firstChild;
         alert(first);
         //最后一个孩子.
         var last = form.lastChild;
         alert(last);
         // 获取下兄弟(获取弟弟)
         var sibling = form.nextSibling;
         alert(sibling.nodeName);
         // 获取大哥
         var previous = form.previousSibling;
         alert(previous.nodeName);

12、操作DOM树

appdndChild添加子节点到末尾，类似于剪切粘贴的效果

    

        

            
abc
            
bcd
            
cde
        
    
    


    
    

insertBefore(newNode,oldNode)在某节点之前添加一个新节点

        
abc
        
bcd
        
cde
        
def
    
    
    

removeChild()删除节点，通过父节点删除,不能自己删除自己
replaceChild(newNode,oldNode)替换节点通过父节点替换子节点
cloneNode(Boolean)复制节点（Boolean判断是否复制节点）

13、innerHTML

这个标签不是DOM属性的内容，但是大多数浏览器都支持的属性

第一个作用：获取文本内容

 哈哈哈哈呵呵呵呵
    

第二个作用：向标签里面设置内容（可以是HTML代码）

哈哈哈哈呵呵呵呵