Retry

جاوا اسکریپت یک زبان برنامه نویسی مبتنی بر متن بوده که هم در سمت سرویس کاربر و هم در سمت سرور استفاده می شود و به شما امکان می دهد صفحات وب را تعاملی کنید. این زبان برنامه نویسی، زبانی پویا است و برای توسعه وب، وب اپلیکیشن، توسعه بازی و موارد دیگر استفاده می شود. این زبان برنامه نویسی به شما این امکان را می دهد که ویژگی های حرکتی را در صفحات وب پیاده سازی کنید که با HTML و CSS قابل انجام نیستند. بسیاری از مرورگرها از جاوا اسکریپت به عنوان زبان برنامه نویسی برای انجام کارهای پویا در وب استفاده می کنند. به عنوان مثال با کلیک بر روی منوی کشویی در وب سایت، محتوای اضافه شده به یک صفحه یا تغییر رنگ پویای عناصر را مشاهده می کنیم که جلوه های جاوا اسکریپت هستند.

با بهترین و محبوب ترین زبان های برنامه نویسی تحت وب آشنا شوید.

وب سایت بدون جاوا اسکریپت چگونه خواهد بود؟

بدون جاوا اسکریپت، تنها چیزی که در وب سایت از آن متوانید استفاده کنید، HTML و CSS خواهد بود و در ساخت صفحات وب محدود خواهید بود. ٪90 (یا حتی بیشتر) از صفحات وب شما ثابت و بدون حرکت خواهند بود و فقط تغییرات پویا مانند انیمیشن هایی که CSS ارائه می دهد را خواهید داشت.

پیشنهاد می کنیم آموزش طراحی سایت با وردپرس را مطالعه کنید.

چگونه جاوا اسکریپت همه چیز را پویا و متحرک می کند؟

HTML ساختار سند وب شما و محتوای آن را مشخص می کند. CSS سبک های مختلفی را برای محتویات ارائه شده در سند وب اعلام می کند.

HTML و CSS غالباً زبان های نشانه گذاری نامیده می شوند تا زبان های برنامه نویسی، زیرا آن ها در اصل، نشانه هایی را برای اسناد با پویایی بسیار کمی ارائه می دهند.

از طرف دیگر، جاوا اسکریپت یک زبان برنامه نویسی پویا است که از محاسبات ریاضی پشتیبانی می کند، به شما این امکان را می دهد که محتویات HTML را به صورت پویا به DOM اضافه کنید، توصیف های طراحی پویا ایجاد کرده ، محتویات را از وب سایت دیگر دریافت می کند و موارد دیگر.

HTML و CSS  زبان هایی هستند که تنها به صفحات وب ساختار و سبک می دهند، جاوا اسکریپت عناصر تعاملی را برای صفحات وب در اختیار کاربر قرار می دهد. نمونه های متداول جاوا اسکریپت که ممکن است هر روز از آن استفاده کنید، عبارتند از: جعبه جستجو در سایت های مختلف یا تازه کردن خبر توییتر شما.

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

  • HTML زبان نشانه گذاری است که ما برای ساختار دهی و معنی دادن به محتوای وب خود از آن استفاده می کنیم، به عنوان مثال به وسیله HTML پاراگراف ها، سرفصل ها و جداول داده ها را تعریف می کنیم، یا تصاویر و فیلم ها را در صفحه جاسازی می کنیم.
  • CSS یک زبان برای اجرای دستور های لازم برای طراحی است که ما از آن برای اعمال یک طرح بر روی محتوای HTML خود استفاده می کنیم، به عنوان مثال تنظیم رنگ پس زمینه و فونت ها و قرار دادن مطالب خود در چندین ستون.
  • جاوا اسکریپت یک زبان برنامه نویسی است که به شما امکان می دهد محتوای پویا ایجاد کنید، فایل چند رسانه ای را کنترل کنید، تصاویر را متحرک کنید و تقریباً همه چیز (در واقع، همه چیز نیست، اما این شگفت انگیز است که با چند خط کد جاوا اسکریپت می توانید به چیز های زیادی برسید).

انواع زبان های برنامه نویسی

جاوا اسکریپت چه کاربرد هایی دارد؟

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

  1. افزودن رفتار تعاملی به صفحات وب

جاوا اسکریپت صفحات وب سایت شما را صفحاتی تعاملی ساخته که کاربر پسندتر بوده و تقریباً هیچ محدودیتی برای کارهایی که می توانید با JavaScript در یک صفحه وب انجام دهید، وجود ندارد.

نمونه های از آن ها را در ادامه می بینیم:

  • با کلیک یک دکمه اطلاعات بیشتر را نمایش داده یا پنهان کنید
  • تغییر رنگ دکمه هنگامی که نشانگر موس روی آن قرار می گیرد.
  • ایجاد یک کاروسل ( نمایش اسلاید) در صفحه اصلی
  • بزرگ نمایی یا کوچک نمایی روی تصویر
  • نمایش زمان سنج یا شمارش معکوس در وب سایت
  • پخش صدا و تصویر در یک صفحه وب
  • نمایش انیمیشن ها
  • استفاده از منوی کشویی همبرگری
  1. توسعه و ساخت برنامه های وب و تلفن همراه

توسعه دهندگان می توانند از فریم ورک های مختلف جاوا اسکریپت برای توسعه و ساخت برنامه های وب و تلفن همراه استفاده کنند. فریم ورک های جاوا اسکریپت مجموعه ای از کتابخانه های کد جاوا اسکریپت هستند که کدهای از پیش نوشته شده را در اختیار توسعه دهندگان قرار می دهند تا برای ویژگی ها و وظایف برنامه نویسی روتین، از فریم ورکی برای ایجاد وب سایت یا برنامه های تحت وب استفاده کنند.

از فریم ورکهای محبوب جاوا اسکریپت می توان React ، React Native ، Angular و Vue را نام برد. بسیاری از شرکت ها از Node.js، محیط اجرای جاوا اسکریپت استفاده می کنند که بر اساس موتور جاوا اسکریپت V8 Google Chrome ساخته شده است. چند نمونه معروف شامل Paypal ، LinkedIn ، Netflix و Uber!

  1. ایجاد سرورهای وب و توسعه برنامه های کاربردی سرور

فراتر از وب سایت ها و برنامه ها، توسعه دهندگان همچنین می توانند از JavaScript برای ساختن سرورهای وب ساده و توسعه زیرساخت های پشتیبان با استفاده از Node.js.

  1. توسعه بازی

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

نحوه استفاده از جاوا اسکریپت در HTML

مانند CSS ، جاوا اسکریپت را می توان در HTML به روش های مختلف استفاده کرد، مانند:

جاوا اسکریپت خطی

در این روش، کد جاوا اسکریپت را در تگ های HTML در برخی از صفت های خاص مبتنی بر JS دارید.

به عنوان مثال ، تگ های HTML دارای ویژگی های رویداد هستند که به شما امکان می دهد در صورت فعال شدن یک رویداد، برخی از کد ها را بصورت درون خطی اجرا کنید. در ادامه مثالی را می بینیم:

button onclick="alert('You just clicked a button')">Click me!</button>

به طور کلی، این روش زمانی مورد استفاده قرار می گیرد که باید یک تابع را در ویژگی های رویداد HTML فراخوانی کنیم. موارد (یا رویداد هایی) زیادی وجود دارد که در آنها ما مجبوریم مستقیماً کد جاوا اسکریپت را اضافه کنیم، به عنوان مثال ، رویداد OnMover ، OnClick و غیره.

بیایید با کمک یک مثال ببینیم چگونه می توانیم جاوا اسکریپت را مستقیماً در html بدون استفاده از تگ <script> …. </script> اضافه کنیم.

به مثال زیر دقت کنید.

  1. &lt;!DOCTYPE html <strong>&gt;</strong>  
  2. <strong>&lt;html&gt;</strong>  
  3. <strong>&lt;head&gt;</strong>  
  4. <strong>&lt;title&gt;</strong> page title<strong>&lt;/title&gt;</strong>  
  5. <strong>&lt;/head&gt;</strong>  
  6. <strong>&lt;body&gt;</strong>  
  7. <strong>&lt;p&gt;</strong>  
  8. <strong>&lt;a</strong> href="#" onClick="alert('Welcome !');"<strong>&gt;</strong>Click Me<strong>&lt;/a&gt;</strong>  
  9. <strong>&lt;/p&gt;</strong>  
  10. <strong>&lt;p&gt;</strong> in this example we saw how to use inline JavaScript or directly in an HTML tag. <strong>&lt;/p&gt;</strong>  
  11. <strong>&lt;/body&gt;</strong>  
  12. <strong>&lt;/html&gt;</strong>  

خروجی

پیغام هنگام اضافه کردن جاوا اسکریپت

جاوا اسکریپت داخلی، با تگ اسکریپت

همان طور که تگ style برای اعلان های طرح در یک صفحه HTML وجود دارد، تگ اسکریپت برای جاوا اسکریپت نیز وجود دارد. در اینجا نحوه استفاده از آن آمده است:

&lt;script&gt;

                    function(){

                        alert("I am inside a script tag")

                    }

&lt;/script&gt;

 

جاوا اسکریپت خارجی

ممکن است بخواهید کد جاوا اسکریپت خود را در یک فایل متفاوت داشته باشید. جاوا اسکریپت خارجی به شما این اجازه را می دهد. این دسته از کاربران می توانند با انجام مراحل زیر، کد جاوا اسکریپت خود را در فایلی جدا داشته باشند :

&lt;!-- index.html --&gt;&lt;script src="./script.js"&gt;&lt;/script&gt;  // script.jsalert("I am inside an external file");

ما همچنین می توانیم یک فایل جداگانه برای ذخیره کد جاوا اسکریپت با پسوند (.js) ایجاد کنیم و بعداً آن را با استفاده از صفت src تگ <script> در سند HTML خود قرار دهیم. اگر بخواهیم از یک کد در چندین سند HTML استفاده کنیم ، بسیار مفید خواهد بود. همچنین ما را از نوشتن یک کد به صورت مکرر نجات می دهد و نگهداری صفحات وب را آسان تر می کند.

در این مثال، خواهیم دید که چگونه می توانیم یک فایل جاوا اسکریپت خارجی را در یک سند HTML قرار دهیم.

بیایید از طریق یک مثال دیگر بهتر این روش را یاد بگیریم.

  1. <strong>&lt;html&gt;</strong>  
  2. <strong>&lt;head&gt;</strong>  
  3. <strong>&lt;meta</strong> charset="utf-8"<strong>&gt;</strong>  
  4. <strong>&lt;title&gt;</strong>Including a External JavaScript File<strong>&lt;/title&gt;</strong>  
  5. <strong>&lt;/head&gt;</strong>  
  6. <strong>&lt;body&gt;</strong>  
  7. <strong>&lt;form&gt;</strong>  
  8. <strong>&lt;input</strong> type="button" value="Result" onclick="display()"<strong>/&gt;</strong>  
  9. <strong>&lt;/form&gt;</strong>  
  10. <strong>&lt;script</strong> src="hello.js"<strong>&gt;</strong>  
  11. <strong>&lt;/script&gt;</strong>  
  12. <strong>&lt;/body&gt;</strong>  
  13. <strong>&lt;/html&gt;</strong>  

حالا بیایید یک فایل جاوا اسکریپت جداگانه ایجاد کنیم

  1. function display() {  
  2. alert("Hello World!");  
  3. }  

خروجی

پیغام هنگام ایجاد فایل جاوا اسکریپت

هر دو برنامه فوق در یک پوشه ذخیره می شوند، اما می توانید کد جاوا اسکریپت را در یک پوشه جداگانه ذخیره کنید، فقط کافی است آدرس/مسیر فایل (.js) را در صفت src تگ <script> ارائه دهید.

کد های جاسازی شده

برای افزودن کد جاوا اسکریپت به صفحات HTML ، می توانیم از تگ <script> ….. </script> HTML استفاده کنیم که در داخل برنامه HTML بر روی کد جاوا اسکریپت پیچیده شده است. کاربران همچنین می توانند کد جاوا اسکریپت را در تگ < <bodyیا <head> تعریف کنند. این مورد کاملاً به ساختار صفحه وب مورد استفاده کاربران بستگی دارد. ما می توانیم نحوه افزودن جاوا اسکریپت به html را با کمک یک مثال، به خوبی درک کنیم.

مثال

  1. &lt;!DOCTYPE html <strong>&gt;</strong>  
  2. <strong>&lt;html&gt;</strong>  
  3. <strong>&lt;head&gt;</strong>  
  4. <strong>&lt;title&gt;</strong> page title<strong>&lt;/title&gt;</strong>  
  5. <strong>&lt;script&gt;</strong>  
  6. document.write("Welcome to Javatpoint");  
  7. <strong>&lt;/script&gt;</strong>  
  8. <strong>&lt;/head&gt;</strong>  
  9. <strong>&lt;body&gt;</strong>  
  10. <strong>&lt;p&gt;</strong>Inthis example we saw how to add JavaScript in the head section <strong>&lt;/p&gt;</strong>  
  11. <strong>&lt;/body&gt;</strong>  
  12. <strong>&lt;/html&gt;</strong>  

 

خروجی:

پیغام اضافه شدن جاوا اسکریپت به هد

ما همچنین می توانیم کد جاوا اسکریپت را در تگ <body> تعریف کنیم.

بیایید از طریق یک مثال این مطلب را بهتر درک کنیم.

  1. &lt;!DOCTYPE html <strong>&gt;</strong>  
  2. <strong>&lt;html&gt;</strong>  
  3. <strong>&lt;head&gt;</strong>  
  4. <strong>&lt;title&gt;</strong> page title<strong>&lt;/title&gt;</strong>  
  5. <strong>&lt;/head&gt;</strong>  
  6. <strong>&lt;body&gt;</strong>  
  7. <strong>&lt;script&gt;</strong>  
  8. document.write("Welcome to Javatpoint");  
  9. <strong>&lt;/script&gt;</strong>  
  10. <strong>&lt;p&gt;</strong> In this example we saw how to add  JavaScript in the body section <strong>&lt;/p&gt;</strong>  
  11. <strong>&lt;/body&gt;</strong>  
  12. <strong>&lt;/html&gt;</strong>  

خروجی:

اضافه کردن جاوا اسکریپت در بادی

چرا  استفاده از جاوا اسکریپت نسبت به استفاده از دیگر زبان های برنامه نویسی بیشتر توصیه می شود؟

به غیر از امکانات نامحدود، دلایل زیادی برای توسعه دهندگان وب برای استفاده از جاوا اسکریپت در مقایسه با سایر زبان‌های برنامه‌نویسی وجود دارد:

  • جاوا اسکریپت تنها زبان برنامه‌نویسی بومی برای مرورگر وب است.
  • جاوا اسکریپت محبوب‌ترین زبان است.
  • پایین بودن threshold برای شروع
  • یک زبان سرگرم کننده برای یادگیری

نتیجه گیری

جاوا اسکریپت قابلیت های بیشتری دارد که می توانیم در مورد آنها بحث کنیم. اما امیدوارم این مقاله به شما یک نقطه شروع روشن برای ادامه کار داده باشد. اکنون باید بدانید زبان جاوا اسکریپت چیست و چگونه می توانید از آن در وب استفاده کنید. در این مقاله، تعریفی از جاوا اسکریپت، نحوه افزودن کد جاوا اسکریپت به فایل های HTML خود، مقایسه آن با HTML  و CSS  به شما ارائه داده شد. منتظر دریافت تجربیات شما درباره این زبان برنامه نویسی جذاب در قسمت نظرات هستیم.

دسته بندی: وب , برنامه نویسی

دیدگاه‌ها

Comments

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *