به‌دلیل اختلالات گسترده در دانلود سرور، در صورت تمایل به خرید و دانلود هر یک از محصولات، می‌توانید در پیام رسان ایتا یا تلگرام با ما در ارتباط باشید.
به‌دلیل اختلالات گسترده در دانلود سرور، در صورت تمایل به خرید و دانلود هر یک از محصولات، می‌توانید در پیام رسان ایتا یا تلگرام با ما در ارتباط باشید.
در گام اول از آموزش جاوا اسکریپت رایگان به این پرسش که جاوا اسکریپت چیست؟ پاسخ می دهیم. زبان برنامه نویسی JavaScript یک زبان برنامه نویسی وب در سمت کاربر است که در صفحات HTML کار می کند و به تعامل بین عناصر در HTML واقعیت می بخشد در واقع جاوا اسکریپت نحوه عملکرد صفحات وب را کنترل می کند.
شاید اطلاع داشته باشید که تمامی عناصر و محتویات یک سایت یا صفحات وب با استفاده از HTML نشان داده می شود. به زبان عامیانه برای نشان دادن مفاهیم و موجودیت های یک صفحه وب برای انسان، از استانداردی استفاده می‌کنند که اسمش HTML است و دارای ساختارهایی است که با استفاده از تگ‌ها مفاهیمی را برای ما نشان می دهند. به عنوان مثال تمامی مرورگرها متوجه هستند وقتی از تگ img استفاده شده حتماً یک تصویر بایستی نشان داده شود.
حال اگر از هر زبان برنامه نویسی استفاده کنیم در نهایت کدهای آن به HTML تبدیل خواهد شد تا برای انسان قابل درک باشد.
زبان برنامه نویسی جاوا اسکریپت یک زبان Dynamic و مبتنی بر شی گرایی است و در زمینه طراحی وب، جایگاه ویژه ای در بین زبان های برنامه نویسی دارد. این زبان برنامه نویسی همیشه در کنار HTML و CSS به عنوان یک ابزار مکمل برنامه نویسی وب به کار برده می شود.
جاوا اسکریپت یک زبان اسکریپتی است یعنی مرحله کامپایل و اجرا آن ها جدا نیست و کامپایل آن‌ها در زمان اجرا انجام می‌شود. وظیفه تفسیر برنامه‌های جاوا اسکریپت بر عهده مرورگر است.
برای شروع کار فعلاً نیازی به برنامه یا نصب و … نداریم و فقط با یک editor ساده مانند Nodepad ویندوز هم می توانیم کدهای خودمان را بنویسیم. خوب در ابتدا یک فولدر ایجاد کنید و در آن یک فایل متنی با نام مثلاً home و پسوند html. ایجاد کنید و درون آن کدهای Html زیر را قرار دهید.
البته برای ادیت یا جایگذاری کد ها می توانید از ادیتور ساده ++Notepad استفاده کنید. در این مقاله از سری آموزش جاوا اسکریپت رایگان ما نیز از ادیتور ++Notepad استفاده کرده ایم.
<!DOCTYPE html> <html> <head> <title>JavaScript Programstore</title> </head> <body> <p>Test for Programstore</p> </body> </html>
اجازه دهید تا یک فایل CSS نیز به پروژه اضافه کنیم تا کمی به صفحه خودمان زینت دهیم. پس یک فایل دیگر با نام style.css ایجاد کنید و محتویات آن را مانند کد های زیر قرار دهید:
body {
background-color: lightblue;
}
p {
color: red;
margin-left: 20px;
}
حالا پیوند خود را در کد HTML برای دسترسی به فایل CSS را با اضافه کردن کد زیر در قسمت head انجام دهید.
<link rel="stylesheet" href="style.css">
اگر با نحوه کدنویسی با HTML و CSS آشنایی ندارید می توانید مجموعه آموزش طراحی سایت با HTML و CSS مجموعه آموزشی فرادرس را تهیه و مطالعه کنید. در HTML کدهای جاوا اسکریپت بین تگ‌های <script> و </script> درج می‌شوند. به عنوان نمونه کد زیر را در نظر بگیرید:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Programstore</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>
</body>
</html>
در مثال بالا همانطور که مشاهده می کنید در داخل تگ p چیزی نوشته نشده و فقط id مربوط به تگ p برابر با demo می باشد. در بین تگ های script کدی نوشتیم که با استفاده از document.getElementById و مشخص کردن demo به آن گفته شده در html عبارت My First JavaScript درج شود. پس ارتباط بین HTML و JavaScript بدین صورت با یک مثال نشان داده شد.
هدف ما در آموزش جاوا اسکریپت رایگان و کاربردی استفاده از یک فایل مجزای JavaScript است که تمامی تعریف ها در داخل آن فایل انجام گیرد و از طریق HTML فراخوانی شوند. پس برای این کار کافیست یک فایل با نام myScript.js در کنار دو فایل دیگر ایجاد کنید و محتویات آن را بصورت کد زیر قرار دهید.
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
حالا فایل html را نیز بصورت زیر تغییر دهید:
<!DOCTYPE html> <html> <head> <title>JavaScript Programstore</title> <link rel="stylesheet" href="style.css"> </head> <body> <p id="demo">A Paragraph.</p> <button type="button" onclick="myFunction()">Try it</button> <script src="myScript.js"></script> </body> </html>
خوب قبل از دیدن نتایج حتماً مشاهده می کنید که با استفاده از خاصیت src تگ script نام فایل جاوا اسکریپت “myScript.js” خودمان را به صفحه HTML لینک کرده ایم و یک تگ button تعریف کرده ایم و در خاصیت onclick آن تابع ()myFunction را فراخوانی کرده ایم. زمانی که تابع ()myFunction از طریق فایل myScript.js (فایلی که ()myFunction در آن تعریف شده است ) فراخوانی می شود شناسه مربوط به demo را در هر جای HTML که وجود داشته باشد تغییر خواهد داد.
تا این قسمت از آموزش با طرز نوشتن کدها و اینکه کدهای جاوا اسکریپت را در کجا بنویسیم؟ آشنا شدیم. وقت آن رسیده تا یک برنامه ساده جمع دو عدد را در جاوا اسکریپت کدنویسی کنیم. برای نوشتن این برنامه به نام تابع ها یا شناسه ها دست نمی زنیم ولی بعداً باید برای هر تابع یا شناسه یک نام بامصا بدهید ولی در اینجا چون مطالب آموزشی هست لازم به تغییر نیست. در فایل myScript.js کدهای زیر را جایگزین کنید:
function myFunction() {
var x=10;
var y=5;
var z=x+y;
document.getElementById("demo").innerHTML = z;
}
خوب اگر دقت کنید سه متغیر با کلمه کلیدی var تعریف کرده ایم و در خروجی شناسه demo حاصل جمع را قرار داده ایم. حال با همان فایل HTML خروجی بگیرید و Try it را بزنید عدد ۱۵ را خواهید دید.
به همین راحتی بدون نیاز به هیچ ابزاری و فقط با ابزار های موجود در سیستم عامل خود توانستیم اولین برنامه جاوا اسکریپت خود را بنویسیم. شاید در ذهن شما سوال باشد که انقدر کار برای نوشتن جمع دو عدد !!! عزیزان بهتر است بدانید در زبان های HTML و CSS توانایی انجام محاسبات و برنامه نویسی به شکل عامه وجود ندارد.
بطور کلی ۳ روش برای اعلان یا تعریف متغیر در جاوا اسکریپت وجود دارد که عبارت است از:
با استفاده از کلمه کلیدی var می توان یک متغیر را اعلان یا تعریف کرد. البته اعلان یک متغیر در جاوا اسکریپت با زبان های برنامه نویسی مرسوم همچون جاوا و ++C کمی متفاوت است. مثلاً می توان با استفاده از var متغیری با یک نوع رشته ای ساخت و در ادامه برنامه از همان متغیر برای اعداد صحیح هم استفاده کرد.
بطور کلی در برنامه نویسی، متغیرها محفظه یا ظرف‌هایی برای ذخیره داده ها (مقادیر) هستند. در مثال زیر، x، y، و z متغیرهایی هستند که با کلمه کلیدی var اعلان شده اند:
var x = 5; var y = 6; var z = x + y;
همچنین می توانید متغیرهای زیادی را در یک عبارت اعلان یا تعریف کنید که از یک نوع نباشند. عبارت را با var شروع کنید و متغیرها را با کاما جدا کنید:
var person = "John Doe", carName = "Volvo", price = 200;
دربرنامه نویسی، متغیرها اغلب بدون مقدار اعلان می شوند. متغیری که بدون مقدار اعلان شده باشد، مقدار آن تعریف نشده یا undefined خواهد %
