JavaWeb—JavaScript

目录

一、什么是JavaScript？ 

二、JavaScript引入方式

三、JavaScript基础语法

3.1 书写语法

3.2 输出语句

3.3 变量

3.4 数据类型

3.5 运算符

3.5.1 ==和===的区别

3.5.2 类型转换

3.6 流程控制语句

3.6.1 if语句

3.6.2 switch语句

 3.6.3 for循环语句

 3.6.4 do while循环语句

 3.6.5 dowhile 循环语句

 3.7 函数

3.7.1 定义格式

3.7.2 函数调用

四、JavaScript常用对象

 4.1 Array对象

4.1.1 定义格式

4.1.2 元素访问

4.1.3 特点

4.1.4 属性

4.1.5 方法

4.2 String对象

4.3 自定义对象

五、BOM

5.1 Window对象

5.1.1 获取window对象

5.1.2 window对象属性

5.1.3 window对象函数

5.1.4 使用案例

5.2 History对象

5.3 Location对象

5.3.1 获取Location对象

5.3.2 Location对象属性 

5.3.3 案例

六、DOM

6.1 概述

6.2 获取 Element对象

6.3 HTML Element对象使用

七、事件监听

7.1 事件绑定

7.2 常见事件

八、表单验证案例

8.1 需求

8.2 代码

九、RegExp对象

9.1正则对象使用

9.1.1 创建对象

9.1.2 函数

9.2 正则表达式

9.3 改进表单校验案例

---

一、什么是JavaScript？ 

• JavaScript是一门跨平台、面向对象的脚本语言，来控制网页行为的，它能使网页可交互，例如改变页面内容、修改指定元素的属性值、对表单进行校验等
• JavaScript和Java是完全不同的语言，Java是编译语言，需要编译成字节码文件才能运行的；而JavaScript是脚本语言，不需要编译，由浏览器直接解析并执行
• JavaScript（简称：JS）在1995年由Brendan Eich发明，并于1997年称为一部ECMA标准
• ECMAScript6（ES6）是最新的JavaScript版本（发布于2015年）

二、JavaScript引入方式

1. 内部脚本：将JS代码定义在HTML页面中

    在HTML中，JavaScript代码必须位于标签之间

提示：

• 在HTML文档中可以在任意地方，放置任意数量的

  3.3 变量

  1. JavaScript中用 var 关键字（variable的缩写）来声明变量

  • 格式：var 变量名 = 数据值；

  2. JavaScript是一门弱类型语言，变量可以存放不同类型的值

  3. JavaScript中的变量名命名有如下规则，和Java语言基本都相同

  • 组成字符可以使任何字母、数字、下划线(_)或美元符号($)
  • 数字不能开头
  • 建议使用驼峰命名

  4. JavaScript中var关键字有点特殊，有以下地方和其他语言不一样

  • 作用域：全局变量

         

  •  变量可以重复定义

         

   5. 针对如上的问题，ECMAScript6新增了 let 关键字来定义变量。它的用法类似于var，但所声明的变量旨在let关键字所在的代码块内有效，且不允许重复声明

         

         

   6. ECMAScript 6 新增了 const 关键字，用来声明一个只读的常量。一旦声明，常量的值就不能改变

          

  3.4 数据类型

  JavaScript中提供了两种数据类型：原始类型和引用类型

  1. 使用 tperof 运算符可以获取数据类型

      alert(typerof age); //以弹窗的形式将age变量的数据类型输出

  2. 原始数据类型：

  • number：数字(整数、小数、NaN(Not a Number))

         

  • string：字符、字符串、单双引皆可

          

  • boolean：布尔。true，false

           

  • null：对象为空

          

  • undefined：当声明的变量为初始化时，该变量的默认值是undefined

           

  3.5 运算符

  JavaScript提供了如下的运算符。大部分和Java语言是一样的，不同的是关系运算符中的==和===

  

  3.5.1 ==和===的区别

  1. ==：

          ① 判断类型是否一样，如果不一样，则进行类型转换

          ② 再去比较其值

  2. ===：

          ① 判断类型是否一样，如果不一样，直接返回false

          ② 再去比较其值

  

  3.5.2 类型转换

  1. 其他类型转换为number

  • string转换为number类型：按照字符串的字面值转为数字。如果字面值不是数字，则转为NaN。将string转化为number有两种方式

          ①使用 + 正号运算符：

             

          ②使用parseInt()函数（方法）：

             

  •  boolean转换为number类型：true转为1，false转为0

             

  2.  其他类型转为boolean

  • number类型转换为boolean类型：0和NaN转为false，其他的数字转为true
  • string类型转换为boolean类型：空字符串转为false，其他的字符串转为true
  • null类型转换为boolean：类型是false
  • undefined转换为boolean：类型是false

          

  

  3.6 流程控制语句

  JavaScript中提供了和Java一样的流程控制语句，如下

  

  3.6.1 if语句

  

  3.6.2 switch语句

  

   3.6.3 for循环语句

  

   3.6.4 do while循环语句

  

   3.6.5 dowhile 循环语句

  

   3.7 函数

  函数(就是Java中的方法)是被设置为执行特定任务的代码块；JavaScript函数通过function关键字进行定义

  3.7.1 定义格式

  函数的定义格式有两种

  方式1

  

  方式2

  

  

  3.7.2 函数调用

  函数调用函数：

  

  例如：

  

  

  四、JavaScript常用对象

  JavaScript提供了很多对象供使用者来使用。这些对象总共分三类

  

   4.1 Array对象

  JavaScript Array对象用于定义数组

  4.1.1 定义格式

  方式一

  

  例如：

  

  方式二

  

   例如：

  

  4.1.2 元素访问

  访问数组中的元素和Java语言一样，格式如下：

  

  4.1.3 特点

  JavaScript 中的数组相当于 Java 中集合。数组的长度是可以变化的，而 JavaScript 是弱类型，所以可以存储任意的类型的数据

  

  4.1.4 属性

  Array 对象提供了很多属性，如下图是官方文档截取的

  

  

  4.1.5 方法

  Array 对象同样也提供了很多方法，如下图是官方文档截取的

  

  •  push函数：给数组添加元素，也就是在数组的末尾添加元素

  

  •  splice函数：删除元素

  

  4.2 String对象

  String对象的创建方式有两种

  方式一

  

  方式二

  

  • 属性：

  String对象提供了很多属性，下面列举了一个属性length，该属性是用于动态的获取字符串的长度

  

  •  函数：

  String对象提供了很多函数(方法)，下面列举了两个方法

  

   String对象还有一个函数trim()，该方法在文档中没有体现，但是所有的浏览器都支持；它是用来去掉字符串两端的空格。

  

  4.3 自定义对象

  在JavaScript中自定义对象特别简单，下面就是自定义对象的格式

  

  调用属性的格式：

  

  调用函数的格式：

  

  

  五、BOM

  BOM：Browser Object Model浏览器对象模型。也就是JavaScript将浏览器的各个组成部分封装成对象。

  我们要操作浏览器的各个组成部分就可以通过操作BOM中的对象来实现。比如：我现在想将浏览器地址栏的地址改为https://www.bilibili.com 就可以通过使用BOM中定义的Location对象的href属性，代码：location.href = "https://bilibili.com";

  BOM中包含了如下对象：

  • Window：浏览器窗口对象
  • Navigator：浏览器对象
  • Screen：屏幕对象
  • History：历史记录对象
  • Location：地址栏对象

  

  5.1 Window对象

  window对象是JavaScript对浏览器的窗口进行封装的对象

  5.1.1 获取window对象

  该对象不需要创建直接使用window，其中window.可以省略。比如我们之前使用的alert()函数，其实就是window对象的函数，在调用时可以写成如下两种

  • 显式使用window对象调用

  

  • 隐式调用

  

  5.1.2 window对象属性

  

  5.1.3 window对象函数

  

  5.1.4 使用案例

  

  5.2 History对象

  History对象是JavaScript对历史记录进行封装的对象

  • History对象的获取

          使用window.history获取，其中window.可以省略

  • History对象的函数

  

  

  5.3 Location对象

  

  5.3.1 获取Location对象

  使用window.location获取，其中window.可以省略

  

  5.3.2 Location对象属性 

  

  5.3.3 案例

  六、DOM

  6.1 概述

  DOM：Document Objecct Model 文档对象模型。也就是JavaScript将HTML文档的各个组成部分封装为对象。HTML文档是浏览器解析。封装的对象分为

  • Document：整个文档对象
  • Element：元素对象
  • Attribute：属性对象
  • Text：文本对象
  • Comment：注释对象

  

   作用：

  JavaScript通过DOM，就能够对HTML进行操作了

  • 改变HTML元素的内容
  • 改变HTML元素的样式(CSS)
  • 对HTML DOM时间作出反应
  • 添加和删除HTML元素

  DOM相关概念：

  DOM是W3C(万维网联盟)定义了访问HTML和XML文档的标准。该标注被分为3个不同部分：

  1. 核心DOM：针对任何结构化文档的标准模型。XML和HTML通用的标准

  • Document：整个文档对象
  • Element：元素对象
  • Attribute：属性对象
  • Text：文本对象
  • Comment：注释对象

  2. XML DOM：针对XML文档的标准模型

  3. HTML DOM：针对HTML文档的标准模型

      该标准是核心DOM基础上，对HTML中的每个标签都封装成了不同的对象

  • 例如： 标签在浏览器加载到内存中时会被封装成 Image 对象，同时该对象也是 Element 对象。
  • 例如： 标签在浏览器加载到内存中时会被封装成 Button 对象，同时该对象也是 Element 对象。

  6.2 获取 Element对象

  HTML 中的 Element 对象可以通过 Document 对象获取，而 Document 对象是通过 window 对象获取。

  Document 对象中提供了以下获取 Element 元素对象的函数

  • getElementById() ：根据id属性值获取，返回单个Element对象
  • getElementsByTagName() ：根据标签名称获取，返回Element对象数组
  • getElementsByName() ：根据name属性值获取，返回Element对象数组
  • getElementsByClassName() ：根据class属性值获取，返回Element对象数组

  
  
  
      
      
  
  
  
  
   
  
  
  传智教育
     
  
  黑马程序员
   
  
  
   电影
   旅游
   游戏
  
  
  
  
  
  

  

  

  6.3 HTML Element对象使用

  
  
  
      
      
  
  
  
   
  
  
  传智教育
     
  
  黑马程序员
   
  
  
   电影
   旅游
   游戏
  
  
  
  
  
  

  

  

  七、事件监听

  HTML事件是发生在HTML元素上的"事情"，比如：页面上的按钮被点击、鼠标移动到元素之上、按下键盘按键等都是事件。

  事件监听是JavaScript可以在事件被侦测到执行一段逻辑代码。例如下图当我们点击开灯按钮，就需要通过js代码实现替换图片

  

  7.1 事件绑定

  JavaScript提供了两种事件绑定方式：

  方式一：通过HTML标签中的事件属性进行绑定

  

  方式二：通过DOM元素属性绑定

  

  7.2 常见事件

  下面列举一些比较常用的事件属性

  

  • onfocus：获得焦点事件 

  

  • onblur：失去焦点事件

  

  • onmouseout：鼠标移出事件
  • onmouseover：鼠标移入事件

  

  • onsubmit：表单提交事件

  

  八、表单验证案例

  8.1 需求

  

  8.2 代码

  
  
  
      
      
      
  
  
  
  
      
  
          
  欢迎注册
          已有帐号？ 登录
      
      
  
  
          
  
  
              
  
                  
  用户名
                  
  
                      
                      
  
                      用户名不太受欢迎
                  
  
              
  
              
  
                  
  密码
                  
  
                      
                      
  
                      密码格式有误
                  
              
  
  
              
  
                  
  手机号
                  
  
                      
  
                      手机号格式有误
                  
              
  
          
  
          
  
              
          
          
  
      
  
  
  
  
  
  
  
  
  
  

  九、RegExp对象

  RegExp是正则对象。正则对象是是判断指定字符串是否符合规则

  9.1正则对象使用

  9.1.1 创建对象

  正则对象有两种创建方式

  • 直接量方式：注意不要加引号

  

  •  创建RegExp对象

  

  9.1.2 函数

  test(str)：判断指定字符串是否符合规则，返回true或false

  9.2 正则表达式

  正则表达式定义了字符串组成的规则。也就是判断指定的字符串是否符合指定的规则，如果符合返回true，如果不符合返回 false。

  正则表达式是和语言无关的。很多语言都支持正则表达式，Java语言也支持，只不过正则表达式在不同的语言中的使用方式 不同，js 中需要使用正则对象来使用正则表达式。

  

  

  9.3 改进表单校验案例

  
  
  
      
      
      
  
  
  
  
      
  
          
  欢迎注册
          已有帐号？ 登录
      
      
  
  
          
  
  
              
  
                  
  用户名
                  
  
                      
                      
  
                      用户名不太受欢迎
                  
  
              
  
              
  
                  
  密码
                  
  
                      
                      
  
                      密码格式有误
                  
              
  
  
              
  
                  
  手机号
                  
  
                      
  
                      手机号格式有误