آموزش زبان جاوا اسکریپت JavaScript

بعد از یادگیری html و css قدم بعدی برای طراحی سایت JavaScript است. همان طور که در پست های قبلی گفته شد طراحی سایت را مانند ساخت یک ساختمان در نظر گرفتیم. ستون، سقف، دیوار و ... را html فرض کردیم و بخش های دیگر مانند گچ کاری، سرامیک کاری، نما و ... که به ساختمان زیبایی می دهد را css در نظر گرفتیم. تمامی این موارد یک ساختمان را تشکیل می دهند اما برای راحتی و آسایش ساکنین ساختمان از ابزار و دستگاه های پویا و الکتریکی می توان استفاده کرد مانند آسانسور، ریموت در و ... تمام این موارد را می توان به جاوا اسکریپت در طراحی سایت نسبت داد. با جاوااسکریپت امکان پویا شدن سایت فراهم می شود. به راحتی می توانید با نوشتن چند خط کد به تمام عناصر درون قالب سایت خود دسترسی داشته باشید و قدرت خود را در طراحی سایت افزایش دهید.

زبان جاوا اسکریپت

زبان جاوا اسکریپت به انگلیسی JavaScript در سال 1995 میلادی توسط برندان ایچ معرفی شد. این زبان در ابتدا یک زبان سمت کاربر و برای طراحی سایت به کار می رفت. در طول این سال ها جاوا اسکریپت پیشرفت محسوسی داشته و با استفاده از پلتفرم Node.js امکان برنامه نویسی سمت سرور هم به آن اضافه شده است. اما این پایان راه نبود و در این سال ها فریم ورک های زیادی برای این زبان منتشر شده که حتی می توان با آن اپلیکیشن و بازی هم ساخت. جاوا اسکریپت توسط مرورگرهای امروزی پشتیبانی می شود و برای اجرای سمت کاربر آن مشکلی نخواهید داشت.

از معروف ترین کتابخانه ها و فریم ورک های جاوا اسکریپت می توان به موارد زیر اشاره کرد:

• Angular
• Aurelia
• Electron
• Ember.js
• JQuery
• Next.js
• React
• Vue.js
• و ...

نمونه کد زبان جاوا اسکریپت

برای اجرای کد های جاوا اسکریپت در مرورگر باید آن را درون تگ script قرار دهید.

کد:

<script>
  //code
</script>

برای شروع، یک مثال ساده با استفاده از document.write می نویسیم.

بعد از اجرای کد، متن CodeUni.Ir نمایش داده می شود.

کد:

<script>
  document.write("CodeUni.Ir");
</script>

اجرا

برای مثال بعدی می خواهیم با استفاده از جاوا اسکریپت متن یک تگ پاراگراف را تغییر دهیم.

کد HTML:

<p id="example">before</p>

کد JavaScript:

<script>
  document.getElementById("example").innerHTML = "after";
</script>

اجرا

همان طور که مشاهده می کنید ابتدا با استفاده از html یک تگ p ساختیم و مقدار صفت id را example گذاشتیم. متن پیش فرض این تگ before است.

در ادامه با استفاده از جاوااسکریپت و مبحث DOM که در ادامه با آن آشنا خواهید شد تگ p با id مدنظر که example می باشد را شناسایی کرده و با innerHTML متن درون آن را به after تغییر دادیم.