web前端开发必学技能js基础，前端开发js零基础教程

要成为优秀的Web开发人员，练习是最快的方法。一个好的练习方法是建立尽可能多的初学者项目。这是因为每个项目都有自己的问题和解决方案，解决的项目越多，知识就越多。把你完成的所有项目都看作你获得的奖牌。你拥有的奖牌越多，就越能准备好应对下一个高难度的项目。

为了有助于入门，我列出了15个初学者JavaScript项目。我还在每个项目的旁边留下了“在生成之前先尝试一下”的部分。每个项目都免费托管在GitHub Pages上

1. CSS渐变生成器使用这个简单的CSS渐变生成器APP，使网络更干净。该APP应用程序只需单击按钮，即可更改背景颜色，并在屏幕上显示该颜色的十六进制代码。在生成之前，请尝试“在GitHub Pages中主机”的联机地址。 https://iamcodefoxx.github.io/gradient-generator /

使用JavaScript

DOM通过操作数据结构的功能要点和想法来构建这个项目，教了我如何使用onclick。这是用于向按钮添加功能的。在这种情况下，函数会生成随机的十六进制颜色，并将其作为背景色。这非常有用，因为大多数现代web APP应用程序都使用按钮。我感觉这是我重复使用的技巧。

2、随机名言说明如果你需要一点动力，我可以满足你。在这个项目中，我们将构建一个带有许多感人名言的随机名言生成器。在构建之前请尝试(在GitHub Pages上托管) ( https://iamcodefoxx.github.io/random-quote-generator /

使用JavaScript

DOM操作对象功能的要点和创意的APP可以用多种方法制作，但有趣的是，从使用词典解决的情况来看，词典是一种没有得到很好利用的数据结构。您还学习了一种简单的算法，用于在用户每次单击按钮时创建随机报价。

3 .图像传送带是否需要APP显示所有美丽的图像？太棒了。在第三个项目中，创建一个APP应用程序，通过单击该应用程序可以浏览图像。在编程中，这些照片称为传送带或图像滑块。在生成之前，请尝试“在GitHub Pages中主机”的联机地址。 https://iamcodefoxx.github.io/image carousel /

使用JavaScript

DOM操作控制结构的功能要点和思路理解这类项目的实施方法很有趣。最初，我们使用CSS屏蔽了屏幕上的所有图像。然后，使用JavaScript处理CSS样式，一次显示一张图像。在完成这个项目之前，我不知道是否可以直接使用JavaScript更改CSS样式，但事实证明是这样的。

4 .数字钟会考虑购买数字钟吗？不，在这个项目中，我将学习如何构建自己。构建之前，请访问联机地址https://iamcodefoxx.github.io/digital clock /

使用JavaScript

了解了DOM操作数据结构功能对象的要点和想法在构建项目时，可以使用JavaScript创建内置对象，并使用内置函数获取时间。这真是太棒了。因为不需要像在Python或c中所做的那样包含其他库。您还了解了一个名为setTimeout的内置函数，用于一次又一次调用另一个函数。在这个项目中，我们需要使用setTimeout来确保我们的时间得到正确的更新。

5 .计算机计算机。不，JavaScript初学者项目列表不完整。这里也不例外。在生成之前请尝试(在GitHub Pages上托管)联机地址： https://iamcodefoxx.github.io/calculator /

使用JavaScript

DOM操作功能的要点和想法，看到如此简单地构建就让人难以置信。在构建它之前，我认为需要用某种复杂的函数手动解析表达式。事实证明，名为eval的内置JavaScript函数可以解决这个问题。我真的很喜欢构建这个APP展览，为了赋予自己的风格而改变了风格。

6 .杂货清单，记录账上饿吗？使用这个购物列表APP去杂货店吧。让我们更清楚地记录一下每天花了多少钱，做个简单的记录。构建之前尝试联机源(在GitHub Pages上托管) https://iamcodefoxx.github.io/grocery-list /

使用JavaScript

DOM操作功能控制结构事件侦听器的要点和构思。这是一个非常酷的APP应用程序，它是列表中使用事件侦听器的第一项。实际上，我们使用事件侦听器在用户单击[enter]键时将新项目添加到杂货列表中，并在用户单击特定项目时使用其他事件侦听器将其从列表中删除。了解负责删除p的所有元素的函数是如何编写的非常有用。在这个例子中，这个函数删除了我们杂货列表上的所有项目。

7 .芯片计算机使用这台芯片计算机，你就不用在桌子周围看谁在处理芯片了。在构建之前尝试(在GitHub Pages上托管)联机源) https://iamcodefoxx.github.io/tip calculator /

使用JavaScript

DOM操作功能的要点和创意，开发确定每人支付小费金额的函数相当简单。这里最大的挑战可能是使用CSS模仿APP应用程序的设计。虽然看起来是相当简单的设计，但是如果不先看教程的话，实际上做起来会有点困难。

8 .待办事项列表使用这个很棒的待办事项列表APP充分利用我们的一天吧。生成之前，请使用GitHub Pages托管的联机地址： https://iamcodefoxx.github.io/tip calculator /

使用JavaScript

DOM操作事件侦听器控制结构数据结构功能要点和思想此解决方案与购物清单APP非常相似。我自己回顾了那个代码，意识到它有助于解决这个问题。但是，有一点不同。那是变更列表中各项目的背景色的功能。我认为这是非常好的补充，以便让项目看起来更好。一般来说，我说这就像一个审查项目，但它还是一个很好的实践。

9 .认证卡、电子问题便笺(带本地存储器)因为这是允许制作认证卡的APP，所以镇上有新上司，所以请把这些纸的认证卡收起来。在构建之前尝试源地址(在GitHub Pages上托管) https://iamcodefoxx.github.io/flash cards /

使用JavaScript

DOM操作功能控制结构要点和思路，首先是如何美丽的APP场景？这有助于学生学习和避免花钱购买纸质提取卡。这是使用flexbox的列表中的第一项，所以一开始并没有太大的挑战性。但是一旦掌握了，它实际上非常好用，会让项目更有活力。特别是，我真的很喜欢align-item、flex-wrap和justify-content选项。因为这些会让抽取卡具有响应性。

10 .便签构筑便签APP吧。是的，现在可以把这些便签纸都扔掉。在构建之前尝试(在GitHub Pages上托管)联机源) https://iamcodefoxx.github.io/sticky-notes /

使用JavaScript

DOM操作事件侦听器的功能数据结构要点和想法构建此项的代码与提取卡片项非常相似，但需要练习，因此没有问题。事实上，如果那个项目的代码不可靠，我必须再次查看抽卡教程视频，检查这个项目是否正确完成。当然，这个项目确实有独特的功能，所以很难弄清楚如何对这些部分进行编码。总的来说，我从这个项目中学到了很多东西。那是因为我们把至今为止学到的东西都组合起来了。

11 .计时器构建计时器吧。准备，准备，开始！在生成之前请尝试源地址。 (在GitHub Pages上托管。 ) https://iamcodefoxx.github.io/timer /

使用JavaScript

DOM操作事件侦听器功能对象的要点和构思事实证明，构建简单的定时器比外观更难。我们认为，如果在数字时钟项目中使用相同的setInterval函数，就可以显示准确的时间。事实证明，这项技术完全不起作用。在这个项目中，我们将创建一个变量来保存有关时间的各种信息，如时间的开始时间、时间停止的时间和时间停止的时间。如果没有这些变量和使用这些变量执行的计算，数字时钟将无法正确显示经过的时间。

12. 4岁的孩子学数学是很酷的APP，可以教孩子们基本的算术运算。在构建之前尝试(在GitHub Pages上托管)联机源) https://iamcodefoxx.github.io/math 4kids /

使用JavaScript

DOM操作事件侦听器控制结构数据结构总结和思考在这个项目中，我们学习了如何从一个网页切换到另一个网页以及如何播放声音文件。事实证明，这两项任务都相当简单。最难的部分是弄清楚如何把答案随机放进不同的箱子里。这样的话，正确的答案并不总是在同一个位置。我尽了最大努力自己弄清楚，但最终我看了解决方案教程。

13. Unsplash API (图像生成器)的新网站需要一些图像吗？构建映像生成器吧。在生成之前，请尝试“在GitHub Pages中主机”的联机地址。 https://iamcodefoxx.github.io/unsplashapi /

使用JavaScript

DOM操作承诺带着功能控制结构事件侦听器的要点和想法来完成这个项目，并告诉我如何使用JavaScript的内置提取来提出API请求。在构建这个项目之前，我完全不知道Unsplash API的存在。有趣的是，很多老字号企业都将这个API集成到他们的网站上。当我的桌面需要新壁纸时，拥有图像生成器也很酷。

14 .从滚动字幕API (打字机) API获取随机引文，并显示在具有打字机效果的画面上的APP应用。在构建之前尝试(在GitHub Pages上托管)联机源) https://iamcodefoxx.github.io/typewriter /

使用JavaScript

DOM操作事件侦听器控制结构数据结构承诺功能带着要点和想法学习如何编写打字机脚本非常棒。我实际上在视频游戏中看到了这个效果。现在你可以在构建自己的游戏时使用它。就代码而言，有趣的是，我们知道并不总是需要CSS来制作酷炫的动画。这个项目使用内置的JavaScript子字符串函数来创建打字机效果。

15 .方形卡片(模板)显示数据的时尚方法或只是方形卡片。构建前尝试联机源代码(在GitHub Pages上托管) https://iamcodefoxx.github.io/square cards /

使用JavaScript

事件侦听器功能的收获和想法在这个项目中，我们学习了如何直接从JavaScript打开YouTube视频和网络文章。这是对我作为Web开发人员现在拥有的工具库的补充(请参见)。这15个项目是25个初学者项目列表的一部分。如果你想看剩下的内容，请关注我。之后也会继续和大家分享！如果觉得有用的话，请夸奖收藏哦！如果你刚开始学习前端，这里有html css阶段的完整教程。我们在订书机组有完整的套餐。 (从入门到精通课程，4个综合项目)称为15天训练营，小组从第23节课开始)，有30个练习例子。如果学习有问题，也可以通过小组获得老师的答疑。如有必要，请发消息给今天的头条，邀请你加入钉钉组学习！ (全程不收任何费用！长按二维码，可以直接添加朋友接收资料！