面向初學(xué)者的Javascript項目
發(fā)布于：2020-12-31 15:26:03
JavaScript是最流行的腳本語言之一，在所有Web應(yīng)用程序中都使用JavaScript進行驗證，渲染動態(tài)內(nèi)容，交互式圖形和地圖等。與HTML和CSS一起，JS具有構(gòu)建完整，強大的Web應(yīng)用程序的能力。由于有了JS，用戶可以與網(wǎng)頁進行交互，并查看頁面上所有有趣的元素。在探索項目時，我們將了解js如何幫助構(gòu)建交互式網(wǎng)頁。在此之前，讓我們快速瀏覽一下JS的重要功能：
在客戶端和服務(wù)器端都可以使用以創(chuàng)建交互式Web內(nèi)容。
通過提供動態(tài)功能極大地改善了用戶體驗。
具有面向?qū)ο蠊δ艿妮p量級語言。
口譯，開放和跨平臺的語言。
與Java和HTML無縫集成。
為什么使用JavaScript項目？
JS是任何Web應(yīng)用程序的心臟。精通JavaScript可以為您提供一系列具有挑戰(zhàn)性和有趣的職業(yè)選擇，例如開發(fā)移動和桌面應(yīng)用程序，從頭開始構(gòu)建動態(tài)網(wǎng)站，UI / UX設(shè)計器，甚至是全棧開發(fā)人員。如果您了解JavaScript的基礎(chǔ)知識，那么下一步就是向簡歷添加星號的下一步。如果您以前沒有任何編程經(jīng)驗，則可以學(xué)習(xí)基本的JavaScript課程，然后返回這些項目。如果您遵循一些HTML和CSS，您將了解下面提到的大多數(shù)項目。
面向初學(xué)者的熱門JavaScript項目
使用JavaScript您可以做很多事情，但我們還不想讓您不知所措。我們列出了可以為您的簡歷和職業(yè)增加價值的頂級JavaScript項目：
1. JavaScript計算器
我們將使用簡單的HTML，CSS，并使用基本的JavaScript函數(shù)使所有組件正常工作。為了顯示按鈕和數(shù)字，我們將使用HTML，并使用CSS向它們添加一些美化功能。為了使按鈕執(zhí)行相應(yīng)的功能，我們將使用JavaScript。主要功能是eval（），這是一個解決JS代碼的全局JS函數(shù)。display（）函數(shù)將在計算器屏幕上顯示選定的數(shù)字。請注意，該程序僅適用于鼠標事件。這是完整的代碼：
<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子手是我們最喜歡的游戲之一，孩子和成年人都喜歡它。您會驚訝地發(fā)現(xiàn)，可以使用JavaScript，HTML和CSS輕松開發(fā)hangman。請注意，主要功能是使用JS定義的。HTML用于顯示，而CSS用于美化內(nèi)容。盡管此代碼段的JS中定義了許多方法，但看起來似乎有些復(fù)雜，但是一旦您遍歷代碼，您將意識到它很簡單。您還可以運行代碼并逐行查看執(zhí)行情況。在此處檢查代碼和執(zhí)行。
3.井字游戲
小時候，我們經(jīng)常在紙上玩這個游戲。但是您是否知道在計算機上開發(fā)這款游戲也很簡單？多虧了JavaScript。開發(fā)人員的詳細代碼。 逐步介紹了如何構(gòu)建3x3井字游戲，稍后您可以根據(jù)自己的實踐和知識將其擴展到NxN。該項目的HTML和CSS非常簡單整潔。作者首先從偽代碼開始，然后繼續(xù)逐個解釋每個功能。
4. JavaScript Weather App
這是一個有用且易于構(gòu)建的應(yīng)用程序，用于顯示各個位置的天氣。更改位置名稱后，天氣顯示將立即更改，而無需刷新任何頁面。用戶界面整潔。請注意，大多數(shù)天氣應(yīng)用程序都使用獲取天氣的API。我們將使用流行和最常見的API，OpenWeatherMap。觀看這段YouTube視頻，詳細介紹天氣應(yīng)用代碼和功能。與往常一樣，共有三個文件：index.html，main.js和main.css。盡管您可以將所有代碼放在一個文件（HTML）中，但是擁有單獨的文件更容易維護。
5. JavaScript音樂事件
在這里，我們向您介紹將對鍵盤事件起作用的事件監(jiān)聽器。例如，如果按下“ S”鍵，將發(fā)生什么事件？每個事件將具有不同的代碼和動作。除了事件偵聽器，我們還將學(xué)習(xí)如何添加和播放音頻文件。請注意，我們添加了非?；镜腃SS，因為這里的重點是JavaScript。您必須導(dǎo)入自己的聲音和背景圖像，程序才能正常工作。
<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表單驗證
表單驗證是一個非常有用的方面，許多網(wǎng)站都使用它來對用戶詳細信息，卡詳細信息，地址詳細信息等進行客戶端驗證。例如，如果存在必填的輸入字段名稱，則用戶可以鍵入數(shù)字或保留字段為空，僅鍵入一個字母，等等。使用JavaScript可以輕松完成所有這些驗證。讓我們看一個簡單的表單驗證項目。與往常一樣，該項目也將需要HTML元素。我們沒有做任何廣泛的樣式設(shè)計，只是在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照片詳細信息顯示
我們將在網(wǎng)頁上顯示一些圖像，一旦用戶將鼠標懸停在圖像上，就會顯示更多詳細信息。您可以從任何地方下載圖像，也可以使用已有的圖像。同樣，我們將基本HTML和CSS與JS一起使用。主要魔術(shù)是在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>為了使這個項目更加復(fù)雜，請嘗試使用W3Schools的幻燈片項目。您可以將onClick事件更改為onmousehover和onmouseout事件，在這種情況下，只要用戶將鼠標懸停在圖像上，圖像就會更改。
8.建立一個交互式登陸頁面
這是構(gòu)建一個動態(tài)登錄頁面的非?？岬捻椖浚擁撁鎸⒛男彰湍帉懙囊恍┪谋敬鎯υ诒镜卮鎯χ?，并根據(jù)當(dāng)天的時間向您顯示適當(dāng)?shù)膱D像和問候消息。該YouTube視頻將幫助您了解用于該項目的所有JS組件。
9.建立一個購物車來執(zhí)行訂單
好的，我們一直在使用純JS，HTML和CSS進行所有小型項目。作者構(gòu)建了一個完整的購物車來完成訂單。該項目還使用jQuery，但是不用擔(dān)心。如果您不了解jQuery，則無需費力就可以理解它。隨時隨地學(xué)習(xí)jQuery的重要概念。這將是一個很棒的項目，因為購物網(wǎng)站在今天非常受歡迎，更是如此，因為人們已經(jīng)非常喜歡數(shù)字購物。逐步并逐步完成該項目。這需要時間，但值得！
10.單頁申請
這是另一個有趣的項目，其中在瀏覽側(cè)鏈接時不會重新加載頁面，但是內(nèi)容會改變。同樣，我們將使用eventListeners將視圖從一個鏈接更改為另一個鏈接。查看此YouTube視頻上的代碼和說明。
結(jié)論
我們已經(jīng)討論了JS項目海洋中的10個。但是，這十個項目可以為您的投資組合增加很多價值，并涵蓋了您需要了解的有關(guān)JavaScript的幾乎所有重要概念。如果您想了解有關(guān)JS的更多信息，請訪問Hackr.io編譯的JavaScript教程列表。大多數(shù)時候，您不需要任何框架來編寫JS代碼，也不需要編輯器或IDE。您可以在Textpad或Wordpad上書寫，并以.html擴展名保存文件。JS文件以.js擴展名存儲，但是您可以將所有JS包含在HTML文件本身中（盡管不建議用于大型項目）。檢查我們的HTML項目，以了解HTML為什么統(tǒng)治網(wǎng)絡(luò)！
