این آموزش در تاریخ ۱۴۰۲/۰۶/۱۹ آپدیت شده است.
آموزش نحوه استفاده از JavaScript در HTML
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش نحوه استفاده از JavaScript در HTML با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
نحوه استفاده از JavaScript در HTML
جاوا اسکریپت یا JS یا JavaScript بهمراه HTML و CSS سه هسته اصلی برای طراحی صفحات وب رو تشکیل میدن ، و حواستون باشه زبان جاوااسکریپت با زبان جاوا یا Java فرق دارد، این ۲ زبان کاملا مجزا هستند.
یه مثال بزنم که دیگه کامل اوکی باشید، فرض میکنیم میخوایم یه خونه با HTML و CSS و JS بسازیم :
- زبان HTML خب فنداسیون ( یا پی ساختمان ) و اسکلت اصلی رو ایجاد میکنه
- زبان CSS میاد و بخش ظاهری ساختمون ( مثلا رنگ بندی و نما و… ) رو ایجاد میکنه
- زبان JS هم مثلا میخوایم وقتی بروی دکمه برق کلیک شد بفرض مثال اتاق روشن بشه
حالا این صرفا یه مثال بود که فقط حساب کار باید دستتون، پس دیگه بدونید ۳ هسته اصلی طراحی وب در بخش فرانت اند یا ( FrontEnd ) زبان های HTML و CSS و JS می باشند، و هرکدوم هم در نوبت خودشون کاربردهای خودشونو دارن.
مثلا کاری که جاوااسکریپت انجام میده دیگه HTML نمیتونه و قدرت انجامشو نداره، مثلا با استفاده از زبان 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 یک صفحه وب
در ادامه ی آموزش نحوه استفاده از JavaScript در HTML میخوام نحوه استفاده از دستورات جاوااسکریپت رو در تگ 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
پس برای ساخت یک فایل جاوا اسکریپت خارجی یا مجزا خیلی راحت و ساده نرم افزاری که باهاش کدنویسی میکنید ( هر نرم افزاری که باشه خیلی فرق نمیکنه ) بازش کنید سپس دستورات جاوا اسکریپت مورد نظرتون رو داخلش قرار بدید سپس اون رو با پسوند 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 حتما آموزش مقدماتی تا پیشرفته زبان جاوااسکریپت رو از بخش مربوط بخودش دنبال نمایید.
