یکی از محبوب‌ترین زبان‌های برنامه‌نویسی، جاوا اسکریپت است که در تمام برنامه‌های کاربردی وب برای اعتبار سنجی، ارائه محتوای پویا، گرافیک‌های تعاملی و نقشه‌ها و بسیاری موارد دیگر استفاده می‌شود. جاوا اسکریپت همراه با HTML و CSS، قدرت ساخت کامل برنامه‌های وب کامل را دارد. JS می‌تواند با یک صفحه وب تعامل داشته باشد و تمام عناصر جالب در صفحه بگنجاند. در این مقاله تعدادی تمرین جاوا اسکریپت و پروژه تمرینی جاوا اسکریپت ارائه می‌کنیم.
بهترین روش‌های یادگیری جاوا اسکریپت
جاوا اسکریپت حضور قابل‌توجهی در بخش توسعه وب دارد و یک مهارت ارزشمند برای هر برنامه‌نویس وب است. اگر علاقه‌مند به رشد مجموعه مهارت‌های فنی خود در جاوا اسکریپت هستید، باید برای یادگیری این زبان وقت بگذارید. تبدیل‌شدن به یک توسعه‌دهنده فرانت‌اند ممکن است چند ماه طول بکشد.
بهترین روش‌های یادگیری جاوا اسکریپت شامل موارد زیراست:
- وب‌سایت‌ها و دوره‌های خودآموز
- کتاب‌ها
- بوت کمپ های کد نویسی
- جلسات و رویدادهای حوزه جاوا اسکریپت
- شروع کردن پروژه‌های خود
چرا تمرین جاوا اسکریپت برای یادگیری مهم است؟
JS قلب هر برنامه وب است. دانش خوب از جاوا اسکریپت می‌تواند طیف وسیعی از گزینه‌های شغلی چالش‌برانگیز و جالب مانند توسعه برنامه‌های موبایل و دسکتاپ، ساخت وب‌سایت‌های پویا از ابتدا، طراح UI/UX یا حتی یک توسعه‌دهنده کامل را در اختیار شما قرار دهد.
اگر اصول اولیه جاوا اسکریپت را می‌دانید، پروژه‌های تمرینی جاوا اسکریپت گامی مهم در نقشه راه جاوا اسکریپت هستند. اگر تجربه برنامه‌نویسی قبلی ندارید، می‌توانید دوره‌های پایه جاوا اسکریپت را بگذرانید و سپس به این پروژه‌ها بازگردید.
بهترین پروژه‌های و تمرین‌های آماده جاوا اسکریپت برای مبتدیان
کارهای زیادی می‌توانید با جاوا اسکریپت انجام دهید، اما ما می‌خواهیم چند تمرین ساده جاوا اسکریپت را به‌عنوان نمونه معرفی کنیم. ما بهترین پروژه‌های جاوا اسکریپت را که می‌توانند به یادگیری بهتر شما کمک کند را در زیر آورده‌ایم.
تمرین ماشین‌حساب جاوا اسکریپت
ما در این تمرین جاوا اسکریپت از HTML ساده و CSS استفاده خواهیم کرد و همه اجزا را با استفاده از توابع اولیه جاوا اسکریپت پیاده خواهیم کرد. برای نمایش دکمه‌ها و اعداد، از HTML استفاده می‌کنیم و با استفاده از CSS به آن‌ها زیبایی اضافه می‌کنیم.
برای اینکه دکمه‌ها عملکردهای مربوطه را انجام دهند، از جاوا اسکریپت استفاده می‌کنیم. تابع اصلی 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>
بازی Hangman
Hangman یکی از بازی‌های موردعلاقه ما است و کودکان و بزرگسالان نیز آن را دوست دارند. این بازی محبوب با استفاده از جاوا اسکریپت، HTML و CSS توسعه داده‌شده است. توجه داشته باشید که عملکرد اصلی با استفاده از JS تعریف‌شده است. HTML برای نمایش است و CSS کار زیباسازی محتوا را انجام می‌دهد. اگرچه روش‌های زیادی در JS این قطعه کد تعریف‌شده است، اما ممکن است کمی پیچیده به نظر برسد، اما با تحلیل و بررسی کد متوجه خواهید شد که ساده است. همچنین می‌توانید کد را اجرا کنید و خط به خط اجرا را ببینید.
لینک منبع تمرین جاوا اسکریپت بازی Hangman:
https://code.sololearn.com/WyyBylG1NvdU/
اپلیکیشن آب و هو با جاوا اسکریپت
این تمرین جاوا اسکریپت یک اپلیکیشن مفید برای نمایش آب و هوای مکآن‌های مختلف است. پس از تغییر نام مکان، نمایش آب و هوا بلافاصله بدون هیچ گونه نیاز به رفرش صفحه تغییر می‌کند. رابط کاربری این اپلیکیشن بسیار مرتب است. توجه داشته باشید که اکثر برنامه‌های هواشناسی از API استفاده می کنند که وضعیت آب و هوا را دریافت می‌کند. ما از محبوب‌ترین و رایج ترین API، OpenWeatherMap استفاده خواهیم کرد.
ویدیوی یوتیوب در لینک زیر را ببینید که کد برنامه آب و هوا و عملکرد آن را با جزئیات توضیح می‌دهد. طبق معمول سه فایل وجود دارد: index.html، main.js و main.css. اگرچه می‌توانید تمام کدها را در یک فایل (HTML) قرار دهید، اما داشتن فایل‌های جداگانه و نگهداری آسان‌تر است.
لینک تمرین جاوا اسکریپت اپلیکیشن آب و هوا در یوتیوب:
https://www.youtube.com/watch?v=n4dtwWgRueI
ساخت نرم اعتبار سنجی با جاوا اسکریپت
فرم اعتبار سنجی یک کاربرد بسیار مفید است و توسط بسیاری از وب‌سایت‌ها برای اعتبارسنجی سمت مشتری اطلاعات کاربر، جزئیات کارت، جزئیات آدرس و غیره استفاده می‌شود. به‌عنوان مثال، اگر یک نام فیلد ورودی اجباری وجود داشته باشد، کاربر ممکن است یک عدد را تایپ کند یا آن پر نکند. فیلد خالی، فقط یک حرف تایپ کنید و غیره. همه این اعتبارسنجی ها را می توان به راحتی با استفاده از جاوا اسکریپت انجام داد.
اجازه دهید یک پروژه تمرین جاوا اسکریپت اعتبارسنجی فرم ساده را ببینیم. طبق معمول، پروژه به عناصر 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").innerHTML = text;
document.myForm.name.focus() ;
return false;
}
if( document.myForm.email.value == "" ) {
text = "E-mail cannot be empty";
document.getElementById("demo").innerHTML = 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").innerHTML = 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").innerHTML = text;
document.myForm.phone.focus() ;
return false;
}
if( document.myForm.subject.value == "0" ) {
text = "Please provide your area of expertise";
document.getElementById("demo").innerHTML = 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>
تمرین نمایش جزئیات عکس با جاوا اسکریپت
در این تمرین جاوا اسکریپت هنگامی که ما یک تصویر را در یک صفحه وب نمایش میدهیم و هنگامی که کاربر روی تصاویر قرار می گیرد، جزئیات بیشتری از عکس نمایش داده می‌شود. می‌توانید تصاویر را از هر جایی دانلود کنید یا از تصاویری که از قبل دارید استفاده کنید. در این پروژه جاوا اسکریپت باز هم از HTML و CSS اولیه همراه با JS استفاده کرده ایم. جادوی اصلی این پروژه در JS انجام می‌شود.
<!DOCTYPE html>
<html>
<head>
<title>My Sun Sign Infos</title>
</head>
<script>
function display(element){
document.getElementById('image').innerHTML = element.alt;
}
function revert(){
document.getElementById('image').innerHTML = "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>
ساخت لندینگ پیج تعاملی با جاوا اسکریپت
این یک پروژه بسیار جالب برای ساخت یک صفحه فرود پویا است که نام شما و مقداری متن نوشته شده توسط شما را در حافظه محلی ذخیره می‌کند و یک تصویر مناسب و پیام تبریک را بر اساس ساعت روز به شما نشان می‌دهد. لینک زیر از یوتیوب مرتبط با این تمرین جاوا اسکریپت است که می‌توانید قدم به قدم آن را پیاده سدازی کنید.
https://www.youtube.com/watch?v=fSTQzlprGLI&feature=emb_logo
ساخت سبد خرید برای وب‌سایت با استفاده از جاوا اسکریپت
تا به این جا تقریبا ما تمام پروژه‌های بالا را با JS، HTML و CSS خالص انجام دادیم. در این تمرین جاوا اسکریپت قص داریم ساخت سبد خرید را معرفی کنیم که یک تمرین عالی برای مبتدیان است. این پروژه همچنین از jQuery استفاده می‌کند. درک jQuery چندان سخت نیست و می‌توانید به آسانی آن را یاد بگیرید. این پروژه جاوا اسکریپت یک پروژه عالی برای تمرین جاوا اسکریپت خواهد بود زیرا وب‌سایت‌های فروشگاهی امروزه بسیار محبوب هستند. در زیر لینک یک منبع عالی از پروژه‌های متن باز سبد خرید با جاوا اسکریپت قرار داده‌شده است.
https://awesomeopensource.com/projects/javascript/shopping-cart
بهترین وب‌سایت‌ها برای یادگیری جاوا اسکریپت به‌صورت رایگان
ازآنجا که جاوا اسکریپت نقش بسیار مهمی در توسعه وب دارد منابع و آموزش‌های زیادی درە سطح وب برای آن وجود دارد در این بخش از مقاله آموزش جاوا اسکریپت به بهترین سایت‌های آموزش جاوا اسکریپت که به‌صورت رایگان آموزش ارائه می‌دهند اشاره می‌کنیم.
جاوا اسکریپت یک‌زبان برنامه‌نویسی مبتنی بر وب است که در همه برنامه‌های توسعه وب استفاده می‌شود. همراه با HTML و CSS، جاوا اسکریپت بخشی از اصول توسعه وب است.
- HTML ساختار اصلی و محتوای آن را تشکیل می‌دهد.
- CSS برای استایل دادن به وب‌سایت‌ها و کنترل طرح‌بندی‌ها استفاده می‌شود
- جاوا اسکریپت وظیفه پویا کردن وب‌سایت و انیمیشن‌سازی را بر عهده دارد.
وب‌سایت W3schools برای یادگیری جاوا اسکریپت
این وب‌سایت یکی از باسابقه‌ترین و از پیشگامان آموزش درزمینهٔ یادگیری توسعه وب، برنامه‌نویسی و توسعه نرم‌افزار است.
آن‌ها روش بسیار خوبی برای آموزش و تمرین جاوا اسکریپت دارند، آن‌ها به‌صورت گام‌به‌گام جاوا اسکریپت را همراه با تمرین‌های ساده و پیشرفته به شما آموزش می‌دهند. لینک زیر دوره آموزشی جاوا اسکریپت این وب‌سایت است.
https://www.w3schools.com/js
وب‌سایت Codeacademy
این وب‌سایت نیز یکی از پیشگامان درزمینهٔ آموزش جاوا اسکریپت است. این وب‌سایت یک روش بسیار تعاملی برای آموزش اصول مهم جاوا اسکریپت ارائه می‌دهد.
آموزش این وب‌سایت از سطح ابتدایی به سطح دشوار می‌رسد. این وب‌سایت همچنین تمرینات و پروژه‌های ساده و پیشرفته جاوا اسکریپت را همراه با آموزش‌ها ارائه می‌دهد.
https://www.codecademy.com/catalog/subject/all
همان‌طور که از نام خود این وب‌سایت پیدا است، این آموزش وب فقط بر جاوا اسکریپت متمرکزشده است و یکی از بهترین دوره‌های آموزشی جاوا اسکریپت به‌حساب می‌آید.
https://javascript.info/
Code Mentor
این وب‌سایت آموزشی حاوی یک روش تعاملی برای یادگیری Javascript است. شما در این دوره آموزش جاوا اسکریپت شما نه‌تنها جاوا اسکریپت بلکه سایر کتابخانههای جاوا اسکریپت مانند Ajax، JQuery، Angular و JSON را نیز خواهید آموخت.
https://www.codementor.io/community
مکتب‌خونه
علاوه بر وبسایت‌هایی که معرفی شدند، مکتب‌خونه نیز دوره‌های آموزشی متعددی با موضوعات مربوط به جاوا اسکریپت تولید کرده است، که علاوه بر آموزش جاوا اسکریپت؛ فریم‌ورک‌ها و کتابخانههای آن را نیز آموزش می‌دهند.
نتیجه‌گیری
در این پست آموزشی ما چند تا تمرین جاوا اسکریپت را ارائه دادیم. این تمرین‌ها منبع باز هستند و بسیار جای کاردارند که می‌توانید با استفاده از آن‌ها توانایی‌های خود را بسنجید. بااین‌حال، این پروژه‌ها می‌توانند به یادگیری بهتر جاوا اسکریپت توسط شما کمک زیادی کند و تقریباً تمام مفاهیم مهمی که باید در مورد جاوا اسکریپت بدانید را پوشش می‌دهند.
ما همچنین در ادامه بهترین وب‌سایت‌های آموزش جاوا اسکریپت را به شما معرفی کردیم. دوره‌هایی که معرفی‌شده‌اند کاملاً رایگان بوده و به زبان انگلیسی هستند. این وب‌سایت‌ها بروز هستند و بروزترین تمرینات و پروژه‌های جاوا اسکریپت را ارائه می‌دهند.
