JavaScript,CSS,HTML结合

前端的三个技术点:HTML CSS JavaScript

(前言)关系:

HTML 就是毛坯房(只有水泥的骨架,还没有装修)
CSS 就是装修工作(简装,精装,豪装)
JavaScript "特效,判断"就是自动化(智能家居)

ECMAScript基础语法

1、JavaScript 的概述

    A.Java和JavaScript的关系
        没有半毛线的关系. "雷锋"和"雷峰塔"
    B.JavaScript的分类
        a. ECMAScript JavaScript的标准语法
        b. BOM 浏览器对象模型 Browser
        c. DOM 文档对象模型  Document

2、JavaScript 和 HTML 结合的方式

    A.内部定义
        <script>
            //简单的JavaScript语法. alert 相当于 sout
            alert("HelloWorld");
        </script>
    B.外部引入
        <!--src里面是js文件的路径-->
        <script src="../javascript/a.js"></script>

3、注释

    A.单行注释
        //这是单行注释
    B.多行注释
        /*
            这是多行注释
        */

4、数据类型

    A.原始数据(基本数据类型)
        a. number (整数,小数,NaN not a number)
        b. string
        c. boolean
        d. null
        e. undefined
    B.引用数据类型(对象)

5、变量的使用

    A.定义方式
        var 变量名称 = 变量值;
    B.了解语法(写到HTML页面当中)
        document.write("<br>");  //可以把换行符写入到HTML文件当中
    C.判断数据类型的操作
        a.语法格式
            typeof(变量名称) 返回值就是数据类型
        b.注意事项
            null 的typeof函数的返回值结果是 object 类型,这是JavaScript的bug

6、比较运算符

    == 和 === 的区别在哪里?
    a.双等比较的是 数据值 是否相等 "123"==123  true
    b.三等比较的是 比较数据类型是否相等,再看数据值是否相等 "123"===123  false

7、逻辑运算符”非”!的转换

    A.number: 0或NaN为false,其他为true
    B.string: 空字符串""为false,其他为true
    C.null和undefined: 全是false
    D.对象:全部是true

ECMAScript常用对象

1、函数对象 Function

    A.定义格式和使用格式
        a.无参无返回值的定义格式
            function 函数名称(){

            }
        b.无参无返回值的使用格式
            函数名称();
        c.有参有返回值的定义格式
            function 函数名称(参数名1,参数名2,参数名3){
                return 返回值;
            }
        d.有参有返回值的使用格式
            var 返回值 = 函数名称(参数1,参数2,参数3);
    B.函数使用的注意事项
        a.函数没有重载,只有下面的覆盖上面的
        b.函数参数传递与个数无关.(未传递参数是undefined)

2.数组对象 Array 类似于集合 List

    A.创建的方式
        a.var arr = new Array(元素列表);
        b.var arr = new Array(默认长度);
        c.var arr = [元素列表];   //简单  var arr = [11,true,'abc'];
    B.特点
        a.长度可以随意改变
        b.数据类型可以随意改变
    C.例如:
        var arr = [11,true,'abc'];
        arr[10] = 666;
        那么中间的 arr[3]=undefined;  arr[4]=undefined; arr[5]=undefined; ...
    D.属性
        arr.length 数组的长度

3、日期对象 Date

    A.创建对象的方式
        var dd = new Date();
    B.两个方法
        a.获取当前的系统时间
            dd.toLocaleString();
        b.得到毫秒值的操作
            dd.getTime();

4、数学类 Math

    A.无需创建对象,直接可以使用
    B.常见的使用方式
        a.求圆周率 Math.PI
        b.向上取整 Math.ceil(变量);  //3.2向上取整变成4
        c.向下取整 Math.floor(变量); //3.2向下取整变成3
        d.四舍五入 Math.round(变量); //3.2四舍五入变成3  3.8四舍五入变成4
        e.随机数 Math.random(); //产生的随机数是 0~1之间的小数,包括0不包括1

ECMAScript 的正则对象和全局对象

1、正则对象

    A.作用:
        主要用于做表单校验.例如:判断用户名密码验证码等等是否正确
    B.常见的正则表达式
        a.查看API文档
        b.查看川哥CHM格式笔记
        c.网络搜索常见正则表达式
    C.使用方式
        a.创建对象
            方式1: var reg = new RegExp("正则表达式");
            方式2: var reg = /正则表达式/;
        b.调用函数
            reg.test(参数);  //如果匹配成功,返回true。匹配失败,返回false

2、全局对象

    A.编码和解码
        a.编码 encode()
        b.解码 decode()
    B.转换为数字类型的方法
        parseInt(数据)
    C.将字符串作为js脚本运行
        eval("字符串作为js脚本运行")

简单的DOM入门

1、获取标签的对象

    var html标签对象 = document.getElementById("html标签的id");

2、设置属性和内容的方法

    A.设置属性的方法
        html标签对象.src = "路径";  //设置路径
        html标签对象.width = 10;  //设置宽度
        html标签对象.height = 10;  //设置高度
    B.修改HTML里面的内容
        html标签对象.innerHTML = "需要修改的内容";

3、事件的简单学习

    A.事件的绑定方式
        a.方式1:
            在HTML代码当中
            <img src="路径" id="xx" onclick="函数名称(参数)"/>
            在JS代码当中
            function 函数名称(参数){
                .......
            }
        b.方式2
            在HTML代码当中
            <img src="路径" id="xx"/>
            在JS代码当中
            function 函数名称(参数){
                .......
            }
            var HTML的标签 = document.getElementById("xx");
            HTML的标签.onclick = 函数名称;

BOM浏览器对象模型

1、BOM概述

    A.含义:
        BOM浏览器对象模型
    B.组成部分
        a.Window:窗口对象
        b.Naigator:浏览器对象(了解即可)
        c.Sceen:显示器屏幕对象(了解即可)
        d.Hitory:历史记录对象
        e.Loation:地址栏对象

2、Window 窗口对象

    A.弹出的方法
        a. alter("警告框");  //警告框
        b. confirm();  //确认取消框(掌握)
        c. prompt(); //输入框 参数:提示语,返回值:输入框的内容
    B.打开关闭窗口的方法
        a.打开窗口
            var 新窗口的对象 = open("要开启的网址");
        b.关闭窗口
            新窗口的对象.close();  //如果不写新窗口的对象,关闭的是自己

3、定时器

    A.一次性定时器
        a.开启方式
            var id值 = setTimeout("函数名称(参数)",毫秒值);
        b.取消方式
            clearTimeout(id值);
    B.循环定时器
        a.开启方式
            var id值 = setInterval("函数名称(参数)",毫秒值);
        b.取消方式
            clearInterval(id值);

4、window对象的属性

    A. 获取其他BOM对象:
        history
        location
        Navigator
        Screen:
    B. 获取DOM对象
        document

5、location对象的属性和方法

    A.方法
        reload() 重新加载"刷新"
    B.属性
        href 跳转到某个页面,获取页面地址
    C.例如:
        var v1 = location.href;  //这里的v1 获取页面的地址
        location.href = "http://www.itheima.com";  //这里就是跳转到 黑马程序员 页面

6、history历史记录

    A.方法
        a.forward()  //前进历史记录  
        b.back() //后退历史记录
        c.go(数字) //正数是前进,负数是后退
    B.属性
        length  //当前的窗口历史记录的数据(注意:不是浏览器,是窗口)

DOM对象

1、含义

    DOM 文档对象模型 document object modle

2、分类

    A.DOM核心
        a.节点 Node --> (父亲)
        b.文档 Document
        c.元素 Element
        d.属性 Attribute
        e.文本 Text
        f.注释 Comment
    B.HTMLDom
    C.XMLDom

3、获取Element的对象方法

    A. getElementById("id值")  //通过id获取对象,返回值是唯一的一个对象(id在页面当中唯一)
    B. getElementsByTagName("标签")  //通过标签的名称获取所有的对象,返回的是一个数组.
    C. getElementsByClassName("class值") //通过class属性,获取所有的对象,返回的是一个数组.
    D. getElementsByName("name值") //通过name属性,获取所有的对象,返回的是一个数组(例如:input标签当中name属性)

4、创建Document的几个对象的方法

    A. createAttribute() //创建属性
    B. createComment() //创建注释
    C. createElement() //创建元素
    D. createTextNode() //创建文本节点

5、Elemnet元素相关的方法

    A. removeAttribute() //删除属性
    B. setAttribute() //设置属性

6、Node相关的方法

    A.增删改方法
        a.增 appendChild()  
        b.删 removeChild()
        c.改 replaceChild()
    B.属性
        parentNode //返回父节点的对象

7、a标签的超链接

    A.两个效果
        a.样式
        b.界面跳转
    B.阻止界面跳转的代码
        javascript:void(0);

HTMLDom

1、关于 innerHTML 的用法

    A. 设置和获取标签
    B. 控制标签样式

2、设置样式

    A.自己代码设置
        标签的对象.style. ...
    B.用CSS现有的
        标签的对象.className = CSS的class属性

事件

1、事件的四个组成部分

    A. 事件 (用户的操作"点击","双击","移动","改变"...)
    B. 事件源(按钮,图片,文本输入框...)
    C. 监听器 (出现操作之后,需要执行的代码)
    D. 注册监听器 (绑定事件源和监听器之间的操作)

2、常见的事件

    A. 点击事件:
        a. onclick:单击事件  //重点
        b. ondblclick:双击事件
    B. 焦点事件
        a. onblur:失去焦点
        b. onfocus:元素获得焦点。
    C. 加载事件:
        a. onload:一张页面或一幅图像完成加载。
    D. 鼠标事件:
        a. onmousedown  鼠标按钮被按下。
        b. onmouseup    鼠标按键被松开。
        c. onmousemove  鼠标被移动。
        d. onmouseover  鼠标移到某元素之上。
        e. onmouseout   鼠标从某元素移开。
    E. 键盘事件:
        a. onkeydown    某个键盘按键被按下。  
        b. onkeyup      某个键盘按键被松开。
        c. onkeypress   某个键盘按键被按下并松开。
    F. 选择和改变
        a. onchange 域的内容被改变。
        b. onselect 文本被选中。
    G. 表单事件:
        a. onsubmit 确认按钮被点击。 //重点(存在返回值,true提交.false不提交)
        b. onreset  重置按钮被点击。

猜你喜欢

转载自blog.csdn.net/LIDIADIA/article/details/82718434