اگر علاقه مند به همکاری در نت پارادیس جهت نویسندگی، ویراستاری و ترجمه مطالب هستی پس روی دکمه مقابل کلیک کن

علاقه به همکاری دارم

طراحی سایت, ساخت ربات تلگرام, آموزش php , سورس کد php ,سورس ربات تلگرام , سورس فروشگاه اینترنتی , آموزش طراحی وب

آموزش جاوا اسکریپت – شروع کدنویسی


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

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

در اینجا یاد می گیرید که به راحتی تعامل (interactivity) را به صفحه وب با جاوا اسکریپت اضافه کنید. اما, قبل از شروع, اطمیمنان حاصل کنید که کمی HTML و CSS بلد هستید

اگر به تازگی طراحی و توسعه وب را شروع کردید, پس از اینجا شروع کنید

 

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

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

معمولا سه راه برای افزودن JavaScript به یک صفحه وب وجود دارد:

  • جاسازی (embed) کد جاوا اسکریپت بین یک جفت تگ <script> </script>
  • ساخت یک فایل جاوا اسکریپت خارجی با پسوند .js و سپس لود کردن آن با ویژگی src از تگ <script>
  • قرار دادن کد جاوا اسکریپت بصورت مستقیم داخل خصوصیت تگ HTML خاص مثل onclick, onmouseover, onkeypress, onload و غیره.

بخش زیر هر یک از روش های بالا را با جزییات توضیح می دهد:

 

جاسازی (embed) کد جاوا اسکریپت

شما می توانید کد جاوا اسکریپت را در صفحه وب بین دو تگ <script> و </script> قرار بدید.

تگ <script> به مرورگر نشان می دهد که دستورات بین آن به عنوان یک اسکریپت باید اجرا شوند.

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

نکته: ویژگی type در تگ <script> (مثلا <script type="text/javascript">) از HTML5 دیگر نیاز نیست. جاوا اسکریپت زبان اسکریپت نویسی پیش فرض برای HTML5 است.

 

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

شما می توانید کد جاوا اسکریپت خودتان را در یک فایل جداگانه با پسوند .js ذخیره و آن را با ویژگی src تگ <script> به صفحه وب اضافه کنید.

این مورد زمانی که که می خواهید یک اسکریپت یکسان را در صفحات مختلف استفاده کنید, مفید خواهد بود.

حتما بخوانید  آموزش جاوا اسکریپت – توابع جاوا اسکریپت

این کار شما را از تکرار دوباره همان کار منع می کند و باعث می شود کارهای توسعه و تغییر آن بعدا سریعتر انجام شود.

پس به این صورت ما یک فایل جاوا اسکریپت با نام “hello.js” را ساخته و کد زیر را داخل آن قرار می دهیم:

حالا فایل جاوا اسکریپت خارجی را دخل صفحه وب به اینصورت با تگ <script> اضافه می کنیم:

نکته: معمولا زمانی که یک فایل جاوا اسکریپت برای اولین بار دانلود می شود, مرورگر آن را در کش (cache) خود ذخیره می کند (مثل تصاویر و فایل های CSS), بنابراین نیاز به دانلود چندین باره آن از وب سرور نخواهد بود و سرعت لود صفحه بسیار افزایش می یابد.

 

قرار دادن کد جاوا اسکریپت خطی

شما می توانید کد جاوا اسکریپت را با قرار دادن مستقیم آن در تگ HTML با ویژگی خاص تگ مثل onclick, onmouseover, onkeypress, onload و غیره اجرا کنید.

به هر حال, شما باید از قرار دادن حجم زیادی از کد جاوا اسکریپت بصورت خطی که باعث به هم ریختگی HTML با جاوا اسکریپت شود و همچنین تغییر و باگ یابی کد را سخت تر کند, جلوگیری کنید.

مثال بالا به شما یک پیام را با کلیک روی دکمه نمایش می دهد.

حتما بخوانید  آموزش HTML - تگ script در html

نکته: شما باید همیشه محتوا و ساختار صفحه وب را (HTML) با ارائه (CSS) و رفتار (JavaScript) جدا نگه دارید.

 

موقعیت دهی اسکریپت داخل سند HTML

المان <script> می تواند داخل <head> یا <body> یک سند HTML قرار بگیرید. اما بصورت ایده آل, شما باید اسکریپت ها را در پایان بخش بدنه صفحه درست قبل از بسته شدن تگ </body> قرار بدید.

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

هر قرایند رندر بلاک تگ <script> تا زمانی که کامل دانلود و کد جاوا اسکریپت اجرا شود, ادامه می یابد, بنابراین قرار دادن آن در بخش head (المان <head>)  سند بدون هیچ دلیلی باعث ایجاد تاثیر قابل ملاحظه ای در عملکرد سایت می شود.

نکته: شما می توانید هر تعداد که نیاز بود از المان <script> در یک سند استفاده کنید. به هر حال, آنها به ترتیب از بالا به پایین اجرا خواهند شد.

 

تفاوت بین اسکریپت نویسی سمت کلاینت و سرور

اسکریپت نویسی سمت کلاینت مثل جاوا اسکریپت, ‌VBScript و غیره تفسیر شده و در مرورگر وب اجرا می شوند,

در حالی که اسکریپت نویسی سمت سرور مثل PHP, ASP, Java, Python, Ruby و غیره در وب سرور اجرا و خروجی آنها در فرمت HTML به مروگر بازگشت داده می شود.

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

برای مثال, شما با جاوا اسکریپت می توانید بررسی کنید که آیا اطلاعات وارد شده توسط کاربر در فیلد فرم غلط است یا نه و در همان موقع قبل از ارسال اطلاعات فرم به سرور می توانید آن جا پیام خطا را نمایش بدید.

این کار از مصرف غیرضروری پهنای باند شبکه سرور و همچنین استفاده از منابع سیستمی سرور جلوگیری می کند.

بنابراین, پاسخ از سمت اسکریپت سمت سرور آهسته تر از اسکریپت سمت کلاینت است, چراکه اسکریپت های سمت سرور بر روی کامپیوتر از راه دور پردازش می شوند نه روی کامپیوتر محلی کاربر.

 

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

در بخش بعدی با شکل نوشتاری (سینتکس) جاوا اسکریپت آشنا می شوید.

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

موفق باشید.

اگر مفید بود, لطفا به اشترک بگذارید تا دوستان دیگر نیز بهره ببرند

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

دیدگاه کاربران

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

مطالب زیر را حتما بخوانید

دانلود رایگان (هدیه ویژه)

کتاب آموزش زبان برنامه نویسی PHP را دانلود و همین امروز یادگیری را شروع کن و به جمع برنامه نویسان ملحق شو ;)

دانلود رایگان کتاب

آموزش طراحی وب سایت

سورس فروشگاهی دیجی کالا

بخش کاربران

هنوز عضو نیستید ؟ کلیک کنید

مجوزهای ما

logo-samandehi

دانلود کتاب

عضویت رایگان خبرنامه