前端相关

JavaScript快速入门回顾

JavaScript快速入门回顾 JavaScript 是一门跨平台、面向对象的脚本语言而Java语言也是跨平台的、面向对象的语言，只不过Java是编译语言，是需要编译成字节码文件才能运行的；JavaScript是脚本语言，不需要编译，由浏览器直接解析并执行。 一、 JavaScript引入方式 J

JavaScript快速入门回顾

JavaScript 是一门跨平台、面向对象的脚本语言而Java语言也是跨平台的、面向对象的语言，只不过Java是编译语言，是需要编译成字节码文件才能运行的；JavaScript是脚本语言，不需要编译，由浏览器直接解析并执行。

一、 JavaScript引入方式

JavaScript 引入方式就是 HTML 和 JavaScript 的结合方式。JavaScript引入方式有两种：

  • 内部脚本：将 JS代码定义在HTML页面中
  • 外部脚本：将 JS代码定义在外部 JS文件中，然后引入到 HTML页面中

1.1 内部脚本

在 HTML 中，JavaScript 代码必须位于 <script> 与 </script> 标签之间
alert(数据) 是 JavaScript 的一个方法，作用是将参数数据以浏览器弹框的形式输出出来。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script>
    alert("hello js1");
</script>
</body>
</html>

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

1.2 外部脚本

第一步：定义外部 js 文件。如定义名为 demo.js的文件
第二步：在页面中引入外部的js文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script src="../js/demo.js"></script>
</body>
</html>

注意：

  • 外部脚本不能包含 <script> 标签
    在js文件中直接写 js 代码即可，不要在 js文件 中写 script 标签
  • <script> 标签不能自闭合
    在页面中引入外部js文件时，不能写成 <script src="../js/demo.js" />。

二、 JavaScript基础语法

2.1 书写语法

  • 区分大小写：与 Java 一样，变量名、函数名以及其他一切东西都是区分大小写的
  • 每行结尾的分号可有可无
    如果一行上写多个语句时，必须加分号用来区分多个语句。
  • 注释
    • 单行注释：// 注释内容
    • 多行注释：/* 注释内容 */

    注意：JavaScript 没有文档注释

  • 大括号表示代码块
    下面语句大家肯定能看懂，和 java 一样 大括号表示代码块。
  if (count == 3) { 
   alert(count); 
}

2.2 输出语句

js 可以通过以下方式进行内容的输出，只不过不同的语句输出到的位置不同

  • 使用 window.alert() 写入警告框
<script>
    document.write("hello js 2~");//写入html页面
</script>
  • 使用 document.write() 写入 HTML 输出
<script>
    document.write("hello js 2~");//写入html页面
</script>
  • 使用 console.log() 写入浏览器控制台
<script>
    console.log("hello js 3");//写入浏览器的控制台
</script>

2.3 变量

JavaScript 中用 var 关键字（variable 的缩写）来声明变量。格式 var 变量名 = 数据值;。而在JavaScript 是一门弱类型语言，变量可以存放不同类型的值；如下在定义变量时赋值为数字数据，还可以将变量的值改为字符串类型的数

var test = 20;
test = "张三";

js 中的变量名命名也有如下规则，和java语言基本都相同

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

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

  • 作用域：全局变量
{
    var age = 20;
}
alert(age);  // 在代码块中定义的age 变量，在代码块外边还可以使用
  • 变量可以重复定义
{
    var age = 20;
    var age = 30;//JavaScript 会用 30 将之前 age 变量的 20 替换掉
}
alert(age); //打印的结果是 30

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

{
    let age = 20;
}
alert(age);  //浏览器并不会弹框输出结果，说明这段代码是有问题的。
//而如果在代码块中定义两个同名的变量，就会直接报错
{
    let age = 20;
    let age = 30;
}
alert(age);

ECMAScript 6 新增了 const关键字，用来声明一个只读的常量。一旦声明，常量的值就不能改变。通过下面的代码看一下常用的特点就可以了

const PI = 3.14
PI = 3; //这里就会赋值报错

2.4 数据类型

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

使用 typeof 运算符可以获取数据类型
alert(typeof age); 以弹框的形式将 age 变量的数据类型输出

原始数据类型：

  • number：数字（整数、小数、NaN(Not a Number)） 注意：NaN是一个特殊的number类型的值
  • string：字符、字符串，单双引皆可 注意：在 js 中 双引号和单引号都表示字符串类型的数据
  • boolean：布尔。true，false
  • null：对象为空
var obj = null;
alert(typeof obj);//结果是 object

为什么打印上面的 obj 变量的数据类型，结果是object；这个官方给出了解释，下面是从官方文档截的图
image-nnso.png

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

2.5 运算符

JavaScript 提供了如下的运算符。大部分和 Java语言 都是一样的，不同的是 JS 关系运算符中的 == 和 ===，一会我们只演示这两个的区别，其他运算符将不做演示

  • 一元运算符：++，--
  • 算术运算符：+，-，*，/，%
  • 赋值运算符：=，+=，-=…
  • 关系运算符：>，<，>=，<=，!=，==，===…
  • 逻辑运算符：&&，||，!
  • 三元运算符：条件表达式 ? true_value : false_value

2.6 ==和===区别

概述:

  • ==：
    1. 判断类型是否一样，如果不一样，则进行类型转换
    2. 再去比较其值
  • ===：js 中的全等于
    1. 判断类型是否一样，如果不一样，直接返回false
    2. 再去比较其值
var age1 = 20;
var age2 = "20";

alert(age1 == age2);// true
alert(age1 === age2);// false

2.7 类型转换

  • 其他类型转为number
    • string 转换为 number 类型：按照字符串的字面值，转为数字。如果字面值不是数字，则转为NaN
      将 string 转换为 number 有两种方式：
      • 使用 + 正号运算符：
var str = +"20";
alert(str + 1) //21
  • 使用 parseInt() 函数(方法)：
      var str = "20";
      alert(parseInt(str) + 1);

建议使用 parseInt() 函数进行转换

  • boolean 转换为 number 类型：true 转为1，false转为0
    var flag = +false;
    alert(flag); // 0
  • 其他类型转为boolean
    • number 类型转换为 boolean 类型：0和NaN转为false，其他的数字转为true
    • string 类型转换为 boolean 类型：空字符串转为false，其他的字符串转为true
    • null类型转换为 boolean 类型是 false
    • undefined 转换为 boolean 类型是 false
// var flag = 3;
// var flag = "";
var flag = undefined;
if(flag){
    alert("转为true");
}else {
    alert("转为false");
}

2.8 流程控制语句

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

  • if
  • switch
  • for
  • while
  • dowhile
//if
var count = 3;
if (count == 3) {
    alert(count);
}
//switch
var num1 = 3;
switch (num1) {
    case 1:
        alert("星期一");
        break;
    case 2:
        alert("星期二");
        break;
    default:
        alert("输入的星期有误");
        break;
//for
var sum2 = 0;
for (let i = 1; i <= 100; i++) { //建议for循环小括号中定义的变量使用let
    sum2 += i;
}
alert(sum2);

//while
var sum3 = 0;
var i = 1;
while (i <= 100) {
    sum3 += i;
    i++;
}
alert(sum3);

//dowhile
var sum4 = 0;
var i = 1;
do {
    sum4 += i;
    i++;
}
while (i <= 100);
alert(sum4);

3.9 函数

函数（就是Java中的方法）是被设计为执行特定任务的代码块；JavaScript 函数通过 function 关键词进行定义。
函数定义格式有两种：

  • 方式1

    function 函数名(参数1,参数2..){
    要执行的代码
}

  • 方式2

    var 函数名 = function (参数列表){
    要执行的代码
}

注意：

  • 形式参数不需要类型。因为JavaScript是弱类型语言 
    function add(a, b){
    return a + b;
}

上述函数的参数 a 和 b 不需要定义数据类型，因为在每个参数前加上 var 也没有任何意义。

  • 返回值也不需要定义类型，可以在函数内部直接使用return返回即可

3.10 函数调用

函数调用函数：

函数名称(实际参数列表);

eg：

let result = add(10,20);

注意：

  • JS中，函数调用可以传递任意个数参数
  • 例如 let result = add(1,2,3);
    它是将数据 1 传递给了变量a，将数据 2 传递给了变量 b，而数据 3 没有变量接收。

四、 JavaScript常用对象

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

  • 基本对象
    image-vkeq.png
  • BOM 对象
    image-doyj.png
  • DOM对象
    DOM 中的对象就比较多了，下图只是截取部分
    image-qxah.png

4.1 基本对象

4.1.1 Array对象

  1. 定义格式
var 变量名 = new Array(元素列表);
var arr = new Array(1,2,3); //1,2,3 是存储在数组中的数据（元素）

var 变量名 = [元素列表];
var arr = [1,2,3]; //1,2,3 是存储在数组中的数据（元素）

注意：Java中的数组静态初始化使用的是{}定义，而 JavaScript 中使用的是 [] 定义

  1. 元素访问
arr[索引] = 值;

 // 方式一
var arr = new Array(1,2,3);
// alert(arr);

// 方式二
var arr2 = [1,2,3];
//alert(arr2);

// 访问
arr2[0] = 10;
alert(arr2)
  1. 属性和方法
    image-xpzj.png
    image-bfxb.png

4.1.2 String对象

  1. String对象的创建方式
var 变量名 = new String(s);

var 变量名 = "数组";
  1. 属性和方法
    image-znnj.png
    image-ajnj.png
    String对象还有一个函数 trim() ，该方法在文档中没有体现，但是所有的浏览器都支持；它是用来去掉字符串两端的空格。
    代码演示：
var str4 = '  abc   ';
alert(1 + str4 + 1);
//上面代码会输出内容 `1  abc  1`，很明显可以看到 abc 字符串左右两边是有空格的。接下来使用 `trim()` 函数

var str4 = '  abc   ';
alert(1 + str4.trim() + 1);
//输出的内容是 `1abc1` 。这就是 `trim()` 函数的作用。

4.1.2 自定义对象

var 对象名称 = {
    属性名称1:属性值1,
    属性名称2:属性值2,
    ...,
    函数名称:function (形参列表){},
	...
};

调用：

//调用属性的格式
对象名.属性名

//调用函数的格式
对象名.函数名()

4.2 BOM

BOM：Browser Object Model 浏览器对象模型。也就是 JavaScript 将浏览器的各个组成部分封装为对象。
BOM 中包含了如下对象：

  • Window：浏览器窗口对象
  • Navigator：浏览器对象
  • Screen：屏幕对象
  • History：历史记录对象
  • Location：地址栏对象
    下图是 BOM 中的各个对象和浏览器的各个组成部分的对应关系
    image-emcv.png
    BOM 中的 Navigator 对象和 Screen 对象基本不会使用。

4.2.1 Window对象

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

  1. 获取window对象
    该对象不需要创建直接使用 window，其中 window. 可以省略。比如我们之前使用的 alert() 函数，其实就是 window 对象的函数，在调用是可以写成如下两种
//显式使用 window`对象调用
window.alert("abc");
//隐式调用
alert("abc")
  1. window对象属性
    window 对象提供了用于获取其他 BOM 组成对象的属性
    image-pege.png
    也就是说，我们想使用 Location 对象的话，就可以使用 window 对象获取；写成 window.location，而 window. 可以省略，简化写成 location 来获取 Location 对象。
  2. window对象函数
    window 对象提供了很多函数供我们使用，而很多都不常用.
    image-clbk.png

setTimeout(function,毫秒值) : 在一定的时间间隔后执行一个function，只执行一次
setInterval(function,毫秒值) :在一定的时间间隔后执行一个function，循环执行

confirm代码演示：

// confirm()，点击确定按钮，返回true，点击取消按钮，返回false
var flag = confirm("确认删除？");

alert(flag);
//当我们点击 确定 按钮，flag`变量值记录的就是 true ；当我们点击 取消 按钮，flag 变量值记录的就是 false。

定时器代码演示：

setTimeout(function (){
    alert("hehe");
},3000);
//当我们打开浏览器，3秒后才会弹框输出 `hehe`，并且只会弹出一次。

setInterval(function (){
    alert("hehe");
},2000);
//当我们打开浏览器，每隔2秒都会弹框输出 `hehe`。

4.2.2 History对象

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

  • History 对象的获取
    使用 window.history获取，其中window. 可以省略
  • History 对象的函数
    image-ubjz.png
    这两个函数我们平时在访问其他的一些网站时经常使用对应的效果，如下图
    image-cmrp.png
    当我们点击向左的箭头，就跳转到前一个访问的页面，这就是 back() 函数的作用；当我们点击向右的箭头，就跳转到下一个访问的页面，这就是 forward() 函数的作用。

4.2.3 Location对象

Location 对象是 JavaScript 对地址栏封装的对象。可以通过操作该对象，跳转到任意页面。

  1. 使用 window.location获取，其中window. 可以省略
window.location.方法();
location.方法();
  1. Location对象属性
    Location对象提供了很对属性。以后常用的只有一个属性 href:设置或返回完整的URL
alert("要跳转了");
location.href = "https://www.baidu.com";
//在浏览器首先会弹框显示 `要跳转了`，当我们点击了 `确定` 就会跳转到 百度 的首页。

4.3 DOM

DOM：Document Object Model 文档对象模型。也就是 JavaScript 将 HTML 文档的各个组成部分封装为对象。
DOM 其实我们并不陌生，之前在学习 XML 就接触过，只不过 XML 文档中的标签需要我们写代码解析，而 HTML 文档是浏览器解析。封装的对象分为

  • Document：整个文档对象
  • Element：元素对象
  • Attribute：属性对象
  • Text：文本对象
  • Comment：注释对象
    image-gwdv.png
    作用：
    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 中的每个标签都封装成了不同的对象
    • 例如：<img> 标签在浏览器加载到内存中时会被封装成 Image 对象，同时该对象也是 Element 对象。
    • 例如：<input type='button'> 标签在浏览器加载到内存中时会被封装成 Button 对象，同时该对象也是 Element 对象。

4.3.1 获取 Element对象

HTML 中的 Element 对象可以通过 Document 对象获取，而 Document 对象是通过 window 对象获取。
Document 对象中提供了以下获取 Element 元素对象的函数

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

4.3.2 HTML Element对象使用

HTML 中的 Element 元素对象有很多，不可能全部记住，以后是根据具体的需求查阅文档使用。

  1. 比如我们需要改变img标签的图片，查找步骤：
    image-fikq.png
//1，根据 id='light' 获取 img 元素对象
var img = document.getElementById("light");
//2，修改 img 对象的 src 属性来改变图片
img.src = "../imgs/on.gif";
  1. 我们需要看 复选框 元素对象有什么属性或者函数是来操作 复选框的选中状态。下图是文档的查看
    image-tzqp.png
//1，获取所有的 复选框 元素对象
var hobbys = document.getElementsByName("hobby");
//2，遍历数组，通过将 复选框 元素对象的 checked 属性值设置为 true 来改变复选框的选中状态
for (let i = 0; i < hobbys.length; i++) {
    hobbys[i].checked = true;
}

4.4 事件监听

要想知道什么是事件监听，首先先聊聊什么是事件？
HTML 事件是发生在 HTML 元素上的“事情”。比如：页面上的 按钮被点击、鼠标移动到元素之上、按下键盘按键 等都是事件。
事件监听是JavaScript 可以在事件被侦测到时执行一段逻辑代码。

4.3.1 事件绑定

  1. 方式一：通过 HTML标签中的事件属性进行绑定
    如下面代码，有一个按钮元素，我们是在该标签上定义 事件属性，在事件属性中绑定函数。onclick 就是 单击事件 的事件属性。onclick='on（）' 表示该点击事件绑定了一个名为 on() 的函数
<input type="button" onclick='on()’>

//下面是点击事件绑定的 `on()` 函数
function on(){
	alert("我被点了");
}
  1. 方式二：通过 DOM 元素属性绑定
    如下面代码是按钮标签，在该标签上我们并没有使用 事件属性，绑定事件的操作需要在 js 代码中实现
<input type="button" id="btn">

//下面 js 代码是获取了 `id='btn'` 的元素对象，然后将 `onclick` 作为该对象的属性，并且绑定匿名函数。该函数是在事件触发后自动执行
document.getElementById("btn").onclick = function (){
    alert("我被点了");
}

4.3.2 常见事件

上面案例中使用到了 onclick 事件属性，下面就列举一些比较常用的事件属性

事件属性名说明
onclick鼠标单击事件
onblur元素失去焦点
onfocus元素获得焦点
onload某个页面或图像被完成加载
onsubmit当表单提交时触发该事件
onmouseover鼠标被移到某元素之上
onmouseout鼠标从某元素移开
  1. onfocus 获得焦点事件。
    如下图，当点击了输入框后，输入框就获得了焦点。而下图示例是当获取焦点后会更改输入框的背景颜色。
    image-eabt.png
  2. onblur 失去焦点事件。
    如下图，当点击了输入框后，输入框就获得了焦点；再点击页面其他位置，那输入框就失去焦点了。下图示例是将输入的文本转换为大写。
    image-aypt.png
  3. onmouseout 鼠标移出事件。
  4. onmouseover 鼠标移入事件。
    如下图，当鼠标移入到 苹果 图片上时，苹果图片变大；当鼠标移出 苹果图片时，苹果图片变小。
    image-wqjv.png
  5. onsubmit 表单提交事件
    如下是带有表单的页面
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form id="register" action="#" >
        <input type="text" name="username" />
        <input type="submit" value="提交">
    </form>
    <script>
        
    </script>
</body>
</html>

如上代码的表单，当我们点击 提交 按钮后，表单就会提交，此处默认使用的是 GET 提交方式，会将提交的数据拼接到 URL 后。现需要通过 js 代码实现阻止表单提交的功能，js 代码实现如下：

  1. 获取 form 表单元素对象。
  2. 给 form 表单元素对象绑定 onsubmit 事件，并绑定匿名函数。
  3. 该匿名函数如果返回的是true，提交表单；如果返回的是false，阻止表单提交。
document.getElementById("register").onsubmit = function (){
    //onsubmit 返回true，则表单会被提交，返回false，则表单不提交
    return true;
}

三、RegExp对象

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

3.1 正则对象使用

3.1.1 创建对象

正则对象有两种创建方式：

//直接量方式：注意不要加引号
var reg = /正则表达式/;

//创建 RegExp 对象
var reg = new RegExp("正则表达式");

3.1.2 函数

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

3.2 正则表达式

正则表达式定义了字符串组成的规则。也就是判断指定的字符串是否符合指定的规则，如果符合返回true，如果不符合返回false。
正则表达式是和语言无关的。很多语言都支持正则表达式，Java语言也支持，只不过正则表达式在不同的语言中的使用方式不同，js 中需要使用正则对象来使用正则表达式。
正则表达式常用的规则如下：

  • ^：表示开始
  • $：表示结束
  • [ ]：代表某个范围内的单个字符，比如： [0-9] 单个数字字符
  • .：代表任意单个字符，除了换行和行结束符
  • \w：代表单词字符：字母、数字、下划线()，相当于 [A-Za-z0-9]
  • \d：代表数字字符： 相当于 [0-9]
    量词：
  • +：至少一个
  • *：零个或多个
  • ？：零个或一个
  • {x}：x个
  • {m,}：至少m个
  • {m,n}：至少m个，最多n个
    代码演示：
// 规则：单词字符，6~12
//1,创建正则对象，对正则表达式进行封装
var reg = /^\w{6,12}$/;

var str = "abcccc";
//2,判断 str 字符串是否符合 reg 封装的正则表达式的规则
var flag = reg.test(str);
alert(flag);
Comment