java程序员第三课 javaScript基础&DOM

1、上节课内容回顾
* html里面form表单

* css

* javascript

2、内容补充
1、js和html两种结合方式
* 使用外部文件方式
*

2、padding：内边距
    * padding: 20px;
    * 另外一种设置方式：
    /*
        设置内边距
        按照顺时针顺序
    */
    padding:20px  40px  60px  10px;

3、js的运算符里面 == 和 ===区别
    if（i==3）：数值的比较
    if(i===3):类型和值
    ** == 比较只是值，与类型无关
    ** === 比较的是类型和值

3、js的String对象
** 创建String对象
- var str = “abc”;
- var str1 = new String(“aaa”);
* 属性：length 字符串的长度

* 方法：
    ** 与html相关的方法（设置样式的方法）
        - bold() 使用粗体显示字符串。 
        - fontcolor() 使用指定的颜色来显示字符串。 
            * document.write(str.fontcolor("red"));
        - fontsize() 使用指定的尺寸来显示字符串。 
            * size 参数必须是从 1 至 7 的数字。
        - link() 将字符串显示为链接。 
            * document.write(str.link("01-内容补充.html"));
        - sub() 把字符串显示为下标。 
        - sup() 把字符串显示为上标。 

    ** 和java相似的方法（java里面也有类似的方法 split ）
        - charAt() 返回在指定位置的字符。 
            * document.write(str1.charAt(7));
            * 如果没有这个字符，返回“”
        - concat() 连接字符串。 
            * document.write(str1.concat(str2));
        - indexOf() 检索字符串。 返回字符的位置，如果没有返回-1
            * indexOf() 方法对大小写敏感！
        - replace() 替换字符串
            * 传递两个参数 replace(old,new)
            * old: 要替换的部分
            * new：替换成的部分
        - split() 把字符串分割为字符串数组。 
            * var arr = str3.split("-");

        - * substr() 从起始索引号提取字符串中指定数目的字符。 
            * 两个参数
        - * substring() 提取字符串中两个指定的索引号之间的字符。 
            * var str4 = "abcdef123456";
            document.write("substr: "+str4.substr(3,5));  //def12
            ** 从第三开始，向后截取五位
            document.write("<br/>");
            document.write("substring: "+str4.substring(3,5));  //de [3,5)
            ** 从第三位开始到第五位结束，但是不包含第五位 [3,5)

4、js的Array对象
* 创建数组方式 三种
1、var arr1 = [1,2,”4”];
2、var arr2 = new Array(3);
3、var arr3 = new Array(4,5,6);
* 属性：length 设置或返回数组中元素的数目。
* 方法：
- concat()：连接数组
* document.write(“concat: “+arr.concat(arr1));
- join() 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
* document.write(“new: “+arr2.join(“-“));
- push() 向数组的末尾添加一个或更多元素，并返回新的长度。
* //创建一个数组 arr4
var arr4 = [“aaaa”,”bbbb”,”cccc”];
//执行push方法
document.write(“length: “+arr3.push(arr4));
//执行push方法之后的值
document.write(“
”);
document.write(“new: “+arr3);
** 添加的是一个元素，如果添加数组，会把作为一个整体添加进去
- pop() 删除并返回数组的最后一个元素
* //pop方法
document.write(“

---

”);
var arr5 = [“tom”,”jack”,”mary”];
//输出原始值
document.write(“old:”+arr5);
//执行pop方法
document.write(“
”);
document.write(“执行pop的返回值：”+arr5.pop());
//执行pop之后数组的值
document.write(“
”);
document.write(“new:”+arr5);
- reverse() 颠倒数组中元素的顺序。
* //reverse方法
document.write(“

---

”);
var arr6 = [11,12,13,14];
document.write(“old:”+arr6);
//执行reverse方法
document.write(“
”);
document.write(arr6.reverse());

5、js的Date对象
* 创建Date对象
var date = new Date();

    // Date date = new Date();

* 方法：
    - toLocaleString():根据本地时间格式，把 Date 对象转换为字符串。
    - 获取年：getFullYear() 从 Date 对象以四位数字返回年份 （不使用getYear方法）
    - 月: getMonth() 从 Date 对象返回月份 (0 ~ 11) ,需要加1
    - 星期：getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6) 
        * 判断一下，如果0 ，加7，表示的星期日
    - 日：getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31) 
    - 小时 getHours()
    - 分钟：getMinutes()
    - 秒：getSeconds()

    - getTime() 返回 1970 年 1 月 1 日至今的毫秒数 
    ** 应用场景：防止浏览器缓存

6、js的Math对象
* 一些数学运算
* Math里面的方法，都是静态的方法
- ceil(x) 对一个数进行上舍入。

- floor(x) 对一个数进行下舍入。

- round(x) 把一个数四舍五入为最接近的整数 
* var a = 12.6;
    //ceil
    document.write(Math.ceil(a));
    //floor
    document.write("<br/>");
    document.write(Math.floor(a));
    //round
    document.write("<br/>");
    document.write(Math.round(a));

- random() 返回 0 ~ 1 之间的随机数 
    * //生成0-9之间的随机数
    document.write("<hr/>");
    document.write(Math.floor(Math.random()*10));

7、js的全局函数
* 不属于任何一个对象，使用直接写方法名 eval();
* 常用方法：
- eval()：执行字符串里面的js代码
var str = “alert(‘123’);”;
//alert(str);
eval(str);

    - isNaN():判断当前是否是个数字
        * NaN:表示不是一个数字
        * 返回是true false
        * 如果不是数字返回 ture
        * 如果是数字返回 false

    * 字符编码，ie浏览器url编码，火狐浏览器base64编码
    - encodeURI()：把字符进行编码
    - decodeURI()：把字符进行解码

    - parseInt():转换类型
    * document.write(parseInt(str4)+1);

8、js的函数重载
* java里面的重载：肯定有重载，方法名相同，参数不同
* js里面 没有重载，可以通过一些其他的方式来模拟重载的效果
— js里面没有重载
- js的函数里面有一个数组arguments，这个数组用于存储传递过来的参数

* 面试题目：js里面是否存在重载？
    1、js里面不存在重载
    2、但是可以使用其他方式来模拟实现，使用arguments数组来实现模拟重载的效果

9、js的bom对象
* broswer object model: 浏览器对象模型
* 对象：
** navigator（了解）：浏览器的信息
- navigator.appName;
- window.navigator.appName;
** screen（了解）：屏幕的信息
- screen.width
- window.screen.width
** location（重点掌握属性href）：URL 的信息
* 引入 *

    * 鼠标点击事件 onclick="js方法"

    - 属性 href 设置或返回完整的 URL。 
    1、获得url路径地址
        - location.href
    2、设置url路径地址
        //设置url地址，实现页面跳转到的地址
        function href1() {
            location.href = "01-内容补充.html";
        }

** history（三个方法）：url的历史信息
    * back() 加载 history 列表中的前一个 URL 
    * forward() 加载 history 列表中的下一个 URL 

    * go() 加载 history 列表中的某个具体页面 
        * -1:上一个页面   1：下一个页面

    ** 模拟实现向上一个页面，和下一个页面
    - 创建一个页面h1.html 写超链接 到 h2.html
    - 在h2.html中写超链接到 h3.html


** window（重点）：窗口对象，顶层对象
    * 方法：
    1、alert(): 在页面弹出一个提示框
        - window.alert();
    2、confirm(): 表示一个确认框
        - var aa = window.confirm("显示在提示框上的内容");
        - 有返回值，如果点击确定，返回true；点击取消，返回false

    3、prompt() 显示可提示用户输入的对话框。 
        - prompt(text,defaultText)
        ** text:显示在输入框上的内容
        ** defaultText：表示输入框的默认值
    4、open() 打开一个新的浏览器窗口 
        - window.open('url地址','','width=200,height=100')
    5、close():关闭窗口(有些浏览器不支持)

    * 实现定时器的效果
        - 每一秒，在页面上alert 123；

    * 方法：
        - setInterval(): 比如设置的是一秒，每一秒就会去执行js代码（不断的执行）
            ** setInterval("js代码",毫秒数) 
            **setInterval("add1();",毫秒数) 
        - setTimeout()：比如设置的是三秒，表示三秒后去执行js代码（只会执行一次）
            ** setTimeout("js",毫秒数);

        - clearInterval(): 清除设置的setInterval()
            * setInterval()时候返回一个id
            * 想要清除 clearInterval(id);
        - clearTimeout(): 清除设置的setTimeout()
            * setTimeout()时候返回一个id
            * 想要清除 clearTimeout(id)

10、js的dom对象
* document object model 文档对象模型
** 文档：标记型文档（html、xml）
** 对象：js是基于对象，对象里面包括属性和方法。学习js提供的dom对象里面的属性和方法
** 模型：js提供的dom对象里面的属性和方法对标记型文档进行操作

**** 使用dom对象里面的属性和方法如何对标记型文档进行操作

* 要想操作标记型文档，首先要对标记型文档里面的所有内容进行封装成对象。
    **包括 标签、文本、属性

**  要想进行操作，首先必须要解析html（标记型文档）

** 解析html（标记型文档）过程：
    - 根据html的层级结构，在内存中分配一个树形结构，
    - document对象：整个文档
    - 元素对象（标签对象）element
    - 属性对象
    - 文本对象
    - 节点对象 Node：是dom里面所有对象的父对象

* DHTML介绍
    * DHTML不是一种技术，而是很多技术的简称
    * 包含：
    ** html: 封装数据
    ** css：提供了很多属性和属性值，来实现数据样式的变化
    ** javascript（专门指的是ECMAScript）：提供了一些语法
    ** dom：文档对象模型，对标记型文档进行操作

11、dom的document对象
* 方法：
** getElementById()
- 通过id得到元素（标签）
- var u1 = document.getElementById(“id1”);
alert(u1.id);

** getElementsByName()
    - 通过name属性值得到元素对象（数组）
    - var a1 = document.getElementsByName("username");
    //alert(a1.length);
    //遍历数组
    for(var i=0;i<a1.length;i++) {
        var input1 =  a1[i];
        alert(input1.value);
    }
    - 获取一个标签，直接使用数组下标实现
    var a2 = document.getElementsByName("username1")[0];
    alert(a2.value);

** getElementsByTagName()
    - 通过标签的名称获取元素对象（数组）
    - //使用getElementsByTagName()返回是数组
    var a3 = document.getElementsByTagName("input");
    //alert(a3.length);
    //遍历数组
    for(var m=0;m<a3.length;m++) {
        var input2 = a3[m];
        //alert(input2.value);
    }

    - 获取一个标签，使用getElementsByTagName
    var a4 = document.getElementsByTagName("input")[0];
    //alert(a4.length);
    alert(a4.value);

** write(); 向页面输出内容，也可以输出html代码

12、window案例
* 案例开发步骤
1、创建两个页面
* 第一个页面：
** 有两个文本输入框
** 一个按钮，写一个鼠标点击事件 onclick
*鼠标点击事件： 打开一个新的页面 open()

        * 第二个页面
         ** 有一个表格 有三个字段 操作 编号  姓名
         ** 在操作里面有按钮：
         *** 点击这个按钮之后，把按钮所在行的内容赋值到第一个页面对应的文本框里面
         ** 页面关闭 close()