آموزش HTML – قسمت بیستم(جاوا اسکریپت)
سلام
با نوزدهمین جلسه از آموزش HTML در خدمتتون هستیم، در این جلسه آموزش مختصر و کوتاهی در رابطه با جاوا اسکریپت خواهیم گفت.
جاوا اسکریپت یک برنامه نویسی سمت کلاینت(کاربر) است، به این معنی که کدهای جاوا اسکریپت در مرورگر کاربر اجرا میشود و در سرور اجرا نمیشوند.
از جاوا اسکریپت برای پویایی وب سایت استفاده میشود، با جاوا اسکریپت میتونید کارهایی نظیر اعتبار سنجی فرم ها،تغییرات حرکتی عناصر داخل صفحه و… انجام بدید.
جاوا اسکریپت هم مانند سی اس اس به دو صورت استفاده میشود:
- داخلی: میتونیم در هر جای صفحه که خواستیم از کدهای جاوا اسکریپت استفاده کنید، کدهای خودمون را بین تگ script بنویسیم، به صورت زیر:
۱ ۲ ۳ |
<script typ="text/javascript"> کدهای جاوا اسکریپت </script/> |
- خارجی: و همچین میتونیم یک فایل با پسوند js. بسازیم و کدهای جاوا اسکریپ را داخلش بنویسیم و در داخل تگ head آدرس فایل را فراخونی کنیم، به صورت زیر:
۱ |
<script src="beporsam.js"></script> |
در این نوع در فایلی که با پسوند js. میسازید، دیگر نیازی نیست که برای نوشتن کدها از <script> استفاده کنید.
کدهای جاوا اسکریپت برای اجرا شدن نیاز به مرورگرهای جدید و به روز دارند، ممکنه شما کد جاوا اسکریپتی بنویسید و در مرورگرهای قدیمی اجرا نشود، برای اینکه اگر کد شما در مرورگرهای قدیمی اجرا نشد و بخواید پیغامی به کاربر نشون بدید(مبنی بر اینکه کد جاوا اسکریپت توسط مرورگر شما پشتیبانی نمی شود)، میتونید از تگ زیر استفاده کنید:
۱ |
<noscript>متاسفیم، جاوا اسکریپت توسط مرورگر شما پشتیبانی نمی شود</noscript> |
محتوای بین تگ noscript تنها زمانی اجرا میشود که مرورگر از جاوا اسکریپت پشتیبانی نکند.
در ادامه چند مثال از جاوا اسکریپت را آماده کردیم که به قدرت پویایی جاوا اسکریپت پی ببرید.
- روشن و خاموش کردن لامپ:
در کد زیر دو عکس داریم و یک دکمه و با کد جاوا اسکریپت عملیات روشن و خاموش کردن جاوا اسکریپت را انجام میدهیم:
کد:
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ ۱۱ ۱۲ ۱۳ ۱۴ ۱۵ ۱۶ ۱۷ ۱۸ ۱۹ ۲۰ ۲۱ ۲۲ ۲۳ ۲۴ ۲۵ ۲۶ ۲۷ ۲۸ ۲۹ ۳۰ |
<html> <head> <title> روشن و خاموش کردن لامپ </title> <meta charset="utf8"> </head> <body> <script> function light(sw) { var pic; if (sw == ۰) { pic = "https://beporsam.ir/wp-content/uploads/2016/06/pic_bulboff.gif" } else { pic = "https://beporsam.ir/wp-content/uploads/2016/06/pic_bulbon.gif" } document.getElementById('myImage').src = pic; } </script> <img id="myImage" src="https://beporsam.ir/wp-content/uploads/2016/06/pic_bulboff.gif" width="۱۰۰" height="۱۸۰"> <p> <button type="button" onclick="light(1)">روشن</button> <button type="button" onclick="light(0)">خاموش</button> </p> </body> </html> |
- تغییر متن:
در کد زیر دو متن داریم و یک دکمه، با کلیک روی دکمه متن تغییر می کند.
آدرس سایت بپرسم را داری؟
کد:
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ ۱۱ ۱۲ ۱۳ ۱۴ ۱۵ ۱۶ ۱۷ ۱۸ ۱۹ |
<html> <head> <title> تغییر متن </title> <meta charset="utf8"> </head> <p id="demo"> آدرس سایت بپرسم را داری؟ </p> <button type="button" onclick="myFunction()">آره، کلیک کن</button> <script> function myFunction() { document.getElementById("demo").innerHTML = "www.beporsam.ir"; } </script> </body> </html> |
کدها و مثال های زیادی برای جاوا اسکریپت وجود دارد، تا به اینجای کار حتما با مفهوم و کارایی جاوا اسکریپت آشنا شدید.
موفق باشید.
نظر ( 1 )
سلام
عالی بود