کدهای جاوا اسکریپت در html تاریخ بروزرسانی : 26 آبان 1399 | تعداد بازدید : 45 | زمان خواندن مقاله : 15 دقیقه

آموزش نحوه استفاده از کدهای جاوا اسکریپت در html

سلام خدمت تمام دوستان. با آموزش html css در خدمت شما عزیزان هستیم. خب بریم که موضوع بحثمان را شروع کنیم.
یه چند لحظه صبر کنید.....
خب مثل اینکه من اشتباه کردم چون از اتاق فرمان به بنده اشاره کردند که موضوع بحث امروز ما استفاده از کدهای جاوا اسکریپت در html است. به قدری جاوا اسکریپت یک دوست خوب برای html css است که خود را همراه همیشگی این دو زبان می‌داند. پس اشتباه مرا بپذیرید. یک وقت فکر نکنید که این زبان فقط برای کار با زبان‌های html و css است. بلکه قدرت خود را به مرزهای سمت سرور نیز کشانده که از معروف‌ترین آنها می توان به Node.js اشاره کرد.

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

هدف ما از موضوع امروز، پاسخ به این سوال است: " کدهای جاوا اسکریپت را کجا بنویسیم؟"
گفتیم جاوا اسکریپت برای اینکه وبسایت‌ها را پویاتر کند باید با html و css همراه شود؛ این مطلب یعنی یا باید کدهای جاوا اسکریپت را مستقیما داخل سند html بنویسیم و یا آن را مانند فایل‌های css وارد html کنیم. اما چطور؟ با ما همراه شوید.

استفاده مستقیم کدهای جاوا اسکریپت در html:

برای استفاده مستقیم کدهای جاوا اسکریپت در داخل سند HTML باید آن‌ها را بین تگ‌های <script></script> قرار دهید. به نمونه کد جاوا اسکریپت زیر توجه کنید:

<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>


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

<!DOCTYPE html>
<html>
<body>
 
<p id="demo">Hi.</p>
 
<script>
// کد جاوا اسکریپت در این قسمت قرار خواهد گرفت.
</script> 
 
</body>
</html>


این روش برای کدهای کوتاه جوابگو است اما اگر حجم کدهای شما زیاد شود استفاده از این روش اصلا مناسب نخواهد بود. چرا که کدهای جاوا اسکریپت، زیر کدهای HTML دفن می‌شوند که ویرایش آن‌ها نیز به نوبه‌ی خود سخت خواهد بود. در نسخه‌های قدیمی جاوا اسکریپت ممکن است تگ‌ها را به شکل <script type="text/javascript"> دیده باشید؛ اما امروزه دیگر نیازی به اضافه کردن ویژگی type نیست چرا که جاوا اسکریپت زبان اسکریپت‌نویسی پیش‌فرض برای HTML است.

حالا باید بدانیم که تگ‌های <script> را کجا بگذاریم؟

اسکریپت‌های شما می‌توانند مانند فایل های CSS در HTML و در تگ <head> بارگذاری شوند. همچنین می‌توانید اسکریپت‌ها را در تگ <body> نیز قرار دهید.
نکته:
دستورات جاوا اسکریپت چه در قسمت هد (Head) قرار بگیرند، چه در قسمت بدنه (Body) مشکلی ندارند و اجرا خواهند شد، ولی توصیه می شود که دستورات جاوا اسکریپت در قسمت body یک صفحه HTML قرار بگیرند. حالا چرا توصیه میکنیم کدهای جاوا اسکریپت را در قسمت body بگذارید؟ برای اینکه قسمت هد یک صفحه برای موتورهای جستجوگر و بطور کلی از نظر سئو تمیز باشد. همچنین سرعت بارگذاری سایت نیز بالا رود.

مثال زیر یک سند HTML را نشان می دهد که یک تابع جاوا اسکریپت را در تگ <head> خود قرار داده است. این تابع زمانی صدا زده می‌شود که کاربر روی دکمه‌ای خاص کلیک کند.

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</head>
<body>
 
<h1>A Web Page</h1>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>
 
</body>
</html>


حالا می‌خواهیم همین کد را داخل تگ <body> قرار دهیم به شیوه زیر عمل می‌کنیم:

<!DOCTYPE html>
<html>
<body> 
 
<h1>A Web Page</h1>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>
 
<script>
function myFunction() {
 document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
 
</body>
</html>


چگونه از کدهای جاوا اسکریپت در html به صورت غیرمستقیم (خارجی) استفاده کنیم؟

می‌توانیم برای راحتی کار، مدیریت بهتر و آسان‌تر کدهای جاوا اسکریپت آنها را در یک فایل جداگانه قرار دهیم و سپس آن فایل را در HTML بارگذاری کنیم. اما چگونه؟

  1. ابتدا یک فایل خالی متنی ایجاد کنید.
  2. برای فایل متنی خود نامی انتخاب کنید و پسوند آن را js. قرار دهید.
  3. کدهای خود را در آن بنویسید
  4. در مرحله ی آخر، در ویژگیِ src تگ‌های <script> آدرس فایل خود را قرار دهید:
<script src="myCode.js"></script>


این اسکریپت هم مانند نوشتن مستقیم کد در HTML، میتواند در تگ های <head> و <body> استفاده شود. اما این نکته را حتما در نظر بگیرید که نباید در کدهایِ داخلِ فایل از تگ <script> استفاده کنید چرا که در هنگام بارگذاری، این کار را انجام داده ایم. تگ های <script> تنها زمانی استفاده می‌شوند که قرار باشد جاوا اسکریپت داخل HTML قرار بگیرد.

فواید استفاده از اسکریپت‌های خارجی در یک فایل جداگانه:

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

با این روش می توانید هر تعداد فایل جاوا اسکریپت که دوست داشتید به سند HTML خود اضافه کنید.

کلام آخر:

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

 توابع و رویدادها که به ترتیب Function و Event نام دارند در جاوا اسکریپت مجموعه کدهایی هستند که هنگام صدا زده شدن (call) اجرا می‌شوند و کار خاصی را انجام می‌دهند. برای درک بهتر به مثالی که می‌زنیم توجه کنید. یک رویداد مانند کلیک کردن روی یک دکمه را در نظر بگیرید. ما می‌توانیم با جاوا اسکریپت به مرورگر بگوییم اگر کاربر روی دکمه مورد نظر ما کلیک کرد، پنجره را بچرخان، پیام تبریک نمایش بده، صفحه را ببند و ….

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

 


کلمات کلیدی :
html

توضیحاتی در مورد نویسنده این مقاله :
مرضیه فتاحی مرضیه فتاحی

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


نظر بدهید

نشانی ایمیل شما منتشر نخواهد شد .
برای ارسال نظر نیاز است وارد سایت شوید. در صورت نداشتن حساب کاربری عضو شوید.