استفاده از کدهای Javascript در فایل HTML

استفاده از کد های Javascript در فایل HTML

استفاده از کدهای Javascript در فایل HTML: همان طور که می دانیم طراحی صفحات یک سایت با استفاده از زبان برنامه نویسی html امکان پذیر است اما کافی نیست! همان طور که در مقاله استفاده از کدهای CSS در فایل HTML گفتیم برای استایل طراحی صفحات وب و زیبایی سازی آن ها به زبان css احتیاج داریم و نحوه ی فراخوانی ان در فایل html را آموختیم. اما زبان Javascrip نیز برای طراحی سایت مهم می باشد. در واقع این زبان توانایی تغییر در محتویات المانهای نمایش داده شده بر روی مرورگر های مختلف را دارد طوری که امکان پویا سازی یا دینامیک شدن صفحات به وسیله آن ایجاد می شود.

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

استفاده از کدهای Javascript در فایل HTML

 

استفاده از کدهای Javascript در فایل HTML

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

شیوه های مختلف استفاده از کد های Javascript در فایل HTML

برای استفاده این زبان درون فایل های html روش های مختلفی وجود دارد که ما در این قسمت تمامی روش های استفاده از کد های Javascript در فایل HTML را به شما آموزش خواهیم داد.

روش اول) استفاده از CSS در درون تگ ها (Inline)

کدهای جاوا اسکریپت را در مکانهای متفاوتی مانند بین تگهای <Body> یا <Head> می توانیم قرار دهیم اما خود بدنه ی جاوااسکریپت در درون یک تگ HTML که تگ <script> می باشد، قرار می گیرد.در این روش می توانیم کد های جاوا اسکریپت را در همان صفحات Html  و در درون تگ های آن بنویسیم.

مثال: فرض کنید می خواهیم یک پاراگراف ایجاد نماییم که با رفتن موس روی متن آن پاراگراف یک alert ایجاد شود. می توانیم کد جاوا اسکریپت آن را درون تگ p قرار دهیم.

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<p onmouseover="alert('welcome to avinaweb.com');">avinaweb.com</p>

</body>
</html>

روش دوم) استفاده از تگ script در درون فایل html

در این روش می توانیم کد های html  را به طور کامل بنویسیم و در قسمت زیر هر کدام که نیاز به کد javascript  دارد از تگ <script> در درون فایل html استفاده نماییم. در این قسمت مثال بالا را با همین روش به شما نشان می دهیم.

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<p>avinaweb.com</p>
<script>
alert('welcome to avinaweb.com');
</script>

</body>
</html>

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

چنانچه بخواهید دستورات جاوا اسکریپت مورد نظرتان، بعد از اجرای یک رویداد مانند کلیک کاربر روی یک دکمه فرمان، اجرا شوند، باید کدهای خود را در یک تگ <script> و در بخش <head> صفحه html خود قرار دهید.
در مثال زیر در صورت کلیک کاربر بر روی دکمه فرمان<input> ، تابع avinaweb ( ) اجرا شده و پیام خود را در صفحه به نمایش می گذارد.

<script type="text/javascript">
        function sayHello()
        {
            alert("avinaweb")
        }
    </script>

روش سوم) نوشتن سلکتورهای CSS در فایل جداگانه .js و فراخوانی آن به صفحه HTML

در این روش به جای قرار دادن کد های javascript  در درون تگ <script>  در زبان html  در فایل html  ، تمامی کد ها را در یک فایل جداگانه با پسوند .js  می نویسیم و آن را در درون صفحه html فراخوانی می کنیم. که مکان قرار گیری فراخوانی این کد ها در صفحه html  هم تگ <body>  و هم تگ <Head> می باشد.

مثال: در این مثال قسمت کد جاوا اسکریپت را در درون فیل .js  به نام jscode  نوشته ایم و در صفحه html آن را فراخوانی کرده ایم. و به این ترتیب مرورگر آن را load  کرده و تمام کد های درون آن را اجرا می کند.

فراخوانی در تگ <body>:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<p>avinaweb.com</p>
<script src="jscode.js"></script>

</body>
</html>

فراخوانی در تگ <head> (با استفاده از src لینک داده می شود) :

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script type="text/javascript" src="jscode.js"></script>
</head>
<body>

<p>avinaweb.com</p>

</body>
</html>

حال می خواهیم همانطور که گفته بودیم به آموزش رویدادهای onmouseover و onmouseout بپردازیم:

رویداد onmouseover زمانی اتفاق می افتد که نشانگر موس بر روی یکی از عنصرها یا فرزند آن می رود. اکثر اوقات در کنار این رویداد، رویداد onmouseout اتفاق می افتد یعنی زمانی که کاربر موس را از روی نشانگر خارج کند. این رویداد در تمامی مرورگرها نیز پشتیبانی می شود.

نحوه استفاده از این رویداد در Html :

<"element onmouseover="myelement>

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

;{object.onmouseover=function(){myScript

حال می خواهیم با یک مثال این دو رویداد را نمایش دهیم تا بیشتر متوجه شوید.

}(function mOver(obj
 "obj.innerHTML = "Welcome to Avinaweb
{

}(function mOut(obj 
 "obj.innerHTML = "Mouse Over Me
}

امیدواریم مطلب امروز، استفاده از کدهای Javascript در فایل HTML و همینطور آموزش دو رویداد onmouseover و onmouseout برای شما عزیزان دانشپذیر زبان های برنامه نویسی و طراحی سایت مفید بوده باشد.

Mouse Over Me
, , , ,

۱ دیدگاه. دیدگاه تازه ای بنویسید

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

    پاسخ

پاسخی بگذارید

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

این فیلد را پر کنید
این فیلد را پر کنید
لطفاً یک نشانی ایمیل معتبر بنویسید.
شما برای ادامه باید با شرایط موافقت کنید

فهرست