JavaScript学习笔记

JavaScript

内容:

​ 1.JavaScript概述

​ 2.JavaScript语法及规则

​ 3.BOM对象

​ 4.DOM对象


1.JavaScript概述

1.1 JavaScript是什么?有什么作用?

​ HTML:就是用来写网页的。 人的身体

​ CSS: 就是用来美化页面的。 人的衣服

​ JavaScript:前端大脑、灵魂。 人的大脑、灵魂

​ JavaScript是WEB上强大的脚本语言

​ 脚本语言:

​ 无法独立执行。必须嵌入到其他语言中,结合使用。

​ 直接被浏览器解析执行。

​ Java编程语言:

​ 独立写程序,独立运行。 编译—执行

​ 作用:控制页面特效展示。

​ 例如:

​ JS可以对HTML元素进行动态控制

​ JS可以对表单项进行校验

​ JS可以控制CSS的样式;

1.2 JavaScript的语言特征及编程注意事项

特征:
JavaScript无需编译,直接被浏览器解释并执行
JavaScript无法单独运行,必须嵌入到HTML代码中运行
JavaScript的执行过程由上到下依次执行

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

1.3 JavaScript的组成

1559007509660

​ ECMAScript (核心):规定了JS的语法和基本对象

​ DOM 文档对象模型:处理网页内容的方法和接口

标记型文档。HTML

​ BOM 浏览器对象模型:与浏览器交互的方法和接口

1.4 JavaScript的引入方式

  • 内部脚本

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

    格式:

    示例:

    1559007643093

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

  • 外部引入

    在HTML文档中,通过

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

    • script标签规范化的放置位置

      开发规范规定,script标签的放置位置为: Body结束标签前。

      优点:

      ​ 保证html展示内容优先加载,最后加载脚本。 增强用户体验性

    ##

    2. JavaScript语法及规则

    2.1 注释

    • 单行注释

      // Hbuilder快捷键 ctrl+/

    • 多行注释

    ​ /* */ Hbuilder快捷键 ctrl+shift+/

    2.2 变量

    • 变量简述

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

      变量的声明:

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

      变量的声明和赋值:

      ​ var 变量名=值; //变量赋予对应的值

      在声明JavaScript变量时,需要遵循以下命名规范:

      • 必须以字母或下划线开头,中间可以是数字、字符或下划线

      • 变量名不能包含空格等符号

      • 不能使用JavaScript关键字作为变量名,如:function、this、class

      • JavaScript严格区分大小写。

    • 基本数据类型

      类似于java中的基本数据类型

      string 字符串类型。””和’’都是字符串。 JavaScript中没有单个字符

      boolean 布尔类型。 固定值为true和false

      number 数字类型。 任意数字

      null 空,一个占位符。

      undefined 未定义类型,该类型只有一个固定值,即undefined,表示变量声明却未 定义具体的值。

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

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

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

    1559008192175

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

    • 引用数据类型

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

    标准创建方式:

    ​ var str = new String();//和java相同

    ​ var str = new String; //js独有的方式

    2.3 运算符

    • 比较运算符

      1559008319029

      ​ == 逻辑等。仅仅对比 值

      === 全等。 对比值并且对比类型。

      如果值和类型都相同,则为true;值和类型有一个不同,则为false

    • 逻辑运算符

      1559008369708

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

    2.4 正则对象

    • RegExp对象的创建方式

      var reg = new RegExp("表达式"); (开发中基本不用)

      var reg = /^**表达式$/; 直接量(开发中常用)

      直接量中存在边界,即^代表开始,$代表结束

      直接量方式的正则是对象,不是字符串,别用引号

    • test方法

      正则对象.test(string); 用来校验字符串是否匹配正则。

      全部字符匹配返回true;有字符不匹配返回false

    • 正则对象使用注意事项

      /^表达式$/ 只要有无法成立正则的字符存在,即为false。

      全部符合为true

      (检查严格,眼睛不揉沙子)适用于表单校验

    /表达式/ 只要有成立正则的字符存在,即为true。

    全部不符合为false

    (检查不严格,懒人思想)适用于字符串查找、替换

    2.5 JS数组对象

    • JS数组的特性

      JS数组可以看做 Java中的ArrayList 集合。

      • 数组中的每一个成员没有类型限制,及可以存放任意类型

      • 数组的长度可以自动修改

    • JS数组的四种创建方式

      • var arr = [1,2,3,”a”,true]; //常用的JS数组。 长度5

      • var arr = new Array();创建一个数组对象,数组长度默认为0

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

      • var arr = new Array(4);

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

    • JS数组的常用属性/方法

      1559008760061

    2.6 全局函数(global)

    • 执行

      1559197075599

      作用:用于增强程序的扩展性。

      注:只可以传递原始数据类型string,传递String对象无作用。

    • 编码和解码

      1559197121787

      URL/URI编码:中文及特殊符号 %16进制

      作用:保证数据传递的完整性。

    • URI和URL的区别

      URI是统一资源标识符。 标识资源详细名称。
      URL是统一资源定位器。 定位资源的网络位置。

    资源:可以通过浏览器访问的信息统统称为资源。(图片、文本、HTML、CSS等等。。。。)

    URI标识资源的详细名称,包含资源名。
    URL定位资源的网络位置。包含http://

    • 字符串转数字

      1559197206138

      parseInt(string); string按照字面值转换为整数类型,小数点后面部分不关注。

      parseFloat(string); string按照字面值转换为小数类型。

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

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

    2.7 自定义函数/自定义方法

    • 函数简述及作用

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

    ​ 作用:增强代码的复用性

    • 函数格式

      1559197330842

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

    • 函数使用的注意事项

      • JavaScript函数调用执行完毕一定有返回值,值及类型根据return决定,如果未return具体值,返回值为undefined;

      • JavaScript函数若同名,则不存在方法重载,只有方法相互覆盖,最后定义的函数覆盖之前的定义;

      • 因为JavaScript不存在函数重载,所以JavaScript仅根据方法名来调用函数,即使实参与函数的形参不匹配,也不会影响正常调用;

      • 如果形参未赋值,就使用默认值undefined


    2.8 自定义对象

    • function构造函数

      我们知道,JavaScript中的引用数据类型都是对象,而对象在JavaScript中可以用函数来表示。

      相当于java中创建某个class类

    无形参格式:

    ​ function 对象名(){

    ​ 函数体

    }

    带参数格式:

    ​ function 对象名(参数列表){

    ​ 函数体

    }

    带参数格式:

    ​ function 对象名(参数列表){

    ​ 函数体

    }

    • 对象直接量

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

      格式:

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

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

      • 应用场景:适用于快速创建实例对象及数据封装。

    3.BOM对象

    3.1 BOM对象是什么?

    BOM(Browser Object Model)浏览器对象模型
    浏览器:IE、火狐、谷歌等
    作用:用来执行浏览器的相关操作。(例如:浏览器的地址、弹出消息等)

    一般情况下,window代表了BOM对象。
    window对象是JavaScript的内置对象,使用window对象调用方法时可以省略window不写。

    3.2 消息框

    • alert()

      警告框,用来弹出警告消息。

      示例:1559197942636

    • confirm()

      确认框,用于告知用户信息并收集用户的选择

      示例1:1559197995756

      该方法有返回值,用户通过选择“确定”或者“取消”,方法结束会返回boolean类型的值。
       “确定”返回ture;
       “取消”返回false;

    3.3 定时器

    • 循环定时器的设置和取消

      循环定时器,调用一次就会创建并循环执行一个定时器。

      格式:

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

      1559219537070

    • 停止循环定时器-clearInterval()

      setInterval方法在创建一个定时器的同时,还会返回一个的定时器的ID,该ID就代表这个定时器。
      此定时器ID在当前页面是不重复的。

      我们可以通过clearInterval方法,指定某个循环定时器 停止

      格式:

      clearInterval(定时器ID);

      1559219577272

    • 启动一次性定时器-setTimeout()

      一次性定时器,调用一次就会创建并执行一个定时器一次。

      格式:

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

    1559219613582

    • 停止一次性定时器clearTimeout()

      setTimeout方法在创建一个定时器的同时,还会返回一个的定时器的ID,该ID就代表这个定时器。
      此定时器ID在当前页面是不重复的。

      我们可以通过clearTimeout方法,指定某个一次性定时器 停止

      格式:

      clearTimeout (定时器ID);

    3.4 location对象

    location 对象包含浏览器 地址栏 的信息。

    1559219686484

    设置href属性,浏览器就会跳转到对应的路径

    4.DOM对象

    4.1 DOM对象是什么?

    DOM(Document Object Model) 文档对象模型
    文档:标记型文档(HTML等)

    DOM是将标记型文档中所有内容(标签、文本、属性)都封装成对象,

    通过操作对象的属性或者方法,来达到操作或者改变HTML展示效果的目的

    4.2 DOM树介绍

    1559219755135

    上述HTML文档会被浏览器 由上到下依次 加载并解析。

    加载到浏览器的内存,加载并解析到内存中,会生成一张DOM树

    1559219777852

    其中:

    l 每个标签会被加载成 DOM树上的一个元素节点对象。

    l 每个标签的属性会被加载成DOM树上的一个属性节点对象

    l 每个标签的内容体会被加载成DOM树上的一个文本节点对象

    l 整个DOM树,是一个文档节点对象,即DOM对象。

    l 一个HTML文档加载到内存中就会形成一个DOM对象

    DOM树的特点:

    l 必定会有一个根节点

    l 每个节点都是节点对象

    l 常见的节点关系:父子节点关系

    l 文本节点对象没有子节点---叶子节点

    l 每个节点都有一个父节点,零到多个子节点

    l 只有根节点没有父节点

    4.3 获取元素对象的四种方式

    在JavaScript中,我们可以通过DOM对象的4种方式获取对应的元素对象:
     getElementById(); ---通过元素ID获取对应元素对象
    可以通过ID获取对应的元素对象,如果找不到,返回null

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

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

    4.4 元素对象常见属性

    • value

      元素对象.value, 获取元素对象的value属性值。
      元素对象.value=属性值 设置元素对象的value属性值。

      修改元素的值

    • className

      元素对象.className, 获取元素对象的class属性值。
      元素对象. className =属性值 设置元素对象的class属性值。

      修改元素样式

    • checked

      元素对象.checked, 获取元素对象的checked属性值。
      元素对象. checked =属性值 设置元素对象的checked属性值。

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

      修改单选/复选的 选中与否

    • innerHTM元素对象.innerHTML, 获取元素对象的内容体
      元素对象.innerHTML=值 设置元素对象的内容体

      操作元素的内容体L

    5. JS事件

    5.1 JS事件是什么

    通常鼠标或热键的动作我们称之为事件(Event)

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

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

    5.2 JS事件驱动机制简述

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

    ​ 警察抓小偷

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

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

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

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

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

    5.3 常见的JS事件

    • 点击事件(onclick)

      点击事件:由鼠标或热键点击元素组件时触发

      示例:

      1559220084943

    • 焦点事件(onblur、onfoucs)

      • 失去焦点事件(onblur)

        焦点:即整个页面的注意力。

        默认一个正常页面最多仅有一个焦点。

    例如:文本框中闪烁的小竖线。
    
    ​    ![1559220128716](D:\typora笔记\Typora图片\1559220128716.png)                                              
    
    通常焦点也能反映出用户目前的关注点,或者正在操作的组件。
    
    获取焦点事件:当元素组件获取焦点时触发
    
    示例:![1559220154392](D:\typora笔记\Typora图片\1559220154392.png)
    • 失去焦点事件(onblur)

      失去焦点事件:元素组件失去焦点时触发

      示例:

      1559220188706

    • 域内容改变事件(onchange)

      域内容改变事件: 元素组件的值发生改变时触发

      示例:

      1559220216926

    • 加载完毕事件(onload)

      加载完毕事件:元素组件加载完毕时触发。

      示例:

      1559220255837

    • 表单提交事件(onsubmit)

      (必须绑定form标签 而不是submit标签)

      表单提交事件:表单的提交按钮被点击时触发

    注意:该事件需要返回boolean类型的值来执行 提交/阻止 表单数据的操作。

    l 事件得到true,提交表单数据

    l 事件得到false,阻止表单数据提交

    示例:

    1559220336272

    • 键位弹起事件(onkeyup)

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

      示例:

    1559220372534

    • 常用鼠标事件

      • 鼠标移入事件:鼠标移入某个元素组件时触发

        示例:

        1559220425424

      • 鼠标移出事件(onmouseout)

        鼠标移出事件:鼠标移出某元素时触发

        示例:

        1559220452288

    5.4 JS事件的两种绑定方式

    • 元素事件句柄绑定

      将事件以元素属性的方式写到标签内部,进而绑定对应函数。

      示例1:【为事件绑定一个无参函数】

      1559220500712

      示例2:【为事件绑定一个有参函数】

      1559220524481

      示例3:【为事件绑定一个有参函数-this】

      1559220538031

      示例4:【为事件绑定多个函数】

      1559220550332

      事件句柄绑定方式-

      ​ 优点:①开发快捷

      ​ ②传参方便

      ​ ③可以绑定多个函数

      ​ 缺点:JS和HTML代码高度糅合在一起,不利于多部门的项目开发维护

    • DOM绑定方式

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

      示例1:【将下述绑定转为DOM方式绑定】

      1559220609168

      示例2:【使用DOM绑定方式,为文本框onclick事件绑定run1方法】

      1559220628475

      DOM绑定方式-

      ​ 优点:使得HTML代码和JS代码完全分离

      ​ 缺点:①不能传递参数。 解决:匿名函数是可以的

      ​ ②一个事件只能绑定一个函数 解决:匿名函数内部是可以绑定多个函数。