【干货】新中地GIS开发夏令营文档(4)JavaScript

第四章: JavaScript

一. JavaScript简介
1 JS的发展历程
回顾整个JavaScript的发展历程, 实际上就是Web发展的历程
从最开始的拨号上网方式到现在的100M光纤, 4G/5G移动Web的发展
在近20年, 上网的方式发生了翻天复地的变化, 可以说是科技大爆炸.
人们在享受越来越便捷的上网的同时, 对Web产品的需求越来越高
从单纯的对访问速度的需求, 越来越多的转移到视觉美感, 智能操作交互, 沉浸式虚拟现实, 这些需求又反过来推动了技术的不断创新与进步.

1) JS的诞生
在互联网初期(20世纪90年代) —-web1.0

主要通过拨号上网的方式浏览网页, 提交信息. 上网的速度只有28.8 kbit/s
JavaScript最初是网景公司的工程师Brandan Eich花了10天的时间设计出来的, 主要是为了在浏览器上先验证用户输入的信息是否符合格式.

为什么要这样做呢?
因为当时的网络是非常慢的, 如果用户填写了大量的信息, 提交到服务器, 在服务器端验证发现不合格, 用户要再次重新填写, 这个是很让人抓狂的.

设想一下,用户填完一个表单,点击提交按钮,等待了 30 秒的处理后,看到的却是一条告诉你忘记填写一个必要的字段

最开始的时候, Eich把自己设计的这种运行在浏览器上的脚本叫做liveScript, 在发布的时候为了蹭Java的热度, 就改名叫做JavaScript, 实际上跟Java没有半毛钱关系

2) JS的成长

在PC互联网(2010年之前)—-web2.0
这个时候, 个人电脑PC开始普及, 网络速度突飞猛进, 上网的成本越来越低
人们开始大量的使用PC访问web应用, 包括:
●blog(博客)–新浪
●RSS(订阅)
●社交网络(SNS)–FaceBook/人人网
●P2P(下载)–迅雷
●搜索引擎–Google/baidu
●即时通讯(IM)–QQ
●电子商务–Taobao
在这个时代, JavaScript都只是一种不起眼的小脚本, 没有人把他当成真正的编程语言.
JavaScript在这个时候依然只是用来处理PC网页的简单动画和验证, 也没有单独的前端岗位, 大部分前端的工作都是由php程序员或者UI人员完成的

3) JS的新生

web3.0
随着乔帮主推出的IPhone智能手机, 改变了人们的生活方式
以智能手机为代表的移动互联网应运为生, 称为web3.0

HTML5与CSS3
到2015年左右, HTML5和CSS3的标准化, 大大推进了前端的发展
前端做为一个独立的方向真正开始被重视

ECMA2015
在2015年, JavaScript的规范组织ECMA(欧洲计算机制造商协会)推出了ECMA2015, 也被称为ES6

这一版本的出现, 极大的改进了JavaScript语言, 使得JavaScript具备开发大型项目的能力

V8引擎与Node.js

Chrome推出的V8引擎将JavaScript的速度提升了几个数量级
Node.js的出现, 完善了JavaScript在服务端的能力, 使得JavaScript编写服务端程序作为可能

未来的发展
自2016年以来, 前端发展非常迅速, 开源社区越来越活跃, 出现了大量的工作岗位, 薪资也水涨船高

JavaScript现在应用的范围越来越广

●微信小程序
●H5游戏
●桌面应用(Electron)
●webApp
●AI+物联网( AIot)

2 JS的组成
JavaScript是解释性的弱类型编程语言
●解释性: 逐行解释, 逐行执行
●弱类型: 不区分变量的数据类型
●编程语言: 图灵完备的语言

一般认为浏览器中JavaScript由三部分组成
●ECMAScript: 基础语法
●DOM: 文档对象模型
●BOM: 浏览器对象模型

1) ECMAScript
ECMAScript 是由ECMA( 原欧洲计算机制造商协会)进行标准化的一门编程语言, 主要规定了像变量, 数据类型, 流程控制, 函数等基础语法

2) DOM和BOM
W3C: 万维网联盟 (World Wide Web Consortium) 主要是完成HTML和CSS及浏览器标准化的研究, 是一个非盈利性的公益组织, 主要由大公司和开发人员组成

其中,
●DOM是由W3C组织制定的标准, 通过 DOM 提供的接口可以对页面上的各种元素进行操作(大小、位置、颜色、事件等)
●BOM是由各个浏览器厂商根据DOM在各自浏览器上的实现, 不同的浏览器会略有差异, 通过BOM可以操作浏览器窗口,比如弹出框、控制浏览器跳转、获取分辨率等

3 JS的写在哪里
跟CSS一样, JS也有3种书写方式
●外部: 将JS文件单独保存, 再通过<script src=”xxx.js”>引入
●内嵌: 在HTML文件中, 将JS代码写在<script>标签中
●行内: 现在几乎不用

示例

外部

内嵌

在实际工作中, 通常将js代码写在文件中, 再使用外部方式引入

在学习阶段, 为了调试方便, 主要采用内嵌的方式

4 体验JS

为了方便信息的输入输出,JS中提供了一些输入输出语句,其常用的语句如下:

  • 注意:alert() 主要用来显示消息给用户,console.log() 用来给程序员自己看运行时的消息

示例

调试技巧

在Chrome浏览器中, 使用F12或者Ctrl+Shift+I打开调试窗口, 在console控制台中查看

在控制台中, 也可以编写JS的代码

二. 变量

1 什么是变量

变量是一个存放数据的容器(盒子), 由变量名和变量值组成

就好比, 通过房间号(变量名)可以找到某个人(变量值)

扩展

变量是程序在内存中申请的一块用来存放数据的空间

2 变量的使用

1) 变量的声明

语法

  • var ( variable )是一个 JS关键字, 用来声明变量, 后面跟变量名

  • uname/age就是变量名, 计算机通过这个名字就可以找到对应的内存空间, 进而访问到空间里的数据

2) 变量的赋值

语法

3) 声明的同时赋值

示例

变量可以重新赋值, 新值会覆盖旧值

注意

一般, 变量先声明再使用

3 变量命名规则

在JS中, 变量的命名是有一定的规则的(标识符)

  • 标识符: 由字母(A-Za-z)、数字(0-9)、下划线()、美元符号( $ )组成,如:usrAge, num01, name

  • 变量名严格区分大小写, 如 appApp是两个不同的变量

  • 不能以数字开头

  • 不能是 关键字 或者 保留字

推荐使用 驼峰法 (首字母小写,后面单词的首字母需要大写)

如: myFirstName

4 关键字与保留字

更多相关的内容, 参考JavaScript 保留关键字

三. 数据类型

1 什么是数据类型

现实

描述不同的数据时, 人们往往会使用不同的类型, 比如:

  • 姓名: 字符

  • 年龄: 数字

  • 一个命题的结论: 真假

程序

在程序中, 不同类型的数据在存储和传输时占用空间的大小是不同的. 因此, 会存在数据类型的区别

变量的数据类型

变量的数据类型就是在变量中保存的数据的类型

示例

JavaScript是弱类型语言, 并没有严格的规定变量的类型, 换句话说, 变量的类型是可以改变的, 但是强烈不建议这么做,不推荐

2 常用的数据类型

1) 简单数据类型(值类型)

  • Number: 数字型

  • String: 字符型

  • Boolean: 布尔型

  • Undefined: 未定义

  • Null: 空

数字型

示例

这里注意一种特殊的数: NaN(Not a Number)非数

字符型

使用引号来表示一个字符串

  • 单引号, 双引号都可以, 推荐使用单引号, HTML中一般使用双引号

  • 引号成对使用

示例

转义字符

字符串拼接

在JavaScript中, +是一个很特别的符号, 可以用于字符串的拼接

小技巧

在Chrome调试控制台中,

  • 蓝色: 数字

  • 黑色: 字符

示例

布尔型

布尔类型有两个值:true 和 false. 其中

  • true 表示真

  • false 表示假

Undefined

一个变量声明了, 但是没有被赋值, 这时变量里会使用默认值undefined

Null

空, 在讲对象的时候再讲

2) 引用数据类型

  • Object: 对象

关于引用数据类型是相对比较难的问题, 在后面的章节, 我们会专门来讲解

这里, 有一句名言, 大家可以先记下来, 后面慢慢体会

在JavaScript中, 一切都是对象

3 如何判断数据类型

通过typeof 可用来获取检测变量的数据类型

示例

  • 这里的typeof是一个关键字. 当作运算符使用, 整体表达式有返回值

  • typeof()是当作函数使用

4 数据类型转换

1) 显式转换

最常见的是字符型转数值型

需求

  1. 先弹出第一个输入框,提示用户输入第一个数字 保存起来

  2. 再弹出第二个框,提示用户输入第二个数字 保存起来

  3. 把这两个值相加,并将结果赋给新的变量

  4. 弹出警示框(alert) , 把计算的结果输出 (输出结果)

示例

我们发现prompt返回的类型是字符型, 两个字符型相加, 其实是拼接, 并不是我们想要的结果, 这时我们需要先将字符型转换成数字型, 再运算

  • 第3行, 用到了一个函数, parseInt作用是将字符转换成整数

更多转换函数, 参考手册: JavaScript类型转换

2) 隐式转换

什么是隐式转换

隐式转换就是JS引擎偷偷将类型转换了, 不让你知道

由于JavaScript是一种非常灵活的语言, 导致数据类型存在大量隐式转换, 这里面有很多坑.

通过几个例子, 大家先理解一些常用的

示例

+的隐式转换

==的隐式转换

大体的原则是

  • 字符型 转换成 数字型

  • 布尔型 转换成 数字型

示例

关于Boolean类型的转换

空字符串(”), NaN, 0, null, undefined => false

其余的全部 => true

四. 运算符

1 运算符的分类

运算符(operator)也被称为操作符,是用于实现赋值、比较和执行算数运算等功能的符号, 常用的有:

  • 算数运算符

  • 自增自减运算符

  • 比较运算符

  • 逻辑运算符

  • 赋值运算符

1) 表达式和返回值

表达式:是由数字、运算符、变量等以能求得数值的有意义排列方法所得的组合

简单理解:是由数字、运算符、变量等组成的式子

表达式最终都会有一个结果,返回给开发者,称为返回值

示例

2 算数运算符

算数运算符就是数学运算中的加减乘除

小数会存在精度丢失的问题

因此, 不要直接拿小数进行比较!!!

3 自增自减运算符

自增自减都是对数字变量的操作

示例

下面这种是错误的

1) 前置自增

++num: 先+1, 再返回结果

2) 后置自增

num++: 先返回结果, 再+1

练习

4 比较运算符

比较运算符是两个数据进行比较时所使用的运算符,比较运算后,会返回一个布尔值(true / false)作为比较运算的结果

字符的比较

字符的比较是按照ASCII码表依次比较的

示例

5 逻辑运算符

逻辑运算符是用来进行布尔值运算的运算符

后面开发中经常用于多个条件判断

1) 逻辑与

全真为真, 一假为假

2) 逻辑或

全假为假, 一真为真

3) 逻辑非

真假互换

4) 短路运算

当有多个表达式(值)做逻辑运算时

第一个表达式值可以确定结果时,就不再继续运算后边的表达式的值

  • 逻辑与
    语法: 表达式1 && 表达式2

  • 逻辑或
    语法: 表达式1 || 表达式2

示例

练习

判断是否为润年, 满足以下两个条件之一就是润年

  • 能被4整除且不能整除100

  • 能够被 400 整除

6 赋值运算符

把数据赋值给变量的运算符

7 运算符的优先级

五. 流程控制

1 概念

流程控制就是来控制代码按照一定结构顺序来执行

主要有3种结构

  • 顺序

  • 条件

  • 循环

程序的流程图, 可以通过使用processon在线编辑: ProcessOn

2 顺序

顺序结构是程序中最简单、最基本的流程控制,它没有特定的语法结构,程序会按照代码的先后顺序,依次执行,程序中大多数的代码都是这样执行的

3 条件

根据不同的条件,执行不同的路径代码(执行代码多选一的过程) 从而得到不同的结果

1) if语句

语法

示例

需求: 成绩>90分输出A, 成绩在80~90之间输出B, 成绩70~80之间输出C, 成绩在60~70之间输出D, 成绩<60, 输出不及格

2) switch语句

switch 语句也是多分支语句,它用于基于不同的条件来执行不同的代码

当要针对变量设置一系列的特定值的选项时,就可以使用 switch

示例

将数字1~7转换成星期一到星期天

4 循环

重复多次执行有规律的代码, 可以使用循环来表示, 通过一个变量可以记录第几次循环, 已经循环的总次数

1) for循环

语法

示例

示例

累加求和

练习

提示用户输入两个数, 计算累加求和

在for循环中, 可以使用if和for循环

示例

分别求1~100的奇数和, 偶数和

示例

打印3行3列的星星

练习

打印n行m列的星星

示例

打印9*9乘法表

2) while循环

语法

do…while

当条件满足时, 执行

区别是do…while会先执行一次, 再判断

3) 跳出循环

continue: 跳出当前循环

break: 跳出整个循环

示例

需求: 实现一个简易ATM系统

  1. 一直提示用户一个界面(1: 存款2:取款0:退出)

  2. 用户可以选择功能

  3. 存取款后提示余额

六. 数组

1 基本概念

1) 定义数组

数组是指一组数据的集合,其中的每个数据被称作元素,元素可以存放任意类型的数据。数组是一种将一组数据存储在单个变量名下的优雅方式

语法

数组中可以存放任意类型的数据,例如字符串,数字,布尔值等

示例

2) 访问数组元素

通过下标(索引)访问数组元素, 下标从0开始

3) 添加数组元素

示例

4) 删除数组元素

示例

示例

求数组中的最大值

作业

反转数组元素

eg. 原数组: [1,2,3], 新数组[3,2,1]

3 多维数组

如果一个数组a的一个元素也是一个数组, 数组a就叫多维数组

示例

七. 函数

1 基本概念

可能会有非常多的相同代码或者功能相似的代码,这些代码可能需要大量重复使用

我们把实现特定功能的代码块叫做一个函数

  • 函数可以需要的任何时候调用

  • 函数不调用不执行

1) 函数声明

语法

2) 调用函数

语法

示例

将累加求和的功能

封装成一个函数, 求1到100和

2 参数

参数可以使函数实现更加强大的功能

1) 实参与形参

语法

  • 形参: 函数声明时参数

  • 实参: 函数调用时参数

2) 传参的过程

传参的过程就是赋值的过程, 将实参的值赋值给形参

示例

进一步改造, 计算从n到m的和

3 返回值

一般一个函数在调用后, 会产生一个固定的结果, 一般将结果返回出来, 具体要怎么使用这个结果, 不是由函数决定的. 这就是编程里的”单一职责”原则

进一步改造

尝试封装一些函数

  1. 求n到m的奇数和

  2. 封装一个函数求n到m的平均值

  3. 封装一个函数求数组中的最大值

八. 对象

1 类和对象

1) 对象的概念

对象: 一个具体的实体

在现实世界中, 对象随处可见, 一个人, 一个学生, 一个杯子, 一辆汽车, 游戏里的一个英雄… 都是一个对象

2) 对象的组成

如何描述一个对象呢

比如,

  • 每个人都有姓名, 年龄, 性别这些特征.

  • 游戏里的英雄都有生命值, 攻击力, 防御力这些特征.

对象除了这些特征外, 还有一些行为/动作

比如,

  • 人可以吃饭, 睡觉

  • 游戏里的英雄可以移动, 可以放技能

在程序里,

  • 把对象的特征叫做属性, 使用变量来描述

  • 把对象的行为叫做方法, 使用函数来描述

因此, 我们得出一个重要结论:

对象是由属性和方法组成的!!

3) 类的概念

类: 具有相同特征的事物的集合

我们把具有相同特征和行为的实体抽象出来, 就形成了一个类.

比如: 把人集合在一起, 就形成了人类, 把王者荣耀里的英雄集合起来, 就形成了英雄类

  • 每一个人类都有一些相同的特征, 比如: 姓名, 性别, 年龄, 身高, 体重…等

  • 每一个英雄也有一些相同的特征, 比如: 生命值, 攻击力, 防御力…等

4) 程序中的类与对象

那么如何使用程序来描述这些相同的特征呢?

可以定义一个模板/规范/设计图纸, 然后通过这个模板/规范/设计图纸来生产一个个的实体.

比如: 我们可以通过宝马车的设计图纸来生产一辆宝马车

  • 我们把定义的这个模板叫做类

  • 把生产出来的实体叫做对象

  • 把生产的过程叫做实例化

5) 类和对象的关系

类和对象的关系, 可以认为是整体和个体, 抽象和具体的关系

通过上面的描述, 总结起来说, 就是

  • 类是对象的集合

  • 对象是类的实例化

6) 小结

  1. 对象是由属性和方法组成的

  2. 属性就是变量, 方法就是函数

  3. 类是对象的集合, 对象是类的实例化

补充: 由于类是对象的集合, 通常我们也可以说类由属性和方法组成~

2 初步认识JS中的类和对象

1) 构造函数的定义

在JS中, 没有类(class)的概念, 主要是通过构造函数来模拟的.[^1]

语法

  1. 使用function关键字表示定义一个构造函数

  2. 构造函数名一般首字母大写

示例: 2-1构造函数的定义.html

通过以上方式就可以定义一个Person构造函数, 相当于定义好了一个Person类

2) 构造函数的作用

通过构造函数实例化对象

在JS中, 我们通过构造函数(类)来实例化对象

语法

示例: 2-2通过构造函数实例化对象.html

以上代码

  • 通过new关键字, 产生了一个对象, 并赋值给变量p

  • 通过typeof p测试变量p的类型为object, 说明p是一个对象

在构造函数中定义属性

构造函数规定了由该类实例化出来的对象应该包含哪些属性

比如, 由学生类实例化出来的学生对象都应该有姓名年龄这些属性

在构造函数的内部, 我们通过this.属性名的方式来定义属性

在这里, 大家先把这个看作固定写法, 后面我们再具体分析

构造函数虽然可以规定实例对象应该包含哪些属性, 但是并不能确定实例对象的属性值

比如 人类都应该有名字这个属性, 但是具体叫什么名字, 只有在一个人出生的时候才去确定

因此, 在实例化对象的时候, 需要将具体的数据传递给构造函数

示例: 2-3在构造函数中定义属性.html

重要结论
构造函数主要完成属性的初始化!!!

练习

一. 通过构造函数Phone定义一个手机类, 包含型号(type), 价格(price), 颜色(color), 屏幕大小(size)

二. 实例化两个对象

  • 一个iphone对象, 型号: iphoneX, 价格: 6999, 颜色: 土豪金, 屏幕大小: 5.8英寸

  • 一个huawei对象, 型号:p30 pro, 价格: 5988, 颜色: 极光蓝, 屏幕大小: 6.1英寸

参考答案

作业

一.通过构造函数Hero定义一个英雄类, 包含血量(HP), 类型(type), 攻击力(attack)

二.实例化两个对象

  • 一个lianpo对象, 血量:700, 类型: 力量型, 攻击力: 70

  • 一个houyi对象, 血量:300, 类型: 射手, 攻击力: 130

3) 小结

  1. 通过构造函数定义类(规定应该包含哪些属性名)

  2. 通过new实例化对象(在实例化时, 确定属性值)

  3. 构造函数主要完成属性的初始化

3 对象的方法

1) 方法的定义

我们已经知道

  1. 类由属性和方法组成

  2. 在JS中, 通过构造函数定义类

  3. 在构造函数中可以通过this.属性名定义属性

那么, 在构造函数中是否也可以通过this.方法名定义方法呢?

2) 方法的使用(调用)

语法

  • 由于方法就是一个函数, 在后面加小括号表示方法的调用

示例

3) 小结

  1. 一般不在构造函数中定义方法

  2. 方法的调用语法: 对象.方法名()

九. 常用的内置对象

1 常用的内置对象

  • Math对象

  • Date对象

  • 字符串对象

  • 数组对象

学习方法

查文档! 查文档! 查文档!

学习一个内置对象的使用,只要学会其常用成员的使用即可,我们可以通过查文档学习,可以通过MDN/W3C来查询。
Mozilla 开发者网络(MDN)提供了有关开放网络技术(Open Web)的信息,包括 HTML、CSS 和万维网及 HTML5 应用的 API。
MDN:https://developer.mozilla.org/zh-CN/

2 Math对象的常用方法

3 Date对象的常用方法

4 数组对象的常用方法

5 JSON对象的常用方法

十. DOM介绍

一般认为JavaScript由三部分组成

  • ECMAScript: 基础语法

  • DOM: 文档数据模型

  • BOM: 浏览器对象模型

通过面前的学习, 我们了解ECMAScript, 也就JS的基础语法部分, 从这一讲开始, 我们来简单的了解一下DOM和BOM

1 什么是DOM

DOM(Document Object Model) 文档对象模型

DOM是W3C组织制定并推荐的标准, 这个标准提供了一系列操作HTML的统一API(Application Programming Interface)

核心对象是document

HTML是一种标记语言, 那么浏览器是如何解析并渲染显示的呢?

浏览器的工作流程

  1. 浏览器读取HTML文件

  2. 在内存中生成DOM树

  3. 调用API渲染显示

2 DOM树

DOM树 是将HTML文档映射成树形结构,通过节点对象对其处理,处理的结果可以加入到当前的页面

  • 文档: 一个HTML页面就是一个文档,DOM中使用document表示

  • 节点: 网页中的所有内容,在DOM树中都是一个节点(标签、属性、文本、注释等)

    • 元素节点: 网页中的所有内容, 比如h1div都是一个元素, 也就是element Node

    • 文本节点: <h1>文本</h1>里的文本就是文本节点, 也就是text Node

    • 属性节点: <img src="1.jpg"></img>里的属性就是属性节点

大家可以通过AST研究

也可以通过chrome打印调试

3 获取元素

如果要操作DOM, 首先我们需要知道具体需要操作哪一个元素. 即: 获取元素

目前最常用的API

  • getElementById(兼容性好)

  • querySelect(H5新增, 功能强大)

  • querySelectAll(H5新增)

示例一

语法

示例二

作业

获取到第二个li元素(<li>产品</li>)

4 事件驱动

1) 什么是事件驱动

我们说JavaScript采用的是事件驱动机制, 即: 触发—响应机制

如何理解

触发一个特定的事件, 比如: 点击一个按钮. 然后会执行事件对应的函数

示例

步骤

  1. 获取元素

  2. 注册事件(绑定事件)处理函数

  3. 触发事件, 执行函数

2) 鼠标事件

示例 – 仿淘宝隐藏二维码

点击x号, 隐藏广告

3) 键盘事件

4) 新增的事件注册方式

addEventListener()

示例

  • 在注册事件时不用加on

5) 事件对象

示例

比较常用的属性和方法

  • e.target: 触发事件的对象

  • e.preventDafult(): 阻止默认行为

  • e.stopPropagation(): 阻止冒泡

示例 – 判断哪个按键被按下了

示例 – this和e.target的区别

5 自学API

  1. 结点操作相关的API(增删改查)

  2. 结点关系相关的API(父子兄弟)

练习: 实现一个留言板

要求

  1. 当输入内容为空时, 提示”请输入内容”

  2. 每次发布的留言在最上面显示

  3. 发布完后, 清除之前写的内容

答案

十一. BOM介绍

1 什么是BOM

BOM(Browser Object Model) 浏览器对象模型

它提供了独立于内容而与浏览器窗口进行交互的对象,其核心对象是 window,

由于每个浏览器厂商实现方式不同, BOM的表现会略有差异.

BOM 由一系列相关的对象构成,并且每个对象都提供了很多方法与属性

包括:

  • location: URL相关

  • navigator: 浏览器相关

  • screen: 窗口相关

  • history: 浏览历史

其实, BOM 比 DOM 更大, 它包含 DOM

2 常用方法

window对象提供了很多可用方法

像之前, 我们经常用到的方法都是window对象的方法

  • alert

  • prompt

这里, 我们重点介绍

  • 定时器

  • location对象

  • history对象

3 定时器

window 对象提供了 2 种定时器

  • setTimeout()

  • setInterval()

1) setTimeout

语法

当时间到了, 会执行函数. 只执行一次

示例

回调函数

像上面这样的函数, 我们一般也叫回调函数

顾名思义, 回调函数(callback)就是”现在不执行, 过一段时间回过头来执行”

回调函数都有一个触发的时机, 比如

  • 事件处理函数: 当按钮点击时触发

  • 定时器函数: 当时间到了触发

2) setInterval

语法

每隔一段时间, 执行一次函数. 会执行多次

示例

3) clearInterval

通过clearInterval停止setInterval设置的定时器

示例

应用场景:

  • 倒计时

  • 发送验证码, 60s后重试

  • 抽奖

示例 – 模拟发送验证码倒计时

4 location对象

1) 作用

location对象用于获取设置URL

什么是URL

URL(Uniform Resource Locator), 统一资源定位符

在计算机网络中, 可以通过统一资源定位符(URL)请求对应的服务器资源(Resource)

  • Schema: 使用的协议类型, 如http/https/ftp等

  • host: 主机域名或IP

  • port: 端口号(可选)

  • path: 路径

  • query-string: 查询参数(可选)

  • #anchor: 锚链接

2) 常用属性

示例 – 3秒后跳转

如果文章对你有帮助的话,也请你帮我2个忙吧 (*╹▽╹*)

给这篇文章一键三连吧,对我很重要啦~

关注一下我 @新中地职业培训学校,听说现在关注的,以后都是尊贵的老粉啦!

获取更多GIS开发相关课程资源V:gis0329

资源下载: