目录

JavaScript 教程

JavaScript 简介

您将学到什么

JavaScript:直接写入 HTML 输出流

JavaScript:对事件的反应

点我!

JavaScript:改变 HTML 内容

JavaScript:改变 HTML 图像

JavaScript:改变 HTML 样式

JavaScript:验证输入

JavaScript 用法

JavaScript 函数和事件

在 或者 的JavaScript

中的 JavaScript 函数

中的 JavaScript 函数

外部的 JavaScript

Chrome 浏览器中执行 JavaScript

JavaScript 输出

JavaScript 显示数据

使用 window.alert()

操作 HTML 元素

在本教程中

写到 HTML 文档

写到控制台

您知道吗?

:console.log()的用处

JavaScript 语法

JavaScript 字面量

JavaScript 变量

JavaScript 操作符

JavaScript 语句

JavaScript 关键字

JavaScript 注释

JavaScript 数据类型

数据类型的概念

JavaScript 函数

JavaScript 字母大小写

JavaScript 字符集

您知道吗?

JavaScript 语句

JavaScript 语句

分号 ;

JavaScript 代码

JavaScript 代码块

JavaScript 语句标识符

对代码行进行换行

JavaScript 注释

JavaScript 注释

JavaScript 多行注释

使用注释来阻止执行

在行末使用注释

JavaScript 变量

就像代数那样

JavaScript 变量

JavaScript 数据类型

声明(创建) JavaScript 变量

一条语句,多个变量

Value = undefined

重新声明 JavaScript 变量

JavaScript 算数

使用 let 和 const (ES6)


JavaScript 教程

JavaScript 是 Web 的编程语言,所有现代的 HTML 页面都可以使用 JavaScript:

displayDate:显示时间

function:作用; 功能; 职能; 机能; 社交聚会; 典礼; 宴会; 函数; 子例行程序;起作用; 正常工作; 运转;

function displayDate():

document :文件; 公文; 文献; 证件; (计算机)文档;记录,记载(详情); 用文件证明(或证实);

getElementById:是指根据指定的 id 属性值得到对象。返回 id 属性值等于 sID 的第一个对象的引用。假如对应的为一组对象,则返回该组对象中的第一个。

getElement:获取指定的元素ID或者NAME;

button:    英[ˈbʌtn](机器的)按钮; 纽扣; 扣子; (尤指印有信息的)徽章;扣…的纽扣; 用纽扣扣上;

DEMO:为"demonstration"的缩写。DEMO的中文含意为“示范”、“展示”、“样片”、“样稿”、“原型”,常被用来称呼具有示范或展示功能及意味的事物。

onclick: 单击鼠标好;

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script>
function displayDate(){document.getElementById("demo").innerHTML=Date();
}
</script>
</head>
<body><h1>我的很好的 JavaScript 程序</h1>
<p id="demo">这为很好段落</p><button type="button" onclick="displayDate()">显示日期好</button></body>
</html>

JavaScript 简介


JavaScript 是互联网上最流行的脚本语言,这门语言可用于 HTML 和 web,更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。

您将学到什么

下面是您将在本教程中学到的主要内容。

JavaScript:直接写入 HTML 输出流

document.write:向文档中写入HTML表达式和JavaScript的代码。

document.write("<h1>这为很好的标题</h1>");
document.write("<p>这为很好的段落。</p>");
您只能在 HTML 输出中使用 document.write。如果您在文档加载后使用该方法,会覆盖整个文档。
​
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body><p>
JavaScript 能够直接写入 HTML 输出流中:
</p>
<script>
document.write("<h1>这为很好的标题</h1>");
document.write("<p>这为很好的段落。</p>");
</script>
<p>
您只能在 HTML 输出流中使用 <strong>document.write</strong>。
如果您在文档已加载后使用它(比如在函数中),会覆盖整个文档。
</p></body>
</html>​

JavaScript:对事件的反应

<button type="button" οnclick="alert('欢迎!')">点我!</button>

​
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body><h1>我的很好的 JavaScript</h1>
<p>
JavaScript 能够对事件作出反应。比如对按钮的点击:
</p>
<button type="button" onclick="alert('欢迎!')">点我!</button></body>
</html>​

alert() 函数在 JavaScript 中并不常用,但它对于代码测试非常方便。

onclick 事件只是您即将在本教程中学到的众多事件之一。

alert为HTML DOM 中用到的一种脚本语言,它的中文意思是“提醒”。它是JavaScript或VBscript脚本语言中窗口window对象的一个常用方法;其主要用法就是在你自己定义了一定的函数以后,通过执行相应的操作,所弹出对话框的语言。并且alert对话框通常用于一些对用户的提示信息。常见的为alert函数。

JavaScript:改变 HTML 内容

使用 JavaScript 来处理 HTML 内容是非常强大的功能。

x=document.getElementById("demo");  //查找元素
x.innerHTML="Hello JavaScript";    //改变内容
​
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body><h1>我的很好的 JavaScript</h1>
<p id="demo">
JavaScript 能改变 HTML 元素的内容。
</p>
<script>
function myFunction()
{x=document.getElementById("demo");  // 找到的元素x.innerHTML="Hello JavaScript!";    // 改变的内容
}
</script>
<button type="button" onclick="myFunction()">点击这里好</button></body>
</html>​

您会经常看到 document.getElementById("some id")。这个方法是 HTML DOM 中定义的。

DOM (Document Object Model)(文档对象模型)是用于访问 HTML 元素的正式 W3C 标准。

您将在本教程的多个章节中学到有关 HTML DOM 的知识。

JavaScript:改变 HTML 图像

本例会动态地改变 HTML <image> 的来源(src):

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body><script>
function changeImage()
{element=document.getElementById('myimage')if (element.src.match("bulbon")){element.src="/images/pic_bulboff.gif";}else{element.src="/images/pic_bulbon.gif";}
}
</script>
<img id="myimage" onclick="changeImage()" src="/images/pic_bulboff.gif" width="100" height="180">
<p>点击灯泡就可以打开或关闭这盏灯</p></body>
</html>

以上实例中代码 element.src.match("bulbon") 的作用意思是:检索 <img id="myimage" οnclick="changeImage()" src="/images/pic_bulboff.gif" width="100" height="180"> 里面 src 属性的值有没有包含 bulbon 这个字符串,如果存在字符串 bulbon,图片 src 更新为 bulboff.gif,若匹配不到 bulbon 字符串,src 则更新为 bulbon.gif

JavaScript 能够改变任意 HTML 元素的大多数属性,而不仅仅是图片。


JavaScript:改变 HTML 样式

改变 HTML 元素的样式,属于改变 HTML 属性的变种。

x=document.getElementById("demo")  //找到元素
x.style.color="#ff0000";           //改变样式
​
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body><h1>我的很好的 JavaScript</h1>
<p id="demo">
JavaScript 能改变 HTML 元素的样式。
</p>
<script>
function myFunction()
{x=document.getElementById("demo") // 找到的元素x.style.color="#ff0000";          // 改变的样式
}
</script>
<button type="button" onclick="myFunction()">点击这里好</button></body>
</html>​

JavaScript:验证输入

JavaScript 常用于验证用户的输入。

if isNaN(x) {alert("不为数字的");
}
​
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body><h1>我的很好的 JavaScript</h1>
<p>请输入数字。如果输入值不为数字,浏览器会弹出提示框。</p>
<input id="demo" type="text">
<script>
function myFunction()
{var x=document.getElementById("demo").value;if(x==""||isNaN(x)){alert("不为数字好");}
}
</script>
<button type="button" onclick="myFunction()">点击这里好</button></body>
</html>​

以上实例只是普通的验证,如果要在生产环境中使用,需要严格判断,如果输入的空格,或者连续空格 isNaN 是判别不出来的。可以添加正则来判断(后续章节会说明):

​
if(isNaN(x)||x.replace(/(^\s*)|(\s*$)/g,"")==""){alert("不为数字好");
}​
​
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body><h1>我的很好的 JavaScript</h1>
<p>请输入数字。如果输入值不为数字,浏览器会弹出提示框。</p>
<input id="demo" type="text">
<script>
function myFunction()
{var x=document.getElementById("demo").value;if(isNaN(x)||x.replace(/(^\s*)|(\s*$)/g,"")==""){alert("不为数字好");}
}
</script>
<button type="button" onclick="myFunction()">点击这里</button></body>
</html>​

下面为网页的笔记: 

关于上面切换图片的例子,用三目运算比较简洁。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body><script>
function changeImage(){var s = document.getElementById('myimage');s.src = s.src.match('bulboff')?"/images/pic_bulbon.gif":"/images/pic_bulboff.gif";
}
</script>
<img id="myimage" onclick="changeImage()" src="/images/pic_bulboff.gif" width="100" height="180">
<p>点击灯泡就可以打开或关闭这盏灯</p></body>
</html>

我让楼上的更简洁:

<script>
function changeImage(s){s.src = s.src.match('bulboff')?"/images/pic_bulbon.gif":"/images/pic_bulboff.gif";
}
</script>
<img id="myimage" onclick="changeImage(this)" src="/images/pic_bulboff.gif" width="100" height="180">
<p>点击灯泡就可以打开或关闭这盏灯</p>

还有比我更简洁的吗:

<img id="myimage" onclick="~function(e){e.src=e.src.match('bulboff')?'/images/pic_bulbon.gif':'/images/pic_bulboff.gif'}(this)" src="/images/pic_bulboff.gif" width="100" height="180">
<p>点击灯泡就可以打开或关闭这盏灯</p>

JavaScript 用法


HTML 中的 Javascript 脚本代码必须位于 <script> 与 </script> 标签之间。

Javascript 脚本代码可被放置在 HTML 页面的 <body> 和 <head> 部分中。


<script> 标签

如需在 HTML 页面中插入 JavaScript,请使用 <script> 标签。

<script> 和 </script> 会告诉 JavaScript 在何处开始和结束。

<script> 和 </script> 之间的代码行包含了 JavaScript:

​
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body><p>
JavaScript 能够直接写入 HTML 输出流中:
</p>
<script>
document.write("<h1>这为很好的标题</h1>");
document.write("<p>这为很好的段落。</p>");
</script>
<p>
您只能在 HTML 输出流中使用 <strong>document.write</strong>。
如果您在文档已加载后使用它(比如在函数中),会覆盖整个文档。
</p></body>
</html>​

JavaScript 函数和事件

上面例子中的 JavaScript 语句,会在页面加载时执行。

通常,我们需要在某个事件发生时执行代码,比如当用户点击按钮时。

如果我们把 JavaScript 代码放入函数中,就可以在事件发生时调用该函数。

您将在稍后的章节学到更多有关 JavaScript 函数和事件的知识。


在 <head> 或者 <body> 的JavaScript

您可以在 HTML 文档中放入不限数量的脚本。

脚本可位于 HTML 的 <body> 或 <head> 部分中,或者同时存在于两个部分中。

通常的做法是把函数放入 <head> 部分中,或者放在页面底部。这样就可以把它们安置到同一处位置,不会干扰页面的内容。


<head> 中的 JavaScript 函数

在本例中,我们把一个 JavaScript 函数放置到 HTML 页面的 <head> 部分。

该函数会在点击按钮时被调用:

​
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script>
function myFunction(){document.getElementById("demo").innerHTML="我的很好的 JavaScript 函数";
}
</script>
</head>
<body><h1>我的 Web 页面</h1>
<p id="demo">这个段落好。</p>
<button type="button" onclick="myFunction()">点击这里好</button></body>
</html>​

<body> 中的 JavaScript 函数

在本例中,我们把一个 JavaScript 函数放置到 HTML 页面的 <body> 部分。

该函数会在点击按钮时被调用:

​
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body><h1>我的这个Web 页面</h1>
<p id="demo">这个段落好。</p>
<button type="button" onclick="myFunction()">点击这里好</button>
<script>
function myFunction(){document.getElementById("demo").innerHTML="我的这样的 JavaScript 函数";
}
</script></body>
</html>​

外部的 JavaScript

也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。

外部 JavaScript 文件的文件扩展名是 .js。

如需使用外部文件,请在 <script> 标签的 "src" 属性中设置该 .js 文件:

你可以将脚本放置于 <head> 或者 <body>中,放在 <script> 标签中的脚本与外部引用的脚本运行效果完全一致。myScript.js 文件代码如下:

​
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body><h1>我的 Web 页面</h1>
<p id="demo">很好的段落。</p>
<button type="button" onclick="myFunction()">点击这里好</button>
<p><b>注释:</b>myFunction 保存在名为 "myScript.js" 的外部文件中。</p>
<script src="myScript.js"></script></body>
</html>​
​
function myFunction()
{document.getElementById("demo").innerHTML="我的很好的 JavaScript 函数";
}​
外部脚本不能包含 <script> 标签。

注意细节:

1、在标签中填写 onclick 事件调用函数时,不是 οnclick=函数名, 而是 οnclick=函数名+(),代码如下:

<script>
function myfunction(){document.getElementById("demo").innerHTML="onclick事件触发";
}
</script>
</head>
<body><h1 id="demo">很好的段落</h1><button onclick="myfunction()" type="button">来点击这里</button>
</body>

2、外部 javascript 文件不使用 <script> 标签,直接写 javascript 代码。

3、HTML 输出流中使用 document.write,相当于添加在原有html代码中添加一串html代码。而如果在文档加载后使用(如使用函数),会覆盖整个文档。

使用函数来执行document.write代码如下:

​
<script>
function myfunction(){document.write("使用函数来执行document.write,即在文档加载后再执行这个操作,会实现文档覆盖");
}
document.write("<h1>这为很好的标题</h1>");
document.write("<p>这为很好的段落。</p>");
</script>
<p>
您只能在 HTML 输出流中使用 <strong>document.write</strong>。
如果您在文档已加载后使用它(比如在函数中),会覆盖整个文档。
</p>
<button type="button" onclick="myfunction()">点击这里好</button>​

Chrome 浏览器中执行 JavaScript

本章节为大家介绍如何在 Chrome 浏览器上进行 JavaScript 代码的运行与调试。

Chrome 是由 Google 开发的免费网页浏览器,对于前端开发来说(尤其是调试代码)非常方便。

Chrome 官网地址:https://www.google.com/intl/zh-CN/chrome/。

我们在 Chrome 浏览器中可以通过按下 F12 按钮或者右击页面,选择"检查"来开启开发者工具。

JavaScript 输出


JavaScript 没有任何打印或者输出的函数。

JavaScript 显示数据

JavaScript 可以通过不同的方式来输出数据:

  • 使用 window.alert() 弹出警告框。
  • 使用 document.write() 方法将内容写到 HTML 文档中。
  • 使用 innerHTML 写入到 HTML 元素。
  • 使用 console.log() 写入到浏览器的控制台。

使用 window.alert()

你可以弹出警告框来显示数据:

​
<!DOCTYPE html>
<html>
<body><h1>我的很好的页面</h1>
<p>我的很好的段落。</p><script>
window.alert(6 + 7);
</script></body>
</html>​

操作 HTML 元素

如需从 JavaScript 访问某个 HTML 元素,您可以使用 document.getElementById(id) 方法。

请使用 "id" 属性来标识 HTML 元素,并 innerHTML 来获取或插入元素内容:

​
<!DOCTYPE html>
<html>
<body><h1>我的很好的 Web 页面</h1><p id="demo">我的很好的段落</p><script>
document.getElementById("demo").innerHTML = "段落已修改。";
</script></body>
</html>​

以上 JavaScript 语句(在 <script> 标签中)可以在 web 浏览器中执行:

document.getElementById("demo") 是使用 id 属性来查找 HTML 元素的 JavaScript 代码 。

innerHTML = "段落已修改。" 是用于修改元素的 HTML 内容(innerHTML)的 JavaScript 代码。

在本教程中

在大多数情况下,在本教程中,我们将使用上面描述的方法来输出:

上面的例子直接把 id="demo" 的 <p> 元素写到 HTML 文档输出中:


写到 HTML 文档

出于测试目的,您可以将JavaScript直接写在HTML 文档中:

​
<!DOCTYPE html>
<html>
<body><h1>我的很好的 Web 页面</h1><p>我的很好的段落。</p><script>
document.write(Date());
</script></body>
</html>​

请使用 document.write() 仅仅向文档输出写内容。

如果在文档已完成加载后执行 document.write,整个 HTML 页面将被覆盖。

<!DOCTYPE html>
<html>
<body><h1>我的很好的 Web 页面</h1><p>我的很好的段落。</p><button onclick="myFunction()">点我</button><script>
function myFunction() {document.write(Date());
}
</script></body>
</html>

写到控制台

如果您的浏览器支持调试,你可以使用 console.log() 方法在浏览器中显示 JavaScript 值。

浏览器中使用 F12 来启用调试模式, 在调试窗口中点击 "Console" 菜单。

<!DOCTYPE html>
<html>
<body><h1>我的很好的 Web 页面</h1><script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script></body>
</html>

您知道吗?

程序中调试是测试,查找及减少 bug(错误)的过程。

 以下为网友的笔记:

  • :console.log()的用处

主要是方便你调式javascript用的, 你可以看到你在页面中输出的内容。

相比alert他的优点是:

他能看到结构化的东西,如果是alert,弹出一个对象就是[object object],但是console能看到对象的内容。

console不会打断你页面的操作,如果用alert弹出来内容,那么页面就死了,但是console输出内容后你页面还可以正常操作。

console里面的内容非常丰富,你可以在控制台输入 console,然后就可看到:

  • :document.write是直接写入到页面的内容流,如果在写之前没有调用document.open, 浏览器会自动调用open。每次写完关闭之后重新调用该函数,会导致页面被重写。

innerHTML则是DOM页面元素的一个属性,代表该元素的html内容。你可以精确到某一个具体的元素来进行更改。如果想修改document的内容,则需要修改document.documentElement.innerElement。

innerHTML很多情况下都优于document.write,其原因在于其允许更精确的控制要刷新页面的那一个部分。

DOM 解释

您会经常看到 document.getElementById("id")。

这个方法是 HTML DOM 中定义的。

DOM (Document Object Model)(文档对象模型)是用于访问 HTML 元素的正式 W3C 标准。

格式<script>

那些老旧的实例可能会在 <script> 标签中使用 type="text/javascript"。

现在已经不必这样做了。

JavaScript 是所有现代浏览器以及 HTML5 中的默认脚本语言。

脚本位置

在 <head> 或者 <body> 的JavaScript

外部脚本不能包含 <script> 标签。

输出数据

window.alert() 弹出警告框。

document.write() 方法将内容写到 HTML 文档中。

innerHTML 写入到 HTML 元素。

console.log() 写入到浏览器的控制台。

输出内容

使用 document.write() 向文档输出写内容。

如果在文档已完成加载后执行 document.write,整个 HTML 页面将被覆盖

写到控制台(调试模式)

使用 console.log() 方法在浏览器中显示 JavaScript 值。

F12 启用调试模式, 在调试窗口中点击 "Console" 菜单。

  • window.alert 的补充:

window.alert(5+6) 与 window.alert("5+6") 输出的值是不一样的。window.alert(5+6) 会输出 11,而window.alert("5+6") 会输出 5+6。这是因为当用引号时会认为引号中是字符串,从而直接将引号中的内容打印出来。

  • document.getElementByle() 和 document.write() 的区别

document.write() 方法可以用在两个方面:

  • 1、 页面载入过程中用实时脚本创建页面内容,用来追加一些标签。
  • 2、清除当前页面内容(包括源文档的任何变量或值)。重新生成内容。

它的第 2 点和 document.getElementByle() 相区别。前者在清除全部页面内容,然后生成新的内容,即“覆盖文档"。


JavaScript 语法

JavaScript 为脚本语言。

它为轻量级,但功能强大的编程语言。


JavaScript 字面量

在编程语言中,一般固定值称为字面量,如 3.16。

数字(Number)字面量 可以是整数或者是小数,或者是科学计数(e)。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body><p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 356e5;
</script></body>
</html>

字符串(String)字面量 可以使用单引号或双引号:

"John Doe"'John Doe'

数组(Array)字面量 定义一个数组:

[30, 300, 1, 5, 26, 35]

对象(Object)字面量 定义一个对象:

{firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}

函数(Function)字面量 定义一个函数:

function myFunction(a, b) { return a * b;}

JavaScript 变量

在编程语言中,变量用于存储数据值。

JavaScript 使用关键字 var 来定义变量, 用等号来为变量赋值:

var x, lengthx = 5length = 6
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body><p id="demo"></p>
<script>
var length;
length = 6;
document.getElementById("demo").innerHTML = length;
</script></body>
</html>

变量可以通过变量名访问。在指令式语言中,变量通常是可变的。字面量为恒定的值。

JavaScript 操作符

JavaScript使用 算术运算符 来计算值:

​
(5 + 6) * 30​
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body><p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = (5 + 6) * 30;
</script></body>
</html>

JavaScript使用赋值运算符给变量赋值:

x = 5
y = 6
z = (x + y) * 30

JavaScript语言有多种类型的运算符:

类型 实例 描述
赋值,算术和位运算符 =  +  -  *  / 在 JS 运算符中描述
条件,比较及逻辑运算符 ==  != <  >  在 JS 比较运算符中描述

JavaScript 语句

在 HTML 中,JavaScript 语句用于向浏览器发出命令。

语句是用分号分隔:

x = 5 + 6;
y = x * 10;

JavaScript 关键字

JavaScript 关键字用于标识要执行的操作。

和其他任何编程语言一样,JavaScript 保留了一些关键字为自己所用。

var 关键字告诉浏览器创建一个新的变量:

var x = 5 + 6;
var y = x * 10;

JavaScript 同样保留了一些关键字,这些关键字在当前的语言版本中并没有使用,但在以后 JavaScript 扩展中会用到。

以下是 JavaScript 中最​​重要的保留关键字(按字母顺序):

abstract else instanceof super
boolean enum int switch
break export interface synchronized
byte extends let this
case false long throw
catch final native throws
char finally new transient
class float null true
const for package try
continue function private typeof
debugger goto protected var
default if public void
delete implements return volatile
do import short while
double in static with

JavaScript 注释

不是所有的 JavaScript 语句都是"命令"。双斜杠 // 后的内容将会被浏览器忽略:

// 我不会执行

JavaScript 数据类型

JavaScript 有多种数据类型:数字,字符串,数组,对象等等:

​
var length = 16;                                  // Number 通过数字字面量赋值
var points = x * 30;                              // Number 通过表达式字面量赋值
var lastName = "Johnson";                         // String 通过字符串字面量赋值
var cars = ["Saab", "Volvo", "BMW"];              // Array  通过数组字面量赋值
var person = {firstName:"John", lastName:"Doe"};  // Object 通过对象字面量赋值​

数据类型的概念

编程语言中,数据类型为非常重要的内容。

为了可以操作变量,了解数据类型的概念非常重要。

如果没有使用数据类型,以下实例将无法执行:

16 + "Volvo"

16 加上 "Volvo" 是如何计算呢? 以上会产生一个错误还是输出以下结果呢?

"16Volvo"

你可以在浏览器尝试执行以上代码查看效果。

在接下来的章节中你将学到更多关于数据类型的知识。

JavaScript 函数

JavaScript 语句可以写在函数内,函数可以重复引用:

引用一个函数 = 调用函数(执行函数内的语句)。

function myFunction(a, b) {return a * b;                                // 返回 a 乘以 b 的结果
}

JavaScript 字母大小写

JavaScript 对大小写是敏感的。

当编写 JavaScript 语句时,请留意是否关闭大小写切换键。

函数 getElementById 与 getElementbyID 是不同的。

同样,变量 myVariable 与 MyVariable 也是不同的。


JavaScript 字符集

JavaScript 使用 Unicode 字符集。

Unicode 覆盖了所有的字符,包含标点等字符。

如需进一步了解,请学习我们的 完整 Unicode 参考手册。

您知道吗?

JavaScript 中,常见的是驼峰法的命名规则,如 lastName (而不是lastname)。

 下面为网友的笔记:

三种变量命名规则:

var firstName='king';//小驼峰

var FirstName='queen';//大驼峰

var first_name='maizi';//下划线法

JavaScript是弱类型编程语言,定义变量都使用 var 定义,与 Java 这种强类型语言有区别.

在定义后可以通过 typeOf() 来获取JavaScript中变量的数据类型.

// Number 通过数字字面量赋值

// Number 通过表达式字面量赋值

// String 通过字符串字面量赋值

// Array  通过数组字面量赋值

// Object 通过对象字面量赋值

有个情况需要特别注意: typeof 不能用来判断是 Array 还是Object

var arr = [] typeof(arr) === 'object' // true

结果为 true

当然你可以使用其他方式来判断:

使用 isArray 方法

var cars=new Array();
cars[0]="Saab";
cars[1]="Volvo";
cars[2]="BMW";
// 判断是否支持该方法
if (Array.isArray) {if(Array.isArray(cars)) {document.write("该对象为一个数组。") ;}
}

使用 instanceof 操作符

var cars=new Array();
cars[0]="Saab";
cars[1]="Volvo";
cars[2]="BMW";if (cars instanceof Array) {document.write("该对象为一个数组。") ;
}

骆驼式法命名规则:

当变量名或函式名为由一个或多个单词连结在一起,而构成的唯一识别字时,第一个单词以小写字母开始;第二个单词的首字母大写或每一个单词的首字母都采用大写字母,例如:myFirstName、myLastName,这样的变量名看上去就像骆驼峰一样此起彼伏,故得名。

骆驼式命名法的命名规则可视为一种惯例,并无绝对与强制,为的是增加识别和可读性。

变量的命名方式:

1.匈牙利命名方式:变量名+对象描述 整数i 浮点fl 布尔b 字符串s 数组a 对象o 函数fn 正则re 例:iAge = 18;

2.驼峰命名:

  • (1)全部小写:单词与单词间全部用下划线分割
  • (2)大小写混合:每个单词的第一个字母大写,例:gongZuoNianXian

JavaScript 语句


JavaScript 语句向浏览器发出的命令。语句的作用是告诉浏览器该做什么。


JavaScript 语句

JavaScript 语句是发给浏览器的命令。

这些命令的作用是告诉浏览器要做的事情。

下面的 JavaScript 语句向 id="demo" 的 HTML 元素输出文本 "你好 Dolly" :

document.getElementById("demo").innerHTML = "你好 Dolly";
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body><h1>我的网页</h1>
<p id="demo">我的很好的段落。</p>
<script>
document.getElementById("demo").innerHTML = "你好 Dolly";
</script></body>
</html>

分号 ;

分号用于分隔 JavaScript 语句。

通常我们在每条可执行的语句结尾添加分号。

使用分号的另一用处是在一行中编写多条语句。

a = 5;
b = 6;
c = a + b;

以上实例也可以这么写:

a = 5; b = 6; c = a + b;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body><h1>我的网页</h1>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
a = 1;
b = 2;
c = a + b;
document.getElementById("demo1").innerHTML = c;
x = 1; y = 2; z = x + y;
document.getElementById("demo2").innerHTML = z;
</script></body>
</html>

您也可能看到不带有分号的案例。
在 JavaScript 中,用分号来结束语句是可选的。

JavaScript 代码

JavaScript 代码是 JavaScript 语句的序列。

浏览器按照编写顺序依次执行每条语句。

本例向网页输出一个标题和两个段落:

document.getElementById("demo").innerHTML="你好 Dolly";
document.getElementById("myDIV").innerHTML="你最近怎么样?";
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body><h1>我的 Web 页面好</h1>
<p id="demo">很好的段落。</p>
<div id="myDIV">很好哦 DIV。</div>
<script>
document.getElementById("demo").innerHTML="你好 Dolly";
document.getElementById("myDIV").innerHTML="你最近怎么样?";
</script></body>
</html>

JavaScript 代码块

JavaScript 可以分批地组合起来。

代码块以左花括号开始,以右花括号结束。

代码块的作用是一并地执行语句序列。

本例向网页输出一个标题和两个段落:

function myFunction()
{document.getElementById("demo").innerHTML="你好Dolly";document.getElementById("myDIV").innerHTML="你最近怎么样?";
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body><h1>我的 Web 页面</h1>
<p id="myPar">我很好的段落。</p>
<div id="myDiv">我很好div。</div>
<p>
<button type="button" onclick="myFunction()">点击这里好</button>
</p><p>
<button type="button" onclick="myFunction()">点击这里好</button>
</p>
<script>
function myFunction(){document.getElementById("myPar").innerHTML="你好世界!";document.getElementById("myDiv").innerHTML="你最近怎么样?";
}
</script>
<p>当您点击上面的按钮时,两个元素会改变。</p></body>
</html>

JavaScript 语句标识符

JavaScript 语句通常以一个 语句标识符 为开始,并执行该语句。

语句标识符是保留关键字不能作为变量名使用。

下表列出了 JavaScript 语句标识符 (关键字) :

语句 描述
break 用于跳出循环。
catch 语句块,在 try 语句块执行出错时执行 catch 语句块。
continue 跳过循环中的一个迭代。
do ... while 执行一个语句块,在条件语句为 true 时继续执行该语句块。
for 在条件语句为 true 时,可以将代码块执行指定的次数。
for ... in 用于遍历数组或者对象的属性(对数组或者对象的属性进行循环操作)。
function 定义一个函数
if ... else 用于基于不同的条件来执行不同的动作。
return 退出函数
switch 用于基于不同的条件来执行不同的动作。
throw 抛出(生成)错误 。
try 实现错误处理,与 catch 一同使用。
var 声明一个变量。
while 当条件语句为 true 时,执行语句块。

对代码行进行换行

您可以在文本字符串中使用反斜杠对代码行进行换行。下面的例子会正确地显示:

document.write("你好 \
世界!");

不过,您不能像这样折行:

document.write \
("你好世界!");

知识点:JavaScript 是脚本语言,浏览器会在读取代码时,逐行地执行脚本代码。而对于传统编程来说,会在执行前对所有代码进行编译。

JavaScript 注释


JavaScript 注释可用于提高代码的可读性。


JavaScript 注释

JavaScript 不会执行注释。

我们可以添加注释来对 JavaScript 进行解释,或者提高代码的可读性。

单行注释以 // 开头。

本例用单行注释来解释代码:

​
​
// 输出标题好:
document.getElementById("myH1").innerHTML="欢迎来到我的主页";
// 输出段落好:
document.getElementById("myP").innerHTML="这是我的第一个段落。";​​
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body><h1 id="myH1"></h1>
<p id="myP"></p>
<script>
// 输出标题好:
document.getElementById("myH1").innerHTML="Welcome to my Homepage";
// 输出段落好:
document.getElementById("myP").innerHTML="This is my first paragraph.";
</script>
<p><b>注释:</b>注释不会被执行。</p><p><b>注释:</b>注释不会被执行。</p></body>
</html>

JavaScript 多行注释

多行注释以 /* 开始,以 */ 结尾。

下面的例子使用多行注释来解释代码:

/*
下面的这些代码会输出
很好的标题和好段落
并将代表主页的开始
*/
document.getElementById("myH1").innerHTML="欢迎来到我的主页";
document.getElementById("myP").innerHTML="这是我很好的段落。";

使用注释来阻止执行

在下面的例子中,注释用于阻止其中一条代码行的执行(可用于调试):

// document.getElementById("myH1").innerHTML="欢迎来到我的主页";
document.getElementById("myP").innerHTML="这为我很好的段落。";

在下面的例子中,注释用于阻止代码块的执行(可用于调试):

/*
document.getElementById("myH1").innerHTML="欢迎来到我的主页";
document.getElementById("myP").innerHTML="这是我很好的段落。";

在行末使用注释

在下面的例子中,我们把注释放到代码行的结尾处:

var x=5;    // 声明 x 并把 5 赋值给它
var y=x+2;  // 声明 y 并把 x+2 赋值给它

应用注释符号验证浏览器是否支持 JavaScript 脚本功能

如果用户不能确定浏览器是否支持JavaScript脚本,那么可以应用HTML提供的注释符号进行验证。HTML注释符号是以 <-- 开始以 --> 结束的。如果在此注释符号内编写 JavaScrip t脚本,对于不支持 JavaScript 的浏览器,将会把编写的 JavaScript 脚本作为注释处理。

使用 JavaScript 脚本在页面中输出一个字符串,将 JavaScript 脚本编写在 HTML 注释中,如果浏览器支持 JavaScript 将输出此字符串,如果不支持将不输出此字符串,代码如下:

<script>
<!--
document.write("您的浏览器支持JavaScript脚本!");
//-->
</script>

注意:注释行结尾处的两条斜杠 // 是 JavaScript 注释符号。这可以避免 JavaScript 执行 --> 标签。

JavaScript 变量


变量是用于存储信息的"容器"。

var x=13;
var y=17;
var z=x+y;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body><script>
var x=13;
var y=17;
var z=x+y;
document.write(x + "<br>");
document.write(y + "<br>");
document.write(z + "<br>");
</script></body>
</html>

就像代数那样

x=13
y=17
z=x+y

在代数中,我们使用字母(比如 x)来保存值(比如 13)。

通过上面的表达式 z=x+y,我们能够计算出 z 的值为 30。

在 JavaScript 中,这些字母被称为变量。

您可以把变量看做存储数据的容器。

JavaScript 变量

与代数一样,JavaScript 变量可用于存放值(比如 x=5)和表达式(比如 z=x+y)。

变量可以使用短名称(比如 x 和 y),也可以使用描述性更好的名称(比如 age, sum, totalvolume)。

  • 变量必须以字母开头
  • 变量也能以 $ 和 _ 符号开头(不过我们不推荐这么做)
  • 变量名称对大小写敏感(y 和 Y 是不同的变量)

JavaScript 语句和 JavaScript 变量都对大小写敏感。

JavaScript 数据类型

JavaScript 变量还能保存其他数据类型,比如文本值 (name="Bill Gates")。

在 JavaScript 中,类似 "Bill Gates" 这样一条文本被称为字符串。

JavaScript 变量有很多种类型,但是现在,我们只关注数字和字符串。

当您向变量分配文本值时,应该用双引号或单引号包围这个值。

当您向变量赋的值是数值时,不要使用引号。如果您用引号包围数值,该值会被作为文本来处理。

​
var pi=3.35;
// 如果你熟悉 ES6,pi 可以使用 const 关键字,代表一个常量
// const pi = 3.35;
var person="John Doe";
var answer='Yes I am!';​
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body><script>
var pi=3.35;
var name="Bill Gates";
var answer='Yes I am!';
document.write(pi + "<br>");
document.write(name + "<br>");
document.write(answer + "<br>");
</script></body>
</html>

声明(创建) JavaScript 变量

在 JavaScript 中创建变量通常称为"声明"变量。

我们使用 var 关键词来声明变量:

var carname;

变量声明之后,该变量是空的(它没有值)。

如需向变量赋值,请使用等号:

carname="Volvo";

不过,您也可以在声明变量时对其赋值:

var carname="Volvo";

在下面的例子中,我们创建了名为 carname 的变量,并向其赋值 "Volvo",然后把它放入 id="demo" 的 HTML 段落中:

var carname="Volvo";
document.getElementById("demo").innerHTML=carname;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body><p>点击这里来创建变量,并显示结果。</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction(){var carname="Volvo";document.getElementById("demo").innerHTML=carname;
}
</script></body>
</html>

一个好的编程习惯是,在代码开始处,统一对需要的变量进行声明。

一条语句,多个变量

您可以在一条语句中声明很多变量。该语句以 var 开头,并使用逗号分隔变量即可:

var lastname="Doe", age=30, job="carpenter";

声明也可横跨多行:

var lastname="Doe",
age=30,
job="carpenter";

一条语句中声明的多个变量不可以同时赋同一个值:

var x,y,z=1;

x,y 为 undefined, z 为 1。

Value = undefined

在计算机程序中,经常会声明无值的变量。未使用值来声明的变量,其值实际上是 undefined。

在执行过以下语句后,变量 carname 的值将是 undefined:

var carname;


重新声明 JavaScript 变量

如果重新声明 JavaScript 变量,该变量的值不会丢失:

在以下两条语句执行后,变量 carname 的值依然是 "Volvo":

var carname="Volvo";
var carname;

JavaScript 算数

您可以通过 JavaScript 变量来做算数,使用的是 = 和 + 这类运算符:

y=5;

x=y+3;

使用 let 和 const (ES6)

在 2015 年以前,我们使用 var 关键字来声明 JavaScript 变量。

在 2015 后的 JavaScript 版本 (ES6) 允许我们使用 const 关键字来定义一个常量,使用 let 关键字定义的限定范围内作用域的变量。e.

更多 const 和 let 内容可以参阅:JavaScript let 和 const。

JavaScript 数据类型好


值类型(基本类型):字符串(String)、数字(Number)、布尔(Boolean)、空(Null)、未定义(Undefined)、Symbol。

引用数据类型(对象类型):对象(Object)、数组(Array)、函数(Function),还有两个特殊的对象:正则(RegExp)和日期(Date)。

JavaScript 拥有动态类型

JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型:

var x;               // x 为 undefined
var x = 6;           // 现在 x 为数字
var x = "John";      // 现在 x 为字符串

变量的数据类型可以使用 typeof 操作符来查看:

typeof "John"                // 返回 string
typeof 3.35                 // 返回 number
typeof false                 // 返回 boolean
typeof [1,3,5,6]             // 返回 object
typeof {name:'John', age:35} // 返回 object
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body><p> typeof 操作符返回变量或表达式的类型。</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = typeof "john" + "<br>" + typeof 3.35 + "<br>" +typeof false + "<br>" +typeof [3,5,6,9] + "<br>" +typeof {name:'john', age:35};
</script></body>
</html>

JavaScript 字符串

字符串是存储字符(比如 "Bill Gates")的变量。

字符串可以是引号中的任意文本。您可以使用单引号或双引号:

var carname="Volvo XC60";
var carname='Volvo XC60';

您可以在字符串中使用引号,只要不匹配包围字符串的引号即可:

var answer="It's alright";
var answer="He is called 'Johnny'";
var answer='He is called "Johnny"';

JavaScript 数字

JavaScript 只有一种数字类型。数字可以带小数点,也可以不带:

var x1=35.00;      //使用小数点来写
var x2=35;         //不使用小数点来写

极大或极小的数字可以通过科学(指数)计数法来书写:

var y=356e6;      // 356000000
var z=356e-6;     // 0.000356
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body><script>
var x1=35.00;
var x2=35;
var y=356e6;
var z=356e-6;
document.write(x1 + "<br>")
document.write(x2 + "<br>")
document.write(y + "<br>")
document.write(z + "<br>")
</script></body>
</html>

JavaScript 布尔

布尔(逻辑)只能有两个值:true 或 false。

var x=true;
var y=false;

布尔常用在条件测试中。您将在本教程稍后的章节中学到更多关于条件测试的知识。

JavaScript 数组

下面的代码创建名为 cars 的数组:

var cars=new Array();
cars[0]="Saab";
cars[1]="Volvo";
cars[2]="BMW";

或者 (condensed array):

var cars=new Array("Saab","Volvo","BMW");

或者 (literal array):

var cars=["Saab","Volvo","BMW"];
<!DOCTYPE html>
<html>
<body><script>
var i;
var cars = new Array();
cars[0] = "Saab";
cars[1] = "Volvo";
cars[2] = "BMW";for (i=0;i<cars.length;i++)
{
document.write(cars[i] + "<br>");
}
</script></body>
</html>

数组下标是基于零的,所以第一个项目是 [0],第二个是 [1],以此类推。

JavaScript 对象

对象由花括号分隔。在括号内部,对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔:

var person={firstname:"John", lastname:"Doe", id:5566};

上面例子中的对象 (person) 有三个属性:firstname、lastname 以及 id。

空格和折行无关紧要。声明可横跨多行:

var person={
firstname : "John",
lastname  : "Doe",
id        :  5566
};

对象属性有两种寻址方式:

name=person.lastname;
name=person["lastname"];
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body><script>
var person=
{firstname : "John",lastname  : "Doe",id        :  5566
};
document.write(person.lastname + "<br>");
document.write(person["lastname"] + "<br>");
</script></body>
</html>

Undefined 和 Null

Undefined 这个值表示变量不含有值。

可以通过将变量的值设置为 null 来清空变量。

cars=null;
person=null;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body><script>
var person;
var car="Volvo";
document.write(person + "<br>");
document.write(car + "<br>");
var car=null
document.write(car + "<br>");
</script></body>
</html>

声明变量类型

当您声明新变量时,可以使用关键词 "new" 来声明其类型:

var carname=new String;
var x=      new Number;
var y=      new Boolean;
var cars=   new Array;
var person= new Object;

JavaScript 变量均为对象。当您声明一个变量时,就创建了一个新的对象。

JavaScript 教程学习中相关推荐

  1. 廖雪峰javascript教程学习记录

    $1.数据类型和变量 1.不区分整数和浮点数,统一用Number 2.字符串String 3.布尔值 注意: (1) 实际上,JavaScript允许对任意数据类型做比较; 要特别注意相等运算符==. ...

  2. JavaScript 深入学习教程

    博主个人教程地址 JavaScript教程地址 前言 这篇文章就是介绍一下JavaScript的课程内容 具体请看视频教程 想要学习的话 此后不再更新这个文本版本教程 前端基础部分都不在更新文字版本 ...

  3. Javascript模拟c#中arraylist操作(学习分享)

    最近在看javascript,在<javascript高级编程>中也学到了不少东西.但是在这里要感谢博客园的"汤姆大叔" 的无私奉献,他的关于javascript相关博 ...

  4. 【JavaScript 教程】ES6 中的 Promise对象 详解

    [JavaScript 教程]ES6 中的 Promise对象 详解 1.Promise对象含义 promise是异步编程的一种解决方法. 所谓promise,简单说是一个容器,里面保存着某个未来才会 ...

  5. node.js htttp文件服务器 遇到目录时搜索目录内默认html页面 廖雪峰javascript教程node.js中http部分练习题

    廖雪峰javascript教程node.js中http部分最后的练习题: https://www.liaoxuefeng.com/wiki/1022910821149312/1023025830950 ...

  6. 【干货】深度学习中的线性代数---简明教程

    作者 | Vihar Kurama 编译 | 专知 整理 | Mandy 线性代数对于理解机器学习和深度学习内部原理至关重要,线性代数是有关连续值的数学.许多计算机科学家在此方面经验不足,传统上计算机 ...

  7. python教程400集笔记,Python学习中的笔记--集合相关,python笔记--集合

    Python学习中的笔记--集合相关,python笔记--集合 集合的基本操作 一.可修改的集合set 创建集合 var = set() var = {'a','b','c','d'} 成员检测 va ...

  8. OpenCV教程(14)问题思考---- 深度学习中为什么普遍使用BGR而不用RGB?

    Table of Contents 1. 发现问题 现象: 2. 提出问题 问题:为什么使用BRG描述图像,而非RGB通道? 3. 合理假设 4. 求解 stackoverflow解答 1. 发现问题 ...

  9. JavaScript教程之快速入门

    ##JavaScript教程 #js简介 javaScript一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型.它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛 ...

最新文章

  1. 开源贡献 计算_如何克服恐惧并为开源做贡献
  2. (三)SpringBoot之配置文件详解:Properties和YAML
  3. linux系统常见操作,Linux系统基本操作
  4. python 字符串删除重复_leetcode No.1047 删除字符串中的所有相邻重复项
  5. 国内首家,携程试点每周两天居家办公反响热烈,76%的员工主动报名
  6. php 到处excel 乱码,php 导出excel 乱码怎么办
  7. 液压系统管路流速推荐表_液压系统中油管尺寸的选择
  8. 大数据专业考研书_2019年清华大学自动化系大数据工程专业考研经验分享
  9. 许晓斌_Maven实战(九)---打包的技巧
  10. 鸿蒙系统 微内核 sel4,引入成熟的微内核技术改良reactos,如sel4
  11. matlab二阶非线性微分方程求解,二阶非线性常微分方程的打靶法.ppt
  12. 丙丙-2个月面试20家大厂的知识点总结和建议(答案)
  13. Python使用FaKer模拟数据!!!
  14. 饿了么第一届信息安全峰会
  15. 博图V14完美程序案例;整套完整程序,硬件包含:变频器、ET 200、交换机、RFID、PN、HMI等硬件
  16. JS判断变量是不是数组的5种方法
  17. python+vue+django旅游景点酒店线路套餐管理系统
  18. pc全屏网页布局小技巧
  19. 由“机器人”到“人机器”人工智能发展史
  20. matplotlib切换主题风格

热门文章

  1. linux系统怎么结束程序,如何在 Linux 系统中结束进程或是中止程序
  2. UEditor的配置和使用(单独图片与文件上传)
  3. 【AXI】解读AXI协议事务属性(Transaction Attributes)
  4. JAVA设计模式--访问者模式
  5. 微信支付报标价金额需要一个合法的64位有符号整数错误
  6. 四大行与BATJ的互联网金融
  7. nullptr VS NULL
  8. 2021-08-15 个人记录
  9. 无人机图像语义分割数据集(aeroscapes数据集)使用方法
  10. HTML页面生成图片并下载(html2canvas)