آشنایی با جاوا اسکریپت
خوش اومدین به اولین جلسه از دوره آموزش رایگان جاوا اسکریپت. ما در این دوره قراره با یکی از محبوبترین زبانهای برنامه نویسی دنیا آشنا بشیم. یه زبان برنامه نویسی قوی و کارآمد که تبدیل به یک زبان برنامه نویسی وب بی رقیب شده. خبر خوب اینه که یادگیری جاوا اسکریپت خیلی راحته و تعداد بی شماری توسعه دهنده با این زبان کار میکنن. این یعنی علاوه بر سادگی خود زبان، افراد زیادی هم هستند که میتونن شما رو توی استفاده بهتر از جاوا اسکریپت همراهی کنن.
چرا باید جاوا اسکریپت رو یاد بگیریم؟
جاوا اسکریپت یکی از ۳ زبانی هست که یه توسعه دهنده وب باید اونو بلد باشه.
ما با HTML محتوای صفحات وب رو تعریف میکنیم. با CSS عناصر HTML رو استایل دهی میکنیم و صفحات خودمون رو لایه بندی میکنیم. و نهایتا با استفاده از زبان جاوا اسکریپت برای برنامه نویسی رفتار و واکنش صفات وب استفاده میکنیم.
البته جاوا اسکریپت فقط داخل صفحات وب استفاده نمیشه. بلکه خیلی از برنامه های دسکتاپ و سرور از جاوا اسکریپت استفاده میکنن. Node.js یکی از این نمونه هاست.
بعضی از پایگاه های داده مثل MongoDB و CouchDB از زبان جاوا اسکریپت به عنوان زبان برنامه نویسی خودشون استفاده میکنن.
نکته: زبان Java با زبان JavaScript فرق میکنه و دو تا زبان کاملا مستقل هستند و عبارت Java توی هر دو زبان، صرفا یه تشابه اسمی هست.
جاوا اسکریپت چه کارهایی توی صفحه وب انجام میده؟
جاوا اسکریپت این امکان رو به ما میده که بتونیم تغییرات زیادی رو توی صفحات وب ایجاد کنیم. این تغییرات رو میتونیم روی تگهای HTML و حتی ویژگی های CSS بصورت مستقل اعمال کنیم. خوبه که با همدیگه با بعضی از کارهایی که جاوا اسکریپت میتونه برامون انجام بده آشنا بشیم:
- جاوا اسکریپت میتونه محتوای HTML رو تغییر بده
- جاوا اسکریپت میتونه مقدار صفات (Attribute) رو تغییر بده
- جاوا اسکریپت میتونه استایل عناصر HTML رو تغییر بده. در واقع میتونه روی CSS تاثیر داشته باشه
تگ Script
همونطور که توی دوره آموزش HTML هم گفتیم ما میتونیم با استفاده از تگ script کدهای جاوا اسکریپت رو به صفحه وب خودمون اضافه کنیم.
<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>
من در قطعه کد بالا یک خط کد جاوا اسکریپت رو توسط تگ script به فایل HTML اضافه کردم.
ما میتونیم هر تعداد اسکریپت (قطعه کد) رو به فایل HTML خودتون اضافه کنیم. این کدهای جاوا اسکریپت میتونن تو قسمت body یا head قرار بگیرن و برای این کار محدودیتی وجود نداره.
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</head>
<body>
<h1>A Web Page</h1>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>
</body>
</html>
توی این مثال من کدهای جاوا اسکریپت خودم رو در داخل تگ head استفاده کردم.
همینطور توی مثال زیر میتونیم نمونه ای از استفاده کدهای جاوا اسکریپت داخل تگ body رو ببینیم:
<!DOCTYPE html>
<html>
<body>
<h1>A Web Page</h1>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</body>
</html>
فراخوانی کدهای جاوا اسکریپت از یک منبع خارجی
علاوه بر اینکه میتونیم کدهای جاوا اسکریپت رو داخل فایل HTML بنویسیم، این امکان وجود داره کدهای جاوا اسکریپت که در داخل یک فایل مجزا قرار داره رو توی فایل HTML خودمون ازش استفاده کنیم.
استفاده از کدهای جاوا اسکریپت از منبع خارجی مزایای زیادی داره از جمله:
- جداسازی کدهای جاوا اسکریپت و HTML از همدیگه
- خوانایی و نگهداری کدها بهتر و راحتتر میشه
- کش شدن فایلهای جاوا اسکریپت موجب زیاد شدن سرعت بارگذاری صفحه وب میشه
- ما میتونیم از کدهای جاوا اسکریپت خودمون در چندین فایل HTML استفاده کنیم.
فایل های جاوا اسکریپت با پسوند js ذخیره میشن.
ما میتونیم با استفاده از تگ script و صفت src این تگ، فایل جاوا اسکریپت رو به پروژه خودمون اضافه کنیم:
<script src="myScript.js"></script>
برای مقداردهی src میتونیم از دو شیوه آدرس دهی مطلق و نسبی استفاده کنیم.
