سلام خدمت تمام دوستان. با آموزش 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 بارگذاری کنیم. اما چگونه؟
-
ابتدا یک فایل خالی متنی ایجاد کنید.
-
برای فایل متنی خود نامی انتخاب کنید و پسوند آن را js. قرار دهید.
-
کدهای خود را در آن بنویسید
-
در مرحله ی آخر، در ویژگیِ src تگ‌های <script> آدرس فایل خود را قرار دهید:
<script src="myCode.js"></script>
این اسکریپت هم مانند نوشتن مستقیم کد در HTML، میتواند در تگ های <head> و <body> استفاده شود. اما این نکته را حتما در نظر بگیرید که نباید در کدهایِ داخلِ فایل از تگ <script> استفاده کنید چرا که در هنگام بارگذاری، این کار را انجام داده‌ایم. تگ‌های <script> تنها زمانی استفاده می‌شوند که قرار باشد جاوا اسکریپت داخل HTML قرار بگیرد.
فواید استفاده از اسکریپت‌های خارجی در یک فایل جداگانه:
-
جدا نگه داشتن HTML و JavaScript
-
ساده‌تر بودن ویرایش و مدیریت کدها
-
فایل‌های کش‌شده جاوا اسکریپت می‌توانند سرعت وب سایت شما را افزایش دهند.
با این روش می‌توانید هر تعداد فایل جاوا اسکریپت که دوست داشتید به سند HTML خود اضافه کنید.
کلام آخر:
به پایان بحث رسیدیم. امیدواریم که مطالب مورد پسند و رضایت شما قرار گرفته باشد. همچنین ما سعی کردیم به‌گونه‌ای این مبحث را بیان کنیم که حتی افراد مبتدی هم به درک درستی از این موضوع برسند. اما می‌خواهیم یک نکته ضروری را با شما در میان بگذاریم و آن تعریف توابع و رویدادها در جاوا اسکریپت است.
توابع و رویدادها که به ترتیب Function و Event نام دارند در جاوا اسکریپت مجموعه کدهایی هستند که هنگام صدا زده شدن (call) اجرا می‌شوند و کار خاصی را انجام می‌دهند. برای درک بهتر به مثالی که می‌زنیم توجه کنید. یک رویداد مانند کلیک کردن روی یک دکمه را در نظر بگیرید. ما می‌توانیم با جاوا اسکریپت به مرورگر بگوییم اگر کاربر روی دکمه مورد نظر ما کلیک کرد، پنجره را بچرخان، پیام تبریک نمایش بده، صفحه را ببند و ….
چرا این مبحث را به طور خلاصه به شما توضیح دادیم؟ چون در کدهایی که نوشته بودیم از این اصطلاح استفاده شده بود.
خوشحال میشویم اگر از مطلب ما درباره pug چیست استقبال کنید. حتما نظرات و پیشنهادات خود را با ما در میان بگذارید. موفق باشید.
نظر شما در تصمیم دیگران اثرگذار است.
لطفا برای همراهان درسمن و بهتر شدن دوره نظر خود را بنویسید.