آموزش نحوه استفاده از JavaScript در HTML

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش نحوه استفاده از JavaScript در HTML با من همراه باشید.

آموزش نحوه استفاده از JavaScript در HTML

Free-Learn

JavaScript در HTML

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

بهتر است بدانید زبان تحت وب جاوا اسکریپت با زبان برنامه نویسی جاوا یا Java فرق دارد، هرچند ساختار جاوا اسکرپیت تا حدودی شبیه به زبان برنامه نویسی ++C و جاوا می باشد ولی در کل این دو زبان با همدیگر فرق دارند.

کاربرد گسترده از این زبان در وبسایت ها و صفحات اینترنتی می باشد که به کمک این زبان میتوان به اشیاء داخل صفحات HTML دسترسی پیدا کرد و آنها را تغییر داد. به همین علت برای پویا نمایی در سمت کاربر، از این زبان استفاده میشود.

Free-Learn

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

بهتر است همین ابتدا این قضیه روشن شود که دستورات جاوا اسکریپت را باید در قسمت هد (Head) یا بدنه اصلی (Body) یک صفحه ی HTML قرار داد !؟

بطور کلی دستورات جاوا اسکریپت چه در قسمت هد (Head) و چه در قسمت بدنه (Body) قرار بگیرند مشکلی ندارند و اجرا خواهند شد، ولی توصیه می شود که دستورات جاوا اسکریپت در قسمت body یک صفحه HTML قرار بگیرند.

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

Free-Learn

نحوه استفاده از JavaScript در HTML

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

در زبان HTML برای ایجاد و استفاده از جاوا اسکریپت باید از تگ <script> استفاده کرد. شکل کلی بصورت زیر می باشد :

 

برای مثال لطفا به دستورات زیر توجه نمایید و همچنین برای مشاهده خروجی بروی دکمه (امتحان کنید) کلیک نمایید :

امتحان کنید

Free-Learn

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

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

امتحان کنید

Free-Learn

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

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

امتحان کنید

Free-Learn

نحوه استفاده از تگ noscript در HTML

ممکن است در بعضی از مرورگرها یا نرم افزارهایی که وجود دارند از نمایش یا اجرای دستورات جاوا اسکریپت جلوگیری کنند و یا حتی اصلا ممکن است مرورگر کاربر از تگ <script> پشتیبانی نکند.

در این مواقع ما میتونیم با استفاده از تگ <noscript> یک پیغام ایجاد نماییم که به کاربر گفته شود که مرورگر شما دستورات جاوااسکریپت JavaScript را پشتیبانی نمی کند.

امتحان کنید

حال اگر مرورگر کاربر از تگ <script> پشتیبانی نکند پیغامی که در تگ <noscript> نوشته شده است به کاربر نمایش داده می شود.

Free-Learn

نحوه ایجاد فایل جاوا اسکریپت خارجی یا External

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

اینجاست که دیگه باید از فایل خارجی جاوا اسکریپت استفاده نماییم، فایل جاوا اسکریپت خارجی چیه اصلا؟ ببینید دوستان وقتی ما دستورات جاوا اسکریپت مون رو درون یک فایل مجزا با پسوند (دات js) قرار بدهیم این میشه یک فایل جاوا اسکریپت خارجی یا External .

پس برای ساخت یک فایل جاوا اسکریپت خارجی یا مجزا خیلی راحت و ساده نرم افزار NotePad موجود در ویندوز رو باز کنید سپس دستورات جاوا اسکریپت مورد نظرتون رو داخلش قرار بدید سپس اون رو با پسوند js. ذخیره نمایید.

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

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

آموزش نحوه استفاده از JavaScript در HTML

سپس از منوی File لطفا بروی گزینه ی Save As کلیک نمایید و در نهایت آن را پسوند js. ذخیره نمایید.

آموزش نحوه استفاده از JavaScript در HTML
برای مشاهده در اندازه اصلی روی تصویر کلیک کنید

Free-Learn

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

در نهایت با استفاده از تکه دستور زیر در قسمت هد یا Head یا قسمت بدنه یا Body میتونیم فایل جاوا اسکریپت را به فایل HTML مون متصل و یا فراخوانی نماییم.

که در قسمت src باید بجای URL ما آدرس دقیق فایل جاوا اسکریپت مان را وارد نماییم.

Free-Learn

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

در مثال زیر نحوه چگونگی فراخوانی فایل خارجی جاوا اسکریپت را در قسمت Head یک صفحه HTML مشاهده خواهید نمود.

امتحان کنید

در مثال زیر نحوه چگونگی فراخوانی فایل خارجی جاوا اسکریپت را در قسمت Body یک صفحه HTML مشاهده خواهید نمود.

امتحان کنید

Free-Learn

خب دوستان خسته نباشید، اینم از آموزش نحوه استفاده از JavaScript در HTML بود که مشاهده کردید، امیدوارم که هیچ مشکلی در این آموزش نداشته باشید.

Free-Learn

  • خلاصه ی این بخش
  • جاوا اسکریپت یا JavaScript بهمراه HTML و CSS یکی از ۳ هسته اصلی برای طراحی صفحات وب می باشد.
  • به کمک زبان جاوا اسکریپت میتوان به اشیاء (تگ ها،عناصر و..) داخل صفحات HTML دسترسی پیدا کرد و آنها را تغییر داد.
  • دستورات جاوا اسکریپت هم میتونن درون قسمت Head و هم در قسمت Body یک صفحه قرار بگیرند و هیچ مشکلی ندارد.
  • با استفاده از تگ <noscript> میتوان یک پیغام را برای کاربر به نمایش درآورد، اگر مرورگر کاربر از دستورات جاوااسکریپت پشتیبانی نمیکرد.
  • پسوند فایل های جاوااسکریپت ( js. ) ( دات جی اس ) می باشد.
  • در یک فایل جاوااسکریپت خارجی یا مجزا دیگه لازم نیست دستورات را در بین تگ <script> و <script/> بنویسیم. میتوانیم بصورت مستقیم دستورات را درون یک فایل که پسوندش دات جی اس می باشد وارد نماییم.
  • دانلود PDF این آموزش
  • برای دانلود فایل PDF این آموزش کلیک نمایید