سلام خدمت دوستان و کاربران سایت میزفا ؛ در این آموزش از سری آموزش های جاوا اسکریپت و طراحی سایت قصد داریم تا با محل قرارگیری کدهای جاوا اسکریپت آشنا بشیم.
سرفصل‌های پست
آموزش جاوااسکریپت – محل قرارگیری کدهای جاوااسکریپت
خوب ما برای اینکه بتونیم کدهایی زیان جاوا اسکریپت رو درون صفحات وب نمایش بدیم باید اول اونها رو داخل سند html مربوطه قرار بدیم که برای این کار سه روش وجود داره:
- قرار دادن کدهای جاوااسکریپت درون تگ Head سند html
- قرار دادن کدهای جاوااسکریپت درون تگ body سند html
- قرار دادن کدهای جاوااسکریپت درون یک فایل جدا و لود آن درون تگ Head سند html
برای آشنایی بیشتر با تگ های html ذکر شده در بالا مراجعه کنید به (آموزش html)
خوب حالا با ما همراه باشید تا هر سه روش رو توضیح بدیم :
قرار دادن کدهای جاوااسکریپت درون تگ Head سند html :
در این روش ما باید کد های جاوااسکریپت رو داخل تگ script قرار بدیم و سپس این تگ رو درون تگ Head سند html قرار بدیم تا بتونیم کدهای مدنظرمون رو نمایش بدیم.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>محل قرارگیری کدهای </title>
<script>
document.write("hello world")
</script>
</head>
<body>
</body>
</html>
در آینده انشالله با شی document بیش تر آشنا میشیم.
سوال : ممکنه بپرسید برای چی باید این کار رو انجام بدیم ؟
جواب : در (آموزش جاوااسکریپت-قسمت اول) هم اشاره کردیم که زبان جاوااسکریپت زبانی است که با html وcss تعامل داره و درواقع امکانات و افکت هایی رو به سند html اضافه میکنه.
قرار دادن کدهای جاوااسکریپت درون تگ body سند html :
این روش کاملا مشابه روش قبل هست فقط با این تفاوت که باید تگ script رو درون تگ body سند html قرار بدیم.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>محل قرارگیری کدهای js</title>
</head>
<body>
<script>
document.write("hello world")
</script>
</body>
</html>
قرار دادن کدهای جاوااسکریپت درون یک فایل جدا ولود آدرس فایل درون تگ Head سند html :
در این روش که از دوتای قبلی بهینه تر هست و ما هم این روش رو پیشنهاد میکنیم این هست که کدهای جاوااسکریپت مربوطه رو در یه فایل جدا با پسوند js. قرار میدیم و اون رو در تگ head آپلود میکنیم .(ساختن فایل با پسوند .js با ادیتور phpstorm (آشنایی با ویرایشگر ها ) به این صورت هست که از قسمت file گزینه new و سپس گزینه javascript file رو انتخاب میکنیم.همین!!)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>محل قرارگیری کدهای js</title>
<script src="myscript.js"></script>
</head>
<body>
</body>
</html>
[box type=”custom” color=”#f6f6f6″ bg=”#ddab5f” fontsize=”15″ radius=”5″ border=”#dd0606″]تذکر : برای نوشتن کدهای جاوااسکریپت درون فایل جدا نیازی به تگ script نیست. [/box]
مزایای استفاده از روش :
- کد های جاوااسکریپت از کدهای html جدا هست
- خواندن و ویرایش کدها ساده تر و سریع تر انجام میشه
- سرعت لود صفحات وب افزایش پیدا میکنه
خوب این آموزش هم تمام شد امیدوارم مفید باشه.انتقادات و پیشنهادات خود در انجمن میزفا مطرح کنید
یک پاسخ
دورد و خسته نباشید بابت تلاش های شما