详谈JavaScript

一、JavaScript概述

   JavaScript是什么?有什么作用? 
        HTML:就是用来写网页的。   人的身体
        CSS:  就是用来美化页面的。 人的衣服
        JavaScript:前端大脑、灵魂。  人的大脑、灵魂

        JavaScript是WEB上强大的脚本语言。
    脚本语言:
            无法独立执行。必须嵌入到其他语言中,结合使用。
            直接被浏览器解析执行。

    Java编程语言:
            独立写程序,独立运行。 编译---执行

    作用:控制页面特效展示。
         例如: 
    a.JS可以对HTML元素进行动态控制
    b.JS可以对表单项进行校验
    c.JS可以控制CSS的样式;


2、JavaScript的语言特征及编程注意事项
    特征:
    a.JavaScript无需编译,直接被浏览器解释并执行
    b.JavaScript无法单独运行,必须嵌入到HTML代码中运行
    c.JavaScript的执行过程由上到下依次执行

    注意:
    a.JavaScript没有访问系统文件的权限(安全)
    b.由于JavaScript无需编译,是由上到下依次解释执行,所以在保证可读性的情况下,允许使用链式编程
    c.JavaScript和java没有任何直接关系


3、JavaScript的组成

    a.ECMAScript    (核心):规定了JS的语法和基本对象。
    b.DOM   文档对象模型:处理网页内容的方法和接口标记型文档。HTML
    c.BOM   浏览器对象模型:与浏览器交互的方法和接口


4、内部脚本
    在当前页面内部写script标签,script内部即可书写JavaScript代码

    格式:
    <script type=”text/javascript”>
    JavaScript的代码
    </script>

    注:script标签理论上可以书写在HTML文件的任意位置

   外部引入
    在HTML文档中,通过<script src=””>标签引入.js文件

    格式:
    <script  type=”text/javascript”  src=”javascript文件路径” ></script>

    注:外部引用时script标签内不能有script代码,即使写了也不会执行。


5、script标签规范化的放置位置(了解)
    开发规范规定,script标签的放置位置为:Body结束标签前。
    优点:
    保证html展示内容优先加载,最后加载脚本。 增强用户体验性

二、JavaScript语法及规则

    1、注释
        单行注释
            //
            Hbuilder快捷键 ctrl+/

        多行注释
            /* */
            Hbuilder快捷键 ctrl+shift+/



    2、变量
        a、变量简述
            变量:标示内存中的一块空间,用于存储数据,且数据是可变的。

            变量的声明:
                var 变量名;    //变量赋予默认值,默认值为undefined   (未定义的)

            变量的声明和赋值:
                var 变量名=值;   //变量赋予对应的值

            在声明JavaScript变量时,需要遵循以下命名规范:
            1.必须以字母或下划线开头,中间可以是数字、字符或下划线
            2.变量名不能包含空格等符号
            3.不能使用JavaScript关键字作为变量名,如:function、this、class
            5.JavaScript严格区分大小写。

    3、基本数据类型
            类似于java中的基本数据类型
            a.string        字符串类型。””和’’都是字符串。 JavaScript中没有单个字符
            b.boolean       布尔类型。  固定值为true和false
            c.number        数字类型。  任意数字
            d.null          空,一个占位符。
            e.undefined 未定义类型,该类型只有一个固定值,即undefined,表示变量声明却未               定义具体的值。

            注:因为undefined是从null中派生出来的,所以undefined==null


            JavaScript区别于java,是弱类型语言,变量的使用不用严格遵循规范,所以一个变量声明好之后,是可以赋予任意类型的值。

            通过typeof运算符可以分辨变量值属于哪种基本数据类型

            ECMAScript实现之初的一个bug,null属于基本数据类型,typeof(null)--object

    4、引用数据类型
            引用类型通常叫做类(class),但在JavaScript中,因为不存在编译过程,所以没有类的概念,所处理的引用数据类型都是对象。

            标准创建方式:
                var str = new String();//和java相同
                var str = new String;  //js独有的方式



    5、运算符
            JavaScript运算符与Java运算符基本一致。
            这里我们来寻找不同点进行学习
            a.比较运算符

                ==      逻辑等。仅仅对比 值
                ===     全等。  对比值并且对比类型。
                        如果值和类型都相同,则为true;值和类型有一个不同,则为false


    6、逻辑运算符

        注:JavaScript逻辑运算符没有 &  |


    7、正则对象
        a.RegExp对象的创建方式
            a.var reg = new RegExp("表达式");(开发中基本不用)
            b.var reg = /^表达式$/;   直接量(开发中常用)
            直接量中存在边界,即^代表开始,$代表结束
            直接量方式的正则是对象,不是字符串,别用引号

        b.test方法
            正则对象.test(string);用来校验字符串是否匹配正则。
            全部字符匹配返回true;有字符不匹配返回false

        c.正则对象使用注意事项
            /^表达式$/
                    只要有无法成立正则的字符存在,即为false。
                    全部符合为true(检查严格,眼睛不揉沙子)适用于校验

            /表达式/        
                    只要有成立正则的字符存在,即为true。全部不符false
                    (检查不严格,懒人思想)适用于字符串查找、替换



    8、JS数组对象
        1、JS数组的特性
            JS数组可以看做 Java中的ArrayList 集合。
            a.数组中的每一个成员没有类型限制,及可以存放任意类型
            b.数组的长度可以自动修改 

        2、JS数组的四种创建方式
            a.var arr = [1,2,3,”a”,true]; //常用的JS数组。 长度5
            b.var arr = new Array();创建一个数组对象,数组长度默认为0

        3.var arr = new Array(4);
            数组长度是4,相当于开辟了长度为4的空间,每个元素是undefined。
            (仅在显示数组时进行处理,undefined为了方便显示变成了空字符串形式,其值本质仍然是undefined)

        4.var arr = new Array(“a”,”b”,true);  //创建了一个数组,长度3,    数组元素是”a”,”b”,true


    9、JS数组的常用属性/方法
        a.length  设置或返回数组中元素的数目
        b.join()  把数组的所有元素放入一个字符串,元素通过指定的分隔符进行分割
        c.pop()  删除并返回数组的最后一个元素
        d.push() 向数组的末尾添加一个或更多元素,并返回新的长度
        e.reverse() 颠倒数组中元素的顺序 物理翻转:就是把元素下标进行互换

    10、全局函数(global)
        1、执行
            作用:用于增强程序的扩展性。
            注:只可以传递原始数据类型string,传递String对象无作用。
        2、编码和解码
            URL/URI编码:中文及特殊符号   %16进制
            作用:保证数据传递的完整性。
        3、URI和URL的区别
            URI是统一资源标识符。  标识资源详细名称。
            URL是统一资源定位器。 定位资源的网络位置。
            资源:可以通过浏览器访问的信息统统称为资源。(图片、文本、HTML、CSS等等。。。。)

            URI标识资源的详细名称,包含资源名。
            URL定位资源的网络位置。包含http://
        4、字符串转数字
            parseInt(string);       string按照字面值转换为整数类型,小数点后面部分不关注。

            parseFloat(string);     string按照字面值转换为小数类型。
            注:
                a.如果字符串的某个字符从字面值上无法转为数字,那么从该字符开始停止转换,仅返回前面正确的转换值。
                (例如:11.5a55,parseInt结果11,parseFloat结果11.5)

                b.如果字符串的第一个字符就无法从字面值上转为数字,那么停止转换,返回NaNNaN
                (Not A Number,一个数字类型的标识,表示不是一个正确的数字)

三、自定义函数/自定义方法

1、函数简述及作用
    如果一段代码需要被重复编写使用,那么我们为了方便统一编写使用,可以将其封装进一个函数(方法)中。

    作用:增强代码的复用性
2、函数格式


    a.JavaScript函数定义必须用小写的function;
    b.JavaScript函数无需定义返回值类型,直接在function后面书写 方法名;
    c.参数的定义无需使用var关键字,否则报错;
    d.JavaScript函数体中,return可以不写,也可以return 具体值,或者仅仅写return;

3、函数使用的注意事项
    JavaScript函数调用执行完毕一定有返回值,值及类型根据return决定,如果未return具体值,返回值为undefined;
    JavaScript函数若同名,则不存在方法重载,只有方法相互覆盖,最后定义的函数覆盖之前的定义;
    因为JavaScript不存在函数重载,所以JavaScript仅根据方法名来调用函数,即使实参与函数的形参不匹配,也不会影响正常调用;
    如果形参未赋值,就使用默认值undefined



4、自定义对象
    a.function构造函数
        我们知道,JavaScript中的引用数据类型都是对象,而对象在JavaScript中可以用函数来表示。

        相当于java中创建某个class类

    b.无形参格式:
        function 对象名(){
            函数体
        }


    c.带参数格式:
        function 对象名(参数列表){
            函数体
        }


    d.有属性格式:
        function 对象名(){
                this.属性名1=属性值1;
                this.属性名2=属性值2;
                …….
        }
    this表示当前对象。

5、对象直接量
        开发中可以用一种简单的方式直接创建自定义的JavaScript对象,这种方式称为“对象直接量”。

        格式:
            var 对象名 = {属性名1:”属性值1”, 属性名2:”属性值2”, 属性名3:”属性值3”……};

        注:该方式直接创建出实例对象,无需构建函数,无需再new创建实例对象,直接使用即可

四、BOM对象

1、BOM对象简述
    a.BOM对象是什么?有什么用?
        BOM(Browser Object Model)浏览器对象模型
        浏览器:IE、火狐、谷歌等
        作用:用来执行浏览器的相关操作。(例如:浏览器的地址、弹出消息等)

          一般情况下,window代表了BOM对象。
          window对象是JavaScript的内置对象,使用window对象调用方法时可以省略window不写。
2、消息框
    a、alert()警告框,用来弹出警告消息。
    注:不同浏览器显示的组件样式不同,这里我们无需关注组件样式。
    b、confirm()
    确认框,用于告知用户信息并收集用户的选择


3、定时器
    a、循环定时器的设置和取消
    b、启动循环定时器-setInterval()
        循环定时器,调用一次就会创建并循环执行一个定时器。

        格式:
            setInterval(调用方法,毫秒值);
            //毫秒值:  循环周期    

    c、停止循环定时器-clearInterval()
        setInterval方法在创建一个定时器的同时,还会返回一个的定时器的ID,该ID就代表这个定时器。此定时器ID在当前页面是不重复的。
        我们可以通过clearInterval方法,指定某个循环定时器 停止

        格式:
            clearInterval(定时器ID);


4、一次性定时器的设置和取消
    a、启动一次性定时器-setTimeout()
        一次性定时器,调用一次就会创建并执行一个定时器一次。

        格式:
            setTimeout(调用方法,毫秒值);

    b、停止一次性定时器clearTimeout()
        setTimeout方法在创建一个定时器的同时,还会返回一个的定时器的ID,该ID就代表这个定时器。
        此定时器ID在当前页面是不重复的。
        我们可以通过clearTimeout方法,指定某个一次性定时器 停止

        格式:
            clearTimeout (定时器ID);



5、location对象
    location 对象包含浏览器 地址栏 的信息。
    常用属性:href    设置或返回完整的URL
    设置href属性,浏览器就会跳转到对应的路径

五、DOM对象

1、DOM对象的简述
    a、DOM对象是什么?有什么作用?
    DOM(Document Object Model) 文档对象模型
     文档:标记型文档(HTML等)
    DOM是将标记型文档中所有内容(标签、文本、属性)都封装成对象,
    通过操作对象的属性或者方法,来达到操作或者改变HTML展示效果的目的。

2、DOM树介绍
    HTML文档会被浏览器 由上到下依次 加载并解析。加载到浏览器的内存
    加载并解析到内存中,会生成一张DOM树

    其中:
    a.每个标签会被加载成 DOM树上的一个元素节点对象。
    b.每个标签的属性会被加载成DOM树上的一个属性节点对象
    c.每个标签的内容体会被加载成DOM树上的一个文本节点对象
    d.整个DOM树,是一个文档节点对象,即DOM对象。
    e.一个HTML文档加载到内存中就会形成一个DOM对象

    DOM树的特点:
    a.必定会有一个根节点
    b.每个节点都是节点对象
    c.常见的节点关系:父子节点关系
    d.文本节点对象没有子节点---叶子节点
    e.每个节点都有一个父节点,零到多个子节点
    f.只有根节点没有父节点
3、获取元素对象的四种方式
    在JavaScript中,我们可以通过DOM对象的4种方式获取对应的元素对象:
    a.getElementById();   ---通过元素ID获取对应元素对象
    可以通过ID获取对应的元素对象,如果找不到,返回null

    b.getElementsByName();   ---通过元素的name属性获取符合要求的所有元素
    c.getElementsByTagName();   ---通过元素的元素名属性获取符合要求的所有元素
    d.getElementsByClassName();   ---通过元素的class属性获取符合要求的所有元素
    可以获取到元素节点对象 数组;如果找不到,返回 空数组

    注:获取某个/某些元素节点对象,必须保证元素节点对象被先加载到内存中

4、元素对象常见属性
    a、value
        元素对象.value, 获取元素对象的value属性值。
        元素对象.value=属性值  设置元素对象的value属性值。修改元素的值
    b、className
        元素对象.className, 获取元素对象的class属性值。
        元素对象. className =属性值  设置元素对象的class属性值。修改元素样式
5、checked
    元素对象.checked, 获取元素对象的checked属性值。
    元素对象. checked =属性值     设置元素对象的checked属性值。

    注:HTML中checked=”checked”,JavaScript中返回true,false

    修改单选/复选的 选中与否
6、innerHTML
    元素对象.innerHTML,  获取元素对象的内容体
    元素对象.innerHTML=值     设置元素对象的内容体 操作元素的内容体

六、JS事件

1、JS事件是什么?有什么作用?
    通常鼠标或热键的动作我们称之为事件(Event) 

    事件包括:点击、表单提交、值发生改变、鼠标移入、鼠标移出等等

    通过JS事件,我们可以完成页面的指定特效。

2、JS事件驱动机制简述
    页面上的特效,我们可以理解在JS事件驱动机制下进行。
    JS事件驱动机制:

    警察抓小偷
    事件源        小偷
    事件     偷东西
    监听器        警察
    注册/绑定监听器       让警察时刻盯着小偷

    事件源:专门产生事件的组件。

    事件:由事件源所产生的动作或者事情。

    监听器:专门处理 事件源 所产生的事件。

    注册/绑定监听器:让监听器时刻监听事件源是否有指定事件产生,如果事件源产生指定事件,则调用监听器处理。



3、常见的JS事件
    a、点击事件(onclick)
       点击事件:由鼠标或热键点击元素组件时触发

    b、焦点事件(onblur、onfoucs)

4、获取焦点事件(onfocus)
    焦点:即整个页面的注意力。
    默认一个正常页面最多仅有一个焦点。

    例如:文本框中闪烁的小竖线。

    通常焦点也能反映出用户目前的关注点,或者正在操作的组件。
    获取焦点事件:当元素组件获取焦点时触发

5、失去焦点事件(onblur)
   失去焦点事件:元素组件失去焦点时触发

6、域内容改变事件(onchange)
    域内容改变事件: 元素组件的值发生改变时触发

7、加载完毕事件(onload)
    加载完毕事件:元素组件加载完毕时触发。

8、表单提交事件(onsubmit)
    表单提交事件:表单的提交按钮被点击时触发

    注意:该事件需要返回boolean类型的值来执行 提交/阻止 表单数据的操作。
    a.事件得到true,提交表单数据
    b.事件得到false,阻止表单数据提交

9、键位弹起事件(onkeyup)
   键位弹起事件:在组件中输入某些内容时,键盘键位弹起时触发该事件

10、常用鼠标事件
    a、鼠标移入事件(onmouseover)
       鼠标移入事件:鼠标移入某个元素组件时触发

    b、鼠标移出事件(onmouseout)
       鼠标移出事件:鼠标移出某元素时触发

11、JS事件的两种绑定方式
    a、元素事件句柄绑定
       将事件以元素属性的方式写到标签内部,进而绑定对应函数。
       事件句柄绑定方式-
                优点:①开发快捷
                      ②传参方便
                      ③可以绑定多个函数
                缺点:JS和HTML代码高度糅合在一起,不利于多部门的项目开发维护



12、DOM绑定方式
    使用DOM的属性方式绑定事件

    DOM绑定方式-
            优点:使得HTML代码和JS代码完全分离
            缺点:①不能传递参数。  解决:匿名函数是可以的
                 ②一个事件只能绑定一个函数  解决:匿名函数内部是可以绑定多个函数。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值