در حال بارگذاری...

جاوااسکریپت در HTML

درس قبل دسترسی‌پذیری صفحه را با ساختار قابل استفاده کرد — label، landmark، دکمهٔ واقعی. JavaScript روی همان HTML رفتار اضافه می‌کند: کلیک، به‌روزرسانی متن، گفتگو با سرور. این درس سمت HTML می‌ماند: صفحه چگونه با <script> اسکریپت را بار می‌کند — نه یک دورهٔ کامل زبان JavaScript.

چرا بارگذاری script مهم است

مرورگر اول HTML را می‌کشد. اسکریپت می‌تواند آن کار را دیر کند، با مسیر خراب بی‌صدا شکست بخورد، یا محتوایی را پنهان کند که باید در نشانه‌گذاری باشد. دانستن محل <script>، زمان استفاده از src، و آنچه به HTML تعلق دارد صفحه را صادق نگه می‌دارد: محتوا خوانا، کنترل‌ها حاضر، رفتار اختیاری. عادت‌های دسترسی‌پذیری درس قبل برقرارند — هنگام سیم‌کشی کلیک دکمه و label واقعی بگذارید.

پاسخ مستقیم

۱) برای قطعهٔ کوچک <script>…</script>؛ برای فایل خارجی <script src="app.js"></script>. ۲) وقتی منطق از چند خط گذشت فایل .js خارجی را ترجیح دهید. ۳) بسیاری اسکریپت را نزدیک انتهای body می‌گذارند تا محتوا زودتر دیده شود. ۴) متن و کنترل معنادار را در HTML نگه دارید؛ فقط به JS تکیه نکنید. ۵) اپ‌های مدرن ممکن است type="module" بگیرند — وقتی JS عمیق می‌خوانید. ۶) این کورس فقط جاسازی است؛ حلقه و فریم‌ورک مسیر جداست.

📊 Script wiring beginners use

Choice	What it does	Beginner tip
Inline script	Code sits between script tags	Fine for tiny demos; hard to reuse
External src	Loads a .js file from a path	Prefer as projects grow
End of body	Script runs after markup above it	Content can paint sooner
Behavior on HTML	JS finds elements by id/selectors	Elements must exist in the page
Content in HTML	Text and controls stay in markup	Page still makes sense if JS fails
Modules later	type=module for modern apps	Skip until you study JS deeply

script درون‌خطی با دکمهٔ واقعی

صفحهٔ کوچک: یک <button> واقعی با id، بعد <script> که کلیک را گوش می‌دهد و متن دکمه را عوض می‌کند. نشانه‌گذاری دسترس‌پذیر می‌ماند؛ اسکریپت فقط رفتار می‌افزاید.

Inline button click

html

<button id="hi" type="button">Say hi</button>
<script>
document.getElementById("hi").addEventListener("click", function () {
document.getElementById("hi").textContent = "Hello!";
});
</script>

خواندن دموی درون‌خطی

دکمه HTML واقعی است — بدون JS هم معنادار و با صفحه‌کلید
id="hi" قلاب پایدار برای اسکریپت است
بلوک <script> چند خط JavaScript درون‌خطی دارد
addEventListener("click", …) رفتار وصل می‌کند؛ جایگزین دکمه نیست
اگر اسکریپت اجرا نشود دکمه هنوز «Say hi» می‌گوید
درس قبل ساختار بود؛ اینجا اتصال رفتار

اسکریپت خارجی با src

همان ایده با فایل جدا بهتر مقیاس می‌شود. HTML فقط مسیر را اعلام می‌کند؛ منطق در app.js است. مسیر باید با پوشهٔ شما بخواند.

External script src

html

<button id="hi" type="button">Say hi</button>
<script src="app.js"></script>

خواندن الگوی خارجی

src="app.js" مرورگر را به واکشی و اجرای آن فایل می‌فرستد
HTML کوتاه می‌ماند؛ ویرایش رفتار در یک .js مشترک است
مسیر اشتباه یعنی اسکریپت هرگز بار نمی‌شود — Network را چک کنید
script را بعد از دکمه بگذارید یا صبر برای عنصر را تضمین کنید
با رشد دمو این الگو را به بلوک‌های عظیم درون‌خطی ترجیح دهید
درس‌های بعدی HTML جلو می‌روند؛ JS عمیق کورس جداست

چگونه رفتار را بار کنیم

دموی خیلی کوچک: اسکریپت درون‌خطی کنار کنترل ممکن است کافی باشد
هر چیزی که رشد یا اشتراک می‌گیرد: منطق را به app.js و src ببرید
متن یا ناوبری حیاتی: اول در HTML، بعد تقویت با JS
حس شکسته بعد از تغییر: قبل از شکار باگ زبان، مسیر src را بررسی کنید
دسترسی‌پذیری: <button> / <a> / label را نگه دارید — به‌خاطر JS به div کلیک‌پذیر نروید
مطالعهٔ کامل زبان: حلقه و فریم‌ورک برای کورس JavaScript

تمرین — HTML اسکریپت را بار می‌کند

دموی درون‌خطی را کپی کنید؛ کلیک کنید و تغییر برچسب را ببینید.
شنونده را به app.js ببرید، به <script src="app.js"></script> عوض کنید و دوباره کار کند.
مسیر را خراب کنید (src="wrong.js")، بارگذاری کنید؛ دکمه «Say hi» بماند.
اسکریپت را کاملاً بردارید؛ HTML هنوز معنا داشته باشد.
دکمهٔ دوم با id جدید و یک شنوندهٔ دیگر.
جمله: HTML مالک محتوا و ساختار است؛ script رفتار اختیاری را بار می‌کند.
درس بعد خلاصهٔ کوتاه HTML است — سیم‌کشی script را در جعبه‌ابزار نگه دارید.

اشتباهات آسان

جملات حیاتی فقط داخل JavaScript تا بدون آن صفحه خالی باشد
غلط املایی یا پوشهٔ اشتباه در src
اسکریپت‌های عظیم درون‌خطی سخت برای اشتراک و تست
اجرای اسکریپت قبل از وجود عنصر (script در head بدون انتظار)
جایگزینی دکمهٔ دسترس‌پذیر با div کلیک‌پذیر فقط برای handler
گرفتن این درس به‌عنوان کل کورس JavaScript
فراموش عادت‌های درس قبل: کنترل بدون label با اسکریپت فانتزی هم بی‌نام می‌ماند

خلاصه

<script> جاوااسکریپت را به صفحهٔ HTML می‌آورد
درون‌خطی برای دموی کوچک؛ src برای فایل .js خارجی با رشد پروژه
محل قرارگیری را طوری بچینید که محتوا دیده و قابل استفاده بماند
محتوای واقعی و کنترل دسترس‌پذیر را در HTML نگه دارید
دسترسی‌پذیری ساختار بود؛ این درس سیم‌کشی رفتار است
بعدی: خلاصهٔ کوتاه HTML از مسیر تا اینجا

🧠 دانش خود را بیازمایید

آماده شروع

دانش خود را بیازمایید

خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید

❓

سوالات

🎯

70%

برای قبولی

♾️

∞

زمان

🔄

∞

تلاش‌ها

📝 دستورالعمل‌ها

هر سوال را با دقت بخوانید
بهترین پاسخ را برای هر سوال انتخاب کنید
می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
پیشرفت شما در بالا نمایش داده می‌شود