این آموزش در تاریخ ۱۴۰۰/۰۹/۱۴ آپدیت شده است.
آموزش نحوه استفاده از JavaScript در HTML
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش نحوه استفاده از JavaScript در HTML با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
زبان JavaScript در HTML
جاوا اسکریپت که مخفف JS ( JavaScript ) می باشد ، بهمراه HTML و CSS سه هسته اصلی برای طراحی صفحات وب رو تشکیل میدن ، و حواستون باشه زبان جاوااسکریپت با زبان جاوا یا Java فرق دارد، این ۲ زبان کاملا مجزا هستند.
یه مثال بزنم که دیگه کامل اوکی باشید، فرض میکنیم میخوایم یه خونه با HTML و CSS و JS بسازیم :
- زبان HTML خب فنداسیون ( یا پی ساختمان ) و اسکلت اصلی رو ایجاد میکنه
- زبان CSS میاد و بخش ظاهری ساختمون ( مثلا رنگ بندی و نما و… ) رو ایجاد میکنه
- زبان JS هم مثلا میخوایم وقتی بروی دکمه برق کلیک شد بفرض مثلا اتاق روشن بشه
حالا این صرفا یه مثال بود که فقط حساب کار باید دستتون، پس دیگه بدونید ۳ هسته اصلی طراحی وب در بخش فرانت اند یا ( FrontEnd ) زبان های HTML و CSS و JS می باشند.
با استفاده از زبان JS میتونیم تگ هارو درون یک صفحه ایجاد ، ویرایش و یا حذف کنیم، بفرض مثال میخوایم با کلیک بروی یه دکمه یه لینک ایجاد بشه یا مثلا یه تگ IMG ایجاد بشه، با JS میشه به راحتی اینکارارو انجام داد.
Free-Learn
دستورات جاوا اسکرپیت را کجا باید قرار داد؟
بهتره همین اول کار این قضیه روشن بشه که دستورات جاوا اسکریپت رو باید کجای صفحه قرار داد؟ در قسمت هد ( Head ) یا بدنه اصلی ( Body ) !؟
بطور کلی بدونید دستورات جاوا اسکریپت چه در قسمت هد ( Head ) صفحه و چه در قسمت بدنه ( Body ) قرار بگیرند مشکلی ندارند و اجرا خواهند شد. ( البته به جز موارد خاص ، مثلا میبینی برخی از دستورات در Body کلا عمل نمیکنن و باید حتما در Head قرار بگیرند )
ولی شما تاجایی که میشه سعی کنید دستورات جاوا اسکریپت رو در قسمت body یک صفحه HTML قرار بدید، حالا اگه به هردلیلی اون دستورات عمل نکردند بزارید در قسمت Head ولی همیشه اولویت با قرار دادن در body باشه.
حال یه نکته مهم اینجاست : میبینید برخی از دستورات جاوااسکریپت در بخش هد یا HEAD اجرا نمیشن و برخی هم در بخش Body اجرا نمیشن خب خیلی سادس جاشو عوض کنید.
یعنی میبینی دستورات یا لینک فایل js رو میزاریم داخل بخش head ولی خب اجرا نمیشه یا هم مثلا میزاریم داخل بخش body ولی بازم اجرا نمیشن!؟ خب باید چکار کرد؟!
بطور کلی سعی کنید اولویت اول باید درون body باشه ولی خب اگه در body اجرا نشدن بزارید داخل head اجرا میشن و برعکس اگه در head اجرا نشدن بزارید در body اجرا میشن، بهمین سادگی تموم شد رفت.
اینکه چه دستوراتی در Head یا Body اجرا نمیشن مشخص نیست و باید اونموقع که براتون این اتفاق میوفته جاشونو عوض کنید.
Free-Learn
نحوه استفاده از JavaScript در HTML
در این بخش ما فقط با روش کلی برای استفاده از جاوا اسکریپت در HTML و چند مثال آشنا خواهیم شد لذا برای یادگیری کامل این زبان شما باید آموزش زبان جاوا اسکریپت فری لرن رو دنبال نمایید.
در زبان HTML برای ایجاد و استفاده از جاوااسکریپت باید از تگ <script> استفاده کرد، چه در قسمت Head یا Body فرقی نمیکنه و باید از تگ Script استفاده کرد :
|
1 2 3 4 5 |
<script> دستورات جاوا اسکریپت در اینجا </script> |
Free-Learn
استفاده از جاوا اسکریپت در قسمت Head یک صفحه وب
در مثال زیر مشاهده خواهید کرد که دستورات جاوا اسکریپت میتونند در قسمت هد یک صفحه ی HTML قرار بگیرند.
مثال : استفاده از دستورات جاوااسکریپت در قسمت Head صفحه
|
1 2 3 4 5 6 7 8 9 10 11 |
<head> <script> function MyMessage(){ document.getElementById("Result").innerHTML = "Salam Khobi?"; } </script> </head> |
Free-Learn
استفاده از جاوا اسکریپت در قسمت Body یک صفحه وب
در مثال زیر مشاهده خواهید کرد که دستورات جاوا اسکریپت میتوانند در قسمت بادی یا بدنه اصلی یا Body یک صفحه ی HTML قرار بگیرند.
مثال : استفاده از دستورات جاوااسکریپت در قسمت Body صفحه
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<body> <button onclick="MyMessage();">کلیک کنید</button> <h2 id="Result"></h2> <script> function MyMessage(){ document.getElementById("Result").innerHTML = "Salam Khobi?"; } </script> </body> |
Free-Learn
نحوه ایجاد فایل جاوا اسکریپت خارجی یا External
در مثال های بالا همانطور که مشاهده نمودید ما از دستورات جاوا اسکریپت در خوده صفحه HTML مون استفاده میکردیم ولی خب ممکن است دستورات ما خیلی زیاد باشد اونوقت باید چکار کرد؟
اینجاست که دیگه باید از فایل خارجی جاوا اسکریپت استفاده نماییم، فایل جاوا اسکریپت خارجی چیه اصلا؟ ببینید دوستان وقتی ما دستورات جاوا اسکریپت مون رو درون یک فایل مجزا با پسوند ( js. ) قرار بدهیم این میشه یک فایل جاوا اسکریپت خارجی یا External .
پس برای ساخت یک فایل جاوا اسکریپت خارجی یا مجزا خیلی راحت و ساده نرم افزار NotePad موجود در ویندوز رو باز کنید سپس دستورات جاوا اسکریپت مورد نظرتون رو داخلش قرار بدید سپس اون رو با پسوند js. ذخیره نمایید.
از هر نرم افزاری که برای کدنویسی استفاده میکنید فرقی نمیکنه کافیه یه فایل جدید درست کنید و دستورات JS رو داخلش قرار بدید و در نهایت با فرمت js. ذخیره کنید.
ولی خب فعلن بنده پیشنهاد میکنم از نرم افزار NotePad موجود در خوده ویندوز استفاده نمایید، پس لطفا این نرم افزار را اجرا نمایید و سپس دستورات جاوااسکریپت زیر را در آن قرار دهید.
|
1 2 3 |
function myFunction() { document.getElementById("test").innerHTML = "Www.Free-Learn.Ir"; } |
سپس از منوی File لطفا بروی گزینه ی Save As کلیک نمایید و در نهایت آن را پسوند js. ذخیره نمایید.
خب ما موفق شدیم فایل خارجی جاوااسکریپت مون رو ایجاد نماییم، حالا باید با استفاده از تکه کد زیر فایل خارجی جاوااسکریپت مون رو به فایل HTML مون متصل نماییم.
در نهایت با استفاده از تکه دستور زیر در قسمت هد یا قسمت بدنه میتونیم فایل جاوااسکریپت مون رو به فایل HTML مون وصل کنیم
|
1 |
<script src="URL"></script> |
که در قسمت src باید بجای URL آدرس دقیق فایل جاوا اسکریپت مون رو وارد نماییم، که این آدرس میتونه :
مثال شماره ۱ : اتصال فایل JS خارجی به صفحه HTML ( استفاده در قسمت Head صفحه و استفاده از آدرس دهی مطلق )
|
1 2 3 4 5 |
<head> <script src="https://files.free-learn.ir/Tryitself/html/learn/files/test.js"></script> </head> |
مثال شماره ۲ : اتصال فایل JS خارجی به صفحه HTML ( استفاده در قسمت Head صفحه و استفاده از آدرس دهی نسبی )
|
1 2 3 4 5 |
<head> <script src="files/test.js"></script> </head> |
مثال شماره ۳ : اتصال فایل JS خارجی به صفحه HTML ( استفاده در قسمت Body صفحه و استفاده از آدرس دهی مطلق )
|
1 2 3 4 5 6 7 8 |
<body> <button onclick="myFunction();">کلیک کنید</button> <h2 id="test"></h2> <script src="https://files.free-learn.ir/Tryitself/html/learn/files/test.js"></script> </body> |
مثال شماره ۴ : اتصال فایل JS خارجی به صفحه HTML ( استفاده در قسمت Body صفحه و استفاده از آدرس دهی نسبی )
|
1 2 3 4 5 6 7 8 |
<body> <button onclick="myFunction();">کلیک کنید</button> <h2 id="test"></h2> <script src="files/test.js"></script> </body> |
خب دوستان خسته نباشید، اینم از آموزش نحوه استفاده از JavaScript در HTML بود که مشاهده کردید، ولی ان شاالله بعد از HTML و CSS حتما آموزش مقدماتی تا پیشرفته زبان جاوااسکریپت رو از بخش مربوط بخودش دنبال نمایید.
