درسمن لوگو
کدهای جاوا اسکریپت در html
1399-08-26

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

چگونگی استفاده از Java script در 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> نیز قرار دهید. ما در مقاله‌ای به نام تگ های html لیست کامل تگ‌ها را برای شما جمع‌آوری کردیم تا با کاربرد هریک آشنا شوید.

نکته:

دستورات جاوا اسکریپت چه در قسمت هد (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="https://thr-storage.abramad.com:9021/images/myCode.js?AWSAccessKeyId=zradfi8e9on5crea7roho17l7nj69btwwyh7fbfmnnji545u&Signature=W5m2H1%2BsgqZiUnwBzfjTTgQzDK8%3D&Expires=2107155393"></script>


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

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

  • جدا نگه داشتن HTML و JavaScript

  • ساده‌تر بودن ویرایش و مدیریت کدها

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

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

کلام آخر:

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

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

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

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

 

مقالات مرتبط

تفاوت dp و px در برنامه نویسی اندروید
اندروید

تفاوت dp و px در برنامه نویسی اندروید

واحد های اندازه گیری اندروید
زهرا چگینی 10

به نظر شما تفاوت dp و px در برنامه نویسی اندروید، این دو واحد اندازه گیری چیست؟ پس ما را همراهی کنید.

مطالعه مقاله
delegate چیست؟
سی شارپ

delegate چیست؟

Delegate ها چرا به زبان سی شارپ اضافه شدند؟
مرضیه فتاحی 15

delegate چیست؟ چه کاربردی دارد؟ چگونه و در چه موقعیت هایی باید ازآنها استفاده کرد؟ با ما همراه شوید تا تمامی این سوال ها دریابید.

مطالعه مقاله
اکشن (Action) در سی شارپ
سی شارپ

اکشن (Action) در سی شارپ، راهی برای خواناتر شدن کدها

موارد استفاده ی Action در سی شارپ
زهرا چگینی 10

Action در سی شارپ از پایه و اساس Delegate ها استفاده میکند، درحقیقت همان Delegate های هستند که کار را برای ما راحت تر میکنند.

مطالعه مقاله
Extension method درسی شارپ، راهی برای کارایی بالا در کدها
سی شارپ

Extension method درسی شارپ، راهی برای کارایی بالا در کدها

اکستنشن (extension) درسی شارپ
مرضیه فتاحی 10

هدف ما دانستن نکات مهمextension method در سی شارپ، نحوه استفاده و همچنین کاربرد آن در کدنویسی است. پس با ما همراه شوید.

مطالعه مقاله
تگ های html
HTML

لیست کامل تگ های html که هیچ کس به شما نخواهد گفت

آشنایی با تگ های html
زهرا چگینی 15

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

مطالعه مقاله
ویژگی های جدید asp.net core که حیرت برنامه نویسان را برانگیخت
ASP.NET

ویژگی های جدید asp.net core که حیرت برنامه نویسان را برانگیخت

معرفی ویژگی های جدید asp.net core از مایکروسافت
مرضیه فتاحی 10

ویژگی های جدید asp.net core چیست؟ مایکروسافت در این نسخه چه امکاناتی را برای برنامه نویسانش قرار داده است. اگر شما هم خواهان دانستن این مطالب هستید، ما را همراهی کنید.

مطالعه مقاله