javaweb-day03

javascript

1. 复合数据类型:内置对象，自定义对象，浏览器对象，扩展对象；
2. 内置对象：Date，Math，Number，String（可以参考javascript文档）
3. 自定义对象：（看代码）；
4. 浏览器对象：BOM，浏览器对象模型；

数组

1. 定义：数组就是一组元素的集合；
2. 特点：定义数组的初始化大小不会影响最终向数组中添加的元素；数组元素类型不限，即杂合类型
3. 数组定义方法：var num = new Array();var num = new Array(a,b,c);

函数

1.函数就是具有一段特定功能的片段；函数可以没有返回值，需要返回值时利用return返回；

BOM

1. 简介：用javascript技术去操作浏览器的各个组成部分，例如：文档区域，状态栏，地址栏，窗口
2. 分类：

     01——window（操作浏览器的窗口部分）
              alert()警告框
              confirm()确认框
              prompt()提示框
              open()在新窗口中打开web页面
              setTimeout()一次性定时器
              setInterval()周期性定时器
        02——location（操作地址栏）
              href访问指定的web页面
              reload()刷新
        03——screen（与屏幕相关的属性）
              availHeight屏幕的可用高
              availWidth屏幕的可用宽
              height垂直分辨率
              width水平分辨率
        04——document（文档区域的属性）
              forms所有表单的集合，通常用索引号访问每个表单
              bgColor文档背景色
              fgColor文档字体色
              write()输出字符串到文档中
        05——history（浏览历史，前进，后退，调到指定地址）
              go(0)刷新
        06——navigator（关于浏览器的一些信息）
              appName浏览器名称
              appVersion浏览器所在平台和版本

3. 各个对象的具体实现可以看例子

函数的三种定义方式

1.正常方法
     function add(num1,num2){
         return num1+num2;
     }
2.构造函数方式
     var add = new Function("num1","num2","return num1+num2");
3.无/匿名函数方式
     var add = function(num1,num2){return num1+num2}

1. 表单验证：重要！！！

DOM

1. 是一种跨平台，跨浏览器，跨语言的规则，可以访问web页面中的标签；（简单说来，该模式就是用来操作浏览器中的标签的各种属性）

            DOM规则中，节点分为四种
            01——文档节点，例如：document
            02——元素节点，例如：div
            03——文本节点，例如：哈哈
            04——属性节点，例如：id=”timeID”
            在DOM这个规则看来，所有的WEB页面，均是由节点(Node)组成
   
   
    getElementById()：通过ID获取元素
    getElementsByTagName()：通过便签名字获取元素，返回是一个数组
    getElementsByName()：通过名字查找元素，返回是一个数组；
   

额外内容

关注除号运算，双等比较内容，三等先比较类型，后比较内容
位移：向右为除，向左为乘
用位移来实现加密功
空运算符；
三目运算符，
语句：空语句：；a

数组中可以放入任何类型的数据，而且长度不固定，一般不建议这样子做
BOM：即用javascript技术操作浏览器的各个组成部分，窗口，文档区域，状态栏等
BOM分类：window,location, screen, document, history（浏览过的网页存在的对像）,navigator(关于浏览器一些信息)
DOM:用于操作浏览器中的标签部分，定位标签，一个规则
针对标签和背景等细粒度的东西可以查CSS手册；例子：列表项样式
javascript手册：查询javascript内置对象的属性和方法
Dhtml:查询某个标签的属性，事件，方法，信息等，window对象的方法
前景色就是文字的颜色
文档节点：document,只有一个；元素节点:html 属性节点：border,文本节点，td

---

黑马内容

三、JavaScript与Html的结合方式(掌握)
    Javascript与HTML的结合方式有三种：
        1.采用事件来调用，代码写在字符串中
            <button onclick = "alert('大家好')">点击</button>
        2.采用定义函数的方式: 用function来定义函数 
            function fun(){ alert('你好')} ;
        3.采用外部js文件.
            利用<script src = "a.js"></script>引入

---

四、JavaScript基本语法(掌握)

    * 定义变量：采用var关键字来定义.定义的变量的类型是由给定的值来决定的。
    * 数据类型：          undifined,表示未定义类型。
                 Number类型。代表了一切数字类型
                 String类型。字符串类型
                 Boolean类型。布尔类型
                 Function类型。函数类型
                 Null类型。      
                 object ：对象类型.
    * 判断变量的类型 : 
            1. 采用typeof函数判断 :typeof(a) == "string"
            2. 采用instanceof运算符： a instanceof String

    * 三大结构
        a.顺序结构
        b.选择结构
        c.循环结构 for,while,do...while

    * 运算符
        1.一元运算符 +(正号) -  ++ -- 
        2.二元运算符 +(加法) - * / %
        3.三元运算符 ？ ：
        4.等号  == 判断的是内容,
                === 全等于 ,判断类型和内容

    * 类型的转换
        1. Number转String : 3 + ""
        2. Number转Boolean ：在javascript中，非0为真，0为假。如果变量为null或者undefined，也为假.
        3. String转Number:
                a. parseInt,parseFloat
                b. 乘以1即可

---

五、JavaScript 函数的定义（掌握）
    * 函数的定义有三种方式： 
        1.采用function关键字来定义
        2.采用匿名的方式来定义
        3.采用new Function()的方式(了解,不推荐)

    * 函数的调用：
        1.函数调用的时候参数可以传递多个，可以和函数定义的形参个数不符合
        2.如果函数重名了，那么调用的时候一定是调用最后一个，与参数无关。
    *** 推荐： 定义函数的不要重名。

    函数劫持：
            改变函数本身的作用.

---

六、JavaScript 全局函数(掌握)
    全局函数：
        1.isNaN (掌握)：用来判断变量是否是数字类型的字符串
            NaN: not a Number ,不是一个数字
        2.parseInt,parseFloat
        3.eval(掌握): 把字符串转换成数字
        4.escape(): 编码
        5.unescape(): 解码
        6.encodeURI(): 对网址（URL）进行编码
        7.decodeURI(): 对网址（URL）进行解码

---

七、JavaScript常用对象介绍（掌握）
    * Array对象 数组对象，进行数组操作
        定义方式
            1.采用new的方式
            2.采用中括号[]来定义
                数组的长度可以随时改变
                
        特点： 
            1.javascript中数组的大小可以随时改变
            2.javascript中数组的下标可以是任意对象。

        方法： 
            1.join() : 把数组的所有元素放入一个字符串. 默认用逗号连接
            2.push() : 向数组的末尾添加一个元素
            4.reverse() :反转
            3.shift() : 删除并返回数组的第一个元素
            4.sort() ; 排序 .默认同类型的数据相比较.
            
    * String对象 ----- 字符串类型的引用类型
        String对象： 
            方式： substr: 截取字符串 两个参数第一个是下标，第二个是长度
                    substring: 截取字符串 两个参数第一个是下标，第二个是下标
                    toUppercase:
                    toLowercase:
                    indexOf:
                    charAt() :
                    replace():
    * Number对象 ---- 数字原始类型引用类型
            Num对象：
                    1. random() : 获得随机数[0,1)
                    2. ceil() : 返回大于等于次数的最大整数
                    3. floor() : 返回小于等于次数的最大整数
                    4. round(): 返回四舍五入后的整数
    * Boolean对象 ---- 布尔原始类型引用类型 
    * Math对象 执行数学任务
    * Date对象 用于处理日期和时间
        Date对象： 代表一个时间
                方法： getXXX() : 拿到年月日
    * RegExp 对象正则表达式对象 
        正则表达式
            写法： 1. new的方式   var r = new RegExp("ab") ;
                   2. 采用/正则表达式/ (推荐)  var r = /ab/ ;    

---

BOM

1.BOM的概述
    browser object modal :浏览器对象模型。
    浏览器对象：window对象。
    Window 对象会在 <body> 或 <frameset> 每次出现时被自动创建。

2. window的属性
     innerHeight: 
     innerWidth:  IE不支持
        通用写法：document.body.clientWidth
                  document.body.clientHeight
     self :等同于window对象
     parent：是打开窗口的父窗口对象
     opener：是打开窗口的父窗口对象。
            2种情况下使用opener:
                   1.使用winodw.open()方法打开的页面
                   2.超链（里面的target属性要设置成_blank）
            2种情况下使用parent:
                   1.iframe 框架
                   2.frame 框架
     frames[]: 数组类型，代表子窗口的window对象的集合,可以通过frames[索引]拿到子窗口的window对象。
        示例：父子窗口相互传参.
     
    open方法，是打开一个页面.


    对话框：
         1)消息框 alert() ;
         2)确认框 confirm() ;
         3)输入框 prompt() ; (了解)

    定时器：
       setTimeout ,setInterval
         定时器：1.setTimeout() :只会调用1次
             2.setInterval() ：每隔一段时间调用1次
 
3. history对象
     a.  forward()前进
     b.  back() 后退
     c.  go(n) 正数是前进，负数是后退.

4. location对象。
        1.href 属性： 是指要连接到其他的URL
                        写法一、window.location.href='demo_window对象的close方法.html' ；
                        写法二、window.location='demo_window对象的close方法.html' ；

        2.reload方法: 刷新
            写法： window.location.reload() ；

5.常用事件
    * 事件（掌握，明白每个事件发生的时机）
    鼠标移动事件
    * onmousemove(event) : 鼠标移动事件 event是事件对象。名字固定 
    * onmouseover : 鼠标悬停事件
        鼠标悬停事件： 当鼠标移动到某个控件上面的时候发生
            this: 把this写在那个标签里面就代表那个标签对象
            this.style.backgroundColor : 当调用样式表中的属性的时候，如果属性中间有横杠，则应去掉.
        
         示例： 当鼠标移动到p标签上的时候，p标签改变样式  (参见demo01_鼠标悬停事件.html)
    * onmouseout : 鼠标移出事件
        鼠标移开事件： 当鼠标从控件上移开的时候
        示例参见(demo_02_鼠标移开事件.html ;
        
* 鼠标点击事件
    onclick : 当鼠标单击某个控件时发生
        示例： 当单击按钮时，在<p>中显示字符串 "冠希哥来了" 参见(demo03_鼠标单击事件.html)
        
* 加载与卸载事件 
    onload ,onunload
        加载事件(onload) : 在整个页面的元素加载完毕之后发生
        卸载事件(onunload) : 是在页面关闭时发生 
          注意： onload和onunload事件必须写在body或者图片标签里面
          示例参见（demo04_加载卸载事件.html）
          
* 聚焦与离焦事件
    onfocus, onblur
        聚焦事件：是在控件获得焦点的时候发生
        离焦事件：是在控件失去焦点的时候发生

        示例： 文本框获得焦点的时候改变样式，失去焦点时变回原样(参见demo05_聚焦离焦事件.html)
        
* 键盘事件
    onkeypress,onkeyup,onkeydown
        onkeypress: 按下键盘按键并松开
        onkeydown : 按下按键发生
        onkeyup: 松开按键
        
        示例参见（demo06_键盘事件.html`）

* 提交与重置事件
    onsubmit,onreset
    提交事件： 是在点击提交按钮后发生。(必须写在form表单中)
    重置事件： 是在点重置交按钮后发生。

    示例： 提交表单中的数据(检查):如果是陈冠希：通过，否则不能提交数据（参见demo07_提交重置事件.html）

        
* 选择与改变事件
    onselect:
    onchange:
    
    onselect: 只能用于输入框. 当选择输入框中的文本时发生
    onchange: 用于select和文本框.
                对于下拉框是在选项发生变化的时候发生
                对于文本框是在文本框的内容发生变化并且失去焦点时发生

        示例： 当选择文本框的内容时，弹出文本框的内容
        下拉框的selectedIndex属性：代表选中某项的索引 
        参见(demo08_选择与改变事件.html)