面向初学者的Javascript项目
发布于：2020-12-31 15:26:03
JavaScript是最流行的脚本语言之一，在所有Web应用程序中都使用JavaScript进行验证，渲染动态内容，交互式图形和地图等。与HTML和CSS一起，JS具有构建完整，强大的Web应用程序的能力。由于有了JS，用户可以与网页进行交互，并查看页面上所有有趣的元素。在探索项目时，我们将了解js如何帮助构建交互式网页。在此之前，让我们快速浏览一下JS的重要功能：
在客户端和服务器端都可以使用以创建交互式Web内容。
通过提供动态功能极大地改善了用户体验。
具有面向对象功能的轻量级语言。
口译，开放和跨平台的语言。
与Java和HTML无缝集成。
为什么使用JavaScript项目？
JS是任何Web应用程序的心脏。精通JavaScript可以为您提供一系列具有挑战性和有趣的职业选择，例如开发移动和桌面应用程序，从头开始构建动态网站，UI / UX设计器，甚至是全栈开发人员。如果您了解JavaScript的基础知识，那么下一步就是向简历添加星号的下一步。如果您以前没有任何编程经验，则可以学习基本的JavaScript课程，然后返回这些项目。如果您遵循一些HTML和CSS，您将了解下面提到的大多数项目。
面向初学者的热门JavaScript项目
使用JavaScript您可以做很多事情，但我们还不想让您不知所措。我们列出了可以为您的简历和职业增加价值的顶级JavaScript项目：
1. JavaScript计算器
我们将使用简单的HTML，CSS，并使用基本的JavaScript函数使所有组件正常工作。为了显示按钮和数字，我们将使用HTML，并使用CSS向它们添加一些美化功能。为了使按钮执行相应的功能，我们将使用JavaScript。主要功能是eval（），这是一个解决JS代码的全局JS函数。display（）函数将在计算器屏幕上显示选定的数字。请注意，该程序仅适用于鼠标事件。这是完整的代码：
<html> <body> <div class = title >My Beautiful JS Calculator</div> <table border="2"> <tr> <td><input type="button" value="c" onclick="clr()"/> </td> <td colspan="3"><input type="text" id="textval"/></td> </tr> <tr> <td><input type="button" value="+" onclick="display('+')"/> </td> <td><input type="button" value="1" onclick="display('1')"/> </td> <td><input type="button" value="2" onclick="display('2')"/> </td> <td><input type="button" value="3" onclick="display('3')"/> </td> </tr> <tr> <td><input type="button" value="-" onclick="display('-')"/> </td> <td><input type="button" value="4" onclick="display('4')"/> </td> <td><input type="button" value="5" onclick="display('5')"/> </td> <td><input type="button" value="6" onclick="display('6')"/> </td> </tr> <tr> <td><input type="button" value="*" onclick="display('*')"/> </td> <td><input type="button" value="7" onclick="display('7')"/> </td> <td><input type="button" value="8" onclick="display('8')"/> </td> <td><input type="button" value="9" onclick="display('9')"/> </td> </tr> <tr> <td><input type="button" value="/" onclick="display('/')"/> </td> <td><input type="button" value="." onclick="display('.')"/> </td> <td><input type="button" value="0" onclick="display('0')"/> </td> <td><input type="button" value="=" onclick="evaluate()"/> </td> </tr> </table> </body> <script> function display(val) { document.getElementById("textval").value+=val } function evaluate() { let x = document.getElementById("textval").value let y = eval(x) document.getElementById("textval").value = y } function clr() { document.getElementById("textval").value = "" } </script> <style> input[type="button"] { border-radius: 10px; background-color:blue; color: white; border-color:#black ; width:100%; } input[type="text"] { border-radius: 10px; text-align: right; background-color:black; color: white; border-color: white; width:100% } </style> </html>2. Hang子手游戏
man子手是我们最喜欢的游戏之一，孩子和成年人都喜欢它。您会惊讶地发现，可以使用JavaScript，HTML和CSS轻松开发hangman。请注意，主要功能是使用JS定义的。HTML用于显示，而CSS用于美化内容。尽管此代码段的JS中定义了许多方法，但看起来似乎有些复杂，但是一旦您遍历代码，您将意识到它很简单。您还可以运行代码并逐行查看执行情况。在此处检查代码和执行。
3.井字游戏
小时候，我们经常在纸上玩这个游戏。但是您是否知道在计算机上开发这款游戏也很简单？多亏了JavaScript。开发人员的详细代码。 逐步介绍了如何构建3x3井字游戏，稍后您可以根据自己的实践和知识将其扩展到NxN。该项目的HTML和CSS非常简单整洁。作者首先从伪代码开始，然后继续逐个解释每个功能。
4. JavaScript Weather App
这是一个有用且易于构建的应用程序，用于显示各个位置的天气。更改位置名称后，天气显示将立即更改，而无需刷新任何页面。用户界面整洁。请注意，大多数天气应用程序都使用获取天气的API。我们将使用流行和最常见的API，OpenWeatherMap。观看这段YouTube视频，详细介绍天气应用代码和功能。与往常一样，共有三个文件：index.html，main.js和main.css。尽管您可以将所有代码放在一个文件（HTML）中，但是拥有单独的文件更容易维护。
5. JavaScript音乐事件
在这里，我们向您介绍将对键盘事件起作用的事件监听器。例如，如果按下“ S”键，将发生什么事件？每个事件将具有不同的代码和动作。除了事件侦听器，我们还将学习如何添加和播放音频文件。请注意，我们添加了非常基本的CSS，因为这里的重点是JavaScript。您必须导入自己的声音和背景图像，程序才能正常工作。
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>KeyBoard Music</title> </head> <body> <div class="keys"> <div data-key="65" class="key"> <kbd>A</kbd> </div> <div data-key="83" class="key"> <kbd>S</kbd> </div> <div data-key="68" class="key"> <kbd>D</kbd> </div> <div data-key="70" class="key"> <kbd>F</kbd> </div> <div data-key="71" class="key"> <kbd>G</kbd> </div> <div data-key="72" class="key"> <kbd>H</kbd> </div> <div data-key="74" class="key"> <kbd>J</kbd> </div> <div data-key="75" class="key"> <kbd>K</kbd> </div> <div data-key="76" class="key"> <kbd>L</kbd> </div> </div> <audio data-key="65" src="sounds/clap.wav"></audio> <audio data-key="83" src="sounds/chord.wav"></audio> <audio data-key="68" src="sounds/ride.wav"></audio> <audio data-key="70" src="sounds/openhat.wav"></audio> <audio data-key="71" src="sounds/tink.wav"></audio> <audio data-key="72" src="sounds/kick.wav"></audio> <audio data-key="74" src="sounds/swipe.wav"></audio> <audio data-key="75" src="sounds/tom.wav"></audio> <audio data-key="76" src="sounds/boom.wav"></audio> </body> <script> function removeTransition(event) { if (event.propertyName !== 'transform') return event.target.classList.remove('playing') } function playSound(event) { const audio = document.querySelector(`audio[data-key="${event.keyCode}"]`) const key = document.querySelector(`div[data-key="${event.keyCode}"]`) if (!audio) return key.classList.add('playing') audio.currentTime = 0 audio.play() } const keys = Array.from(document.querySelectorAll('.key')) keys.forEach((key) => key.addEventListener('transitionend', removeTransition)) window.addEventListener('keydown', playSound) </script> <style> html { font-size: 12px; background: url('drums.jpg') top center; background-size: 80%; } .keys { display: flex; flex: 1; align-items: top; justify-content: center; } .key { border: 0.4rem solid blue; border-radius: 0.5rem; margin: 1rem; font-size: 2rem; padding: 1rem 0.5rem; transition: all 0.01s ease; width: 5rem; text-align: center; color: black; text-shadow: 0 0 0.5rem yellow; } </style> </html>6. JavaScript表单验证
表单验证是一个非常有用的方面，许多网站都使用它来对用户详细信息，卡详细信息，地址详细信息等进行客户端验证。例如，如果存在必填的输入字段名称，则用户可以键入数字或保留字段为空，仅键入一个字母，等等。使用JavaScript可以轻松完成所有这些验证。让我们看一个简单的表单验证项目。与往常一样，该项目也将需要HTML元素。我们没有做任何广泛的样式设计，只是在HTML本身中包含了基本元素。这是带有基本验证的简单表单的完整代码：
<html> <head> <title>Form Validation</title> <script type = "text/javascript"> function validate() { var text; if( document.myForm.name.value == "" ) { text = "Name cannot be empty"; document.getElementById("demo")[removed] = text; document.myForm.name.focus() ; return false; } if( document.myForm.email.value == "" ) { text = "E-mail cannot be empty"; document.getElementById("demo")[removed] = text; document.myForm.email.focus() ; return false; } var emailID = document.myForm.email.value; atposn = emailID.indexOf("@"); dotposn = emailID.lastIndexOf("."); if (atposn < 1 || ( dotposn - atposn < 2 )) { text = "Please enter valid email ID"; document.getElementById("demo")[removed] = text; document.myForm.email.focus() ; return false; } if( document.myForm.phone.value == "" || isNaN( document.myForm.phone.value ) || document.myForm.phone.value.length != 10 ) { text = "Please enter a valid 10-digit phone number"; document.getElementById("demo")[removed] = text; document.myForm.phone.focus() ; return false; } if( document.myForm.subject.value == "0" ) { text = "Please provide your area of expertise"; document.getElementById("demo")[removed] = text; return false; } return( true ); } </script> </head> <body> <form action = "" name = "myForm" onsubmit = "return(validate());"> <h1 align="center">USER REGISTRATION</H1> <table align="center" cellspacing = "3" cellpadding = "3" border = "3"> <tr> <td align = "right">Name</td> <td><input type = "text" name = "name" /></td> </tr> <tr> <td align = "right">E-mail</td> <td><input type = "text" name = "email" /></td> </tr> <tr> <td align = "right">Phone Number</td> <td><input type = "text" name = "phone" /></td> </tr> <tr> <td align = "right">Subject</td> <td> <select name = "subject"> <option value = "0" selected>Select</option> <option value = "1">HTML</option> <option value = "2">JavaScript</option> <option value = "3">CSS</option> <option value = "4">JSP</option> </select> </td> </tr> </table> <p id="demo" style="color:red; text-align:center"></p> <div style="text-align:center"><input type = "submit" value = "Submit" /></div> </form> </body> </html>7. JavaScript照片详细信息显示
我们将在网页上显示一些图像，一旦用户将鼠标悬停在图像上，就会显示更多详细信息。您可以从任何地方下载图像，也可以使用已有的图像。同样，我们将基本HTML和CSS与JS一起使用。主要魔术是在JS中完成的。您将了解鼠标悬停（移出）事件如何在此项目中起作用。
<!DOCTYPE html> <html> <head> <title>My Sun Sign Infos</title> </head> <script> function display(element){ document.getElementById('image')[removed] = element.alt; } function revert(){ document.getElementById('image')[removed] = "Hover over a sunsign image to display details."; } </script> <style> #image{ width: 650px; height: 70px; border:5px solid pink; background-color: black; background-repeat: no-repeat; color:white; background-size: 100%; font-family: Didot; font-size: 150%; line-height: 60px; text-align: center; } img{ width: 200px; height: 200px; border-radius: 50%; } </style> <body> <div> <p id = "image">Hover over a sunsign image to display details.<p> <img alt = "Sagittarius are beautiful, loyal and passionate." src = "saggi.jpg" onmouseover = "display(this)" onmouseout = "revert()"> <img alt = "Pisces are dreamy, helpful and love everyone!" src = "pisces.jpg" onmouseover = "display(this)" onmouseout = "revert()"> <img alt = "Leo are strong and fearless. They aim for and achieve a lot!" src = "leo.jpg" onmouseover = "display(this)" onmouseout = "revert()"> <img alt = "Scorpions are friends for life. They are trustworthy and truthful." src = "scorpio.jpg" onmouseover = "display(this)" onmouseout = "revert()"> </div> </body> </html>为了使这个项目更加复杂，请尝试使用W3Schools的幻灯片项目。您可以将onClick事件更改为onmousehover和onmouseout事件，在这种情况下，只要用户将鼠标悬停在图像上，图像就会更改。
8.建立一个交互式登陆页面
这是构建一个动态登录页面的非常酷的项目，该页面将您的姓名和您编写的一些文本存储在本地存储中，并根据当天的时间向您显示适当的图像和问候消息。该YouTube视频将帮助您了解用于该项目的所有JS组件。
9.建立一个购物车来执行订单
好的，我们一直在使用纯JS，HTML和CSS进行所有小型项目。作者构建了一个完整的购物车来完成订单。该项目还使用jQuery，但是不用担心。如果您不了解jQuery，则无需费力就可以理解它。随时随地学习jQuery的重要概念。这将是一个很棒的项目，因为购物网站在今天非常受欢迎，更是如此，因为人们已经非常喜欢数字购物。逐步并逐步完成该项目。这需要时间，但值得！
10.单页申请
这是另一个有趣的项目，其中在浏览侧链接时不会重新加载页面，但是内容会改变。同样，我们将使用eventListeners将视图从一个链接更改为另一个链接。查看此YouTube视频上的代码和说明。
结论
我们已经讨论了JS项目海洋中的10个。但是，这十个项目可以为您的投资组合增加很多价值，并涵盖了您需要了解的有关JavaScript的几乎所有重要概念。如果您想了解有关JS的更多信息，请访问Hackr.io编译的JavaScript教程列表。大多数时候，您不需要任何框架来编写JS代码，也不需要编辑器或IDE。您可以在Textpad或Wordpad上书写，并以.html扩展名保存文件。JS文件以.js扩展名存储，但是您可以将所有JS包含在HTML文件本身中（尽管不建议用于大型项目）。检查我们的HTML项目，以了解HTML为什么统治网络！
作者介绍
