关于JavaScript前端开发的相关内容

JavaScript前端开发

一、基本语法
1.1变量：
变量是用于存储信息的"容器"。
实例：
var x=5;
var y=6;
var z=x+y;
JavaScript 变量
与代数一样，JavaScript 变量可用于存放值（比如 x=5）和表达式（比如 z=x+y）。
变量可以使用短名称（比如 x 和 y），也可以使用描述性更好的名称（比如 age, sum, totalvolume）。
变量必须以字母开头
变量也能以 $ 和 _ 符号开头（不过我们不推荐这么做）
变量名称对大小写敏感（y 和 Y 是不同的变量）
声明（创建） JavaScript 变量
在 JavaScript 中创建变量通常称为"声明"变量。
我们使用 var 关键词来声明变量：
var carname;
变量声明之后，该变量是空的（它没有值）。
如需向变量赋值，请使用等号：carname=“Volvo”;
不过，您也可以在声明变量时对其赋值：var carname=“Volvo”;
在下面的例子中，我们创建了名为 carname 的变量，并向其赋值 “Volvo”，然后把它放入 id=“demo” 的 HTML 段落中：
实例：
var carname=“Volvo”;
document.getElementById(“demo”).innerHTML=carname;
1.2数据类型：
JavaScript 数据类型：
值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、Symbol。
引用数据类型：对象(Object)、数组(Array)、函数(Function)。
注：Symbol 是 ES6 引入了一种新的原始数据类型，表示独一无二的值。
JavaScript 拥有动态类型：
JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型：
实例：
var x;
// x 为 undefined
var x = 5;
// 现在 x 为数字
var x = “John”; // 现在 x 为字符串
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”’;
1.3运算符：
JavaScript 运算符
运算符 = 用于赋值。
运算符 + 用于加值。
运算符 = 用于给 JavaScript 变量赋值。
算术运算符 + 用于把值加起来。
实例：
指定变量值，并将值相加：
y=5;
z=2;
x=y+z;
在以上语句执行后，x 的值是：7
关于JavaScript前端开发的相关内容

二、流程控制
JavaScript if…Else 语句
条件语句用于基于不同的条件来执行不同的动作。
条件语句：
通常在写代码时，您总是需要为不同的决定来执行不同的动作。您可以在代码中使用条件语句来完成该任务。
在 JavaScript 中，我们可使用以下条件语句：
if 语句 - 只有当指定条件为 true 时，使用该语句来执行代码
if…else 语句 - 当条件为 true 时执行代码，当条件为 false 时执行其他代码
if…else if…else 语句- 使用该语句来选择多个代码块之一来执行
switch 语句 - 使用该语句来选择多个代码块之一来执行
if 语句：
只有当指定条件为 true 时，该语句才会执行代码。
语法：
if (condition)
{
当条件为 true 时执行的代码
}
请使用小写的 if。使用大写字母（IF）会生成 JavaScript 错误！
实例：
当时间小于 20:00 时，生成问候 “Good day”：
if (time<20)
{
x=“Good day”;
}
x 的结果是：Good day
if…else 语句：
请使用 if…else 语句在条件为 true 时执行代码，在条件为 false 时执行其他代码。
语法：
if (condition)
{
当条件为 true 时执行的代码
}
else
{
当条件不为 true 时执行的代码
}
实例：
当时间小于 20:00 时，生成问候 “Good day”，否则生成问候 “Good evening”。
if (time<20)
{
x=“Good day”;
}
else
{
x=“Good evening”;
}
x 的结果是：Good day
JavaScript switch 语句：
switch 语句用于基于不同的条件来执行不同的动作。
JavaScript switch 语句
请使用 switch 语句来选择要执行的多个代码块之一。
语法：
switch(n)
{
case 1:
执行代码块 1
break;
case 2:
执行代码块 2
break;
default:
与 case 1 和 case 2 不同时执行的代码
}
工作原理：首先设置表达式 n（通常是一个变量）。随后表达式的值会与结构中的每个 case 的值做比较。如果存在匹配，则与该 case 关联的代码块会被执行。请使用 break 来阻止代码自动地向下一个 case 运行。
实例：
显示今天的星期名称。请注意 Sunday=0, Monday=1, Tuesday=2, 等等：
var d=new Date().getDay();
switch (d)
{
case 0:x=“今天是星期日”;
break;
case 1:x=“今天是星期一”;
break;
case 2:x=“今天是星期二”;
break;
case 3:x=“今天是星期三”;
break;
case 4:x=“今天是星期四”;
break;
case 5:x=“今天是星期五”;
break;
case 6:x=“今天是星期六”;
break;
}
x 的运行结果：今天是星期日
JavaScript for 循环：
循环可以将代码块执行指定的次数。
JavaScript 循环
如果您希望一遍又一遍地运行相同的代码，并且每次的值都不同，那么使用循环是很方便的。
我们可以这样输出数组的值：
一般写法：
document.write(cars[0] + “
”);
document.write(cars1 + “
”);
document.write(cars2 + “
”);
document.write(cars3 + “
”);
document.write(cars4 + “
”);
document.write(cars[5] + “
”);
使用for循环
for (var i=0;i<cars.length;i++)
{
document.write(cars[i] + “
”);
}
不同类型的循环：
JavaScript 支持不同类型的循环：
for - 循环代码块一定的次数
for/in - 循环遍历对象的属性
while - 当指定的条件为 true 时循环指定的代码块
do/while - 同样当指定的条件为 true 时循环指定的代码块
For 循环
for 循环是您在希望创建循环时常会用到的工具。
下面是 for 循环的语法：
for (语句
1; 语句 2; 语句 3)
{
被执行的代码块
}
语句 1 （代码块）开始前执行
语句 2 定义运行循环（代码块）的条件
语句 3 在循环（代码块）已被执行之后执行
实例：
for (var i=0; i<5; i++)
{
x=x + "该数字为 " + i + “
”;
}
三、函数
3.1函数的定义与调用
JavaScript 函数
函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。
实例：

测试实例点我调用带参数的函数在调用函数时，您可以向其传递值，这些值被称为参数。这些参数可以在函数中使用。您可以发送任意多的参数，由逗号 (,) 分隔： myFunction(argument1,argument2) 当您声明函数时，请把参数作为变量来声明： function myFunction(var1,var2) { 代码 } 变量和参数必须以一致的顺序出现。第一个变量就是第一个被传递的参数的给定的值，以此类推。带有返回值的函数有时，我们会希望函数将值返回调用它的地方。通过使用 return 语句就可以实现。在使用 return 语句时，函数会停止执行，并返回指定的值。语法 function myFunction() { var x=5; return x; } 上面的函数会返回值 5。注意：整个 JavaScript 并不会停止执行，仅仅是函数。JavaScript 将继续执行代码，从调用函数的地方。函数调用将被返回值取代： var myVar=myFunction(); myVar 变量的值是 5，也就是函数 "myFunction()" 所返回的值。即使不把它保存为变量，您也可以使用返回值： document.getElementById("demo").innerHTML=myFunction(); "demo" 元素的 innerHTML 将成为 5，也就是函数 "myFunction()" 所返回的值。您可以使返回值基于传递到函数中的参数： 3.2变量的作用域 JavaScript 作用域作用域可访问变量的集合。 JavaScript 作用域在 JavaScript 中, 对象和函数同样也是变量。在 JavaScript 中, 作用域为可访问变量，对象，函数的集合。 JavaScript 函数作用域: 作用域在函数内修改。 JavaScript 局部作用域变量在函数内声明，变量为局部作用域。局部变量：只能在函数内部访问。实例： // 此处不能调用 carName 变量 function myFunction() { var carName = "Volvo"; // 函数内可调用 carName 变量 } 因为局部变量只作用于函数内，所以不同的函数可以使用相同名称的变量。局部变量在函数开始执行时创建，函数执行完后局部变量会自动销毁。 JavaScript 全局变量：变量在函数外定义，即为全局变量。全局变量有全局作用域: 网页中所有脚本和函数均可使用。实例： var carName = " Volvo"; // 此处可调用 carName 变量 function myFunction() { // 函数内可调用 carName 变量 } 如果变量在函数内没有声明（没有使用 var 关键字），该变量为全局变量。以下实例中 carName 在函数内，但是为全局变量。实例： // 此处可调用 carName 变量 function myFunction() { carName = "Volvo"; // 此处可调用 carName 变量 } **四、对象** ![在这里插入图片描述](https://img-blog.****img.cn/20190324190619738.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDUyOTY2NA==,size_16,color_FFFFFF,t_70) 所有汽车都有这些属性，但是每款车的属性都不尽相同。所有汽车都拥有这些方法，但是它们被执行的时间都不尽相同。 JavaScript 对象在 JavaScript中，几乎所有的事物都是对象。在JavaScript 中，对象是非常重要的，当你理解了对象，就可以了解 JavaScript 。你已经学习了 JavaScript 变量的赋值。以下代码为变量 car 设置值为 "Fiat" : var car = "Fiat"; 对象也是一个变量，但对象可以包含多个值（多个变量）。 var car = {type:"Fiat", model:500, color:"white"}; 在以上实例中，3 个值 ("Fiat", 500, "white") 赋予变量 car。在以上实例中，3 个变量 (type, model, color) 赋予变量 car。 JavaScript 对象是变量的容器。 **4.1对象定义** 你可以使用字符来定义和创建 JavaScript 对象: 实例： var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}; 定义 JavaScript 对象可以跨越多行，空格跟换行不是必须的：实例： var person = { firstName:"John", lastName:"Doe", age:50, eyeColor:"blue" }; **4.2对象属性** 可以说 "JavaScript 对象是变量的容器"。但是，我们通常认为 "JavaScript 对象是键值对的容器"。键值对通常写法为 name : value (键与值以冒号分割)。键值对在 JavaScript 对象通常称为对象属性。 JavaScript 对象是属性变量的容器。对象键值对的写法类似于： PHP 中的关联数组 Python 中的字典 C 语言中的哈希表 Java 中的哈希映射 Ruby 和 Perl 中的哈希表访问对象属性你可以通过两种方式访问对象属性: 实例 1： person.lastName; 实例 2： person["lastName"]; **4.3对象方法** 对象的方法定义了一个函数，并作为对象的属性存储。对象方法通过添加 () 调用 (作为一个函数)。该实例访问了 person 对象的 fullName() 方法: 如果你要访问 person 对象的 fullName 属性，它将作为一个定义函数的字符串返回：实例： name = person.fullName; 访问对象方法：你可以使用以下语法创建对象方法： methodName : function() { code lines } 你可以使用以下语法访问对象方法： objectName.methodName() 通常 fullName() 是作为 person 对象的一个方法， fullName 是作为一个属性。有多种方式可以创建，使用和修改 JavaScript 对象。同样也有多种方式用来创建，使用和修改属性和方法。在随后的教程中，你将学习到更多关于对象的知识。 **4.4JavaScript 错误 - throw、try 和 catch** try 语句测试代码块的错误。 catch 语句处理错误。 throw 语句创建自定义错误。 finally 语句在 try 和 catch 语句之后，无论是否有触发异常，该语句都会执行。 **JavaScript 错误** 当 JavaScript 引擎执行 JavaScript 代码时，会发生各种错误。可能是语法错误，通常是程序员造成的编码错误或错别字。可能是拼写错误或语言中缺少的功能（可能由于浏览器差异）。可能是由于来自服务器或用户的错误输出而导致的错误。当然，也可能是由于许多其他不可预知的因素。 **JavaScript 抛出（throw）错误** 当错误发生时，当事情出问题时，JavaScript 引擎通常会停止，并生成一个错误消息。描述这种情况的技术术语是：JavaScript 将抛出一个错误。 **JavaScript try 和 catch** try 语句允许我们定义在执行时进行错误测试的代码块。 catch 语句允许我们定义当 try 代码块发生错误时，所执行的代码块。 JavaScript 语句 try 和 catch 是成对出现的。语法： try { ... //异常的抛出 } catch(e) { ... //异常的捕获与处理 } finally { ... //结束处理 } **Throw 语句** throw 语句允许我们创建自定义错误。正确的技术术语是：创建或抛出异常（exception）。如果把 throw 与 try 和 catch 一起使用，那么您能够控制程序流，并生成自定义的错误消息。语法： throw exception 异常可以是 JavaScript 字符串、数字、逻辑值或对象。实例：本例检测输入变量的值。如果值是错误的，会抛出一个异常（错误）。catch 会捕捉到这个错误，并显示一段自定义的错误消息：实例： function myFunction() { var message, x; message = document.getElementById("message"); message.innerHTML = ""; x = document.getElementById("demo").value; try { if(x == "") throw "值为空"; if(isNaN(x)) throw "不是数字"; x = Number(x); if(x < 5) throw "太小"; if(x > 10) throw "太大"; } catch(err) { message.innerHTML = "错误: " + err; } } **4.5JavaScript 调试** 在编写 JavaScript 时，如果没有调试工具将是一件很痛苦的事情。 JavaScript 调试没有调试工具是很难去编写 JavaScript 程序的。你的代码可能包含语法错误，逻辑错误，如果没有调试工具，这些错误比较难于发现。通常，如果 JavaScript 出现错误，是不会有提示信息，这样你就无法找到代码错误的位置。通常，你在编写一个新的 JavaScript 代码过程中都会发生错误。 JavaScript 调试工具在程序代码中寻找错误叫做代码调试。调试很难，但幸运的是，很多浏览器都内置了调试工具。内置的调试工具可以开始或关闭，严重的错误信息会发送给用户。有了调试工具，我们就可以设置断点 (代码停止执行的位置), 且可以在代码执行时检测变量。浏览器启用调试工具一般是按下 F12 键，并在调试菜单中选择 "Console" 。 console.log() 方法如果浏览器支持调试，你可以使用 console.log() 方法在调试窗口上打印 JavaScript 值：实例： a = 5; b = 6; c = a + b; console.log(c); 主要浏览器的调试工具通常，浏览器启用调试工具一般是按下 F12 键，并在调试菜单中选择 "Console" 。各浏览器的步骤如下: Chrome 浏览器打开浏览器。在菜单中选择 "更多工具"。在 "更多工具" 中选择 "开发者工具"。最后，选择 Console。 ![在这里插入图片描述](https://img-blog.****img.cn/20190324192447117.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDUyOTY2NA==,size_16,color_FFFFFF,t_70) 或者你可以右击鼠标选择 "检查"，如下图： ![在这里插入图片描述](https://img-blog.****img.cn/20190324192546111.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDUyOTY2NA==,size_16,color_FFFFFF,t_70) Firefox 浏览器打开浏览器。右击鼠标，选择 "查看元素"。 ![在这里插入图片描述](https://img-blog.****img.cn/2019032419274146.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDUyOTY2NA==,size_16,color_FFFFFF,t_70) Safari 打开浏览器。右击鼠标，选择检查元素。在底部弹出的窗口中选择"控制台"。 ![在这里插入图片描述](https://img-blog.****img.cn/20190324192850789.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDUyOTY2NA==,size_16,color_FFFFFF,t_70) Internet Explorer 浏览器。打开浏览器。在菜单中选择工具。在工具中选择开发者工具。最后，选择 Console。 ![在这里插入图片描述](https://img-blog.****img.cn/20190324192955423.png) Opera 打开浏览器。点击左上角，选择"开发者工具",选择"WEB检查器"。 ![在这里插入图片描述](https://img-blog.****img.cn/20190324193041454.png) 更简单的方式是：右击鼠标，选择"查看元素" ![在这里插入图片描述](https://img-blog.****img.cn/20190324193107111.png)

新的改变

我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客：

全新的界面设计 ，将会带来全新的写作体验；
在创作中心设置你喜爱的代码高亮样式，Markdown 将代码片显示选择的高亮样式 进行展示；
增加了 图片拖拽 功能，你可以将本地的图片直接拖拽到编辑区域直接展示；
全新的 KaTeX数学公式 语法；
增加了支持甘特图的mermaid语法¹ 功能；
增加了 多屏幕编辑 Markdown文章功能；
增加了 焦点写作模式、预览模式、简洁写作模式、左右区域同步滚轮设置 等功能，功能按钮位于编辑区域与预览区域中间；
增加了 检查列表 功能。

功能快捷键

撤销：Ctrl/Command + Z
重做：Ctrl/Command + Y
加粗：Ctrl/Command + B
斜体：Ctrl/Command + I
标题：Ctrl/Command + Shift + H
无序列表：Ctrl/Command + Shift + U
有序列表：Ctrl/Command + Shift + O
检查列表：Ctrl/Command + Shift + C
插入代码：Ctrl/Command + Shift + K
插入链接：Ctrl/Command + Shift + L
插入图片：Ctrl/Command + Shift + G

合理的创建标题，有助于目录的生成

直接输入1次#，并按下space后，将生成1级标题。
输入2次#，并按下space后，将生成2级标题。
以此类推，我们支持6级标题。有助于使用TOC语法后生成一个完美的目录。

如何改变文本的样式

强调文本 强调文本

加粗文本 加粗文本

标记文本

~~删除文本~~

引用文本

H₂O is是液体。

2¹⁰ 运算结果是 1024.

插入链接与图片

链接: link.

图片: 关于JavaScript前端开发的相关内容

带尺寸的图片: 关于JavaScript前端开发的相关内容

当然，我们为了让用户更加便捷，我们增加了图片拖拽功能。

如何插入一段漂亮的代码片

去博客设置页面，选择一款你喜欢的代码片高亮样式，下面展示同样高亮的 代码片.

// An highlighted block
var foo = 'bar';

生成一个适合你的列表

项目
- 项目
  - 项目

项目1
项目2
项目3

计划任务
完成任务

创建一个表格

一个简单的表格是这么创建的：

项目	Value
电脑	$1600
手机	$12
导管	$1

设定内容居中、居左、居右

使用:---------:居中
使用:----------居左
使用----------:居右

第一列	第二列	第三列
第一列文本居中	第二列文本居右	第三列文本居左

SmartyPants

SmartyPants将ASCII标点字符转换为“智能”印刷标点HTML实体。例如：

TYPE	ASCII	HTML
Single backticks	`'Isn't this fun?'`	‘Isn’t this fun?’
Quotes	`"Isn't this fun?"`	“Isn’t this fun?”
Dashes	`-- is en-dash, --- is em-dash`	– is en-dash, — is em-dash

创建一个自定义列表

Markdown: Text-to-HTML conversion tool
Authors: John; Luke

如何创建一个注脚

一个具有注脚的文本。²

注释也是必不可少的

Markdown将文本转换为 HTML。

KaTeX数学公式

您可以使用渲染LaTeX数学表达式 KaTeX:

Gamma公式展示 $\Gamma(n) = (n-1)!\quad\forall n\in\mathbb N$ 是通过欧拉积分

$\Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt\,.$

你可以找到更多关于的信息 LaTeX 数学表达式here.

新的甘特图功能，丰富你的文章

关于 甘特图 语法，参考这儿,

UML 图表

可以使用UML图表进行渲染。 Mermaid. 例如下面产生的一个序列图：:

这将产生一个流程图。:

关于 Mermaid 语法，参考这儿,

FLowchart流程图

我们依旧会支持flowchart的流程图：

关于 Flowchart流程图 语法，参考这儿.

导出与导入

导出

如果你想尝试使用此编辑器, 你可以在此篇文章任意编辑。当你完成了一篇文章的写作, 在上方工具栏找到 文章导出 ，生成一个.md文件或者.html文件进行本地保存。

导入

如果你想加载一篇你写过的.md文件或者.html文件，在上方工具栏可以选择导入功能进行对应扩展名的文件导入，
继续你的创作。

mermaid语法说明 ↩︎
注脚的解释 ↩︎