جاوا اسکریپت و آدرس دهی فایل های HTML

23 فروردین 1398
درسنامه درس 16 از سری آموزش صفر تا صد HTML
HTML-File-Path

تعامل جاوا اسکریپت و HTML

جاوا اسکریت و HTML تقریبا در تمام صفحات وب امروزی همراه هم هستند و با هم کار می کنند. در این قسمت با چند مثال ساده از ترکیب HTML و جاوا اسکریپت آشنا می شویم تا کلیت کار برایتان مفهوم شود و پس از پایان دوره ی HTML می توانید به دوره های مختلف جاوا اسکریپت در سایت روکسو بروید و از آنجا شروع کنید. لذا برای آشنایی بیشتر شما عزیزان لینک این دوره ها را در ادامه قرار داده ام:

دوره رایگان آموزش مقدماتی جاوا اسکریپت

دوره رایگان آموزش پیشرفته جاوا اسکریپت

تگ <script>

تگ <script> متعلق به زبان HTML بوده و زمانی استفاده می شود که بخواهیم در سند HTML از کدهای جاوا اسکریپتی استفاده کنیم؛ چه این کدها به صورت دستی درون این تگ وارد شوند و چه شامل آدرسی باشند که به یک فایل خارجی جاوا اسکریپت اشاره می کنند.

بیشترین استفاده از جاوا اسکریپت در این موارد اتفاق می افتد:

  • manipulation: همان دستکاری و تغییر دادن عناصر HTML و محتوای آن است.
  • form validation: همان اعتبارسنجی فرم ها می باشد. به طور مثال اگر از کاربر بخواهید سن خود را وارد کند، باید کاراکترهای حرفی (الفبا) را توسط جاوا اسکریپت غیرمجاز کنیم 1.
  • dynamic changes: جاوا اسکریپت می تواند محتوای صفحه را پویا کند؛ به طور مثال یک ساعت دیجیتال را در صفحه نمایش دهد که هر یک ثانیه بروزرسانی می شود.

1- ممکن است بگویید مگر نمی توان این موارد را در سمت سرور چک کرد؟ حرفتان اشتباه نیست و قطعا اعتبارسنجی در سمت سرور هم انجام می گیرد اما اگر ابتدا یک بار با جاوا اسکریپت اعتبار سنجی کنیم دیگر نیازی نیست از سرور های خود کار بکشیم و بیخودی روی آن ها بار پردازشی قرار دهیم.

اگر بخواهیم یکی از عناصر HTML را با جاوا اسکریپت بگیریم می توانیم از تابع ()document.getElementById استفاده کنیم. این تابع در واقع عنصر خاصی را بر اساس مقدار id اش می گیرد. مثال:

<!DOCTYPE html>
<html>
<body>

<h2>Use JavaScript to Change Text</h2>
<p>This example writes "Hello JavaScript!" into an HTML element with id="demo":</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script> 

</body>
</html>

برای مشاهده ی خروجی، روی این لینک کلیک کنید.

در مثال بالا یک عنصر <p> داشتیم که id آن برابر با demo بود اما محتوایی نداشت. سپس با جاوا اسکریپت آن را دریافت کردیم و به آن محتوا (عبارت Hello JavaScript) دادیم.

البته استفاده از جاوا اسکریپت به همین مرحله ختم نمی شود. ما می توانیم پیشرفته تر شویم و با استفاده از جاوا اسکریپت حتی خصوصیات CSS را نیز به همراه HTML تغییر دهیم:

<!DOCTYPE html>
<html>
<body>

<h1>My First JavaScript</h1>

<p id="demo">JavaScript can change the style of an HTML element.</p>

<script>
function myFunction() {
  document.getElementById("demo").style.fontSize = "25px"; 
  document.getElementById("demo").style.color = "red";
  document.getElementById("demo").style.backgroundColor = "yellow";        
}
</script>

<button type="button" onclick="myFunction()">Click Me!</button>

</body>
</html>

برای مشاهده ی خروجی، روی این لینک کلیک کنید.

مشخص است که می توانیم کارهای خلاقانه ی بسیار زیادی را با جاوا اسکریپت انجام دهیم!

به طور مثال به کد زیر نگاه کنید:

<!DOCTYPE html>
<html>
<body>
<script>
function light(sw) {
  var pic;
  if (sw == 0) {
    pic = "https://www.w3schools.com/html/pic_bulboff.gif"
  } else {
    pic = "https://www.w3schools.com/html/pic_bulbon.gif"
  }
  document.getElementById('myImage').src = pic;
}
</script>

<img id="myImage" src="https://www.w3schools.com/html/pic_bulboff.gif" width="100" height="180">

<p>
<button type="button" onclick="light(1)">Light On</button>
<button type="button" onclick="light(0)">Light Off</button>
</p>

</body>
</html>

برای مشاهده ی خروجی، روی این لینک کلیک کنید.

در این کد با تغییر دادن دو تصویر متفاوت، تصور می کنیم که با فشار دادن دکمه ها چراغ را خاموش یا روشن می کنیم!

به هر حال این ها چند مثال از قدرت ترکیبی جاوا اسکریپت و HTML بود تا شما بدانید چه کارهایی را می توان با این دو انجام داد. انتظار بنده این است که اگر فرد مبتدی باشید از این کدها سردر نیاورید. اگر این طور است، اصلا مشکلی نیست چرا که شما هنوز زبان جاوا اسکریپت را یاد نگرفته اید، تنها کاری که باید انجام دهید این است که از مثال ها لذت ببرید و چشم خود را به دیدن این نوع کدها عادت بدهید.

تگ <noscript>

تگ <noscript> که یکی از تگ های HTML می باشد کار جالبی دارد؛ اگر کاربری که از سایت شما بازدید می کند قابلیت جاوا اسکریپت مرورگر خود را غیر فعال کرده باشد و یا اصلا مرورگر او از قابلیت جاوا اسکریپت پشتیبانی نکند محتوای درون تگ <noscript> به او نمایش داده می شود.

سوال: چه محتوایی باید درون <noscript> بنویسیم؟

پاسخ: کاملا بستگی به شما دارد. ممکن است بخواهید وب سایت خود را طور دیگری برنامه نویسی کنید تا افرادی که جاوا اسکریپت ندارند از آن نسخه استفاده کنند و یا شاید هم بخواهید مانند اکثر توسعه دهندگان دیگر یک اخطار به کاربر نمایش دهید تا جاوا اسکریپت خود را فعال کند. مثال:

<!DOCTYPE html>
<html>
<body dir='rtl'>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>

<noscript>متاسفانه مرورگر شما از جاوا اسکریپت پشتیبانی نمی کند بنابراین نمیتوانید محتوای وب سایت را ببینید.</noscript>

<p>اگر مرورگری جاوا اسکریپت خود را غیر فعال کرده باشد، متن داخل  تگ noscript را خواهد درد.
  در غیر این صورت همین متنی را که در حال حاضر می خوانید، خواهد خواند!
  
  </p>
  
  <p>
  شما می توانید برای تست کردن این موضوع، از قسمت تنظیمات مرورگر خود به دنبال گزینه ی JavaScipt بگردید و آن را غیر فعال کنید تا محتوای این تگ را ببینید.
  </p>
 
</body>
</html>

برای مشاهده ی خروجی، روی این لینک کلیک کنید.

آدرس دهی فایل ها

آدرس دهی فایل ها در دنیای وب (چه HTML باشد، چه جاوا اسکریپت، چه PHP و ...) معمولا از یک قانون پیروی می کنند. file path به معنی «مسیر فایل» است و آدرس یک فایل را بر اساس ساختار پوشه های یک سایت مشخص می کند. ما زمانی از file path استفاده می کنیم که بخواهیم از عناصر خارجی استفاده کنیم، مانند:

  • صفحات وب دیگر
  • تصاویر
  • ویدیوها
  • صفحات استایل CSS
  • فایل های جاوا اسکریپت
  • و ...

نکته: باید توجه داشته باشید، زمانی که می گوییم عناصر خارجی منظورمان خارج از سورس کد است، نه لزوما خارج از سرور شما!

آدرس مطلق یا کامل (Absolute File Path)

آدرس های کامل یا مطلق، همانطور که از نامشان مشخص است، آدرس یک فایل را به صورت کامل و تمام مشخص می کنند. معمولا زمانی از این نوع آدرس دهی استفاده می کنیم که منابع خارجی ما روی سرور خودمان نباشد و بخواهیم از یک آدرس اینترنتی دیگر فایلی را بگیریم مانند:

<!DOCTYPE html>
<html>
<body>

<h2>Using a Full URL File Path</h2>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/1200px-HTML5_logo_and_wordmark.svg.png" alt="Mountain" style="width:300px">

</body>
</html>

برای مشاهده ی خروجی، روی این لینک کلیک کنید.

آدرس نسبی (Relative File Path)

آدرس های نسبی به جای آنکه آدرس فایل مورد نظر ما را تمام و کمال مشخص کنند، قسمت خاصی از آن را مشخص می کنند. از این نوع آدرس دهی تنها زمانی می توان استفاده کرد که فایل یا منابع مورد نظر حتما روی سرور خودمان باشد! مثال:

<img src="/images/picture.jpg" alt="HTML">

آدرسی که در کد بالا داده ایم با یک اسلش (علامت /) شروع شده است:

/images/picture.jpg

این اسلش می گوید به root (فولدر اصلی) برو و از آنجا دنبال پوشه ی images بگرد و از داخل آن تصویر picture.jpg را پیدا کن!

یک حالت دیگر به این شکل است:

<img src="images/picture.jpg" alt="HTML">

در این شکل آدرس دهی، از هیچ علامت اسلشی در ابتدای آدرس استفاده نکرده ایم:

images/picture.jpg

این یعنی به پوشه ی images برو و فایل picture.jpg را پیدا کن. البته یادتان باشد زمانی می توانید اینطور آدرس بدهید که فایل سورس کدتان (فایلی که کد بالا را در آن نوشته اید) به همراه images در یک پوشه باشند! به طور مثال اسم فایل سورس کد index.html باشد و به همراه پوشه ای به نام images هر دو در یک پوشه ی دیگر (مثلا My HTML Files) باشند. به همین دلیل این نوع آدرس دهی «نسبی» نام دارد؛ فایل هایتان را نسبت به سورس کد آدرس دهی می کنید!

روش دیگر آدرس دهی نسبی به این صورت است:

<img src="../images/picture.jpg" alt="HTML">

آدرسی که در این کد مشخص کرده ایم با دو علامت نقطه و یک اسلش شروع می شود:

../images/picture.jpg

این ترکیب (/..) معنای خاصی دارد، یک پوشه به عقب برو! در اینجا دیگر پوشه ی images مانند مثال قبل در یک پوشه با سورس کد قرار ندارد. این حالتی است که در آن فایل سورس کد ما در یک پوشه قرار دارد اما پوشه ی images در آنجا نیست بلکه یک پوشه عقب تر یا یک سطح عقب تر می باشد.

بهترین روش آدرس دهی

پاسخ این سوال در موقعیت های مختلف متفاوت خواهد بود اما در حالت کلی آدرس دهی نسبی بسیار بهتر است چرا که file path های شما به آدرس URL تان وابسته نمی شوند و با تغییر آن مجبور نیستید همه را دوباره تغییر دهید. همچنین لینک ها و منابعی که آدرس دهی دارند در localhost (کامپیوتر خود) نیز کار می کنند و می توانید هنگام توسعه دادن یک برنامه در سیستم خود نیز کارکرد آن را ببینید.

استفاده از file path های مطلق و کامل باعث بروز دردسر های زیادی می شوند به جز مواردی که راه دیگری نداشته باشیم (مثلا منابع ما روی یک سرور دیگر قرار داشته باشند).

امیدوارم از این قسمت لذت برده باشید.

تمام فصل‌های سری ترتیبی که روکسو برای مطالعه‌ی دروس سری آموزش صفر تا صد HTML توصیه می‌کند:
نویسنده شوید
دیدگاه‌های شما (1 دیدگاه)

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

حمید
24 فروردین 1401
سلام برای کدهای html یک فایل بزرگ جاوااسکریپت داشته باشیم بهتره یا چند فایل کوچکتر برای هر صفحه بصورت جداگانه خیلی از صفحات شما را در سیستم خودم کپی کردم و هر جا مشکلی دارم بصورت آفلاین استفاده میکنم امیدوارم راضی باشین و مشکلی نداشته باشین ممنون از سایت خوبتون

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.