<?xml version="1.0" encoding="UTF-8"?>
<rss xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/"
    xmlns:atom="http://www.w3.org/2005/Atom" xmlns:media="http://search.yahoo.com/mrss/" version="2.0">
    <channel>
        
        <title>
            <![CDATA[ 编程学习 - freeCodeCamp.org ]]>
        </title>
        <description>
            <![CDATA[ freeCodeCamp 是一个免费学习编程的开发者社区，涵盖 Python、HTML、CSS、React、Vue、BootStrap、JSON 教程等，还有活跃的技术论坛和丰富的社区活动，在你学习编程和找工作时为你提供建议和帮助。 ]]>
        </description>
        <link>https://www.freecodecamp.org/chinese/news/</link>
        <image>
            <url>https://cdn.freecodecamp.org/universal/favicons/favicon.png</url>
            <title>
                <![CDATA[ 编程学习 - freeCodeCamp.org ]]>
            </title>
            <link>https://www.freecodecamp.org/chinese/news/</link>
        </image>
        <generator>Eleventy</generator>
        <lastBuildDate>Mon, 11 May 2026 15:33:10 +0000</lastBuildDate>
        <atom:link href="https://www.freecodecamp.org/chinese/news/tag/learning-to-code/rss.xml" rel="self" type="application/rss+xml" />
        <ttl>60</ttl>
        
            <item>
                <title>
                    <![CDATA[ 如何学习编程——我希望自己在开始学习编程时拥有的指南 ]]>
                </title>
                <description>
                    <![CDATA[ 仅仅只是想到学习编程这个概念就让人畏惧，代码非常神秘，仿佛是一种与机器交流而不是让人去理解的技术。 大多数人采用的学习编程的方式是挑一个流行的编程语言，然后一头扎进去。具体的表现形式可以是选一门线上的编程课程、教学项目，或者随机购买一个编程话题相关的书籍。 极少的准开发者会从一个路线图开始，路线图相当于编码世界的一张鸟瞰图，梳理了一些相关的编程概念、语言以及几乎 100% 的开发者每天都会使用的工具。 在这篇文章中，我将提出一种路线图。我梳理出来了专业开发者用来编写代码、合作和创建专业项目的 14 个步骤（每一个步骤探讨了一个关键的概念、语言或者工具）。 我精心挑选出来的这 14 个步骤是基于我长达 20 年的个人学习代码的经历。 我花了这么长时间才使自己在开发的时候感觉自在，一部分原因是我曾经只专注于具体的话题，而没有从更广阔的角度来看整个编码世界。 本文的每一个步骤所讨论的“代码重点”是你开始编程之旅起码要知道的概念。 我想在正式开始之前最后强调一点，你肯定不会因为这篇文章成为编程专家，这篇文章的本意也并非如此。这篇文章的目的是为了让你知道有这些内容，以及这些内容背后 ]]>
                </description>
                <link>https://www.freecodecamp.org/chinese/news/how-to-learn-programming/</link>
                <guid isPermaLink="false">62bd9b338ada24082688b30d</guid>
                
                    <category>
                        <![CDATA[ 编程学习 ]]>
                    </category>
                
                <dc:creator>
                    <![CDATA[ PapayaHUANG ]]>
                </dc:creator>
                <pubDate>Thu, 30 Jun 2022 10:00:00 +0000</pubDate>
                <media:content url="https://chinese.freecodecamp.org/news/content/images/2022/06/pexels-lukas-317377.jpeg" medium="image" />
                <content:encoded>
                    <![CDATA[ <p data-test-label="translation-intro">
        <strong>原文：</strong> <a href="https://www.freecodecamp.org/news/how-to-learn-programming/" target="_blank" rel="noopener noreferrer" data-test-label="original-article-link">How to Learn Programming – The Guide I Wish I Had When I Started Learning to Code</a>
      </p><!--kg-card-begin: markdown--><p>仅仅只是想到学习编程这个概念就让人畏惧，<strong>代码</strong>非常神秘，仿佛是一种与机器交流而不是让人去理解的技术。</p>
<p>大多数人采用的学习编程的方式是挑一个流行的编程语言，然后一头扎进去。具体的表现形式可以是选一门线上的编程课程、教学项目，或者随机购买一个编程话题相关的书籍。</p>
<p>极少的准开发者会从一个路线图开始，路线图相当于编码世界的一张鸟瞰图，梳理了一些相关的编程概念、语言以及几乎 100% 的开发者每天都会使用的工具。</p>
<p>在这篇文章中，我将提出一种路线图。我梳理出来了专业开发者用来编写代码、合作和创建专业项目的 14 个步骤（每一个步骤探讨了一个关键的概念、语言或者工具）。</p>
<p>我精心挑选出来的这 14 个步骤是基于我长达 20 年的个人学习代码的经历。</p>
<p>我花了这么长时间才使自己在开发的时候感觉自在，一部分原因是我曾经只专注于具体的话题，而没有从更广阔的角度来看整个编码世界。</p>
<p>本文的每一个步骤所讨论的“代码重点”是你开始编程之旅<strong>起码要知道</strong>的概念。</p>
<p>我想在正式开始之前最后强调一点，你肯定不会因为这篇文章成为编程专家，这篇文章的本意也并非如此。这篇文章的目的是为了让你知道有这些内容，以及这些内容背后的运行逻辑，给你继续前行打下基础。</p>
<h2 id="14">给初级开发者的 14 步路线图</h2>
<ol>
<li><a href="#1-familiarize-yourself-with-computer-architecture-and-data-basics">熟悉计算机系统结构和数据基础</a></li>
<li><a href="#2-learn-how-programming-languages-work">了解编程语言的运作</a></li>
<li><a href="#3-understand-how-the-internet-works">理解互联网的运作</a></li>
<li><a href="#4-practice-some-command-line-basics">练习基本的命令行</a></li>
<li><a href="#5-build-up-your-text-editor-skills-with-vim">使用 Vim 来培养你的文本编辑器技能</a></li>
<li><a href="#6-take-up-some-html">学习一点 HTML</a></li>
<li><a href="#7-tackle-some-css">处理一些 CSS</a></li>
<li><a href="#8-start-programming-with-javascript">由 JavaScript 开始编程</a></li>
<li><a href="#9-continue-programming-with-python">使用 Python 继续编程</a></li>
<li><a href="#10-further-your-knowledge-with-java">进一步了解 Java</a></li>
<li><a href="#11-track-your-code-using-git">使用 Git 跟踪代码</a></li>
<li><a href="#12-store-data-using-databases-and-sql">使用数据库和 SQL 存储数据</a></li>
<li><a href="#13-read-about-web-frameworks-and-mvc">阅读 Web 框架和 MVC</a></li>
<li><a href="#14-play-with-package-managers">玩转包管理工具</a></li>
</ol>
<p>话不多说，让我们开始吧！</p>
<h2 id="1-familiarize-yourself-with-computer-architecture-and-data-basics"> 1) 熟悉计算机系统结构和数据基础</h2>
<p>现代编程语言美妙的原因之一是在创建精美的应用的时候，它们帮助我们免去幕后繁琐的硬件细节。（大部分情况是这样）</p>
<p>这种能力被称为<strong>抽象</strong>——使用高级工具（这里指编程语言）的能力，可以简化理解、缩小所需掌握技能范围。</p>
<p>但这并不意味着了解机器本身一无是处。至少可以帮助你在工作场所和同事畅谈高CPU和内存使用率。</p>
<p>以下是计算机基础的基本知识：</p>
<p>计算机最重要的部分位于<strong>微芯片</strong>（也称为<strong>集成电路</strong>）。</p>
<p>微芯片依靠<strong>晶体管</strong>的电子元件来发挥作用。晶体管是微小的电子开关，在给定时间内处于关（0）或者开（1）的状态。单个微芯片嵌入了上百万甚至术十亿的晶体管。</p>
<p>大部分现代计算机有一个叫做**中央处理器（CPU）**的微芯片。你可以把这个当作计算机的大脑。它处理大部分数字运算和逻辑任务。</p>
<p>每一个 CPU 有一个<strong>指令集</strong>，是供 CPU 理解的二进制（0 和 1）指令的合集。幸运的是，作为软件开发人员，我们并不需要担心自己不理解这些指令，这就是抽象的力量。</p>
<p>如果说 CPU 是大脑的逻辑中心的话，那么我们还需要一个存储器来短期或长期地存储记忆。</p>
<p>计算机拥有<strong>随机存取存储器（RAM）</strong> 作为“工作存储器“（或者叫做短期存储器）来存储程序运行时使用的信息。</p>
<p>RAM 是由一组<strong>内存地址</strong>组成，可用于存储数据位。在像C语言这样的历史久远的计算机语言中，程序员确实可以使用<strong>指针</strong>来直接处理内存地址，但是这在现代语言中很少见了。</p>
<p>最后这个组件你肯定熟悉——硬盘驱动。硬盘相当于人类大脑的长期记忆。硬盘是存储数据的内部和外部设备，即便关机了，这些数据仍然存在。</p>
<p>在我们正式介绍编程语言细节之前，让我们花点时间了解一下数据，<strong>数据</strong>这个词到底代表了什么？</p>
<p>从表面来看，我们会想到文本文件、图像、视频、电子邮件、文件和文件夹。这些都是我们每天在计算机上创建和存储的高级数据结构。</p>
<p>但位于底层的计算机芯片（CPU 或者 RAM 芯片）并不知道什么是“图片”或者“视频”。</p>
<p>从芯片的角度来看，这些数据结构被作为一长串 0 和 1 存储了起来，这些 0 和 1 被称为<strong>位</strong>。</p>
<p>位通常以一组八位的形式存储，称为一个<strong>字节</strong>。 一个字节就是一个简单的八位序列，例如 <code>00000001</code>、 <code>01100110</code> 或 <code>00001111</code>。这样表示信息的方法被称为 <strong>二进制表示法</strong>。</p>
<h2 id="2-learn-how-programming-languages-work"> 2) 了解编程语言的运作</h2>
<p>在上一章节，我们提到了大部分计算机以依赖于 CPU，CPU 可以理解一串特定的 0 和 1。</p>
<p>因此，理论上我们可以编写一串由 0 和 1 组成的代码告诉 CPU 要做什么。以二进制形式编写的指令被称为<strong>机器码</strong>。</p>
<p>写这样的代码听上去相当可怕，反正我没试过，因为我使用高级编程语言如：JavaScript、Python 和 Java。</p>
<p><strong>高级编程语言</strong>提供一组人类可以读取的关键字、声明和语法规则，使得人们可以更加容易地学习、改 bug 和使用。</p>
<p>编程语言提供一座桥梁连接人类大脑和计算机大脑（CPU）。</p>
<p>我们编写的代码最终会转换为 CPU 理解的二进制指令（机器码）。</p>
<p>根据你选择的语言，我们可以认为你的代码要么被<strong>编译</strong>，要么被<strong>解释</strong>为可以被CPU执行的机器码。大多数编程语言都包含一个<strong>编译器</strong>或者<strong>解释器</strong>来执行这个翻译步骤。</p>
<p>举几个例子——JavaScript 和 Python 是解释型语言，然而 Java 是编译型语言。一个语言是否为编译型或者解释型语言（或者两者结合）会对开发者的编写便利性、处理错误的方法和程序的性能造成影响。这里我们不赘述。</p>
<h2 id="3-understand-how-the-internet-works"> 3) 理解互联网的运作</h2>
<p>不论你渴望开发什么类型的程序，你都会遇到计算机之间相互交流的场景，这个场景就发生在互联网。</p>
<p>互联网是一个连接了全球计算机的集合。也可以被认为是一个全球性的网络。互联网内部的每一台计算机都遵循特定的规则来达成彼此间交流，对于计算机来说，“交流”就是交换数据。</p>
<p>如我们在之前章节介绍的那样，所有数据类型（网页、图像、视频、电子邮件等）都可以被 0 和 1 来表示。</p>
<p>因此，你可以把互联网当作一个巨大的计算机集合，这些计算机之间相互传输 0 和 1，数据以 0 和 1 的形式存储，互联网就是一个数字对话媒介。</p>
<p>如果互联网是一个巨大的对话场所，那让我们来定义一下对话的参与者。</p>
<p>首先，让我们引入一个类比：大部分人类的对话需要至少两个参与者。一个发起对话，一个回应对话，假设这两个人都在场并且有空。</p>
<p>而从互联网的角度来看，发起对话的计算机被称为<strong>客户端</strong>，回应或者应答对话的计算机被称为<strong>服务器</strong>。</p>
<p>假设你打开了浏览器，并且搜索了 “www.google.com” 。 在这个场景内，你的浏览器就是客户端，更宽泛地讲，你可以把你正在使用的计算机当作客户端。</p>
<p>再抽象一点，<strong>你</strong>就是客户端，因为你开启了对话。是你在搜索框输入了 “www.google.com” ，并点击了回车键，你的电脑才向某台谷歌的计算器发出对话请求。</p>
<p>谷歌的计算机就被称为服务器。它通过发送被请求的数据，并且在数据在你的浏览器显示来回应。然后嗒哒！你眼前出现谷歌的网页。所有互联网数据传输都使用这种客户端/服务器关系。</p>
<h2 id="4-practice-some-command-line-basic">4) 练习基本的命令行</h2>
<p>乍一看，<strong>命令行</strong>可能让人生畏。命令行往往出现在电影的画面里，在黑色的屏幕上滚动着让人无法理解的文字、数字和符号，人们往往把它和邪恶的黑客或者天才技术伙伴联系到一起。</p>
<p>骑士不需要多么天才的头脑就能够理解并且使用命令行。命令行可以执行我们习惯用鼠标勾选点击的一些日常任务。</p>
<p>主要的区别在于，命令行主要通过键盘来输入，一旦你掌握了它，可以大大提高效率。</p>
<p>你可以使用命令行来浏览文件夹、列出文件夹内容、创建新的文件夹、复制和移动文件、删除文件、执行程序等等。输入命令行的窗口被称为<strong>终端</strong>。</p>
<p>让我们来通过一个基础的导航命令行教程来了解如何使用命令行。</p>
<p>当你打开终端的时候，你首先会冒出一个问题“<em>我在哪儿”？</em> 我们可以使用 <code>pwd</code> 命令行（打印正在工作的目录（Print Working Directory））来解决这个问题。 这个命令行会打印出你当前所在文件夹位于整个文件系统的位置。</p>
<p>动起手来：</p>
<h3 id="">如何使用命令行</h3>
<p>如果你是 Mac 用户，打开终端应用，它本质上是一个 Unix 命令行终端。</p>
<p>如果你使用非 GUI（图形用户界面）的操作系统，例如 Linux 或 Unix，则在默认情况下，启动计算机就是命令行。如果你的 Linux 或者 Unix 系统有 GUI，你需要手动打开终端。</p>
<p>在提示符下，输入<code>pwd</code>并按下回车，命令行会打印出你当前所处的文件夹的路径。</p>
<p>默认情况下，打开命令行时激活的文件夹是登陆用户的主目录。如果你想从别的位置开始，可以自定义。</p>
<p>方便起见，可以使用波浪号<code>~</code>字符来表示主目录。我们将在接下来的几个示例中使用它。</p>
<p>现在我们知道我们在哪儿了，就可以使用 <code>ls</code> 命令来列出当前目录的内容。 <code>ls</code> 命令代表了“清单（list）”。</p>
<p>输入<code>ls</code>并点击回车， 当前目录名下的所有内容（文件和副目录）都会显示在屏幕上。</p>
<p>输入<code>ls -al</code>重新运行上面的命令，并点击回车。你会得到更多有关当前目录的信息，包括文件大小、修改时间和文件权限。</p>
<p>上面命令中的连字符<code>-</code>使得我们可以通过添加小标来改变命令行为。在上述例子中我们添加了<code>-a</code>标记来显示目录所有内容（包括隐藏文件），同时<code>-l</code>标记显示文件其他信息。</p>
<p>然后我们通过<code>mkdir</code>命令来创建新文件夹，这个命令是 “Make Directory”（创建目录）。我们将创建一个叫做 “testdir” 的目录。</p>
<p>输入<code>mkdir testdir</code>并点击回车，然后输入<code>ls</code>并点击回车，你将在清单中看到你新创建的目录。</p>
<p>要一次性创造嵌套目录，可以使用<code>-p</code>标记来创建整个目录链，如：<code>mkdir -p directory1/directory2/directory3</code>。</p>
<p>如果只在一个固定位置使用命令行的话，用处不大，所以我们接下来将学习如何在文件系统的不同目录间切换。我们可以通过<code>cd</code>命令来实现，它代表了 “Change Directory”（更改目录）。</p>
<p>首先，输入<code>cd testdir</code>然后点击回车。再输入<code>pwd</code> 并点击回车。注意此时的输出告诉我们正在 “testdir” 目录内。我们进入了这个目录！</p>
<p>输入<code>cd ..</code>点击回车，<code>..</code>告诉命令行回到父目录。</p>
<p>再输入<code>pwd</code>点击回车。注意此时的输出告诉你我们回到了原目录，我们回去了！</p>
<p>接下来我们将学习如何在当前目录创建全新的空文件。</p>
<p>输入<code>touch newfile1.txt</code>并点击回车。你可以使用<code>ls</code>来检查新文件是否已经创建。</p>
<p>接下来我们使用<code>cp</code>命令来将文件从一个文件夹复制到另一个文件夹。</p>
<p>输入<code>cp newfile1.txt testdir</code>并点击回车。使用<code>ls</code>和<code>ls testdir</code>检查这个新文件是否还在当前文件夹，以及是否被复制到了 “testdir” 目录。</p>
<p>我们也可以使用<code>mv</code>命令来移动文件。</p>
<p>输入<code>touch newfile2.txt</code>点击回车创建新的文件。<br>
然后输入<code>mv newfile2.txt testdir</code>点击回车将文件移动到 “testdir” 文件夹。</p>
<p>使用<code>ls</code>和<code>ls testdir</code>来检查文件是否已经移动到 “testdir” 文件夹（该文件应该已不存在于原始目录，因为它被 <em>移动了</em> 而并非复制）。</p>
<p><code>mv</code>也可以用来重命名文件。</p>
<p>输入<code>touch newfile3.txt</code>点击回车来创建一个新文件。然后输入 <code>mv newfile3.txt cheese.txt</code>点击回车来更新文件名。使用<code>ls</code>检查文件是否被重命名。</p>
<p>最后我们可以使用<code>rm</code>命令来删除文件。</p>
<p>输入<code>rm cheese.txt</code>点击回车删除文件。使用<code>ls</code>检查文件是否被删除了。</p>
<p>输入<code>rm -rf testdir</code>点击回车来删除 “testdir” 目录及名下文件。使用<code>ls</code>目录是否被删除。</p>
<p>注意我们必须使用<code>-rf</code>标记来删除目录。这样才可以彻底清空文件夹。</p>
<h2 id="5-build-up-your-text-editor-skills-with-vim"> 5) 使用 Vim 来培养你的文本编辑器技能</h2>
<p>我们已经学习了命令行的基本知识，并且练习了如果不使用鼠标来控制文件。</p>
<p>虽然我们已经知道如何使用命令行创建、复制、移动、重命名以及删除文件，但是我们还不知道如果使用终端来编辑文本内容。</p>
<p>使用终端来编辑文件非常重要，因为计算机代码就是存储在有组织的文件中的文本。</p>
<p>我们当然可以使用一些华丽的文本编辑器如微软的 word（或者更适合于代码的编辑器如 Sublime 或 Atom）来编写我们的代码，但这不是必须的。我们已经使用终端来运行命令行了，显然终端是最方便编辑代码的地方。</p>
<p>有优秀的文本编辑器，但是我推荐你<a href="https://www.freecodecamp.org/news/vimrc-configuration-guide-customize-your-vim-editor/">通过 Vim 来打基础</a>。</p>
<p>Vim 是最早的一批编辑器，并且经受住了时间的考验。<a href="https://zh.wikipedia.org/zh-tw/Vim">Vim</a> 代表 “<strong><em>VI</em></strong> i**<em>M</em><strong>proved”，因为它由</strong><em>Vi</em>**发展而来的。</p>
<p>如上文所述，Vim 是可以直接在终端运行的编辑器，所以我们不需要额外打开一个窗口并使用鼠标来操作。Vim 提供一组命令行和模式使得我们可以直接使用键盘来创建和编辑文本。</p>
<p>Vim <a href="https://www.freecodecamp.org/news/how-not-to-be-afraid-of-vim-anymore-ec0b7264b0ae/">有一定的学习曲线</a>，但是只要稍微练习，你整个程序员职业生涯都会受益。</p>
<p>许多系统都预装了Vim，若要检查你的计算机是否安装了 Vim，可以使用命令<code>vim -v</code>。</p>
<p>如果终端打开了 Vim 并且显示了版本，你就可以开始使用了。如果没有，就需要手动安装（注意你可以通过输入<code>:!q</code>并点击回车来退出 Vim）。更多安装 Vim 的信息，可以查看 <a href="https://vim.org">https://vim.org</a>。</p>
<p>我认为学习 Vim 最快速简单的方法是使用内置的 <strong>VimTutor</strong>。运行前请确认系统已安装 Vim，打开命令行输入<code>vimtutor</code>点击回车。</p>
<p>这个教程已经非常棒了，所以这里就不再赘述，现在打开你的 VimTutor 开始学习吧！我们下一章节见！</p>
<p>如果完成了 VimTutor 之后你还有精力学习更多内容的话，欢迎查看<a href="https://initialcommit.com/blog/7-versatile-vim-commands"> 7 个大幅提升效率的 Vim 命令</a>。</p>
<h2 id="6-take-up-some-html"> 6) 学习一点 HTML</h2>
<p>你可以将 HTML（<strong>H</strong>yper<strong>T</strong>ext <strong>M</strong>arkup <strong>L</strong>anguage（超文本标记语言）的缩写）视为网页的骨骼。它通过指定应该显示的元素及显示的顺序来确定页面的结构。</p>
<p>你浏览过的所有页面都和 HTML 多少有点关系。每当你浏览一个网页，托管网页的服务器就会传输一些 HTML 到达你的浏览器。浏览器读取这些 HTML 并展示出来。</p>
<p>大多数网页包含一组相当标准的内容，包括标题、文本内容、图像链接、导航链接、页眉和页脚等等。所有这些信息都存储为 HTML，定义页面的结构。</p>
<p>需要注意的是 HTML 实际上并不是一种编程语言，虽然我们常常称它为 “HTML 代码”。</p>
<p>在后面的文章我们将看到其他编程语言具备<strong>行为</strong>，如执行一系列指令。HTML 并不<strong>做</strong>任何事。我们不运行或执行 HTML，HTML 就在那儿等着被发送给浏览器，再显示在用户端。</p>
<p>事实上，HTML 基本上只是数据。它是定义网页应该是什么样子的数据，仅此而已。</p>
<p>如何编写 HTML 呢？HTML 使用一组<strong>标签</strong>（基本是一组标记）对应可以标记网页的元素。标签使用尖括号标记。</p>
<p>比方说，<strong>title（标题）</strong> 标签写作<code>&lt;title&gt;My Page Title&lt;/title&gt;</code>以及 <strong>paragraph（段落）</strong> 标签写作<code>&lt;p&gt;A bunch of random text content.&lt;/p&gt;</code>。</p>
<p>每一个 HTML 元素都有一个起始标签和一个结束标签。起始标签是由一组尖括号和标签名组成：</p>
<p><code>&lt;tagname&gt;</code></p>
<p>结束标签和起始标签类似，只是多了一个正斜杠，来表示这是结束标签。</p>
<p><code>&lt;/tagname&gt;</code></p>
<p>两个尖括号之间的任意文本就是要在网页上显示的内容。</p>
<p>让我们认识一下最常见的几个标签。 首先是<code>&lt;html&gt;</code>标签，定义了 HTML 页面的开始。对应的<code>&lt;/html&gt;</code> 标签（注意正斜杠）定义 HTML 页面的结束。 两个标签之间的任意内容都属于页面。</p>
<p>第二个要介绍的是<code>&lt;head&gt;</code>标签。它定义了浏览器读取页面需要的额外信息。这里的大部分内容都不会展现给用户。对应的<code>&lt;/head&gt;</code>标签定义了 HEAD 部分的结束。</p>
<p>在上文中提到了<code>&lt;title&gt;</code>标签。它定义了页面的标题，会在浏览器的选择卡中显示。这个标签要在<code>&lt;head&gt;...&lt;/head&gt;</code>内部使用。</p>
<p>接下来是<code>&lt;body&gt;</code>标签。该标签内部的所有内容就是网页的主要内容。将这四个标签放置在一起的结构如下：</p>
<pre><code class="language-html">&lt;html&gt;
    
    &lt;head&gt;
        &lt;title&gt;My Page Title&lt;/title&gt;
    &lt;/head&gt;
        
    &lt;body&gt;
        &lt;p&gt;A bunch of random text content.&lt;/p&gt;
    &lt;/body&gt;

&lt;/html&gt;
</code></pre>
<p>上面简单的 HTML 代码块展现了一个包含一个标题和一个段落的网页。</p>
<p>从这个例子我们可以看出 HTML 标签可以相互嵌套。也就是 HTML 标签可以放置在其他标签内部。</p>
<p>HTML 提供了一系列标签供用户使用，我们不会逐一讲解，我只列举了一部分：</p>
<ul>
<li><code>&lt;p&gt;</code>: 开启新一行的段落</li>
<li><code>&lt;h1&gt;</code>: 页面标题（heading）通常用作页面标题（title）</li>
<li><code>&lt;h2&gt;</code>: 段落标题（heading）通常用作段落标题（title）</li>
<li><code>&lt;hx&gt;</code>:  <em>x</em> 表示 3 到 6 之间的数字，代表级别更小的标题（heading）</li>
<li><code>&lt;img&gt;</code>: 一个图片</li>
<li><code>&lt;a&gt;</code>: 一个链接</li>
<li><code>&lt;form&gt;</code>: 表单，包含供用户填写和提交的字段或输入框</li>
<li><code>&lt;input&gt;</code>:供用户输入信息的输入字段，通常在表单中</li>
<li><code>&lt;div&gt;</code>: 内容划分，用于将几个其他类型元素组合在一起，有一定间距</li>
<li><code>&lt;span&gt;</code>: 另一个分组元素，但用于将文本短语包装在另一个元素中，通常仅限于应用于文本内容的特定部分的特定格式</li>
</ul>
<h2 id="7-tackle-some-css">7) 处理一些 CSS</h2>
<p>缺少 CSS（<strong>C</strong>ascading <strong>S</strong>tyle <strong>S</strong>heets，层叠样式表）网页就像没有裱花的蛋糕。虽然也可以吃，但是索然无味。</p>
<p>CSS 使得我们可以将样式的属性，如：背景色、字号、宽度、长度和HTML元素关联起来。</p>
<p>样式属性告知浏览器如何渲染对应的效果。和 HTML 一样，CSS 并不是一门编程语言，它并不具备行为，但是可以给 HTML 骨骼添加样式。</p>
<p>让我们看看如何给 HTML 添加 CSS 样式，有三个重要的部分：</p>
<p><strong>CSS选择器:</strong> 标记我们需要添加样式的 HTML 元素</p>
<p><strong>CSS属性名:</strong> 我们要添加到响应的 HTML 元素的特定样式属性的名称</p>
<p><strong>CSS属性值:</strong> 我们要应用的样式属性的值</p>
<p>以下是将这三个部分组合在一起来定义一个段落的颜色的字体大小：</p>
<pre><code class="language-css">p {
  color: red;
  font-size: 12px;
}
</code></pre>
<p>让我们从头开始，在花括号之前是 CSS 选择器。在示例中<strong>p</strong>代表的是<code>&lt;p&gt;</code>（paragraph）这个 HTML 标记。也就是说网页中所有<code>&lt;p&gt;</code>标签都要应用这个样式。</p>
<p>我们来看看花括号里面发生了什么——我们想要应用到目标元素的样式。</p>
<p>CSS 属性和值用冒号隔来。属性（示例中的 “color” 和 “font-size”）在左手边，属性的值（示例中的 “red”“12px”）在右手边。每一个属性名/值对由一个分号结尾。</p>
<p>你应该已经看出来这是如何运作的，CSS 代码块告诉浏览器使用红色、字号为 12px 样式来修饰<code>&lt;p&gt;</code>内的内容。</p>
<p>那 HTML 如何包含这些 CSS 样式呢？使用<code>&lt;link&gt;</code> HTML 标签。通常，会有一个独立的 CSS 文件（<strong>.css</strong>文件）。也就意味着我们需要引入到 HTML 文件中，这样浏览器才会知道 CSS 文件的存在。</p>
<p><code>&lt;link&gt;</code>标签就服务于这个目的。我们在<code>&lt;head&gt;</code>部分加入<code>&lt;link&gt;</code>元素，特指需要被引入的 CCS 文件：</p>
<pre><code class="language-css">&lt;head&gt;

    &lt;title&gt;My Page Title&lt;/title&gt;

    &lt;link rel="stylesheet" type="text/css" href="/home/style.css"&gt;

&lt;/head&gt;
</code></pre>
<p>在这个示例中，我们使用 <strong>href</strong> 标签来引入 CSS 文件：<em>/home/style.css</em>。</p>
<p>在接下来的三个部分，我们（终于）要进入编程语言了！</p>
<p>我们将大概介绍一个 JavaScript、Python 和 Java 以及一些重要的编程概念。我们将通过代码示例来比较三种语言的相同和不同，给你进一步了解这三种语言打下基础。</p>
<h2 id="8-start-programming-with-javascript">8) 由 JavaScript 开始编程</h2>
<p>让我们先回答这个问题：如果 HTML 是网页骨架、CSS 是样式，那我们还需要 JavaScript 做什么？</p>
<p>答案是我们可以不需要 JavaScript，一个样式好看的静态网站已经足够，所以只需要 HTML 和 CSS 就够了。</p>
<p>这个答案的关键词是“静态”，如果想要给网页添加一些动态效果的话，如改变文本或者添加更为复杂的用户交互，我们就需要使用 JavaScript。</p>
<h3 id="javascript">什么是 JavaScript？</h3>
<p>JavaScript 到底是什么呢？JavaScript 是专为互联网和网站而创建的编程语言。在第二部分我们提到过，大多数编程语言要么就是被编译要么就是被解释，程序基本上独立运行。</p>
<p>JavaScript 在这点上有些与众不同，它被设计为直接在网络浏览器内部运行，我们可以编写代表一组行为的代码，直接在网页上执行，使得网站更加动态。</p>
<p>你可以使用后缀为<code>.js</code>的文件来编写 JavaScript 代码或者直接在 HTML 的<code>&lt;script&gt;</code>标签内编写 JavaScript。</p>
<p>JavaScript 在很长时间内都只能在浏览器内部运行，但是 <strong>Node.js</strong> 改变了这一运行范式，之后JavaScript 就拥有了独立运行的环境。</p>
<p>除了在浏览器内部（即客户端）运行，Node.js 可以被安装在任何计算机，创建运行 JavaScript 的环境。你也可以在网络服务器安装 Node，这样 JavaScript 不仅可以编写前端代码也可以编写后端代码。</p>
<p>在讲解了 JavaScript 基础之后，让我们来看看 JavaScript 的一些主要概念。</p>
<h3 id="javascript">JavaScript 中的变量和赋值</h3>
<p>变量或许是编程中最为基础的概念。变量是用来引用特定值的一个名称或者占位符。</p>
<p><strong>变量</strong>这个名称意味着，在程序执行的过程中，变量内部存储的值可以发生改变。</p>
<p>可以使用变量存储数字、字符串、列表以及其他数据结构，我们之后会详细说明。</p>
<p>所有编程语言都包含变量，只是语法上有些微不同。</p>
<p>我们可以在整个代码中引用变量的值，所以变量十分有用。我们可以检查我们需要的变量的值，根据变量的改变来执行不同的行为。</p>
<p>在 JavaScript 中我们使用<code>let</code>关键字来声明变量，如：<code>let x;</code>。</p>
<p>这样<code>x</code>这个变量就可以在代码中使用。注意我们在末尾添加了分号结束。在 JavaScript（以及其他一些语言中）分号代表了声明的结束。</p>
<p>我们已经创建了变量 <em>x</em>，就可以使用等号给这个变量赋值，等号又可以称为 <strong>赋值操作符</strong>：<code>x = 10;</code></p>
<p>我们将数字 10 赋值给名为 <em>x</em> 的变量。无论何时我们在代码中使用 <em>x</em> ，就会得到 10。</p>
<p>变量声明和赋值可以在一行内进行：</p>
<pre><code class="language-javascript">let x = 10;
</code></pre>
<h3 id="javascript">JavaScript 的数据类型</h3>
<p>在上一部分，我们将整数存储到了命名为 <em>x</em> 的变量。我们也可以存储十进制数，或者<strong>浮点数</strong>。我们可以这样写：<code>let x = 6.6;</code>。</p>
<p>能够被存储的不同的值被称为<strong>数据类型</strong>。现在我们只看到了数字类型（整数和浮点数），我们只触及了表面，我们也可以在变量中存储文本。</p>
<p>在代码术语中，一段文本被称为 <strong>字符串</strong>。我们可以将字符串存储到变量x中，使用单引号或者双引号来框住字符串。</p>
<pre><code class="language-javascript">let x = 'Hello there!';

let y = "Hey bud!";
</code></pre>
<p>接下来我们要讨论<strong>布尔值</strong>。布尔值只有<code>true</code>或<code>false</code>两个值 – 必须小写。在 JavaScript 中，true 和 false 是专门用于表示布尔值的关键字。</p>
<pre><code class="language-javascript">let x = true;

let y = false;
</code></pre>
<p>注意<code>true</code>和<code>false</code>并没有字符串那种引号。如果使用了引号，就不是布尔值，而是字符串。</p>
<p>我们经常使用布尔值来控制条件（if/else）语句中的程序流，接下来我们讲学习程序流。</p>
<h3 id="javascript">JavaScript 中的程序流控制语句</h3>
<p>现在我们已经了解了变量和基本的 JavaScript 数据类型，让我们来看看我们可以用它们做些什么。</p>
<p>如果不告诉程序我们要用变量做什么，变量就没太大用处。我们可以使用<strong>语句</strong>来让变量做事情。</p>
<p>语句是特殊关键字，允许我们在代码中执行某些操作，这些操作通常基于我们定义的变量的值。语句让我们定义程序的逻辑流程，并执行许多有用的操作，这些操作将决定我们的程序如何工作。</p>
<h4 id="ifelse">If / Else 语句</h4>
<p>我们首先讨论 <code>if</code>语句。如果条件为真，<code>if</code>语句允许我们做某事。如下：</p>
<pre><code class="language-javascript">let x = 10;

if ( x &gt; 5 ) {
    console.log('X is GREATER than 5!');
} else {
    console.log('X is NOT GREATER than 5!');
}
</code></pre>
<p>我们创建一个命名为 <em>x</em> 的变量并赋值为 10， 然后使用 <code>if</code>语句。 在 <code>if</code>关键字之后，是一组括号，括号内部是有待评估的条件，示例中是<code>x &gt; 5</code>。 <em>x</em> 被赋值为 10，所以示例中的条件为真。</p>
<p>因为条件为真，所以花括号中的代码将执行，我们会看到 “X is GREATER than 5!” 被打印出来。（我们尚未讨论 <code>console.log()</code>的意思， 现在我们只知道它会打印括号里的内容）。</p>
<p>在该示例中，我们还使用了<code>else</code>语句。若条件为<code>false</code>，则执行内部的代码。</p>
<h4 id="while">While 循环</h4>
<p>我们接下来要讨论 <strong>while 循环</strong>。 循环使得我们在不需要赋值和粘贴代码的情况下，反复执行同一块代码。</p>
<p>假设我们想要打印一句话五次，我们可以这样操作：</p>
<pre><code class="language-javascript">console.log('This is a very important message!');
console.log('This is a very important message!');
console.log('This is a very important message!');
console.log('This is a very important message!');
console.log('This is a very important message!');
</code></pre>
<p>这样可以打印 5 次，那如果是 100 次、1000 次呢？我们需要更好的方式来重复，循环就派上用场。在代码术语中，重复一段代码被称为<strong>遍历</strong>。</p>
<p><code>while</code>循环将在条件为真的时候不断循环：</p>
<pre><code class="language-javascript">let x = 1;

while ( x &lt;= 100 ) {
    
    console.log('This is a very important message!');
    
    x = x + 1;
    
}
</code></pre>
<p>在该示例中，我们将 <em>x</em> 的初始值设定为 1， 然后编写一个<code>while</code>循环。和<code>if</code>语句一样，我们将条件写在括号内。示例中的条件为<code>x &lt;= 100</code>。 只要 <em>x</em> 小于等于 100，条件就一直为<code>true</code>。</p>
<p>然后我们在花括号内部写需要执行的代码。首先在控制台打印信息，然后使 <em>x</em> 增加 1。</p>
<p>循环会再次评估条件是否为<code>true</code>。此时 <em>x</em> 值为 2，因为第一次循环结束后增加了 1。2 小于 100，所以条件仍为<code>true</code>。</p>
<p>循环中的代码不断执行直到 <em>x</em> 值为 101。这时，<em>x</em> 比 100 大，条件为 <code>false</code>。循环停止执行。</p>
<h3 id="htmlscript">HTML 的<code>&lt;script&gt;</code>标签</h3>
<p>我们已经介绍了 JavaScript，如何将 JavaScript 添加到 HTML 页面？我们可以使用之前未讨论到的<code>&lt;script&gt;</code>标签。</p>
<p>和<code>&lt;link&gt;</code>类似，<code>&lt;link&gt;</code>用于将 CSS 添加到 HTML，而<code>&lt;script&gt;</code>专门用于添加 JavaScript。</p>
<p>假设我们把上述代码保存为<code>customscript.js</code>文件，并放置在和 HTML 同一个文件夹中。我们可以在 HTML 的 <code>&lt;head&gt;...&lt;/head&gt;</code> 部分添加 JavaScript 文件。</p>
<pre><code class="language-html">&lt;script type="text/javascript" src="customscript.js"&gt;&lt;/script&gt;
</code></pre>
<p>当网页在浏览器中显示时执行时，会从这个文件中加载 JavaScript 代码。</p>
<p>一旦熟悉了 JavaScript 的技巧，你可以<a href="https://www.freecodecamp.org/news/javascript-projects-for-beginners/">尝试搭建一些简单的初学者项目</a>来进一步练习。</p>
<h2 id="9-continue-programming-with-python"> 9) 使用 Python 继续编程</h2>
<p>我们已经学习了基础的 JavaScript 知识，这时开启一门新的语言十分有用，这门语言就是—— Python。</p>
<p>大多数语言都具备一套同样的功能，包含：变量、算术运算符、if/else 语句、循环和函数。</p>
<p>比较不同的语言如何实现同样的功能对于我们的学习十分有帮助。概念通常是相似的，但是语法（如何编写代码）有些微不同。</p>
<h3 id="python">什么是 Python？</h3>
<p>我们先来介绍一下 Python 的背景知识。和 JavaScript 一样，Python 也是一种高级编程语言，并且在设计上将“易开发”优先于“执行快”。</p>
<p>我认为 Python 是最适合初学者学习的编程语言之一。Python 的语法十分简洁并且符合直觉。Python 在开源和商业领域都非常受欢迎。</p>
<p>我们对比过编译型语言和解释型语言，Python 是一门解释型语言。运行 Python 程序的时候，<strong>Python 解释器</strong>会主动处理并逐行在机器上执行代码。</p>
<p>和编译型语言不通的地方在于，编译型语言会先使用编译器将代码优化成更容易执行的形式，然后再执行。</p>
<p>和 JavaScript 不同的是，Python 并不是直接在浏览器中运行的代码。Python 被创建为一种便捷的 <em>脚本语言</em>——一种可用于执行任意任务的代码，通常在用户的本地计算机上执行。</p>
<p>Python 代码可以在任何安装了 Python 解释器的计算机上执行。它是一种常用的脚本语言，但也广泛用于数据科学和服务器端的应用程序。</p>
<h3 id="python">Python 中的变量与赋值</h3>
<p>和 JavaScript 一样，Python 也可以声明变量。可以直接使用等号来进行声明和赋值：</p>
<pre><code class="language-python">x = 10
y = "cheese"
</code></pre>
<p>Python 和 JavaScript 在定义变量的时候有两点不同：在 Python 中不需要使用<code>let</code>关键字，也不需要在每行结尾添加分号。</p>
<p>Python 使用一组基于空格和缩进的语法规则。就不需要终止字符：分号；也不需要使用花括号来代表代码块。</p>
<h3 id="python">Python 的数据类型</h3>
<p>Python 也有一组数据类型，我们可以将它们分配给变量。这些包括整数、浮点数（小数）、字符串、列表和字典。</p>
<p>整数、浮点数和字符串与 JavaScript 的相同，所以就不赘述。</p>
<p>Python 中的布尔值与 JavaScript 非常相似，只是关键字 True 和 False 必须大写：</p>
<pre><code class="language-python">x = True

y = False
</code></pre>
<h3 id="">程序流控制声明</h3>
<p>与 JavaScript 一样，Python 也流控制语句集，但语法略有不同。</p>
<h4 id="ifelse">If / Else 语句</h4>
<p>JavaScript <code>if/else</code>示例的等价 Python 示例如下：</p>
<pre><code class="language-python">x = 10

if ( x &gt; 5 ):
    print('X is GREATER than 5!')
    
else:
    print('X is NOT GREATER than 5!')
</code></pre>
<p>我们先定义一个名为 <em>x</em> 的变量并并赋值为 10，紧接着是<code>if</code>语句。因为括号内部的条件被评估为<code>True</code>，<code>if</code>语句后缩进的代码被执行。我们便看到屏幕上打印出 “X is GREATER than 5!”。</p>
<p>在 Python 中<code>print()</code>函数打印内容。</p>
<p>同时也要注意<code>else</code>语句，如果 <em>x</em> 条件为<code>False</code>，就会打印另外的语句。</p>
<p>Python 代码和我们之前看到的 JavaScript 代码有两大不同：Python 使用冒号而不是花括号来指示<code>if</code>语句的开始。</p>
<p>另外，在 Python 中<code>print()</code>函数的缩进对代码效果有影响。在 JavaScript 中，语句之间的缩进或空格无关紧要，因为JavaScript使用花括号标识代码块并使用分号标识语句的结尾。但是在这个Python 示例中，没有分号，也没有大括号！</p>
<p>这是因为 Python 实际上使用空格和换行符来标识语句和代码块的结尾。</p>
<p>冒号告诉 Python 解释器，<code>if</code>引导的代码块开始了。<code>if</code>之后的代码块必须缩进。（通常 1 tab = 4 空格）这样 Python 解释器才知道 <code>if</code> 的代码块在哪里。下一个未缩进的行意味着<code>if</code>代码块的结束。</p>
<h4 id="while">While 循环</h4>
<p>接下来我将讨论 Python 中的 while 循环。Python 中的 <code>while</code>循环大体和 JavaScript 中的一致，但是语法有所不同：</p>
<pre><code class="language-python">x = 1

while ( x &lt;= 100 ):
    print('This is a very important message!')
    x = x + 1

print('This is not in the loop!')
</code></pre>
<p>和 JavaScript<code>while</code>循环不同的地方在于：</p>
<ul>
<li>在定义变量的时候没有使用<code>let</code></li>
<li>行末没有使用分号结束</li>
<li>用冒号取代花括号</li>
<li>循环内的代码块必须缩进</li>
</ul>
<p>我们在循环之外打印了一条附加消息，以表明未缩进的代码行不是循环的一部分并且不会被重复。</p>
<p>我推荐 Python 初学者看一下<a href="https://initialcommit.com/blog/zen-of-python"> Python 的禅意</a>，这篇文章介绍了编写 Python 代码的 20 条重要规则。</p>
<p>如果你已经掌握了 Python 的基础，<a href="https://www.freecodecamp.org/news/python-projects-for-beginners/">可以尝试搭建一些初学者的 Python 项目</a>。</p>
<h2 id="10-further-your-knowledge-with-java">10) 进一步了解 Java</h2>
<p>我们已经了解了一组高级编程语言，让我们往后退一步，瞧一瞧 Java。</p>
<p>JavaScript 和 Python 实时通过解释器来执行源码。但 Java 是一门编译型语言，需要编译器（而不是解释器）将 Java 源码转换为计算机可以理解的代码。</p>
<p>大多数编译器会生成一个或多个由机器码组成的可执行文件，这些代码可以在编译它们的特定操作系统和硬件平台上运行。</p>
<p>但Java特殊的地方在于，它将源码转换为<a href="https://zh.m.wikipedia.org/zh/Java%E5%AD%97%E8%8A%82%E7%A0%81"><strong>字节码</strong></a>，这和其他编译型语言生成的的机器码不太一样，Java 字节码需要在 <strong>Java 虚拟器（JVM）</strong> 执行。</p>
<p>可以将 JVM 想象成你安装在电脑的一个程序，这个程序允许你执行 Java 字节码，当人们谈论 “<em>是否在电脑安装了 Java</em>”，他们指的是是否在电脑上安装了 <strong>JVM</strong>。</p>
<p>JVM 和我们在前面章节讨论的解释器的功能类似，但是它没有把源码（存储在 .java 文件）当作输入，而是把编译过的字节码作为输入。</p>
<p>这种设置的好处是它允许在特定操作系统和平台上编译的字节码由任何其他平台上的 JVM 执行。</p>
<p>假设我们有一个 Java 代码文件，该文件在运行 Windows 操作系统的计算机上编写并编译为字节码。这个字节码可以被 JVM 在任何平台上执行（即程序运行），包括 Windows、Mac OS、Linux 等。</p>
<p>大多数编程语言并非如此，它们只能在编译它们的环境中执行。</p>
<h3 id="java">Java 中的变量和赋值</h3>
<p>Java 和我们之前讨论的语言（Python 和 JavaScript）的一个主要的区别在于 Java 是<strong>静态</strong>语言。</p>
<p>这意味着我们的变量的数据类型必须在程序编译之前就建立并被理解。</p>
<p>每次我们在 Java 代码中创建变量时，都需要显式指定该变量的数据类型，例如整数、字符串等。这称为变量<strong>声明</strong>。</p>
<p>一旦我们声明了一个变量的数据类型，它就只能在整个程序执行过程中保存该类型的数据。</p>
<p>这与 JavaScript 和 Python 非常不同，它们的数据类型是在程序执行期间建立的，也称为<strong>运行时</strong>。因此，像 JavaScript 和 Python 这样的语言被称为<strong>动态类型语言</strong>——我们不会在源码中明确声明变量数据类型，也可以轻松地将变量动态地重新分配给任何类型。</p>
<p>在 Java 中声明变量：</p>
<pre><code class="language-java">Datatype name = value;
</code></pre>
<p><code>Datatype</code>指的是我们需要存储的变量类型，如：整数、字符串等。<code>name</code>代表变量的名称，我们会在之后的代码中使用。<code>value</code>是我们要赋值给变量的值。注意和 JavaScript 一样，所有 Java 声明结尾都要使用分号。</p>
<h3 id="java">Java 中的数据类型</h3>
<p>在 Java 中，内置的数据类型被称为<strong>原始</strong>数据类型，因为有 Python 和 JavaScript 的基础，这些数据类型对于我们来说，看起来非常熟悉。主要的原始类型有：</p>
<ul>
<li>整数 <code>int</code>：存储 −2,147,483,648 到 2,147,483,647之间整数。</li>
<li>浮点数 <code>float</code>：存储 3.4x10^−038 到 3.4x10^038之间的浮点数。</li>
<li>布尔值 <code>bool</code>：存储<code>true</code>或<code>false</code>。</li>
</ul>
<p>请注意，还有一些其他的原始类型（short、long、byte 和 double）我们不会在这里介绍，因为不经常使用。以下展示我们如何初始化这些数据类型：</p>
<p>整数: <code>int x = 100;</code></p>
<p>浮点数: <code>float pi = 3.14;</code></p>
<p>字符: <code>char middleInitial = 'T';</code></p>
<p>布尔值: <code>bool isHuman = true;</code></p>
<p>我必须重申，一旦声明了变量的数据类型，该变量就只能保存指定数据类型的值。</p>
<p>例如，如果我们的程序试图将字符值存储在声明为整数的变量中，则会引发错误。在前面的示例中，我们不能将字符 “S” 分配给整数变量 <em>x</em>。</p>
<p>我们将讨论的下一个数据类型是字符串——表示为文本数据的一系列字符、数字或符号。</p>
<p>Java 中的字符串是一种非原始数据类型，这意味着它们是由较小的部分组成的。要声明一个字符串变量，我们使用 String 数据类型并将分配的值放在双引号中：</p>
<pre><code class="language-java">String name = "Harry Potter";
</code></pre>
<h3 id="java">Java 中的程序流控制语句</h3>
<p>与 JavaScript 一样，Java 使用花括号来定义<code>if</code>语句、循环和函数的代码块。我们将使用前几章程序控制语句，但改写成 Java 语法。</p>
<h4 id="ifelse">If / Else 语句</h4>
<p>用 Java 语句编写上问的 if/ else：</p>
<pre><code class="language-java">int x = 10;

if ( x &gt; 5 ) {
    System.out.println("X is GREATER than 5!");
} else {
    System.out.println("X is NOT GREATER than 5!");
}
</code></pre>
<p>这里的<code>if</code>例子几乎和 JavaScript一样，唯二不同是我们声明了 <em>x</em> 的数据类型为<code>int</code>以及我们使用了 <code>System.out.println()</code> 而不是 <code>console.log()</code>来打印消息。</p>
<p>接下来，我们将讨论 Java 中的循环。Java 和 JavaScript 语法非常相似，所以 Java 中的<code>while</code>循环与我们在 JavaScript 中看到的基本相同：</p>
<pre><code class="language-java">int x = 1;

while ( x &lt;= 100 ) {

    System.out.println("This is a very important message!");
    
    x = x + 1;
    
}
</code></pre>
<p>这个<code>while</code>循环将打印出指定的消息 100 次。</p>
<p>我们介绍编程语言的部分到此结束。由于我们使用相同的概念集介绍3种语言，因此可能稍显重复，但希望这有助于为你打下坚实的基础。</p>
<p>接下来我将介绍一些其他相关话题，你不需要立刻就开始学习这些主题。</p>
<p>我们将讨论一个名为 Git 的重要协作工具，然后我们将学习在数据库中存储和访问数据。接下来我们将简要介绍 Web 开发框架，最后我们稍微了解包管理器。</p>
<h2 id="11-track-your-code-using-git">11) 使用 Git 跟踪代码</h2>
<p>Git 是在最流行的版本控制系统（VCS）。它允许多个开发人员一起协作开发软件。在本节中，我们将了解 Git 是什么、它是如何工作的以及如何操作它的基本命令。</p>
<p>在直接进入 Git 之前，让我们补充一些编程项目共有的概念。</p>
<p>一个软件项目的全部目录和文件被称为<strong>代码库</strong>。<strong>项目根</strong>是项目目录树中最高级别的文件夹。代码文件可以直接在项目根中，也可以被组织到多个级别的文件夹中。</p>
<p>当代码库准备好进行测试或部署时，它可以被<strong>构建</strong>成将在你的计算机上运行的程序。<strong>构建过程</strong>可以包括一个或多个步骤，这些步骤将人类编写的代码转换成可以被计算机处理芯片可执行的文件。</p>
<p>构建代码后，程序就可以在特定操作系统上运行，例如 Linux、Mac OS 或 Windows。</p>
<p>随着时间的推移，开发人员会更新项目代码以添加新功能、修复错误、实施安全更新等。一般来说，开发人员可以通过三种方式对软件项目更改：</p>
<ol>
<li>将新文件和文件夹添加到项目中</li>
<li>编辑现有文件和文件夹中的代码</li>
<li>删除现有文件和文件夹</li>
</ol>
<p>随着项目的壮大和新功能的添加，文件和文件夹的数量（以及其中的代码量）也会增加。大型项目可以壮大到包含数百万行代码的数十万个文件。</p>
<p>为了支持这种增长，项目团队的开发人员数量通常会增加。大型软件项目可能有数百甚至数千名开发人员协同工作。</p>
<p>这就引出了问题：“<em>这些分布在世界各地的开发人员到底是如何跟踪他们的软件项目代码，以便他们可以在一个项目上一起工作？</em>”</p>
<p>开发团队需要准确跟踪对代码进行了哪些更改，哪些文件或文件夹受到了影响，以及是谁进行了每次更改。每个开发人员得能够获得其他开发人员的更新。</p>
<p>此过程称为<strong>版本管理（versioning）<strong>或</strong>版本控制（version control）</strong>。开发人员使用称为<strong>版本控制系统</strong>（VCS）的特殊工具来跟踪、管理和共享软件项目的版本。以下是一些流行版本控制系统：</p>
<ul>
<li>Git</li>
<li>Subversion（SVN）</li>
<li>Mercurial（Hg）</li>
</ul>
<p>Git 赢得了 VCS 的桂冠。迄今为止，它是被全球政府、商业和开源社区使用。</p>
<p>Git 促成了基于 Web 的 VCS 平台（如 GitHub 和 Bitbucket）的流行。对于任何全面发展的开发人员来说，Git 是一个必须要添加到技能包里必不可少的工具。</p>
<h3 id="git">基本 Git 命令</h3>
<p>Git 在 <strong>Git 仓库</strong>中创建和存储有关我们软件项目的信息。Git 仓库只是计算机上的一个隐藏文件夹，Git 使用它来存储有关软件项目中代码文件的数据。</p>
<p>我们使用的每个软件项目通常都有自己的 Git 仓库，用于存储与该项目相关的信息。这样，可以单独跟踪与单个计算机上的不同项目相关的代码。</p>
<p>在计算机上创建 Git 仓库有两种主要方法。第一个是在文件系统的现有文件夹中创建一个全新的 Git 仓库。</p>
<p>只需打开命令行，在桌面创建一个新文件夹，然后进入：</p>
<pre><code class="language-sh">cd ~/Desktop

mkdir testgit
 
cd testgit/
</code></pre>
<p>现在我们创建了一个新文件夹并进入它，我们可以使用以下命令初始化一个新的 Git 仓库：</p>
<pre><code class="language-sh">git init
</code></pre>
<p>应该会看到类似于以下内容的输出：</p>
<pre><code class="language-sh">Initialized empty Git repository in /Users/me/Desktop/testgit/.git/
</code></pre>
<p>我们要运行的所有 Git 命令都以<code>git</code>开头，接着一个空格，然后是我们要运行的具体Git命令。有时我们也会在 Git 命令后面添加标志和参数。</p>
<p><code>git init</code>命令在当前目录下创建一个名为<code>.git</code>的隐藏文件夹。这个文件夹就是我们上面提到的 Git 仓库。你可以通过运行<code>ls -al</code>命令来查看。</p>
<p>获取 Git 仓库的第二种方法是从其他地方下载一个，例如 Bitbucket 或 GitHub。</p>
<p>Bitbucket 和 Github 是允许人们托管开源项目的网站，可以将项目下载到你的电脑。</p>
<p>如果你在 Bitbucket 或 GitHub上浏览到一个你感兴趣的项目，你会看到一个标有 Clone 的按钮。这个按钮会给你提供一个命令和 URL，你可以把它复制并粘贴到命令行终端：</p>
<pre><code class="language-sh">git clone https://jacobstopak@bitbucket.org/jacobstopak/baby-git.git
</code></pre>
<p><code>git clone</code>命令从指定的 URL 下载版本库到你电脑上的一个新文件夹。这个 URL 可以是上面例子中的网页 URL，也可以是 SSH URL，如下所示：</p>
<pre><code class="language-sh">git clone git@bitbucket.org:jacobstopak/baby-git.git
</code></pre>
<p>运行<code>git clone</code>命令后，你应该会看到创建了一个新文件夹。如果浏览它，将看到你下载的项目的所有文件和子文件夹。</p>
<p>接下来我们要提到的命令是<code>git add &lt;filename.ext&gt;</code>。<code>git add</code>命令用来告诉 Git 我们想让它跟踪哪些文件，并把已经跟踪的文件的改动添加到 Git 的<strong>暂存区域</strong>。</p>
<p>一旦新文件或更改的文件被暂存，就可以用`git commit -m "Commit message" 命令将它们提交到仓库。将在 Git 仓库中存储所有暂存文件的更改。</p>
<p>使用<code>git status</code>和<code>git log</code>命令可以查看工作目录的当前状态和项目的提交历史。</p>
<p>我们在这里只触及了表面，<a href="https://initialcommit.com/blog/Git-Cheat-Sheet-Beginner">Git 还有很多必要的命令</a> 值得我们去熟悉。</p>
<h2 id="12-store-data-using-databases-and-sql">12) 使用数据库和 SQL 来存储数据</h2>
<p>数据库是专门用于有效存储、更新、检索和删除大量数据的程序。简而言之，我们可以把数据库看成是一组表格的容器。</p>
<p>你可能使用过 Microsoft Excel 中的表格。表只是一组包含数据的列和行。我们可以在数据库中设置表格来存储我们的程序正常工作所需的信息。</p>
<p>无论我们是用 JavaScript、Python、Java 还是其他语言编写程序，我们都可以根据需要，告诉我们的程序与数据库交互。</p>
<p>我们可以从数据库中检索数据，在网页上显示给我们的用户。我们可以接受一个用户的网络注册表，并将该用户的信息存储在数据库中供以后使用。</p>
<p>程序可以在运行时与数据库进行实时互动。要做到这一点，大多数数据库使用一种叫做 <strong>SQL</strong> 的语言，即<strong>结构化查询语言</strong>的简称。</p>
<p>SQL 是一种专门为数据库创建的编程语言。可以通过 SQL 告诉数据库要做什么。</p>
<p>一段SQL代码称为<strong>查询（query）</strong>。我们可以编写 SQL 查询来获取我们在特定时间需要的数据，或者将新数据插入到特定的表中。粗略地说，有两种主要的 SQL 查询类型：<strong>read-SQL</strong> 和 <strong>write-SQL</strong>。</p>
<p>read-SQL 是一种简单地从数据库中获取数据供我们查看或使用的查询。它完全不改变数据库中的数据。</p>
<p>write-SQL 要么在表中插入新数据，要么更新现有数据，要么删除现有数据。我们将在本节中学习如何编写一些基本的 read-SQL 查询。</p>
<p>在编写查询之前，我们要知道我们编写的查询的是什么! 传统的数据库是由列和行组成的<strong>表</strong>。当我们写一个 read-SQL 查询时，我们的目标通常是检索这些行和列的一个子集。</p>
<p>例如，假设我们有一个名为<code>PERSON</code>的表，有4列，<code>FIRST_NAME</code>和<code>LAST_NAME</code>。我们可以使用下面的查询，只从<code>FIRST_NAME</code>列中选择所有数据。</p>
<pre><code class="language-sql">SELECT FIRST_NAME FROM PERSON;
</code></pre>
<p>SELECT关键字告诉数据库我们要检索数据。后面接着我们想要查询的列名FIRST_NAME。</p>
<p>然后我们使用 FROM 关键字告诉数据库要从哪个表中获取数据，在本例中为 PERSON 表。另外，请注意所有 SQL 命令都以分号结尾。</p>
<p>我们对数据最常见的要求之一是对其进行过滤。过滤意味着根据指定的条件来限制结果集。</p>
<p>例如，我们可能只想从<code>PERSON</code>表中选择名为 “PHIL” 的人的记录。我们可以使用<code>WHERE</code>关键字在 SQL 查询中应用过滤器。</p>
<pre><code class="language-sql">SELECT * FROM PERSON WHERE FIRST_NAME = 'PHIL';
</code></pre>
<p>这个查询将返回<code>PERSON</code>表中的所有列，因为我们在<code>SELECT</code>子句中使用了星号<code>*</code>，而没有列出具体的列名。只有<code>PERSON</code>表中<code>FIRST_NAME</code>被设置为 “PHIL” 的记录才会被检索出来。</p>
<p>最后，我们来谈谈排序问题。有很多时候，我们希望看到查询结果以特定的顺序进行排序。可以使用<code>ORDER BY</code>子句来实现这一点。</p>
<pre><code class="language-sql">SELECT *
FROM PERSON
ORDER BY LAST_NAME;
</code></pre>
<p>这将返回<code>PERSON</code>表中的所有列，按姓氏的字母顺序排序。</p>
<p>默认情况下，结果将按升序排序，从 A 到 Z。我们可以添加可选的<code>ASC</code>或<code>DESC</code>关键字，以指定是按升序还是降序排序。</p>
<pre><code class="language-sql">SELECT *
FROM PERSON
ORDER BY LAST_NAME DESC;
</code></pre>
<h2 id="13-read-about-web-frameworks-and-mvc"> 13) 阅读 Web 框架和 MVC</h2>
<p>很多时候，我们是在为非常常见的应用程序类型编写代码。Web 应用程序（或称 <strong>Web Apps</strong>）是依靠互联网来运作的应用程序。Web 应用程序便是最常见的软件应用程序类型之一。</p>
<p>Web 应用程序本质上是一个功能更强大的网站。大多数 Web 应用程序实现了一些网络服务器上的后端代码，并在幕后执行逻辑，以支持应用程序的功能。</p>
<p>Web 应用程序后端代码使用的常见编程语言包括 Python、Java 和 JavaScript 等。</p>
<p>Web 应用程序共有的一些功能包括：</p>
<ul>
<li>提供一种方便的方式来动态更改网页上的内容</li>
<li>通过登录页面执行安全用户身份验证</li>
<li>提供强大的应用程序安全功能</li>
<li>读取和写入数据到数据库</li>
</ul>
<p>Web 框架是一组代码库，其中包含所有 Web 应用程序可以开箱即用的常用功能。Web 框架为开发人员提供了一个系统来构建他们的应用程序，使用框架就不必担心 Web 应用程序常见的许多幕后任务的编写代码。</p>
<p>我们只需要利用框架中满足 Web 应用程序需求的部分即可。</p>
<p>例如，如果我们不需要连接到特定 Web 应用程序中的数据库，我们可以忽略数据库功能并使用我们确实需要的其他功能。</p>
<p>我们可以定制应用程序的网页、用户流和业务逻辑。你可以把 Web 框架看成是一个编程工具包，我们可以用它来构建 Web 应用。</p>
<p>本文中所涉及的编程语言都有一个或多个流行 Web 框架。它让开发团队可以灵活地使用他们最精通的语言的框架。</p>
<p>Java 有 Spring 框架，通过 <strong>Spring Boot</strong> 使得开发变得方便。Python 有 <strong>Django</strong> 框架。JavaScript 有 <strong>Node.js</strong> 运行环境，包括 <strong>Express.js</strong> 和 <strong>Meteor.js</strong> 等多个框架选项。这些框架都是免费和开源的。</p>
<h2 id="14-play-with-package-manager"> 14)玩转包管理工具</h2>
<p>本指南的最后一个主题是<strong>软件包管理器</strong>。根据环境的不同，<strong>包</strong>可以代表一个准备安装在计算机上的独立程序，也可以代表一个我们想在某个软件项目中利用的外部代码库。</p>
<p>我们的应用程序经常依赖这些外部代码库，因此我们也将它们称为<strong>依赖项</strong>。</p>
<p>包管理器是帮助我们维护系统或软件项目的依赖项的程序。“维护”是指根据需要安装、更新、列出和卸载依赖项。</p>
<p>我们讨论的包管理器既可以用于维护我们在操作系统上安装的程序，也可以用于维护软件项目的依赖项。</p>
<h3 id="macosxhomebrew">Mac OS X：Homebrew</h3>
<p><strong>Homebrew</strong> 是 Mac OS X 操作系统上最流行的包管理器。它提供在 Mac 上安装、更新、跟踪、列出和卸载软件包和应用程序的便捷方式。</p>
<p>许多可以通过 .dmg 文件下载安装的应用程序也可以使用 Homebrew 下载和安装。</p>
<p>以下是通过 Homebrew 安装<code>wget</code>包的示例：</p>
<pre><code class="language-sh">brew install wget
</code></pre>
<h3 id="linuxaptyum">Linux：Apt 和 Yum</h3>
<p>Linux 是围绕命令行构建的，包管理器是安装程序的默认方式也就不足为奇了。</p>
<p>大多数主流版本的 Linux 都带有内置的包管理器。<strong>Advanced Package Tool</strong>（APT）是 Debian 和基于 Ubuntu 的 Linux 发行版的本地包管理器。 <strong>Yellowdog Updater, Modified</strong>（YUM）是 RedHat Linux 发行版的本地包管理器。</p>
<p>下面是一个使用 APT 安装 Vim 的例子：</p>
<pre><code class="language-sh">sudo apt-get install vim
</code></pre>
<p>And using Yum:</p>
<pre><code class="language-sh">sudo yum install vim
</code></pre>
<h3 id="javascriptnodepackagemanagernpm">JavaScript：Node Package Manager（NPM）</h3>
<p>现在我们已经了解了一些操作系统级别的包管理器是如何工作的，让我们来看看编程语言的包管理器。这些可以帮助我们管理项目所依赖的软件库。 <strong>Node Package Manager（NPM）</strong> 默认随 Node.js 一起安装。</p>
<p>NPM 与我们之前看到的包管理器之间的一个区别是 NPM 可以在<strong>本地</strong>或<strong>全局</strong>模式下运行。本地模式用于仅在我们正在处理的特定项目/目录中，而全局模式用于在系统上安装包。</p>
<p>默认情况下，软件包安装在本地，但您可以使用<code>-g</code>标志全局安装软件包：</p>
<pre><code class="language-sh">npm install request -g
</code></pre>
<h3 id="pythonpip">Python：Pip</h3>
<p>Python有一个名为<strong>Pip</strong>的包管理器。你的系统可能已经安装了Pip，因为它与最新版本的Python打包在一起。我们可以轻松地从<strong>Python索引安装包</strong>使用<code>pip install &lt;package-name&gt;</code>命令来安装Pip：</p>
<pre><code class="language-sh">pip install requests
</code></pre>
<h3 id="javaapachemaven">Java：Apache Maven</h3>
<p><strong>Apache Maven</strong>（通常简称为** Maven**）是一个免费的开源工具套件，包括依赖管理。</p>
<p>尽管也支持其他语言，Maven主要用于Java项目。 Maven可以做很多事情。它的使用稍微复杂一些，我们在这里不再赘述。</p>
<h2 id="">总结</h2>
<p>我在本文介绍了一些基本的编码概念和工具，旨在展示软件开发鸟瞰图，我希望我当初开始学习编程的时候也有这份鸟瞰图。</p>
<p>涵盖的主题包括互联网、几种编程语言、版本控制系统和数据库，我尝试描述这些拼图如何组合在一起的。</p>
<h2 id="">未来规划</h2>
<p>如果你喜欢这篇文章，我写了一本名为<a href="https://initialcommit.com/store/coding-essentials-guidebook-for-developers">《面向开发人员的 Coding Essentials Guidebook》</a>的书，一共 14 章，每章都涵盖了本文中讨论的一个主题。</p>
<p>在这本书中，我对这 14 个主题进行了更深入的研究，因此这本书是检验你是否从这篇文章有所收获的一个途径。</p>
<p>可能因为这篇文章被某种特定的语言、工具或概念所吸引，我鼓励您深入研究该领域以进一步学习。</p>
<p>如果你这本书有任何问题、建议或疑虑，我很乐意听取您的意见，你可以发邮件到 <a href="mailto:jacob@initialcommit.io">jacob@initialcommit.io</a>。</p>
<!--kg-card-end: markdown--> ]]>
                </content:encoded>
            </item>
        
            <item>
                <title>
                    <![CDATA[ 为什么学习编程很难？如何让它更容易？ ]]>
                </title>
                <description>
                    <![CDATA[ 原文：Why Learning to Code is Hard – And How to Make it Easier [https://www.freecodecamp.org/news/why-learning-to-code-is-hard-and-how-to-make-it-easier/] ，作者：Ogundiran Ayobami [https://www.freecodecamp.org/news/author/codingnninja/] 你是否在为学习代码而挣扎?  如果你是，我想帮助你。因此，我从我的个人经验中收集了一些技巧，给你一些指导，这样你就不会再做无谓的挣扎。 为什么学习代码很难 学习代码可能是非常困难的，特别是对于初学者。这可能就是你目前正在挣扎的原因。你可能会对遵循哪种方法感到困惑，因为有很多相互冲突的方法和想法。 你可能在背代码或用很多东西让自己超负荷工作。现在，你心烦意乱，无所适从。 这是所有程序员的共同经历。当我开始学习代码时，我也有同样的经历。我很困惑，不知道该遵循什么，因为我和你一样，在互联网上可以接触到很多风格和观点。 我不断地学 ]]>
                </description>
                <link>https://www.freecodecamp.org/chinese/news/why-learning-to-code-is-hard-and-how-to-make-it-easier/</link>
                <guid isPermaLink="false">6267b413395ec5063718ac4b</guid>
                
                    <category>
                        <![CDATA[ 编程学习 ]]>
                    </category>
                
                <dc:creator>
                    <![CDATA[ luojiyin ]]>
                </dc:creator>
                <pubDate>Tue, 26 Apr 2022 09:10:00 +0000</pubDate>
                <media:content url="https://chinese.freecodecamp.org/news/content/images/2022/04/danial-igdery-FCHlYvR5gJI-unsplash.jpeg" medium="image" />
                <content:encoded>
                    <![CDATA[ <p>原文：<a href="https://www.freecodecamp.org/news/why-learning-to-code-is-hard-and-how-to-make-it-easier/">Why Learning to Code is Hard – And How to Make it Easier</a>，作者：<a href="https://www.freecodecamp.org/news/author/codingnninja/">Ogundiran Ayobami</a></p><!--kg-card-begin: markdown--><p><strong>你是否在为学习代码而挣扎?</strong> 如果你是，我想帮助你。因此，我从我的个人经验中收集了一些技巧，给你一些指导，这样你就不会再做无谓的挣扎。</p>
<h2 id="">为什么学习代码很难</h2>
<p>学习代码可能是非常困难的，特别是对于初学者。这可能就是你目前正在挣扎的原因。你可能会对遵循哪种方法感到困惑，因为有很多相互冲突的方法和想法。</p>
<p>你可能在背代码或用很多东西让自己超负荷工作。现在，你心烦意乱，无所适从。</p>
<p>这是所有程序员的共同经历。当我开始学习代码时，我也有同样的经历。我很困惑，不知道该遵循什么，因为我和你一样，在互联网上可以接触到很多风格和观点。</p>
<p>我不断地学习我所遇到的任何东西，因为我觉得一切都很重要。我担心，如果我忽视任何我发现的信息，我可能会失去我真正需要的成长。</p>
<p>你看，你很聪明，很有才华，很有能力。你没有任何问题。你只需要培养一种编程心态，并利用那些不会让一切变得更困难的资源来学习。因此，这里有你需要知道的东西，以帮助你更有效地学习代码。</p>
<h2 id="">编程概念的教学是困难的</h2>
<p>如果你还没有找到合适的学习资源，你可能会在学习编码时遇到困难。有些教程让编码变得更加困难，而有些教程可能不适合你的学习风格。</p>
<p>另外，要确保你的学习资源来自于高质量的来源——教学并不总是等同于理解，所以要尽量找那些有高质量声誉的网站或组织。</p>
<p>没有哪个教程是完美的——但它们也不应该是不必要的难懂的。最近，我在互联网上研究了很多 JavaScript 教程，我很难理解其中许多教程所要教授的内容。而且我对 JavaScript 有很好的理解——但我还是对这些教程感到很费劲。</p>
<p>事实上，创建一个可以运行并且满足预期目的的应用程序是有可能的——但当涉及到教如何创建它时，那就是另一场球赛了。</p>
<h3 id="">为什么很难解释编码概念</h3>
<p>一个复杂的代码库是很难解释的。有人在试图剖析它的时候，可能会从表面抓起，但他们可能不会让你对这个主题有深刻的理解。</p>
<p>当你在看教程中的代码时，想一想：对于你这个初学者来说，这些代码是否容易理解？或者你正在努力理解发生了什么？</p>
<p>在你选择学习材料时要考虑到这一点，因为它们可能是你在编码时感到困难的一个主要原因。简而言之，<strong>学习代码首先要找到合适的资源来学习</strong>。不要认为这是理所当然的。</p>
<p>现在的问题是，前进的道路是什么？好吧，从一些不同的资源开始学习——但不要太多。一旦你对它们有了感觉，就在其中挑选两个甚至一个，让你的一切变得简单。</p>
<p>这样做很重要，因为对我有用的东西不一定对你有用。所以一定要选择你自己的教程。</p>
<h2 id="">不要只是背代码</h2>
<p>当你不明白自己在做什么时，背代码是很自然的。如果你学习的资源让你难以理解，那么这样做就特别有诱惑力。</p>
<p>看起来你并没有在背代码，但你可能是在下意识地这样做。</p>
<p>我现在能告诉你的是，你不应该只是背诵代码，否则会伤透你的心💔！它将迫使你进行不必要的挣扎。</p>
<p>以下是原因。</p>
<p>每当你应用你的知识时，背代码会让你感到困惑，因为你并不真正理解你在做什么。你实际上并没有学会<strong>如何</strong>编程，你只是学会了如何复制和粘贴。</p>
<p>每当你把一些代码储存在脑子里，却不明白代码的含义，如何工作，以及不同部分的实际作用。</p>
<p>由于你不理解核心概念，你会在实际构建项目时感到很困难。</p>
<p>你甚至可能放弃......</p>
<p>例如，让我们看一下下面的代码：</p>
<pre><code class="language-js">let students = ['Ope', 'Ayo', 'Ola']; 
let count; 

for ( count = 2; count &gt;= 0;  --count ) 
{ 
    console.log(students[count]); 
} 
</code></pre>
<p>这将在控制台中记录什么？看，如果你没有真正理解 for 循环、 <code>++</code> 和 <code>--</code>是如何工作的，你会发现很难理解上面的代码。</p>
<p><strong>那么，你应该做什么呢？</strong></p>
<p>每当你意识到你并不真正理解一段代码时，就把代码分解成几块。然后研究每一块的用途。让我们用上面的代码作为一个例子。</p>
<h3 id="">如何将代码分解成小部分</h3>
<p>第一步：你需要了解 for 循环 是怎么运行的：</p>
<pre><code class="language-js">for (...){ }
</code></pre>
<p>这个 for 循环是做什么的？</p>
<p>它被用来重复一个动作或一系列的动作数次。</p>
<p>第二步：你需要了解初始化。</p>
<pre><code class="language-js">for ( initialization; conditional; increment or decrement ) { }
</code></pre>
<p>初始化的作用是什么？</p>
<p>它设置循环的开始。它决定了要开始的位置或索引。</p>
<p>第三步：你需要了解条件语句。</p>
<p>条件语句是做什么的？</p>
<p>它们设定了必须满足的条件，以便循环继续运行。</p>
<p>如果条件评估为 <code>true</code>，循环将继续运行。但如果它的评估结果为 <code>false</code>，循环将终止（停止）。</p>
<p>第四步：你需要了解递增（increment）和递减（decrement）。</p>
<p>递增是用来做什么的？我们用它来给一个数字加 1。</p>
<p>递增可分为前递增（++increment）和后递增（increment++）。</p>
<p>它们有什么不同？在一个数字上加 1 后，前递增会像这样返回结果：</p>
<pre><code class="language-js">let number = 5; console.log(++number)// 6
</code></pre>
<p>在 1 加到 5 之后，它返回 6。后递增将返回我们加 1 的数字，而不是像这样的结果：</p>
<pre><code class="language-js">let number = 5; 
console.log(number++) // 5 
console.log(number) //6 
</code></pre>
<p>你看，在将 1 添加到 5 之后，后递增返回 5，当我们检查数字时，它现在是 6。</p>
<p>简而言之，只要我们对一个数字使用前递增（pre-increment），其结果就会被返回。但是如果我们使用后递增，则返回数字本身而不是其结果。它们返回的内容是完全不同的。</p>
<p>那么，它在循环中的应用是什么？</p>
<p>无论递增（increment）或递减（decrement）返回什么，都不会影响到循环，因为循环只处理我们在对数字应用后递增或前递增后得到的结果。它们都是在初始化器上加一。</p>
<p>但是我们也有递减（decrements）——它们从计数中减去一个。这意味着，在这种情况下，计数将在每次迭代时减少 1。</p>
<pre><code class="language-js">let students = ['Ope', 'Ayo', 'Ola']; 
let count; 

for ( count = 2; count &gt;= 0;  --count ) { 
    console.log(students[count]); 
} 
</code></pre>
<p>所以 <code>students [count]</code> 将在第一次迭代时返回 <code>Ola</code>，因为其索引是 2。</p>
<p>它将在第二次迭代时返回 <code>Ayo</code>，因为它的索引是 1，<code>Ope</code> 将在第三次迭代时返回，因为它的索引是 0。然后，循环将终止，因为计数将小于零，条件将评估为 <code>false</code>。</p>
<p>就这样 这就是你如何将代码分解成小块，从而使你能够解开它。</p>
<h2 id="">不要让自己的负担过重</h2>
<p>超负荷意味着要处理超过你在某一时间内所能处理的任务。</p>
<p>当你开始学习代码时，你可能会有一种冲动，想迅速学会一切，获得编程所能提供的一切可能的机会。</p>
<p>所以，你最终会让自己的任务超载，或者在短时间内给自己分配一个复杂的任务。哦，不! 这就是你在编码上挣扎的原因之一。</p>
<p>我仍然记得学习 JavaScript 对我来说是非常困难的，因为愚蠢的我让自己超载了。我在不到 30 分钟的时间里学会了 var、let、const、函数、数组、对象和条件语句，以为自己已经准备好成为一个世界级的软件开发者。</p>
<p>与此同时，我还在学习 Python、PHP 中的其他东西，并且还在读 John Resig 的书，书中解释了很多 JavaScript 中的高级概念以及他是如何开发或借用解决方案来创建 jQuery 的。</p>
<p>还有一件事，我在一个小时内就读完了一本 100 页的教科书和一个长达 6 小时的视频教程。</p>
<p>说实话，广泛阅读或学习并没有错——但凡事都需要时间。你不可能一下子就知道所有东西。所以，不要让自己超负荷。</p>
<h3 id="">如何把握学习的节奏</h3>
<p>选择你的项目的一个部分或你知道的超级简单的编程语言来建立或理解。然后问很多关于它的合理和基本的问题，因为这样基础扎实，无用之用，方为大用。嘿，等等! 让我给你举个例子:‌‌</p>
<p>想象一下，如果你想学习 JavaScript，你就决定，今天只学 <code>let</code> 和 <code>const</code>，其他都不学。然后你问了很多关于它们的简单而合理的问题。</p>
<p>这样做，你的学习速度会显得很慢，但你很可能最后会超过那些急于求成的同行（除非他们有特殊的大脑，这是一种罕见的情况）。</p>
<p>是的，同时处理几个任务或在时间不足的情况下做一件事会使你的编码变得困难。如果你没有达到一个合理的结果，它也会迫使你放弃。</p>
<p>所以，无论你学什么都要保持超级简单，<strong>驯服你的好奇心，因为它是专注的反面</strong>。</p>
<h2 id="">保持开放的心态</h2>
<p>关于编程语言、库、框架、技术和方法，软件开发者之间有很多相互冲突的意见。软件开发人员是我认识的最有主见的人。</p>
<p>你可能读过或听过诸如 <strong>不要重复自己（DRY）</strong>、<strong>测试驱动开发（TDD）</strong>、<strong>利润驱动开发（PDD）</strong>、<strong>你不会需要它（YAGNI）</strong>、<strong>干净的代码</strong>、<strong>永远在编码（ABC）</strong>、<strong>喜欢组合而不是继承</strong>，以及其他许多事情。也许你想站在一边。</p>
<p>根据你所尊重的软件开发人员的意见来站队是很诱人的。但我认为在你真正理解你所做的事情之前，你不应该这样做。你目前的工作是理解基本原理并使用它们来构建项目。</p>
<p>最终你会遇到一些挑战，迫使你使用某些方法、库和框架。所有的方法或技术都是基于上下文而有用的。<strong>没有哪种方法是对的或错的，是环境使然</strong>。</p>
<p>所有这些技术在解决现实世界的问题时都是有用的，而且它们也都有缺点。因此，在你了解你所选择的编程语言的基本原理并用它建立了一些基本项目之前，不要太担心选边站。‌‌‌‌</p>
<h2 id="">培养研究思维</h2>
<p>编程，大多数时候，就像研究一样。你从观察开始，然后测试几件事情，直到你取得一个满意的结果。这就是编程的样子。你常常不知道你在做什么，直到它发挥作用。</p>
<p>一旦你理解了这一点，它就会帮助你满足于<strong>必要的</strong>斗争。因为大多数时候，你必须学会如何修复一个你在职业生涯中从未见过的错误，而这可能真的需要很大的努力。</p>
<p>现在，你可能会挣扎着去修复那个错误，说实话，这是一种必要的挣扎。没有哪个软件开发者能摆脱这种挣扎。好吧，也许<strong>10 倍的工程师（微笑）</strong> 可以不受影响，但我不是。</p>
<p>作为一个专家并不是对所有问题都有答案，而是要知道如何找到答案。</p>
<h2 id="">避免分心</h2>
<p>我们都有一些分心的事情，这些分心的事情会使我们无法专注于编码。你的是什么？是你目前的工作，合作伙伴，小玩意，还是仅仅为了维持生计而挣扎？</p>
<p>你需要弄清楚你的干扰因素是什么，并在你开始学习编码之前将它们去除。否则你就会一次又一次地开始和放弃。</p>
<p>有时，你可以正面应对挑战，而有时你只需要离开它们。在这种情况下，你需要安排好你的编码活动和时间，使你不会被你无法控制或改变的事情分心。</p>
<p>如果你的生活中有很多分心的事情，你就不可能真的那么有效地进行编码，所以你需要识别它们并逐一解决它们。这将帮助你增加实现你的编程梦想的机会。</p>
<h2 id="">不要太努力工作</h2>
<p>放松！不要让自己过度劳累，因为你真的需要理解你在这个阶段所处理的概念。而这需要一个休息好的、新鲜的头脑来完成。所以，不要让自己过度劳累，危及你的学习效率。</p>
<p>编程对有经验的软件工程师来说都很难，更何况是初学者。工作太辛苦而没有得到合理的结果，可能会让你容易灰心。当你在精神上有些疲惫时，停下来，休息一下，以后再继续。</p>
<p>试试吧。退出一项任务几分钟。远离电脑工作。睡觉，解放你的思想，但随后不要忘记再试一次，再试一次，直到你理解为止。</p>
<h2 id="">总结</h2>
<p>挣扎是一件好事，如果它是有成效的。它使你成为更好的人或更好的软件开发人员。但不要误会我的意思——我不是要你进行不必要的挣扎。</p>
<p><strong>没有一个软件开发者</strong>在编写代码时是不需要挣扎的。但更糟糕的是，通过使用错误的资源进行学习，或不向导师或在你遇到困难时能帮助你的人寻求帮助，从而进行不必要的挣扎。</p>
<p>现在，去把事情做好吧。</p>
<h2 id=""><strong>还有一件事</strong></h2>
<p><strong><a href="https://twitter.com/codingnninja">Ayobami</a></strong> 喜欢分享软件开发的历史，正在通过 <strong><a href="https://bit.ly/3o3TMyg">你也会编程</a></strong>，帮助那些在理解和用 JavaScript 构建项目方面有困难的人。</p>
<!--kg-card-end: markdown--> ]]>
                </content:encoded>
            </item>
        
            <item>
                <title>
                    <![CDATA[ 年度总结丨2020 年世界各地的开发者在 freeCodeCamp 学习 13 亿分钟 ]]>
                </title>
                <description>
                    <![CDATA[ 原文：Developers Spent 1.3 Billion Minutes Using freeCodeCamp in 2020, and Other Year-end Facts [https://www.freecodecamp.org/news/freecodecamp-2021-year-in-numbers/]，译者： Quincy Larson [https://www.freecodecamp.org/news/author/quincylarson/] 2021 年即将到来，我们通过这篇文章和大家同步一下 freeCodeCamp 社区目前的发展情况。 首先，我们看一些数据：  * 2020 年，freeCodeCamp 的全部运营预算仅为 498,521 美元。  * 依靠这笔微薄的预算，我们的非营利组织提供了超过 13 亿分钟的教学，相当于世界各地的学员一共学习了 2,519 年。  * 基于我们目前的资金使用效率，大家向 freeCodeCamp 捐赠的每一美元帮助世界各地的人们免费学习编程将近 50 个小时。 我认识一些在 FAANG 公司（Face ]]>
                </description>
                <link>https://www.freecodecamp.org/chinese/news/freecodecamp-2020/</link>
                <guid isPermaLink="false">5fed233e39641a0517d529cb</guid>
                
                    <category>
                        <![CDATA[ freeCodeCamp ]]>
                    </category>
                
                    <category>
                        <![CDATA[ 开发者 ]]>
                    </category>
                
                    <category>
                        <![CDATA[ 编程学习 ]]>
                    </category>
                
                <dc:creator>
                    <![CDATA[ Miya Liu ]]>
                </dc:creator>
                <pubDate>Thu, 31 Dec 2020 03:00:00 +0000</pubDate>
                <media:content url="https://chinese.freecodecamp.org/news/content/images/2020/12/1609386236079.jpg" medium="image" />
                <content:encoded>
                    <![CDATA[ <p>原文：<a href="https://www.freecodecamp.org/news/freecodecamp-2021-year-in-numbers/">Developers Spent 1.3 Billion Minutes Using freeCodeCamp in 2020, and Other Year-end Facts</a>，译者：<a href="https://www.freecodecamp.org/news/author/quincylarson/">Quincy Larson</a></p><p>2021 年即将到来，我们通过这篇文章和大家同步一下 freeCodeCamp 社区目前的发展情况。</p><p>首先，我们看一些数据：</p><ul><li>2020 年，freeCodeCamp 的全部运营预算仅为 <strong>498,521 美元</strong>。</li><li>依靠这笔微薄的预算，我们的非营利组织提供了超过 <strong>13 亿分钟</strong>的教学，相当于世界各地的学员一共学习了 <strong>2,519 年</strong>。</li><li>基于我们目前的资金使用效率，大家向 freeCodeCamp 捐赠的每一美元帮助世界各地的人们免费学习编程将近 <strong>50 个小时</strong>。</li></ul><p>我认识一些在 FAANG 公司（Facebook、Apple、Amazon、Netflix、Google）工作的开发者，他们个人的年收入超过 49.8 万美元，这还只是他们的工作收入。一位开发者的工资就够我们运营整个全球性非营利组织的预算。</p><p>（感谢 6,560 位善良的捐款人，TA 们每月捐款 5 美元，支持 freeCodeCamp。如果你还没有捐款，可以<a href="https://www.freecodecamp.org/donate">点击这里</a>加入 TA 们。）</p><p>鉴于种种原因，2020 年是无比漫长的一年。 但好消息是，今年有很多人利用业余时间来拓展自己的技能。他们中的许多人都使用 freeCodeCamp 作为学习资源。</p><p>首先，你可能想知道社区是否还在增长。我们的确在持续增长。</p><figure class="kg-card kg-image-card kg-width-wide kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2020/12/freeCodeCamp_historic_usage_-_Google_Sheets-1.png" class="kg-image" alt="freeCodeCamp_historic_usage_-_Google_Sheets-1" width="600" height="400" loading="lazy"><figcaption>官网 freeCodeCamp.org 和我们社区的 YouTube channel 从 2015 年以来一直在稳定增长，这个条形图显示全世界的人们每年使用这两部分学习资源的时间</figcaption></figure><p>这个表格展示更确切的数字：🎉</p><pre><code>+------+------------------+-------------+---------------+
| Year | freeCodeCamp.org |   YouTube   | Yearly Total  |
+------+------------------+-------------+---------------+
| 2015 |       37,367,085 |     246,639 |    37,613,724 |
| 2016 |      189,054,404 |   1,449,703 |   190,504,107 |
| 2017 |      307,802,640 |   8,331,843 |   316,134,483 |
| 2018 |      401,473,441 |  92,197,551 |   493,670,992 |
| 2019 |      347,393,464 | 474,000,000 |   821,393,464 |
| 2020 |      508,054,160 | 764,332,218 | 1,272,386,378 |
+------+------------------+-------------+---------------+</code></pre><p>接下来我们看一下 freeCodeCamp 社区四大支柱的发展情况：</p><h2 id="-1-freecodecamp-"><strong><strong>支柱</strong> <strong>#1</strong>：<strong>freeCodeCamp 课程</strong></strong></h2><figure class="kg-card kg-image-card kg-width-wide kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2020/12/Learn_to_Code_for_Free_-_Coding_Courses_for_Busy_People.png" class="kg-image" alt="Learn_to_Code_for_Free_-_Coding_Courses_for_Busy_People" width="600" height="400" loading="lazy"><figcaption>freeCodeCamp.org 的课程由浅入深，内容简练，已经有很多人通过学习这些课程而成为开发者</figcaption></figure><p>freeCodeCamp.org 目前有 10 个软件工程课程认证，课程长达 3,000 小时。截至 2020 年 12 月，超过 11 万人将 “freeCodeCamp 校友” 填写在自己的 LinkedIn 资料上（在其 LinkedIn 个人资料中列出至少一项 freeCodeCamp 认证）。</p><figure class="kg-card kg-image-card kg-width-wide kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2020/12/_99___freeCodeCamp__People___LinkedIn.png" class="kg-image" alt="_99___freeCodeCamp__People___LinkedIn" width="600" height="400" loading="lazy"><figcaption>看看 LinkedIn 上的 freeCodeCamp 校友们来自哪里，在哪里工作</figcaption></figure><p>其中许多人在开始使用 freeCodeCamp 时就已经在从事开发工作。但是，至少有 4 万人是在获得一项 freeCodeCamp 认证之后才获得了第一份技术工作。</p><p>这是对 freeCodeCamp 社区帮助了多少人的职业发展的保守估计。</p><p>关于这一点，如果你正在阅读本文，但尚未将 freeCodeCamp 认证添加到你的 LinkedIn 个人资料中，我们在你的认证下方添加了一个按钮，你可以单击该按钮将认证添加到资料。</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2020/12/91362896-095cc300-e7c1-11ea-9ae2-20ed40f91324_png__1372-1086_-1.png" class="kg-image" alt="91362896-095cc300-e7c1-11ea-9ae2-20ed40f91324_png__1372-1086_-1" width="600" height="400" loading="lazy"><figcaption>你可以点击认证下方的“将此认证添加到我的 LinkedIn 个人资料" 按钮</figcaption></figure><p>今年，我们在 freeCodeCamp 课程 7.0 版上取得了重大进展，并发布了 4 项新的以 Python 为核心的认证，你可以通过学习来获得：</p><ul><li>科学计算</li><li>数据分析</li><li>机器学习</li><li>信息安全</li></ul><p>我们才刚刚开始，还有超过 50 个指导性项目（含完整的测试套件）正在开发中。你可以<a href="https://chinese.freecodecamp.org/news/python-curriculum-is-live/">点击这里</a>阅读有关课程更新的更多信息。</p><p>（译者注：中文翻译版课程很快会上线官网 freeCodeCamp.org，暂时请大家在 learn.freeCodeCamp.one 访问。）</p><h2 id="-2-freecodecamp-"><strong><strong>支柱</strong> <strong>#2</strong>：<strong>freeCodeCamp</strong> 专栏</strong></h2><figure class="kg-card kg-image-card kg-width-wide kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2020/12/freeCodeCamp_Programming_Tutorials__Python__JavaScript__Git___More.png" class="kg-image" alt="freeCodeCamp_Programming_Tutorials__Python__JavaScript__Git___More" width="600" height="400" loading="lazy"><figcaption>freeCodeCamp 专栏截图</figcaption></figure><p>2019 年，我们将 freeCodeCamp 专栏从 Medium.com 迁移到我们自托管的基础架构上，带来更快、更简洁的用户体验。</p><p>曾经，freeCodeCamp 专栏给 Medium 带去的流量大约占其总流量的 10％，而现在我们的自托管专栏的流量更大。</p><p>我们每周大约发布 20 篇文章——所有文章均由我们的编辑团队精心策划和编辑。这有点像面向开发人员的学术期刊。</p><p>最重要的是，我们强调内容的质量以及内容须与开发人员相关。所以，我们的专栏被全世界正在学习新技能的人们广泛分享和阅读。</p><h3 id="2020-freecodecamp-10-"><strong>2020 年 <strong>freeCodeCamp 专栏</strong>阅读量最高的 10 篇文章</strong></h3><p>这 10 篇文章有非常多的干货，你可以把它们添加到书签，然后仔细阅读。</p><ul><li><a href="https://www.freecodecamp.org/news/systems-design-for-interviews/">《系统设计面试问题》</a>，作者：Zubin Pratap</li><li><a href="https://www.freecodecamp.org/news/the-linux-commands-handbook/">《Linux 命令手册》</a>，作者：Flavio Copes</li><li><a href="https://www.freecodecamp.org/news/dijkstras-shortest-path-algorithm-visual-introduction/">《图文详解 Dijkstra 最短路径算法》</a>，作者：Estefania Cassingena Navone</li><li><a href="https://www.freecodecamp.org/news/freelance-web-developer-guide/">《自由职业开发者完全指南》</a>，作者：Luke Ciciliano</li><li><a href="https://chinese.freecodecamp.org/news/alternative-career-paths/">《程序员职业发展的 23 种路径》</a>，作者：Karl Hughes</li><li><a href="https://www.freecodecamp.org/news/the-ultimate-guide-to-python-from-beginner-to-intermediate-to-pro/">《Python 从入门到专业》</a>，作者：Sharvin Shah</li><li><a href="https://www.freecodecamp.org/news/the-docker-handbook/">《Docker 完全手册》</a>，作者：Farhan Hasin Chowdhury</li><li><a href="https://chinese.freecodecamp.org/news/60-interviews-in-one-month/">《一个月之内参加 60 多场软件开发面试，我收获了什么？》</a>，作者：Uduak Obong-Eren</li><li><a href="https://www.freecodecamp.org/news/a-no-code-intro-to-the-9-most-important-machine-learning-algorithms-today/">《9 个核心机器学习算法》</a>，作者：Nick McCullum</li><li><a href="https://www.freecodecamp.org/news/build-a-pwa-from-scratch-with-html-css-and-javascript/">《从零开始使用 HTML、CSS 和 JavaScript 搭建 PWA》</a>，作者：Ibrahima Ndaw</li></ul><h2 id="-3-freecodecamp-"><strong><strong>支柱</strong> <strong>#3</strong>：<strong>freeCodeCamp 论坛</strong></strong></h2><p><a href="https://forum.freecodecamp.org/">freeCodeCamp 论坛</a>仍然是网络上氛围最友好的讨论技术的地方之一。你可以向社区成员提出编程问题，或者分享你自己的项目，并获得建设性反馈。</p><figure class="kg-card kg-image-card kg-width-wide kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2020/12/The_freeCodeCamp_Forum_-_Join_the_developer_community_and_learn_to_code_for_free_.png" class="kg-image" alt="The_freeCodeCamp_Forum_-_Join_the_developer_community_and_learn_to_code_for_free_" width="600" height="400" loading="lazy"><figcaption>freeCodeCamp 论坛截图</figcaption></figure><p>2020 年，世界各地的人们在 freeCodeCamp 论坛上总共花费了约 124,019,921 分钟（235 年）——大家花了很多时间来帮助其他开发人员。</p><p>当然，freeCodeCamp 论坛之所以如此友好而富有成效，是因为有一群很棒的开发者在这里帮助他人。以下是在过去一年中帮助他人最多的社区成员名单（可<a href="https://forum.freecodecamp.org/u?period=yearly">点击这里</a>浏览完整名单）。</p><figure class="kg-card kg-image-card kg-width-wide kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2020/12/Users_-_The_freeCodeCamp_Forum.png" class="kg-image" alt="Users_-_The_freeCodeCamp_Forum" width="600" height="400" loading="lazy"><figcaption>在过去一年中帮助他人最多的 10 位社区成员（基于 TA 们获得的其他开发者的点赞数统计）。Camperbot 也帮助很多，但是因为它是机器人，所以不能被算在内。谢谢你，Camperbot！</figcaption></figure><h2 id="-4-freecodecamp-youtube-channel"><strong><strong>支柱</strong> <strong>#4</strong>：<strong>freeCodeCamp</strong> 社区<strong> YouTube Channel</strong></strong></h2><figure class="kg-card kg-image-card kg-width-wide kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2020/12/freeCodeCamp_org_-_YouTube.png" class="kg-image" alt="freeCodeCamp_org_-_YouTube" width="600" height="400" loading="lazy"><figcaption>freeCodeCamp 社区 YouTube channel 截图</figcaption></figure><p>第四个重要支柱是 <a href="https://www.youtube.com/freecodecamp">freeCodeCamp 社区的 YouTube channel</a>。我们在那里发布了大量关于数学、计算机科学和编程的免费全套长视频课程。</p><p>（译者注：中文社区的学员可以在 bilibili 搜索关注 freeCodeCamp，学习社区的视频课程。）</p><p>2020 年，我们在 YouTube channel 发布了 120 多个视频课程，每个课程的平均长度为 5 小时。这是非常丰富的免费学习资源。</p><p>视频课程是一种向世界各地的人们传授知识的好方法。即使你不在电脑前，你也可以通过视频很方便地学习。人们花了大量时间在 freeCodeCamp 社区的 YouTube channel 学习：</p><figure class="kg-card kg-image-card kg-width-wide kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2020/12/Channel_analytics_-_YouTube_Studio.png" class="kg-image" alt="Channel_analytics_-_YouTube_Studio" width="600" height="400" loading="lazy"><figcaption>2020 年的 YouTube 数据分析：学员在 freeCodeCamp YouTube channel 观看编程视频课程时长总计超过 1200 万小时</figcaption></figure><p>freeCodeCamp 社区的 channel 现在是 YouTube 上最大的以编程为核心的 channel。但是我们才刚刚开始。</p><h3 id="2020-5-freecodecamp-youtube-"><strong>2020 年最受欢迎的 5 个<strong> freeCodeCamp YouTube 课程</strong></strong></h3><p>以下是我们在 2020 年发布的 120 个新课程中最受欢迎的课程：</p><ul><li><a href="https://www.freecodecamp.org/news/massive-tensorflow-2-0-free-course/">《TensorFlow 2.0 完整课程》</a>（7 小时），作者：Tim Ruscica</li><li><a href="https://www.freecodecamp.org/news/learn-college-calculus-in-free-course/">《微积分 1 - 全套大学课程》</a>（12 小时），作者：Dr. Linda Green（北卡罗来纳大学教堂山分校教授）</li><li><a href="https://www.freecodecamp.org/news/learn-to-develop-and-android-app-no-experience-required/">《安卓开发入门课程》</a>（15 小时），作者：Meisam Mansourzadeh</li><li><a href="https://www.freecodecamp.org/news/azure-fundamentals-course-az900/">《Microsoft Azure 基础认证课程》</a>（3 小时），作者：Andrew Brown</li><li><a href="https://www.freecodecamp.org/news/introduction-to-computer-programming-and-computer-science-course/">《编程和计算机科学入门课程》</a>（2 小时），作者：Steven and Sean</li></ul><p>同样的，你可以把它们添加到书签，稍后观看。当然你也可以现在就坐下来观看:)</p><p>而且，如果你查看这些视频的评论，你会看到很多人评论：“妈妈，睡前再多看一个视频！”</p><h2 id="freecodecamp-"><strong><strong>freeCodeCamp</strong> 非营利组织的<strong>可持续性如何</strong></strong></h2><p>要是我说：如果你不给我们的非营利组织捐款，freeCodeCamp 将不复存在，我们的服务器将停止运行，Quincy 将不得不卖掉他的肾来支付下个月的 AWS 账单...... </p><p>好啦，现实情况是：我们的非营利组织在使用微薄的捐款方面一直非常谨慎。我们力所能及地保持良好运营。</p><p>对于 freeCodeCamp 非营利组织的运营，我们会尽量保持开放。例如，<a href="https://www.guidestar.org/profile/82-0779546">GuideStar.org &nbsp;将我们的透明度等级评为“白金”</a>。</p><p>如果你感到好奇，这里是我们<a href="https://freecodecamp.s3.amazonaws.com/freeCodeCamp+2019+f990.pdf">最新的 990</a>。这是一份非营利组织向政府提交的年度报告。</p><p>我们精心规划了 freeCodeCamp 10 年的项目路线图。我们不需要对任何投资者或公司负责。我们只对你们——我们的社区负责。</p><p>我希望我们为你提供了所有你想要的东西：在数学、计算机科学和编程方面的优秀且免费的学习资源。我们将持续创建更多学习资源。在你的帮助下（以及你的捐款支持下），我们可以做更多事情。</p><p>还记得上面说的那些数字吗？每一美元捐款，我们就会为世界各地的人们提供近 50 个小时的学习机会。如果你想支持我们的资金效率极高的非营利组织，你可以<a href="https://www.freecodecamp.org/donate">点击这里</a>成为每月支持者。我们要的只是 5 美元。</p><figure class="kg-card kg-image-card kg-width-wide kg-card-hascaption"><img src="https://chinese.freecodecamp.org/news/content/images/2020/12/image-52.png" class="kg-image" alt="image-52" width="600" height="400" loading="lazy"><figcaption>freeCodeCamp 每月捐款人的数量在持续增长（每人每月捐 5 美元），目前有 6,560 人（是的，也可以通过 <a href="https://github.com/sponsors/freeCodeCamp">GitHub</a> 给我们捐款）</figcaption></figure><p>如果你不能每月捐款 5 美元，也没有关系。我们会始终保持免费。你可以在学习了 freeCodeCamp 的课程，找到开发者工作之后，想要捐款的时候，再捐款。</p><p>而且，如果你在年底有少量现金，<a href="https://paypal.me/freecodecamp">可以通过 PayPal 向我们发送一次性捐款</a>，无论多少都可以。</p><p>你的捐款将帮助我们扩大预算，更大规模地践行使命：通过创建视频、文章和交互式编程课程，帮助人们免费学习编程，所有学习资源都是免费向全世界人们开放。</p><p>感谢你抽出宝贵的时间阅读 freeCodeCamp 社区 2020 年的快速回顾。2021 年对于 freeCodeCamp 而言将是非常重要的一年。很高兴你和我们在一起！</p><p>新年快乐，我们 2021 年见！</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2020/12/D6FF56A6-822E-4DA0-B079-0DEEEEC79679_1_105_c.jpeg" class="kg-image" alt="D6FF56A6-822E-4DA0-B079-0DEEEEC79679_1_105_c" width="600" height="400" loading="lazy"><figcaption>我和我的孩子们：Jocelyn，Quentin。TA 们以后也会学习编程:)</figcaption></figure> ]]>
                </content:encoded>
            </item>
        
            <item>
                <title>
                    <![CDATA[ 开发者如何选择编程语言（一） ]]>
                </title>
                <description>
                    <![CDATA[ “PHP是最好的语言！”“人生苦短，我用 Python！”“JavaScript 一统天下”……关于编程语言的讨论和争论时不时就在我们眼前出现。 其实没有一种编程语言在所有领域（操作系统、硬件驱动、办公软件、游戏、Web 服务器、数据库、搜索引擎、大数据处理、高频交易、机器学习、数值计算等等）都是银弹。我们要学会根据应用场景选择最适合的编程语言。 那么我们如何根据应用场景和编程语言的特性来选择适合的编程语言呢？我认为可以考察编程语言的以下特点和特性： 1. 执行方式 1.1. 汇编执行型 汇编语言（assembly）的源文件由汇编器（assembler）转换为 CPU 可直接执行的二进制程序文件。 1.2. 编译、（汇编）、执行型 C / C++ / Fortran / Pascal / Go / Rust 等编程语言的源文件一般由编译器（compiler）先编译为汇编指令，再由汇编器生成 CPU 可直接执行的二进制程序文件。 现在编译器一般不会把编译出来的汇编指令输出到文件，而通常在内存中直接交给内置的汇编器进行处理，所以我们会看到这些编程语言的编译器直接就输出一个可执行的 ]]>
                </description>
                <link>https://www.freecodecamp.org/chinese/news/how-to-choose-a-programming-language/</link>
                <guid isPermaLink="false">5f8038aa5f583f0565090a33</guid>
                
                    <category>
                        <![CDATA[ 编程语言 ]]>
                    </category>
                
                    <category>
                        <![CDATA[ 编程学习 ]]>
                    </category>
                
                    <category>
                        <![CDATA[ 软件开发 ]]>
                    </category>
                
                <dc:creator>
                    <![CDATA[ Yuping Wu ]]>
                </dc:creator>
                <pubDate>Fri, 09 Oct 2020 10:25:06 +0000</pubDate>
                <media:content url="https://chinese.freecodecamp.org/news/content/images/2020/10/daria-shevtsova-zbWFT4eVopE-unsplash.jpg" medium="image" />
                <content:encoded>
                    <![CDATA[ <p>“PHP是最好的语言！”“人生苦短，我用 Python！”“JavaScript 一统天下”……关于编程语言的讨论和争论时不时就在我们眼前出现。</p><p>其实没有一种编程语言在所有领域（操作系统、硬件驱动、办公软件、游戏、Web 服务器、数据库、搜索引擎、大数据处理、高频交易、机器学习、数值计算等等）都是银弹。我们要学会根据应用场景选择最适合的编程语言。</p><p>那么我们如何根据应用场景和编程语言的特性来选择适合的编程语言呢？我认为可以考察编程语言的以下特点和特性：</p><h2 id="1-">1. 执行方式</h2><h3 id="1-1-">1.1. 汇编执行型</h3><p>汇编语言（assembly）的源文件由汇编器（assembler）转换为 CPU 可直接执行的二进制程序文件。</p><h3 id="1-2-">1.2. 编译、（汇编）、执行型</h3><p>C / C++ / Fortran / Pascal / Go / Rust 等编程语言的源文件一般由编译器（compiler）先编译为汇编指令，再由汇编器生成 CPU 可直接执行的二进制程序文件。</p><p>现在编译器一般不会把编译出来的汇编指令输出到文件，而通常在内存中直接交给内置的汇编器进行处理，所以我们会看到这些编程语言的编译器直接就输出一个可执行的程序文件。</p><p>C / C++ 的编译器 GCC / G++ 和编译器后端 LLVM 都可以把编译出来的汇编指令输出到文件中，供我们查看。</p><figure class="kg-card kg-image-card"><img src="https://chinese.freecodecamp.org/news/content/images/2020/10/ilya-pavlov-OqtafYT5kTw-unsplash.jpg" class="kg-image" alt="ilya-pavlov-OqtafYT5kTw-unsplash" width="600" height="400" loading="lazy"></figure><h3 id="1-3-">1.3. 编译、解释执行型</h3><p>Java / Scala 源文件由 Java 编译器编译成二进制的 class 文件，由 Java 虚拟机（Java virtual machine ，简称 JVM）解释执行。C# / <code>VB.net</code> 源文件由编译器编译为二进制的 exe 或 dll 文件，由 .net 运行时（runtime）程序解释执行。</p><h3 id="1-4-">1.4. 解释、执行型</h3><p>解释执行型语言通常又被称为脚本（script）语言。例如 Bash 脚本、Powershell脚本、JavaScript、Python、PHP、Ruby、Matlab 脚本、Mathematica 脚本等。它们的源文件由相应的运行时程序直接读取并解释执行。</p><h3 id="1-5-">1.5. 编译转换、解释执行型语言</h3><p>TypeScript、JSX、CoffeeScript 等语言通常是先由编译转换程序转换为 JavaScript，再由 JavaScript 运行时解释执行。</p><h3 id="1-6-">1.6. 其他类型</h3><p>例如 Kotlin 即可以被编译为 Java 的 class文件由 JVM 解释执行，也可以被编译转换为 JavaScript ，还可以被编译为可执行程序直接被 CPU 执行。</p><h3 id="1-7-">1.7. 不同执行方式的执行效率</h3><p>Java 的 class 文件中和 .net 的二进制文件中的指令都是类似 CPU 指令的代码，各硬件平台上的虚拟机 / 运行时程序只需花很少的代价就可以将其转换成该平台上的 CPU 指令执行，而不需要再对源代码进行词法语法分析。因此这些编译、解释执行型语言的运行效率通常比下面要介绍的解释执行型语言要高。</p><p>但是编译、解释执行型语言又比汇编 / 编译执行型语言多一个将虚拟机指令转换为 CPU 指令的过程，所以它们运行效率通常又比汇编 / 编译执行型语言的低。</p><p>因此，在对执行效率要求高的系统（例如高频交易的系统、核心网络的路由器中的路由程序）中，通常不采用解释执行型语言，而是采用编译执行型语言来开发。</p><h3 id="1-8-">1.8. 在系统级编程方面的适用性</h3><p>由于编译解释型语言或者脚本语言的运行效率不如编译执行型语言，而且需要虚拟机或者解释器才能运行，因此在操作系统或者驱动程序的编程中通常使用的是编译执行型的语言，如 C / C++ / Rust。</p><p>而在与 CPU 架构密切相关的地方，例如操作系统的内存管理模块的设置页表地址的程序，或者需要使用 CPU 的 IO / 中断等指令的时候，基本上只能使用汇编语言。</p><figure class="kg-card kg-image-card"><img src="https://chinese.freecodecamp.org/news/content/images/2020/10/aleksander-vlad-jiVeo0i1EB4-unsplash--1-.jpg" class="kg-image" alt="aleksander-vlad-jiVeo0i1EB4-unsplash--1-" width="600" height="400" loading="lazy"></figure><h2 id="2-">2. 内存管理</h2><h3 id="2-1-">2.1. 手动管理内存</h3><p>汇编语言以及 C / C++、Fortran、Pascal 等许多编译执行型语言都需要手动管理内存，由程序员手动回收无用的数据占用的内存。</p><h3 id="2-2-">2.2. 自动管理内存</h3><p>编译执行型语言中的 Go，Java、C#、<code>VB.net</code> 等绝大多数编译、解释执行型语言，还有 JavaScript、Python、PHP 等绝大多数脚本语言都是由运行环境自动管理内存（增加作为对象池的堆的内存、无用对象的垃圾回收等）。</p><p>其中 Go 主要采用标记清除算法做垃圾回收（英文 Garbage Collection，缩写 GC）。而 Java 可以指定标记清除、标记整理、标记复制与标记清除结合的分代 GC 算法等等算法中的一种做垃圾回收。对于其他语言的 GC 算法，我没了解过，读者有兴趣可以自己查阅资料。</p><h3 id="2-3-">2.3. 半自动管理内存</h3><p>Rust 语言中多数情况下，通过对象的所有权机制可以使得对象的内存申请和释放在编译期就可以确定，这些对象的内存管理可以看成是由编译器自动处理的。对于少数不受所有权机制限制的不安全对象，仍需要手动管理内存。</p><h3 id="2-4-">2.4. 自动管理内存的优劣</h3><p><strong>2.4.1. 优点</strong></p><p>把程序员从释放无用内存或者管理内存池等逻辑中解放出来，降低内存泄漏的可能性。</p><p><strong>2.4.2. 缺点</strong></p><p>程序员通常无法控制垃圾回收的时机，而垃圾回收通常需要暂停程序的运行，这会导致无法预料的程序卡顿。</p><figure class="kg-card kg-image-card"><img src="https://chinese.freecodecamp.org/news/content/images/2020/10/goran-ivos-TorAcb4AQRc-unsplash--1--1.jpg" class="kg-image" alt="goran-ivos-TorAcb4AQRc-unsplash--1--1" width="600" height="400" loading="lazy"></figure><h2 id="3-vs-">3. 强类型 VS 弱类型</h2><h3 id="3-1-">3.1. 强类型</h3><p>通常在需要编译的语言（如 C / C++ / Java / C# / Kotlin 等语言）中，一个变量 / 对象的属性必须在声明之后才能使用（一个变量必须被声明后才能被读，必须被声明后或者在声明时才能写；一个对象的属性没被定义的话不能被写入），而且一个变量 / 对象的属性 / 函数的入参与返回值的数据类型在声明时就确定下来、不能再改变了。如果违反了这两个约束，那么在编译源代码的时候就会报错。</p><h3 id="3-2-">3.2. 弱类型</h3><p>通常在脚本语言（如 Python、JavaScript、PHP）中，一个对象的属性是可以动态变化的，甚至变量不需要声明就可以使用（读或者写）；一个变量 / 对象的属性 / 函数的入参与返回值的数据类型是不固定的。</p><h3 id="3-3-">3.3. 强弱结合</h3><p>在 TypeScript 和在版本 7 以后的 PHP 等语言之中，既可以使用动态类型，也可以规定某些变量 / 对象的属性 / 函数的返回值的数据类型。如果违反了规定的数据类型，会引起编译转换器 / 解释器报错。</p><h3 id="3-4-">3.4. 不适用</h3><p>在汇编语言中通常没有变量（不考虑预处理器），因此不存在静态类型或者动态类型的问题。</p><h3 id="3-5-">3.5. 弱类型的优劣</h3><p><strong>3.5.1. 优点</strong></p><p>初学者不需理解数据类型就可入门，进行简单的编程。</p><p>程序员不受数据类型的限制，可以采取更灵活的实现方式，例如在某个类的对象中增加一个属性来存储一些额外的数据，而不需要改变类的定义。</p><p>程序变更前后的兼容性比较好。例如一个类增减了成员属性，旧类的实例对象序列化后，反序列化为新类的实例对象时，强类型语言可能会因字段不一致而出错，而弱类型语言则通常不会出错。又例如 JavaScript 中某个函数增加一个默认为空的入参，调用方不需修改即可兼容。</p><p><strong>3.5.2. 缺点</strong></p><p>弱类型语言不能在编译期确定变量的数据类型，从而不能在编译期对一些变量的内存使用进行优化（例如内存页对齐、缓存对齐等）。</p><p>弱类型语言在运行时可能出现由于类型混乱导致的错误。例如错把数字变量比较的规则应用于字符串变量的比较，从而得到 “10” &lt; “2”。</p><p>弱类型语言中，如果一些变量、对象属性、函数的入参或返回值使用的数据类型过多，会降低代码的可读性和可维护性，甚至导致程序代码混乱而出错。</p><figure class="kg-card kg-image-card"><img src="https://chinese.freecodecamp.org/news/content/images/2020/10/maxwell-nelson-taiuG8CPKAQ-unsplash--1-.jpg" class="kg-image" alt="maxwell-nelson-taiuG8CPKAQ-unsplash--1-" width="600" height="400" loading="lazy"></figure><h2 id="4-">4. 并行 / 并发模型</h2><p>首先要说明的是，并行和并发并不是一样的概念，它们的区别可以参考这个<a href="https://www.zhihu.com/question/33515481">知乎问题 1</a>。并行的一定是并发的，并发的不一定是并行的。</p><h3 id="4-1-">4.1. 多线程并行</h3><p>汇编语言可以直接调用操作系统的 API 来实现多线程。</p><p>C / C++ 可以通过 pthread 库或者直接调用操作系统的 API 来实现多线程。</p><p>Java 可以调用 Java API 来实现多线程，C# / <code>VB.net</code> 则可以调用 .net 的 API 来实现多线程。</p><p>Python 也可以通过其官方 API 实现多线程。虽然最普遍使用的 Python 运行时 CPython 和 PyPy 目前由于全局解释器锁（GIL）的缘故使不同线程不能在多个 CPU 核心（core）中并行运行，但还是有某些 Python 运行时如 Jython 已去掉了 GIL。</p><p>JavaScript 在支持 worker API 的运行时程序上可以通过创建 worker 来实现多线程，但这些线程之间只能通过消息通讯，不能共享内存。</p><h3 id="4-2-">4.2. 用户态线程 / 协程并发</h3><p>Python 可以通过生成器、asyncio 库或者 async / await 语法来使用协程（coroutine）。</p><p>Go 可以通过 goroutine 来使用协程。Gorotine 是可以并行的，可以充分利用多个 CPU 核心。</p><p>Kotlin 可以通过 kotlinx.coroutine 包提供的 API 来使用协程。</p><h3 id="4-3-io-api-">4.3. 非阻塞 IO API + 内置事件循环并发</h3><p>JavaScript 运行时通过提供非阻塞的 IO API 以及内部实现事件循环的方式，使得 JavaScript 可以在等待 IO 返回数据的同时可以并发地运行其他处理逻辑。</p><h3 id="4-4-">4.4. 多进程并行</h3><p>PHP 目前没有语言上的特性或者自带的 API 可以实现多线程或协程，要实现多线程需要额外安装 pthreads 拓展或者 Swoole 拓展。通常 PHP 的并发是通过多进程来实现的。</p><p>如果使用有 GIL 的 Python 运行时程序、Ruby 运行时程序或者不支持 worker API 的 JavaScript 运行时程序（例如版本 10 以前的 Node.js），如果想要充分利用多个 CPU 核心，也需要通过多进程来实现并行。</p><p>未完待续。</p><p></p> ]]>
                </content:encoded>
            </item>
        
            <item>
                <title>
                    <![CDATA[ 如何提高编程能力？这里有项目开发创意 ]]>
                </title>
                <description>
                    <![CDATA[ 你是否曾经想开发一些东西但苦于无从下手？就像文学创作者会遭遇写作瓶颈，开发人员也不例外。 我跟我的朋友吉姆 Jim [https://twitter.com/jd_medlock]一起，创作了一个collection of application ideas [https://github.com/florinpop17/app-ideas]【应用创意想法集锦】，旨在一劳永逸地解决这个问题。 这些应用可以：  * 很好地提升你的编程技能  * 很好地接触新技术  * 成为你简历里打动下任老板或客户的经历  * 成为辅导材料（文章或者视频形式）里面的例子  * 很快完成，新性能扩展也十分容易 这不仅仅是一个项目的简单罗列。这份集锦详细地描述了每个项目，足够你从零开始。 每份项目规格包含：  1. 一个清晰描述对象  2. 需执行的用户需求清单（这些用户需求更像是一个行为准则而非必做事项。如果你有需要的话也可以根据自己的需要添加）  3. 追加选项清单。这个不仅可以改良基础项目，同时你的编程技巧也会有所提高  4. 所有能帮你发现完成项目所需物料的资源和链接 项目综述 根据完 ]]>
                </description>
                <link>https://www.freecodecamp.org/chinese/news/here-are-some-app-ideas-you-can-build-to-level-up-your-coding-skills/</link>
                <guid isPermaLink="false">5f5f301ccd07b005bfb5b234</guid>
                
                    <category>
                        <![CDATA[ 项目 ]]>
                    </category>
                
                    <category>
                        <![CDATA[ 编程学习 ]]>
                    </category>
                
                    <category>
                        <![CDATA[ 自我提升 ]]>
                    </category>
                
                <dc:creator>
                    <![CDATA[ Miaomiao Ma ]]>
                </dc:creator>
                <pubDate>Mon, 14 Sep 2020 07:20:00 +0000</pubDate>
                <media:content url="https://chinese.freecodecamp.org/news/content/images/2020/09/0_v3qXmKe1LTiiW_3H.png" medium="image" />
                <content:encoded>
                    <![CDATA[ <p>你是否曾经想开发一些东西但苦于无从下手？就像文学创作者会遭遇写作瓶颈，开发人员也不例外。</p><p>我跟我的朋友吉姆 <a href="https://twitter.com/jd_medlock" rel="nofollow">Jim</a>一起，创作了一个<a href="https://github.com/florinpop17/app-ideas">collection of application ideas</a>【应用创意想法集锦】，旨在一劳永逸地解决这个问题。</p><p>这些应用可以：</p><ul><li>很好地提升你的编程技能</li><li>很好地接触新技术</li><li>成为你简历里打动下任老板或客户的经历</li><li>成为辅导材料（文章或者视频形式）里面的例子</li><li>很快完成，新性能扩展也十分容易</li></ul><p>这不仅仅是一个项目的简单罗列。这份集锦详细地描述了每个项目，足够你从零开始。</p><p>每份项目规格包含：</p><ol><li>一个清晰描述对象</li><li>需执行的用户需求清单（这些用户需求更像是一个行为准则而非必做事项。如果你有需要的话也可以根据自己的需要添加）</li><li>追加选项清单。这个不仅可以改良基础项目，同时你的编程技巧也会有所提高</li><li>所有能帮你发现完成项目所需物料的资源和链接</li></ol><h3 id="-">项目综述</h3><p>根据完成项目所需的知识储备和经验，所有的项目分为三个层级：</p><ol><li><strong>初级</strong> 针对的是刚刚起步的开发人员，特别是专注于开发面向用户应用的人员。</li><li><strong>中级</strong> 针对的是已经有学习和开发经验的老学员。他们在案例法过程中对用户界面和用户体验较为熟悉，会使用开发工具，会开发使用应用编程接口服务的应用。</li><li><strong>高级</strong> 针对的开发人员包含初级和中级提到的所有特点。他们还会额外学习高级技术，例如执行后端应用和数据库服务。</li></ol><p>接下来，每个层级中都会包含五个项目，总共十五个项目。但在我写文章时，在<a href="https://github.com/florinpop17/app-ideas">这个 Github 仓库</a>中共有三十多个项目。一定要确保你把这些项目都烂熟于心，因为未来我们计划增加更多的项目，非常欢迎你出一份力！（更多信息请关注下文的“贡献”部分）</p><h3 id="1-">1. 笔记应用</h3><p><strong>层级:</strong> 1-初级</p><p><strong>任务描述</strong>: 可以按照需求创建和存储笔记</p><h4 id="--1">用户需求</h4><ul><li>用户可以创建笔记</li><li>用户可以编辑笔记</li><li>用户可以删除笔记</li><li>浏览页面关闭时笔记可以自动存储；用户返回页面时，数据可以自行修复。</li></ul><h4 id="--2">追加选项</h4><ul><li>用户可以以Markdown格式创建和编辑笔记，存储以后内容会转换为HTML格式。</li><li>用户可以看见创建笔记的日期</li></ul><h4 id="--3">可以提供帮助的链接和资源</h4><ul><li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage" rel="nofollow">localStorage</a></li><li><a href="https://www.markdownguide.org/basic-syntax/" rel="nofollow">Markdown Guide</a></li><li><a href="https://github.com/markedjs/marked">Marked — A markdown parser</a></li></ul><h3 id="--4">项目示例</h3><figure class="kg-card kg-embed-card"><iframe id="cp_embed_gbyygq" src="https://codepen.io/nickmoreton/embed/preview/gbyygq?height=300&amp;slug-hash=gbyygq&amp;default-tabs=css,result&amp;host=https://codepen.io" title="AngularJS Markdown Notes App" scrolling="no" frameborder="0" height="300" allowtransparency="true" class="cp_embed_iframe" style="width: 100%; overflow: hidden;" loading="lazy"></iframe></figure><h3 id="2-">2. 圣诞彩灯秀</h3><p><strong>层级:</strong> 1-初级</p><p><strong>任务描述</strong> ：圣诞彩灯秀应用需要利用你的编程开发能力来创造一个光彩炫目的灯光秀。你的任务是连续画出七个彩色光圈，然后根据时间变化每个光圈的亮度有所变化。一个光圈变亮时，前一个变亮的光圈恢复正常亮度。</p><p>在这个应用中，灯光就像涟漪一样一层一层荡漾开，好比圣诞节的灯光秀。</p><h4 id="--5">用户需求</h4><ul><li>用户可以通过按钮控制灯光秀</li><li>用户可以控制灯光秀亮度变化的时间间隔</li></ul><h4 id="--6">追加选项</h4><ul><li>用户可以选择每个光圈的颜色</li><li>用户可以控制光圈亮度</li><li>用户可以改变每个光圈大小</li><li>用户可以在1-7范围内设定灯光秀中的光圈个数</li></ul><h4 id="--7">可以提供帮助的链接资源</h4><ul><li><a href="https://previews.123rf.com/images/whiterabbit/whiterabbit1003/whiterabbit100300020/6582600-seven-color-balls-red-orange-yellow-green-cyan-blue-and-magenta-in-a-row-on-a-white-background.jpg" rel="nofollow">Sample Image</a></li><li><a href="https://cdn-shop.adafruit.com/970x728/1487-02.jpg" rel="nofollow">Adafruit LED Matrix</a></li></ul><h3 id="--8">项目实例</h3><figure class="kg-card kg-embed-card"><iframe id="cp_embed_QjvEex" src="https://codepen.io/tobyj/embed/preview/QjvEex?height=300&amp;slug-hash=QjvEex&amp;default-tabs=css,result&amp;host=https://codepen.io" title="Pure CSS Christmas Lights" scrolling="no" frameborder="0" height="300" allowtransparency="true" class="cp_embed_iframe" style="width: 100%; overflow: hidden;" loading="lazy"></iframe></figure><h3 id="3-">3. 图片翻转</h3><p><strong>层级:</strong> 1-初级</p><p><strong>任务描述</strong>: 因为大量应用依靠图片来呈现更丰富的用户界面、提供更棒的用户体验，所以对于开发人员来说，理解图片操作的基础非常重要。</p><p>图片翻转应用探索图片操作的一个方向-图片旋转。应用上显示一个方框，一张图片以2*2矩阵形式呈现。用户通过控制图片周围上下左右四个箭头来垂直或水平翻转图片。</p><p>必须使用原生HTML,CSS和Javascript语言来执行此应用。图像包和图像库均不允许使用。</p><h4 id="--9">用户需求</h4><ul><li>用户可以看见一个窗口，里面的单个图片一直以2*2矩阵分布</li><li>通过点击图片旁边的上下左右按钮，用户可以任意垂直或水平翻转任意图片</li></ul><h4 id="--10">追加选项</h4><ul><li>通过统一资源定位器（URL）查找别的图片，用户可以在输入栏更改默认图片</li><li>用户可以点击输入栏旁边的“秀”按钮，展示新图片</li><li>如果在统一资源定位器（URL）中没有找到新图片，用户可以看到错误信息提醒（error message）</li></ul><h4 id="--11">可以提供帮助的链接资源</h4><ul><li><a href="https://www.w3schools.com/howto/howto_css_flip_image.asp" rel="nofollow">How to Flip an Image</a></li><li><a href="https://davidwalsh.name/css-flip" rel="nofollow">Create a CSS Flipping Animation</a></li></ul><h3 id="--12">项目示例</h3><figure class="kg-card kg-embed-card"><iframe id="cp_embed_gvqYQv" src="https://codepen.io/seyedi/embed/preview/gvqYQv?height=300&amp;slug-hash=gvqYQv&amp;default-tabs=html,result&amp;host=https://codepen.io" title="Image Effects" scrolling="no" frameborder="0" height="300" allowtransparency="true" class="cp_embed_iframe" style="width: 100%; overflow: hidden;" loading="lazy"></iframe></figure><h3 id="4-">4. 问答应用</h3><p><strong>层级:</strong> 1-初级</p><p><strong>任务描述</strong>: 通过在问答应用上回答问题，来训练和测试你的知识存储。</p><p>作为一名开发人员，你可以开发一个能够测试其他开发人员编程知识的问答应用，诸如HTML, CSS, Javascript, Python, PHP知识等等。</p><h4 id="--13">用户需求</h4><ul><li>用点击按钮开始答题</li><li>用户面对的每个问题有四个答案选项</li><li>用户选中一道题的答案后，自动进行到下一题，直到整个问答结束</li><li>问答结束时，用户可以看到以下数据：</li></ul><ol><li>完成问答所耗时间</li><li>答对的问题个数</li><li>是否通过问答</li></ol><h4 id="--14">追加选项</h4><ul><li>用户可以在社交媒体分享问答结果</li><li>在应用上增加多份问答，用户可以决定做哪个问答</li><li>用户可以创建账户，存储所有得分结果。用户可以多次进行同一个问答</li></ul><h4 id="--15">可以提供帮助的链接资源</h4><ul><li><a href="https://opentdb.com/api_config.php" rel="nofollow">Open Trivia Database</a></li></ul><h3 id="--16">项目示例</h3><figure class="kg-card kg-embed-card"><iframe id="cp_embed_qqYNgW" src="https://codepen.io/FlorinPop17/embed/preview/qqYNgW?height=300&amp;slug-hash=qqYNgW&amp;default-tabs=css,result&amp;host=https://codepen.io" title="Quiz app interface" scrolling="no" frameborder="0" height="300" allowtransparency="true" class="cp_embed_iframe" style="width: 100%; overflow: hidden;" loading="lazy"></iframe></figure><p><a href="http://tranquil-beyond-43849.herokuapp.com/" rel="nofollow">Quiz app built with React</a> （应用已在 Heroku 上线，可下载）</p><h3 id="5-">5. 罗马-十进制数字转换器</h3><p><strong>层级:</strong> 1-初级</p><p><strong>任务描述</strong>: 罗马数字源于古罗马。直到中世纪后期，罗马数字系统一直是数字书写的主流，至今仍在使用。罗马数字包含七个符号，每个都有确定的整数值。</p><p>下表为罗马符号-整数值对应：</p><ul><li>I — 1</li><li>V — 5</li><li>X — 10</li><li>L — 50</li><li>C — 100</li><li>D — 500</li><li>M — 1000</li></ul><h4 id="--17">用户需求</h4><ul><li>用户可以在输入栏里输入一个罗马数字</li><li>点击按钮，用户可以在输出栏看见之前输入的罗马数字对应的十进制数字</li><li>如果输入罗马符号错误，用户可以看见错误提示</li></ul><h4 id="--18">追加选项</h4><ul><li>用户可以看见转换过程自动完成</li><li>用户可以完成十进制-罗马数字的逆过程转换</li></ul><h4 id="--19">可提供帮助的链接资源</h4><ul><li><a href="https://en.wikipedia.org/wiki/Roman_numerals" rel="nofollow">An explanation of Roman Numbers</a></li></ul><h4 id="--20">项目示例</h4><p><a href="https://www.calculatorsoup.com/calculators/conversions/roman-numeral-converter.php" rel="nofollow">Roman Number Converter</a></p><h3 id="6-">6. 寻书应用</h3><p><strong>层级:</strong> 2-中级</p><p><strong>任务描述</strong>: 创建一个用户可以搜寻书的应用。用户在输入相关书名、作者等信息后，网页上会排列出现所有相关书籍。</p><h4 id="--21">用户需求</h4><ul><li>用户可以在输入栏输入要查询的信息</li><li>用户可以提交查询信息。这就叫做应用编程接口（API），返回结果是与所有输入信息（例如名称，作者，出版日期，图像等）相关联的书籍</li><li>用户可以在页面上看到搜索出来的书籍清单</li></ul><h4 id="--22">追加选项</h4><ul><li>搜索清单上每个书籍条目要增加一个用户可以直达的外部站点链接，以便得到更多关于书的信息。</li><li>执行一个响应设计</li><li>增加预载动画</li></ul><h4 id="--23">可提供帮助的链接资源</h4><p><a href="https://developers.google.com/books/docs/overview" rel="nofollow">Google Books API</a></p><h4 id="--24">项目示例</h4><figure class="kg-card kg-embed-card"><iframe id="cp_embed_wpQBKV" src="https://codepen.io/chasebank/embed/preview/wpQBKV?height=300&amp;slug-hash=wpQBKV&amp;default-tabs=css,result&amp;host=https://codepen.io" title="Vue, Axios and Google Books" scrolling="no" frameborder="0" height="300" allowtransparency="true" class="cp_embed_iframe" style="width: 100%; overflow: hidden;" loading="lazy"></iframe></figure><p><a href="https://fethica.github.io/BookSearch-React/" rel="nofollow">BookSearch-React</a></p><h3 id="7-">7. 卡片记忆游戏</h3><p><strong>层级:</strong> 2-中级</p><p><strong>任务描述</strong>: 在卡片记忆游戏中，你需要点击一张卡片看是什么图形，然后努力在其余卡片中发现匹配的图形。</p><h4 id="--25">用户需求</h4><ul><li>用户可以看到一个包含有n*n张卡片的方格（n是整数）。所有的卡片一开始都是图形面朝下的状态（隐藏状态）</li><li>用户点击按钮开始游戏，同时计时器开始计时</li><li>用户可以点击任意一张卡片查看图形，这张卡片就处于可见状态，一直持续到用户点击第二张卡片</li></ul><p>用户点击第二张卡片后：</p><ul><li>如果两张卡片图形匹配，这两张卡片就会消失（或是隐藏或是移除，也可以让他俩处于可见状态）</li><li>如果跟第一张卡片图形不匹配，两张卡片就会恢复初始 隐藏状态</li><li>所有匹配结束以后，用户可以看见对话框显示“祝贺”信息，同时也会显示完成游戏所耗费的时间</li></ul><h4 id="--26">追加选项</h4><ul><li>用户可以自己选择游戏难度等级（易中难）。难度增加意味着：完成游戏的规定时间缩短或者图片个数增加</li><li>用户可以看见游戏数据（不是输赢次数，而是每个难度所对应的最好成绩）</li></ul><h4 id="--27">可提供帮助的链接资源</h4><ul><li><a href="https://en.wikipedia.org/wiki/Concentration_(game)" rel="nofollow">Wikipedia</a></li></ul><h4 id="--28">项目示例</h4><p><a href="https://codepen.io/zerospree/full/bNWbvW" rel="nofollow">Flip — card memory game</a></p><p><a href="https://codepen.io/hexagoncircle/full/OXBJxV" rel="nofollow">SMB3 Memory Card Game</a></p><h3 id="8-markdown-">8. Markdown表格生成器</h3><p><strong>层级:</strong> 2-中级</p><p><strong>任务描述</strong>: 创建一个可以将包含用户数据的常规表格（或者不包含，看用户需求）转换成Markdown形式表格的应用</p><h4 id="--29">用户需求</h4><ul><li>用户可以创建包含有特定行数或列数的HTML表格</li><li>用户可以在HTML表格中的每个单元格插入文本</li><li>用户可以生成包含有HTML表格数据的Markdown形式表格</li><li>用户可以预览Markdown形式表格</li></ul><h4 id="--30">追加选项</h4><ul><li>用户可以一键复制Markdown形式表格到剪切板</li><li>用户可以在特定区域插入行或者列</li><li>用户可以彻底删除某行某列</li><li>用户可以将某个单元格、某列、某行向左、向右或者居中对齐。</li></ul><h4 id="--31">可以提供帮助的链接资源</h4><ul><li><a href="https://www.markdownguide.org/" rel="nofollow">Markdown Guide</a></li><li><a href="https://github.com/markedjs/marked">Marked — A markdown parser</a></li><li><a href="https://www.w3schools.com/howto/howto_js_copy_clipboard.asp" rel="nofollow">How to Copy to Clipboard</a></li></ul><h4 id="--32">项目示例</h4><p><a href="https://www.tablesgenerator.com/markdown_tables" rel="nofollow">Tables Generator / Markdown Tables</a></p><h3 id="9-">9. 弦乐艺术</h3><p><strong>层级:</strong> 2-中级</p><p><strong>任务描述</strong>: 弦乐艺术应用的目的在于让开发人员练习，创建简便动画图表，在动画算法中运用几何知识，创造出富有视觉美感的画面。</p><p>弦乐艺术中，会有一条五彩斑斓的线条平稳地移动，直到它的一端碰到封闭窗口的一边。此时，线条就会因为反弹效应改变方向。</p><p>线条移动时，如果可以保留10-20张线条移动时的图形，便会出现涟漪效应。稍早出现的图形会慢慢消失不见。</p><p>不可以使用动画库。只可以使用Vanilla HTML/CSS/Javascript.</p><h4 id="--33">用户需求</h4><ul><li>在封闭窗口界限内的任意位置，用户以画一条五彩斑斓的线开始</li><li>每隔二十毫秒，在别的位置，按照前一条线条的轨迹复制一条-以端点作为标记，距离前一线条要越来越远</li><li>不论线条的哪个端点碰到封闭窗口的边界，都要改变线条的方向，角度随机改变</li><li>慢慢降低起初画的线条的亮度，确保最近画的10-20线条可见，这样才可以呈现动感或者涟漪效应</li></ul><h4 id="--34">追加选项</h4><ul><li>用户可以设定线条的长度和移动速度</li><li>用户可以设定窗口内的线条数量，所有线条可以按照不同轨迹和速度移动</li></ul><h4 id="--35">可以提供帮助的链接资源</h4><ul><li><a href="https://css-tricks.com/using-multi-step-animations-transitions/" rel="nofollow">Using Multistep Animations &amp; Transitions</a></li><li><a href="https://www.khanacademy.org/computing/computer-programming/programming/animation-basics/a/what-are-animations" rel="nofollow">Animation Basics</a></li></ul><h4 id="--36">项目示例</h4><p>这个项目非常封闭，包含一个小窗口，很单一。<a href="https://codepen.io/dgca/pen/dpxreO" rel="nofollow">Daniel Cortes</a></p><h3 id="10-">10. 计划清单应用</h3><p><strong>层级:</strong> 2-中级</p><p><strong>任务描述</strong>: 经典的计划清单应用：用户可以记下所有的待办事项。</p><h4 id="--37">用户需求</h4><ul><li>用户可以看见输入框，从而输入待办事项</li><li>点击“进入”按钮，用户可以提交待办事项，并且看见其已经进入待办事项清单</li><li>用户可以在待办事项上标注“已完成”</li><li>用户可以通过点击按钮取消待办事项，或者是在待办事项条目上直接操作</li></ul><h4 id="--38">追加选项</h4><ul><li>用户可以编辑待办事项</li><li>用户可以看见所有已完成待办事项的清单</li><li>用户可以看见所有自己创立的待办事项清单</li><li>用户可以看见创立待办事项的日期</li><li>关闭浏览窗口时，待办事项可以自动保存；用户返回页面时，数据可自行恢复</li></ul><h4 id="--39">可提供帮助的链接资源</h4><ul><li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage" rel="nofollow">localStorage</a></li></ul><h4 id="--40">项目示例</h4><figure class="kg-card kg-embed-card"><iframe id="cp_embed_eJIuF" src="https://codepen.io/yesilfasulye/embed/preview/eJIuF?height=300&amp;slug-hash=eJIuF&amp;default-tabs=css,result&amp;host=https://codepen.io" title="To Do List" scrolling="no" frameborder="0" height="300" allowtransparency="true" class="cp_embed_iframe" style="width: 100%; overflow: hidden;" loading="lazy"></iframe></figure><p>计划清单<a href="http://todomvc.com/examples/react/#/" rel="nofollow">Todo App built with React</a></p><h3 id="11-">11. 战舰游戏引擎</h3><p><strong>层级:</strong> 3-高级</p><p><strong>任务描述</strong>: 战舰游戏引擎采用了回合制棋盘游戏的模式，与所有表示层（presentation layer）分离。它属于一种建筑模式类型，因为其允许无数的应用使用同一种服务，这种模式在很多应用上都十分有用。</p><p>战舰游戏引擎本身是一系列函数调用的结果，而非终端用户直接动作产生。从这个方面讲，使用战舰游戏引擎，与使用应用编程接口或者使用网络浏览器公开的一系列线路是相似的。</p><p>这个挑战不仅要求你开发出战舰游戏引擎，还要求你开发出非常精细的、基于文本的表示层，以检测表示层与引擎互不干涉。因此，用户需求包含两套：战舰游戏引擎一套，基于文本的表示层一套</p><p>战舰游戏引擎需要负责维持整个游戏的状态。</p><h4 id="--41">用户需求</h4><h4 id="--42">战舰游戏引擎</h4><ul><li>召集者调用<code>startGame()</code>函数开始单人游戏。此函数可以创立一个8*8的游戏阵地，阵地上有三艘船，他们的尺寸为：</li></ul><ol><li>驱逐舰：一方格宽，两方格长</li><li>巡洋舰：一方格宽，三方格长</li><li>战舰：一方格宽，四方格长</li></ol><p><code>startGame()</code>函数会随机地把这些战船放在阵地的任意方向，随后给出船的部署情况。</p><ul><li>召集者调用<code>shoot()</code>函数可以袭击阵地上的特定行和列构成的方格坐标。<code>shoot()</code>函数还会显示袭击是否成功，剩余战船数量，战船安置排列，以及更新袭击成功或者失败数据。</li></ul><p>某个方格被设为攻击目标后，会有所提示。 <code>O</code>代表方格被瞄准，但此地没有战船；<code>X</code>代表此地有战船。</p><h4 id="--43">基于文本的表示层</h4><ul><li>通过返回<code>startGame()</code>函数，用户可以看见命中或者未命中数值在阵地上以二维字符展示。</li><li>用户可以受鼓舞进入阵地上特定坐标。</li><li>在袭击之后，用户可以看见命中或未命中数值更新。</li><li>袭击结束后，不论命中与否，用户都可以看见信息提示。</li><li>在击中最后一艘战船时，用户可以看见“祝贺”信息</li><li>每局游戏结束后，用户都可以受鼓舞再来一局。拒绝再来一局则会结束游戏。</li></ul><h4 id="--44">追加选项</h4><h4 id="bge-">BGE战舰游戏引擎</h4><ul><li>召集者可以指定阵地上行与列的具体数值，这也是 <code>startGame()</code>函数的参数。</li><li>召集者可以调用<code>gameStats()</code> 函数，返回到Javascript对象，显示最近游戏数据，比如打了几局，命中数等。</li><li>在调用<code>startGame()</code>函数时，召集者可以指定玩家数量。此函数也可以为每个玩家创立阵地，随机安排战舰数量。</li></ul><p><code>shoot()</code>函数会计算做出特定坐标袭击的玩家数量。函数返回的数据针对某个特定玩家。</p><h4 id="--45">基于文本的表示层</h4><ul><li>用户在目标坐标进入<code>stats</code>相位，可以随时查看最近游戏数据。（注意此项操作需要战舰游戏引擎的<code>gameStats()</code>函数）</li><li>用户可以指定两人游戏模式，每个玩家在同一终端会话均可更改比赛回合。（注意此项操作需要战舰游戏引擎追加选项的相应配合）</li><li>用户在每个回合的输入提示中都可以看到玩家数量。</li><li>用户在每个回合结束时可以看见两个玩家的阵地。</li></ul><h4 id="--46">可以提供帮助的链接资源</h4><ul><li><a href="https://en.wikipedia.org/wiki/Battleship_(game)" rel="nofollow">Battleship Game (Wikipedia)</a></li><li><a href="https://www.hasbro.com/common/instruct/battleship.pdf" rel="nofollow">Battleship Game Rules (Hasbro)</a></li></ul><h4 id="--47">项目示例</h4><p>YouTobe上的这个视频展示了基于文本的战舰游戏是怎么玩的。<a href="https://www.youtube.com/watch?v=TKksu3JXTTM" rel="nofollow">Battleship Game</a></p><p>如果你对战舰游戏不熟悉，下面这个例子就是一个范例。记住你要实施一个基于文本的表示层用于测试。<a href="https://codepen.io/CodifyAcademy/pen/ByBEOz" rel="nofollow">Battleship Game by Chris Brody</a></p><h3 id="12-">12. 聊天应用</h3><p><strong>层级:</strong> 3-高级</p><p><strong>任务描述</strong>: 此项任务是创建一个可以支持多名用户互相发送信息的 实时聊天互动界面。 作为一个最小可行化产品，你可以关注聊天界面开发。实时性可作为追加选项稍后添加。</p><h4 id="--48">用户需求</h4><ul><li>用户在浏览聊天应用时根据提示输入用户名，用户名会在应用中保存</li><li>用户可在输入框中输入新信息</li><li>通过点击“进入”或者“发送”按钮，文本会出现在用户名旁边的聊天框中（比如： <code>John Doe: Hello World!</code>）</li></ul><h4 id="--49">追加选项</h4><ul><li>信息对于聊天应用（采用WebSockets）的所有用户可见</li><li>每当有一名新用户加入时，所有老用户都会受到提示信息</li><li>所有信息会存储在一个数据库中</li><li>用户可以发送图片，视频和链接。所有这些会以合适的形式展示</li><li>用户可以挑选，然后发送表情。</li><li>用户可以私聊</li><li>用户可以加入特定话题的频道</li></ul><h4 id="--50">可以提供帮助的链接资源</h4><ul><li><a href="https://socket.io/" rel="nofollow">Socket.io</a></li><li><a href="https://medium.freecodecamp.org/how-to-build-a-react-js-chat-app-in-10-minutes-c9233794642b" rel="nofollow">How to build a React.js chat app in 10 minutes — article</a></li></ul><h4 id="--51">项目示例</h4><figure class="kg-card kg-embed-card"><iframe id="cp_embed_ZWEdZj" src="https://codepen.io/iremlopsum/embed/preview/ZWEdZj?height=300&amp;slug-hash=ZWEdZj&amp;default-tabs=css,result&amp;host=https://codepen.io" title="Simple chat app using firebase" scrolling="no" frameborder="0" height="300" allowtransparency="true" class="cp_embed_iframe" style="width: 100%; overflow: hidden;" loading="lazy"></iframe></figure><p><a href="https://web-chatty.herokuapp.com/" rel="nofollow">Chatty2</a></p><h3 id="13-github-">13. GitHub时间线</h3><p><strong>层级:</strong> 3-高级</p><p><strong>任务描述</strong>: 应用程序接口和信息图示是当代应用的特点。 GitHub时间线整合这两个特点，力求创造一个用户GitHub活动的可视历史。</p><p>GitHub时间线的目标是，存储GitHub用户的姓名，制作一条时间线，包含每个存储库，像他们的名字，创立的时间，和相关描述。未来可以将时间线分享给老板。时间线需易于阅读，可以有效利用颜色和字体排版。</p><p>只有面向公众的存储库可以展示。</p><h4 id="--52">用户需求</h4><ul><li>用户可以提交GitHub用户名</li><li>用户可以通过点击“生成”按钮创建和展示已命名的用户存储库时间线</li><li>如果用户名在GitHub中无效的话，用户可以看到提示信息。</li></ul><h4 id="--53">追加选项</h4><ul><li>用户可以看见当年创建的存储库数量总结</li></ul><h4 id="--54">可以提供帮助的链接资源</h4><p>GitHub提供了两个你们可能用到的接触存储库数据的应用程序接口。你也可以采用Node包管理器（NPM）接触GitHub应用程序接口。</p><p>GitHub应用程序接口说明可以在以下两个链接中找到：</p><ul><li><a href="https://developer.github.com/v3/">GitHub REST API V3</a></li><li><a href="https://developer.github.com/v4/">GitHub GraphQL API V4</a></li></ul><p>使用GitHub应用程序接口的样本代码如下：</p><p>你可以用CURL命令看V3 REST应用程序接口返回的JSON，这个程序接口就跟你的存储库有关：</p><p><code>curl -u "user-id" https://api.github.com/users/user-id/repos</code></p><h4 id="--55">项目示例</h4><figure class="kg-card kg-embed-card"><iframe id="cp_embed_FemfK" src="https://codepen.io/NilsWe/embed/preview/FemfK?height=300&amp;slug-hash=FemfK&amp;default-tabs=css,result&amp;host=https://codepen.io" title="CSS Timeline" scrolling="no" frameborder="0" height="300" allowtransparency="true" class="cp_embed_iframe" style="width: 100%; overflow: hidden;" loading="lazy"></iframe></figure><figure class="kg-card kg-embed-card"><iframe id="cp_embed_QNeJgR" src="https://codepen.io/tutsplus/embed/preview/QNeJgR?height=300&amp;slug-hash=QNeJgR&amp;default-tabs=css,result&amp;host=https://codepen.io" title="Building a Vertical Timeline With CSS and a Touch of JavaScript" scrolling="no" frameborder="0" height="300" allowtransparency="true" class="cp_embed_iframe" style="width: 100%; overflow: hidden;" loading="lazy"></iframe></figure><h3 id="14-">14. 拼读拼写</h3><p><strong>层级:</strong> 3-高级</p><p><strong>任务描述</strong>: 懂得如何拼读拼写拼写是流利掌握每门语言的基础要求。不论你是牙牙学语的孩童或者正在接触一门新语言的个体，练习拼读拼写会强化你的语言技能。</p><p>拼读拼写应用播放单词录音，用户用电脑键盘将单词拼写出来，从而帮助用户锻炼拼读拼写能力</p><h4 id="--56">用户需求</h4><ul><li>用户点击“播放”按钮，听到要拼写的单词录音</li><li>用户在键盘上打完单词后，可以在输入框里看到他们打出的单词</li><li>用户点击“输入”健提交已在输入框里的单词</li><li>如果提交单词正确，用户可以看到确认信息</li><li>如果提交单词错误，应用提示用户再次输入单词</li><li>用户可以看到拼写正确的单词总数，拼写过的单词总数和成功提交的单词占比。</li></ul><h4 id="--57">追加选项</h4><ul><li>单词拼写正确时用户可以听到确认声音</li><li>单词拼写错误时用户可以听到警示声音</li><li>用户可以点击“提示”按钮查看输入框中哪些字母出错</li><li>用户可以敲键盘上的“输入”健或者点击窗口“提交”按钮提交单词</li></ul><h4 id="--58">可以提供帮助的链接资源</h4><ul><li><a href="https://en.wikipedia.org/wiki/Speak_%26_Spell_(toy)" rel="nofollow">Texas Instruments Speak and Spell</a></li><li><a href="https://codepen.io/2kool2/full/RgKeyp" rel="nofollow">Web Audio API</a></li><li><a href="https://codepen.io/shangle/full/Wvqqzq" rel="nofollow">Click and Speak</a></li></ul><h4 id="--59">项目示例</h4><p><a href="https://itunes.apple.com/app/id447312716" rel="nofollow">Word Wizard for iOS</a></p><p><a href="https://play.google.com/store/apps/details?id=au.id.weston.scott.SpeakAndSpell&amp;hl=en_US" rel="nofollow">Speak N Spell on Google Play</a></p><h3 id="15-">15. 调查应用</h3><p><strong>层级:</strong> 3-高级</p><p><strong>任务描述</strong>: 调查应用可谓开发人员工具箱必备。通过这些应用，开发人员可以获得用户的各种反馈，例如对应用满不满意、有没有新要求或者新需求，急需解决的问题是什么，有没有一些变得严重的问题。</p><p>全功能调查应用的开发给你机会让你去学习，看你会不会把自己开发的应用加入工具箱。它也帮助你提升多方面的能力，如如何定义调查；让用户在预先设定的时间内回应；将结果做成表格并且展示。</p><p>应用的用户可以鲜明地分为两组，每组都有不同的要求：</p><ul><li>调查协调组--制定并实施调查。他们有普通用户没有的管理员权限。</li><li>调查受访者--完成调查并查看结果。在应用内部他们没有管理员权限。</li></ul><p>商业调查工具包括分布功能，以此公众会发调查邮件给调查受访者。简单说来，应用网页可以直达对回应开放的调查。</p><h4 id="--60">用户需求</h4><h4 id="--61">综述</h4><ul><li>调查协调组和调查受访组可以在一般网站上制定、实施、查看调查和调查结果。</li><li>调查协调可以登录应用获得管理员权限，比如可以制定调查。</li></ul><h4 id="--62">制定调查</h4><ul><li>调查协调组负责制定调查，其中包含有1-10个多项选择问题。</li><li>调查协调组可以在每个问题下设定1-5个相互排斥的选项。</li><li>调查协调组可以给调查设定题目。</li><li>调查协调组可以点击“撤销”按钮，不保存调查，返回主页。</li><li>调查协调组可以点击“保存”按钮保存调查。</li></ul><h4 id="--63">实施调查</h4><ul><li>调查协调组可以从先前设定好的调查中选择一个调查并打开</li><li>调查协调组可以从已打开的调查中选择一个关闭</li><li>调查受访组可以从已打开的调查中选择一个完成</li><li>调查受访组可以通过点击复选框选择调查问题的回答</li><li>调查受访组可以看见，如果一道题在第二次选择时选择了跟第一次不同的答案，那先前的答案会自动消除</li><li>调查受访组可以点击“撤销”按钮不提交调查，返回主页</li><li>调查受访组可以点击“提交”按钮提交回答</li><li>如果调查未完成就点击“提交”按钮提交，调查受访组会看到提示“错误”信息</li></ul><h4 id="--64">查看调查结果</h4><ul><li>调查协调组和受访组可以从已关闭的调查中选择调查展示</li><li>调查协调组和受访组在表格形式下查看调查结果，表格可以显示每个问题的每个答案有多少人选择</li></ul><h4 id="--65">追加选项</h4><ul><li>调查受访组可以在应用中创立一个独有账户</li><li>调查受访组可以登录应用</li><li>调查受访组每个调查只能做一次</li><li>调查协调组和受访组可以查看以图表形式呈现的调查结果（类似饼状图，条形图等表格）</li></ul><h4 id="--66">可以提供帮助的链接资源</h4><p>制定调查的图书馆资源库： <a href="https://surveyjs.io/Overview/Library/" rel="nofollow">SurveyJS</a></p><p>商业调查服务包括： <a href="https://www.surveymonkey.com/" rel="nofollow">Survey Monkey</a> 和 <a href="https://www.typeform.com/" rel="nofollow">Typeform</a></p><h4 id="--67">项目示例</h4><figure class="kg-card kg-embed-card"><iframe id="cp_embed_oLChg" src="https://codepen.io/amyfu/embed/preview/oLChg?height=300&amp;slug-hash=oLChg&amp;default-tabs=js,result&amp;host=https://codepen.io" title="Javascript Questionnaire" scrolling="no" frameborder="0" height="300" allowtransparency="true" class="cp_embed_iframe" style="width: 100%; overflow: hidden;" loading="lazy"></iframe></figure><h3 id="--68">贡献</h3><p>非常欢迎大家在 <a href="https://github.com/florinpop17/app-ideas">GitHub 仓库</a>中为这个项目做出一些贡献！任何形式任何贡献我们都非常欢迎~</p><p>贡献有两种方式：</p><ol><li>你可以创立一个新话题并且告诉我们你的想法。一定要确保你采用了 <strong>新想法</strong>标签；</li><li>将项目拆分，并且提交一份性能要求。在做这个工作之前，要确保你已经读过贡献指南，并且你也是这么做的（在存储库中你可以找到贡献指南）；</li></ol><h4 id="--69">添加你的个人实例项目</h4><p>在你完成项目以后，一也可以把自己做出来的成果添加到项目上。非常鼓励你们这样做，这也向其他人展示了你创造出了多么精彩的应用！</p><h3 id="--70">帮忙扩散我们的文章</h3><p>如果这片文章或者存储库中的信息对你有所帮助，一定要记得给个星星哦，这样其他人才能找到它，从中受益。让我们一起成长，把我们的社区建立得更好。</p><p>你有没有什么建议能帮我们总体提升我们的项目吗？有的话不要谦虚哦，非常期待你的反馈。</p><h4 id="--71">主要作者</h4><p><strong>Florin Pop</strong>: <a href="https://twitter.com/florinpop1705" rel="nofollow">Twitter</a> &amp; <a href="https://florin-pop.com/" rel="nofollow">website</a>.</p><p><strong>Jim Medlock</strong>: <a href="https://twitter.com/jd_medlock" rel="nofollow">Twitter</a> &amp; <a href="https://medium.com/@jdmedlock" rel="nofollow">Medium</a></p><h3 id="--72"><strong>每周编程挑战</strong></h3><p>作为额外福利，<a href="https://www.florin-pop.com/blog/2019/03/weekly-coding-challenge/">这里</a>有一个每周编程挑战，你可以通过实战项目训练切实提升自己的编程技巧。</p><p>原文：<a href="https://www.freecodecamp.org/news/here-are-some-app-ideas-you-can-build-to-level-up-your-coding-skills-39618291f672/">Here are some app ideas you can build to level up your coding skills</a>，作者：Florin Pop</p> ]]>
                </content:encoded>
            </item>
        
    </channel>
</rss>
