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浏览器所在平台和版本
  1. 各个对象的具体实现可以看例子

函数的三种定义方式

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.采用事件来调用,代码写在字符串中
            
        2.采用定义函数的方式: 用function来定义函数 
            function fun(){ alert('你好')} ;
        3.采用外部js文件.
            利用引入

四、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 对象会在  或  每次出现时被自动创建。

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 : 当鼠标单击某个控件时发生
        示例: 当单击按钮时,在

中显示字符串 "冠希哥来了" 参见(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)

你可能感兴趣的:(javaweb-day03)