FreeCodeCamp-技术文档页
1.FreeCodeCamp-通过构建一组彩色笔来学习 CSS 颜色2.FreeCodeCamp-通过编写咖啡店菜单学习CSS3.FreeCodeCamp-通过编写注册表单学习 HTML 表单4.FreeCodeCamp-通过创作罗斯科绘画学习 CSS 盒子模型5.FreeCodeCamp-通过创建照片集来学习 CSS 弹性盒子6.FreeCodeCamp-通过建立营养标签来学习排版7.FreeCodeCamp-通过编写小测验学习无障碍8.FreeCodeCamp-创建一副毕加索绘画来学习中级 CSS9.FreeCodeCamp-通过创建一架钢琴来学习响应式网页设计
10.FreeCodeCamp-技术文档页
11.FreeCodeCamp-通过建立城市轮廓学习 CSS 变量12.FreeCodeCamp-通过创建杂志学习 CSS 网格布局13.FreeCodeCamp-通过构建摩天轮学习 CSS 动画14.FreeCodeCamp-通过构建企鹅来学习 CSS 变换
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=divice-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>技术文档</title>
</head>
<body>
<nav id=navbar>
<header>JS 文档</header>
<ul>
<li><a class="nav-link" href="#Introduction">介绍</a></li>
<li><a class="nav-link" href="#What_you_should_already_know">你应该知道的</a></li>
<li><a class="nav-link" href="#JavaScript_and_Java">JavaScript和Java</a></li>
<li><a class="nav-link" href="#Hello_world">Hello world</a></li>
<li><a class="nav-link" href="#Variables">变量</a></li>
<li><a class="nav-link" href="#Declaring_variables">声明变量</a></li>
<li><a class="nav-link" href="#Variable_scope">可变范围</a></li>
<li><a class="nav-link" href="#Global_variables">全局变量</a></li>
<li><a class="nav-link" href="#Constants">常量</a></li>
<li><a class="nav-link" href="#Data_types">数据类型</a></li>
<li><a class="nav-link" href="#if...else_statement">if...else声明</a></li>
<li><a class="nav-link" href="#while_statement">while声明</a></li>
<li><a class="nav-link" href="#Function_declarations">函数声明</a></li>
<li><a class="nav-link" href="#Reference">参考</a></li>
</ul>
</nav>
<main id="main-doc">
<section class="main-section" id="Introduction">
<header>介绍</header>
<article>
<p>JavaScript 是一种跨平台、面向对象的脚本语言。 它是一种小巧轻便的语言。 在主机环境（例如 Web 浏览器）内，JavaScript 可以连接到其环境的对象以提供对它们的编程控制。</p>
<p>JavaScript 包含对象的标准库，例如 Array、Date 和 Math，以及一组核心语言元素，例如运算符、控制结构和语句。 核心 JavaScript 可以通过添加额外的对象来扩展以用于各种目的； 例如：</p>
<ul>
<li>客户端 JavaScript 通过提供对象来控制浏览器及其文档对象模型 (DOM) 来扩展核心语言。 例如，客户端扩展允许应用程序将元素放置在 HTML 表单上并响应用户事件，例如鼠标单击、表单输入和页面导航。</li>
<li>服务器端 JavaScript 通过提供与在服务器上运行 JavaScript 相关的对象来扩展核心语言。 例如，服务器端扩展允许应用程序与数据库通信，提供从一个应用程序调用到另一个应用程序的信息连续性，或在服务器上执行文件操作。</li>
</ul>
</article>
</section>
<section class="main-section" id="What_you_should_already_know">
<header>你应该知道的</header>
<article>
<p>本指南假定您具有以下基本背景：</p>
<ul>
<li>对 Internet 和万维网 (WWW) 的一般了解。</li>
<li>良好的超文本标记语言 (HTML) 应用知识。</li>
<li>一些编程经验。 如果您不熟悉编程，请尝试主页上链接的有关 JavaScript 的教程之一。</li>
</ul>
</article>
</section>
<section class="main-section" id="JavaScript_and_Java">
<header>JavaScript和Java</header>
<article>
<p>JavaScript 和 Java 在某些方面很相似，但在其他方面却根本不同。 JavaScript 语言类似于 Java，但没有 Java 的静态类型和强类型检查。 JavaScript 遵循大多数 Java 表达式语法、命名约定和基本的控制流结构，这就是它从 LiveScript 重命名为 JavaScript 的原因。</p>
<p>与 Java 的由声明构建的类的编译时系统相比，JavaScript 支持基于代表数字、布尔值和字符串值的少量数据类型的运行时系统。 JavaScript 有一个基于原型的对象模型，而不是更常见的基于类的对象模型。 基于原型的模型提供动态继承； 也就是说，继承的内容可能因个别对象而异。 JavaScript 还支持没有任何特殊声明要求的函数。 函数可以是对象的属性，作为松散类型的方法执行。</p>
<p>与 Java 相比，JavaScript 是一种形式非常自由的语言。 您不必声明所有变量、类和方法。 您不必关心方法是公共的、私有的还是受保护的，也不必实现接口。 变量、参数和函数返回类型没有明确类型化。</p>
</article>
</section>
<section class="main-section" id="Hello_world">
<header>Hello_world</header>
<article>
要开始编写 JavaScript，请打开 Scratchpad 并编写您的第一个“Hello world”JavaScript 代码：
<code>function greetMe(yourName) { alert("Hello " + yourName); }
greetMe("World");</code>
选择 pad 中的代码，然后按 Ctrl+R 以在浏览器中观看它的展开！
</article>
</section>
<section class="main-section" id="Variables">
<header>变量</header>
<article>
<p>您使用变量作为应用程序中值的符号名称。 变量的名称，称为标识符，符合一定的规则。</p>
<p>JavaScript 标识符必须以字母、下划线 (_) 或美元符号 ($) 开头； 后续字符也可以是数字 (0-9)。 因为 JavaScript 区分大小写，字母包括字符“A”到“Z”（大写）和字符“a”到“z”（小写）。</p>
<p>您可以在标识符中使用 ISO 8859-1 或 Unicode 字母，例如 å 和 ü。 您还可以使用 Unicode 转义序列作为标识符中的字符。 合法名称的一些示例是 Number_hits、temp99 和 _name。</p>
</article>
</section>
<section class="main-section" id="Declaring_variables">
<header>声明变量</header>
<article>
您可以通过三种方式声明变量：
<p>使用关键字 var。 例如，<code>var x = 42</code>此语法可用于声明局部变量和全局变量。</p>
<p>通过简单地为其分配一个值。 例如，<code>x = 42</code>这总是声明一个全局变量。 它会生成严格的 JavaScript 警告。 你不应该使用这个变体。</p>
<p>使用关键字 let。 例如，<code>let y = 13</code>此语法可用于声明块作用域局部变量。 请参阅下面的变量范围。</p>
</article>
</section>
<section class="main-section" id="Variable_scope">
<header>可变范围</header>
<article>
<p>当您在任何函数之外声明一个变量时，它被称为全局变量，因为它可用于当前文档中的任何其他代码。 当您在函数内声明一个变量时，它被称为局部变量，因为它仅在该函数内可用。</p>
<p>ECMAScript 2015 之前的 JavaScript 没有块语句作用域； 相反，在块中声明的变量对于块所在的函数（或全局范围）是局部的。 例如，以下代码将记录 5，因为 x 的范围是声明 x 的函数（或全局上下文），而不是块，在本例中是 if 语句。</p>
<code>if (true) { var x = 5; } console.log(x); // 5</code>
<p>当使用 ECMAScript 2015 中引入的 let 声明时，此行为会发生变化。</p>
<code>if (true) { let y = 5; } console.log(y); // ReferenceError: y is
not defined</code>
</article>
</section>
<section class="main-section" id="Global_variables">
<header>全局变量</header>
<article>
<p>全局变量实际上是全局对象的属性。 在网页中，全局对象是 window，因此您可以使用 window.variable 语法设置和访问全局变量。</p>
<p>因此，您可以通过指定窗口或框架名称从另一个窗口或框架访问在一个窗口或框架中声明的全局变量。 例如，如果在文档中声明了一个名为 phoneNumber 的变量，您可以从 iframe 中将此变量作为 parent.phoneNumber 引用。</p>
</article>
</section>
<section class="main-section" id="Constants">
<header>常量</header>
<article>
<p>您可以使用 const 关键字创建一个只读的命名常量。 常量标识符的语法与变量标识符相同：它必须以字母、下划线或美元符号开头，并且可以包含字母、数字或下划线字符。</p>
<code>const PI = 3.14;</code>
<p>常量不能通过赋值改变值，也不能在脚本运行时重新声明。 它必须被初始化为一个值。</p>
<p>常量的作用域规则与 let 块作用域变量的作用域规则相同。 如果省略 const 关键字，则假定标识符代表一个变量。</p>
<p>您不能在同一范围内声明与函数或变量同名的常量。 例如：</p>
<code>// THIS WILL CAUSE AN ERROR function f() {}; const f = 5; // THIS
WILL CAUSE AN ERROR ALSO function f() { const g = 5; var g;
//statements }</code>
<p>However, object attributes are not protected, so the following statement is executed without problems.</p>
<code>const MY_OBJECT = {"key": "value"}; MY_OBJECT.key =
"otherValue";</code>
</article>
</section>
<section class="main-section" id="Data_types">
<header>数据类型</header>
<article>
<p>最新的 ECMAScript 标准定义了七种数据类型：</p>
<ul>
<li>六种原始数据类型：</li>
<ul>
<li>Boolean, true 和 false</li>null， 表示空值的特殊关键字。 因为 JavaScript 区分大小写，所以 null 与 Null、NULL 或任何其他变体不同。</li>
<li>undefined， 未定义的</li>
<li>Number， 42 或者 3.14159.</li>
<li>String， "Howdy"</li>
<li>Symbol (new in ECMAScript 2015)， 实例唯一且不可变的数据类型。</li>
</ul>
<li>Object</li>
</ul>
<p>尽管这些数据类型的数量相对较少，但它们使您能够在应用程序中执行有用的功能。 对象和函数是语言中的其他基本元素。 您可以将对象视为值的命名容器，将函数视为您的应用程序可以执行的过程。</p>
</article>
</section>
<section class="main-section" id="if...else_statement">
<header>if...else声明</header>
<article>
<p>如果逻辑条件为真，则使用 if 语句执行语句。 如果条件为假，则使用可选的 else 子句执行语句。 if 语句如下所示：</p>
<code>if (condition) { statement_1; } else { statement_2; }</code>
<p>condition 可以是任何计算结果为 true 或 false 的表达式。 请参阅布尔值以了解什么计算结果为 true 和 false。 如果 condition 的计算结果为真，则执行 statement_1； 否则，statement_2 被执行。 statement_1 和 statement_2 可以是任何语句，包括进一步嵌套的 if 语句。</p>
<p>您还可以使用 else if 组合语句以按顺序测试多个条件，如下所示：</p>
<code>if (condition_1) { statement_1; } else if (condition_2) {
statement_2; } else if (condition_n) { statement_n; } else {
statement_last; }</code>
<p>在多个条件的情况下，只有第一个评估为真的逻辑条件将被执行。 要执行多个语句，请将它们分组在块语句 ({ ... }) 中。 通常，最好始终使用块语句，尤其是在嵌套 if 语句时：</p>
<code>if (condition) { statement_1_runs_if_condition_is_true;
statement_2_runs_if_condition_is_true; } else {
statement_3_runs_if_condition_is_false;
statement_4_runs_if_condition_is_false; }</code>
<p>建议不要在条件表达式中使用简单的赋值，因为在浏览代码时赋值可能会与相等混淆。 例如，不要使用以下代码：</p>
<code>if (x = y) { /* statements here */ }</code>
<p>如果您需要在条件表达式中使用赋值，通常的做法是在赋值周围加上额外的括号。 例如：</p>
<code>if ((x = y)) { /* statements here */ }</code>
</article>
</section>
<section class="main-section" id="while_statement">
<header>while声明</header>
<article>
<p>只要指定条件的计算结果为真，while 语句就会执行其语句。 while 语句如下所示：</p>
<code>while (condition) statement</code>
<p>如果条件变为假，循环内的语句将停止执行，控制权将传递给循环之后的语句。</p>
<p>条件测试发生在循环中的语句执行之前。 如果条件返回 true，则执行语句并再次测试条件。 如果条件返回 false，则执行停止并将控制权传递给 while 之后的语句。</p>
<p>要执行多个语句，请使用块语句 ({ ... }) 对这些语句进行分组。</p>
例如：
<p>只要 n 小于三，以下 while 循环就会迭代：</p>
<code>var n = 0; var x = 0; while (n < 3) { n++; x += n; }</code>
<p>在每次迭代中，循环递增 n 并将该值添加到 x。 因此，x 和 n 取以下值：</p>
<ul>
<li>第一次通过后：n = 1 和 x = 1</li>
<li>第二遍之后：n = 2 和 x = 3</li>
<li>第三遍之后：n = 3 和 x = 6</li>
</ul>
<p>完成第三遍后，条件 n < 3 不再成立，因此循环终止。</p>
</article>
</section>
<section class="main-section" id="Function_declarations">
<header>函数声明</header>
<article>函数定义（也称为函数声明或函数语句）由函数关键字组成，后跟：
<ul>
<li>函数的名称</li>
<li>函数的参数列表，括在括号中并用逗号分隔</li>
<li>定义函数的 JavaScript 语句，括在大括号 { } 中</li>
</ul><p>例如，下面的代码定义了一个名为 square 的简单函数：</p>
<code>function square(number) { return number * number; }</code>
<p>函数 square 接受一个参数，称为 number。 该函数由一个语句组成，该语句表示返回函数的参数（即数字）乘以自身。 return 语句指定函数返回的值。</p>
<code>函数 square 接受一个参数，称为 number。 该函数由一个语句组成，该语句表示返回函数的参数（即数字）乘以自身。 return 语句指定函数返回的值。</code>
<p>原始参数（例如数字）按值传递给函数； 该值被传递给函数，但如果函数更改了参数的值，则此更改不会反映在全局或调用函数中。</p>
</article>
</section>
<section class="main-section" id="Reference">
<header>参考</header>
<ul>
<li>本页所有文档均取自 <a href="#" target="_blank">MDN</a></li>
</ul>
</section>
</main>
</body>
</html>
styles.css
html, body{
min-width: 290px;
color: #4d4e53;
background-color: #ffffff;
font-family: 'Open Sans', Arial, sans-serif;
line-height: 1.5;
}
#navbar{
position: fixed;
min-width: 290px;
top: 0px;
left: 0px;
width: 300px;
height: 100%;
border-right: solid;
border-color: rgba(0, 22, 22, 0.4);
}
header{
color: black;
margin: 10px;
text-align: center;
font-size: 1.8em;
font-weight: thin;
}
#main-doc header{
text-align: left;
margin: 0px;
}
#navbar ul{
height: 88%;
padding: 0;
overflow-y: auto;
overflow-x: hidden;
}
#navbar li{
color: #4d4e53;
border-top: 1px solid;
list-style: none;
position: relative;
width: 100%;
}
#navbar a{
display: block;
padding: 10px 30px;
color: #4d4e53;
text-decoration: none;
cursor: pointer;
}
#main-doc{
position: absolute;
margin-left: 310px;
padding: 20px;
margin-bottom: 110px;
}
section article{
color: #4d4e53;
margin: 15px;
font-size: 0.96em;
}
section li{
margin: 15px 0px 0px 20px;
}
code{
display: block;
text-align: left;
white-space: pre-line;
position: relative;
word-break: normal;
word-wrap: normal;
line-height: 2;
background-color: #f7f7f7;
padding: 15px;
margin: 10px;
border-radius: 5px;
}
@media only screen and (max-width: 815px) {
/* For mobile phones: */
#navbar ul {
border: 1px solid;
height: 207px;
}
#navbar {
background-color: white;
position: absolute;
top: 0;
padding: 0;
margin: 0;
width: 100%;
max-height: 275px;
border: none;
z-index: 1;
border-bottom: 2px solid;
}
#main-doc {
position: relative;
margin-left: 0px;
margin-top: 270px;
}
}
@media only screen and (max-width: 400px) {
#main-doc {
margin-left: -10px;
}
code {
margin-left: -20px;
width: 100%;
padding: 15px;
padding-left: 10px;
padding-right: 45px;
min-width: 233px;
}
}
合集:
FreeCodeCamp
分类:
FreeCodeCamp
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 全程不用写代码，我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· .NET10 - 预览版1新功能体验（一）