تخفیف نوروزی پی استور

کد تخفیف: PR1404

شامل تمامی آثار
روز
ساعت
دقیقه
ثانیه

با خرید اشتراک ویژه ، با هزینه بسیار کمتر به فایل های پاورپوینت دسترسی داشته باشید!

مشاهده پلن ها
تدریس در پی‌استور

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

  • 3.03k بازدید
  • آخرین بروزرسانی: 27 دی 1403
  • جاوا اسکریپت
  • زمان مطالعه: 7 دقیقه
آموزش جاوا اسکریپت – جاوا اسکریپت در مرورگرها
در این پست از مجموعه آموزش های جاوا اسکریپت JavaScript، به مبحث جاوا اسکریپت در مرورگر ها می‌رسیم. در این آموزش شما با نحوه استفاده از جاوا اسکریپت در مرورگرها آشنا خواهید شد. لازم به ذکر است برای اینکه بتوانید با مفاهیم این پست آشنا شوید، به کمی دانش HTML نیاز دارید. در HTML برای اینکه بتوانید از جاوا اسکریپت استفاده کنید، نیاز به ایجاد یک تگ به نام خواهید داشت. در ادامه این پست با ما همراه باشید تا با نحوه استفاده جاوا اسکریپت در مرورگرها را بررسی کنیم.

فهرست مطالب

روش‌های به کارگیری کدهای جاوا اسکریپت در HTML

به طور کلی دو روش برای استفاده از جاوا اسکریپت در مرورگرها وجود دارد:

  • ایجاد تگ <script> و استفاده از کدهای جاوا اسکریپت به صورت داخلی
  • ایجاد یک صفحه js. و پیوند دادن آن به صفحه html و استفاده از جاوا اسکریپت به صورت خارجی

روش های به کارگیری کدهای جاوا اسکریپت در HTMLتگ script و مکان قرارگیری آن در HTML (درون خطی)

ابتدا برای استفاده از کدهای جاوا اسکریپت در مرورگر ها نیاز به ایجاد یک صفحه html. دارید. برای این کار نیازی به برنامه خاصی نیست و با یک ویرایشگر ساده مانند Notepad که در همه ویندوزها موجود است، می‌توانید یک صفحه html ایجاد کنید.

به طور کلی این تگ در داخل تگ <head> استفاده می‌شود. این تگ می‌تواند یک، دو یا سه صفت به خود بگیرد.

  • صفت language : نوع زبان استفاده شده را تعیین می‌کند که باید برابر با javascript یا یکی از نسخه های آن قرار دهید. (درصورتی که این صفت تعیین نشود، مرورگرها آخرین نسخه این زبان را مدنظر قرار می‌دهند.) البته این صفت دیگر منسوخ شده است.
<script language="JavaScript"></script>
  • صفت type: که برای مشخص کردن نوع اطلاعات داخل یک فایل استفاده میشود و باید برابر با text/javascript قرار دهید.
<script type="text/javascript"></script>
  • صفت src: که برای پیوند دادن یک فایل جاوا اسکریپت خارجی (js.) به html استفاده می‌شود. (قرار دادن این صفت اختیاری است زیرا ممکن است از جاوا اسکریپت خارجی استفاده نکنید. درصورتی که از این صفت استفاده شود مرورگرها کدهای داخل تگ script را نادید می‌گیرند.)
<script src="../scripts/example.js"></script>

این تگ در مرورگرهای : IE ،safari ،firefox ،cherom ،opera و Edge پشتیبانی می‌شود.

همانطور که در بالا اشاره کردیم، معمولا کدهای جاوا اسکریپت در داخل تگ <head> صفحه قرار می‌گیرند. این کار به این منظور انجام می‌شود که کدها ابتدا بارگذاری شده و برای استفاده آماده فراخوانی باشند. اما این کار ممکن است زمان بارگیری صفحه را کند کند. برای اینکه از این مشکل جلوگیری شود می‌بایست تگ <script> را در انتهای صفحه، قبل از بستن تگ <body> قرار دهید.

برای مثال به تکه کد زیر توجه کنید:

<html>
<head>
<title>Title of Page</title>
</head>
<body>



<script language="JavaScript" type="text/javascript">

console.log("Hello World!");

</script>
</body>
</html>

تگ script و مکان قرار گیری آن در HTML (درون خطی)فایل خارجی javascript

فایل‌های خارجی جاوا اسکریپت ساده هستند. در فایل‌های خارجی جاوا اسکریپت نباید هیچ تگ scriptی استفاده کنید. درحقیقت فایل‌های خارجی جاوا اسکریپت که با فرمت js. هستند، فایل‌های متنی ساده‌ای‌اند که محتوی آن‌ها کدهای جاوا اسکریپت می‌باشد.

برای مثال می‌توانید تکه کد زیر را در یک صفحه html ایجاد کنید:

<html>
<head>
<title>Title of Page</title>
</head>
<body>


<script src="example.js"></script>
<input type="button" value="Call Function" onclick="sayHi()" />
</body>
</html>

سپس کد زیر را داخل یک فایل جاوا اسکریپت (js.) قرار دهید:

alert("hello this is my firs project.");

ابتدا در صفحه یک پیوند به فایل خارجی جاوا اسکریپت دادیم و سپس یک دکمه (button) طراحی کردیم. در قسمت فراخوانی دکمه تابع ()sayHi را قرار دادیم. در ادامه کار در داخل فایل جاوا اسکریپت یک کادر پیغام نوشتیم و در نهایت با کلیک کردن کاربر بر روی دکمه، کادر پیغام نمایش داده می‌شود.

برای داشتن ارائه‌ای مفید و کاربردی درباره این زبان می‌توانید از فایل آماده و طراحی شده توسط مجموعه پی استور در لینک زیر بهره‌مند شوید.

تفاوت های به کارگیری کدها به صورت درون خطی و خارجی

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

به طور کلی استفاده از روش درون خطی توصیه نمی‌شود. هرچند دلایل محکم برای این وجود ندارد، به هرحال دلایل زیر می‌توانند شما را به استفاده از روش خارجی ترغیب کنند و چرایی استفاده نکردن از کدهای درون خطی را توضیح می‌دهد:

  • ذخیره شدن در حافظه مرورگرها: لازم به ذکر است بدانید که فایل‌های خارجی جاوا اسکریپت پس از یک بار بارگذاری در حافظه نهان مرورگر ذخیره می‌شود و در دفعات بعدی نیازی به بارگیری مجدد نیست و از حافظه فراخوانی و مورد استفاده قرار می‌گیرد. بنابراین حجم اینترنت در هربار بارگیری مجدد مصرف نمی‌شود.
  • نگه داری کدها: زمانی که شما بخواهید از یک کد در چندین صفحه وب استفاده کنید می‌توانید از یک فایل جاوا اسکریپت در چندین صفحه مختلف استفاده کنید که موجب کم شدن حجم صفحه و میزان کدنویسی خواهد شد.
  • امنیت: مهم ترین اصل در اینترنت امنیت است. در صفحه اینترنت هر کاربر میتواند به سورس (source) یک صفحه دسترسی داشته باشد. چنانچه شما از روش درون خطی برای نوشتن کدهای جاوا اسکریپت استفاده کرده باشید، هرکاربری می‌تواند به همه کدها دسترسی داشته و ممکن است به حفره امنیتی پی ببرد و سوء استفاده کند.

تفاوت های به کارگیری کدها به صورت درون خطی و خارجی

مخفی کردن اسکریپت ها از مرورگرهای قدیمی

گاهی ممکن است کاربران گزینه پشتیبانی از مرورگر را  غیر فعال کرده باشد تا حجم اینترنت کمتری مصرف شود. یا هنوزم هستند افرادی که از مرورگرهای قدیمی استفاده می‌کنند. حال بنا به دلایلی مانند عادت یا ناسازگاری مرورگر جدید با سیستم عامل کاربر. مرورگرهای قدیمی با جاوا اسکریپت ناسازگار هستند و تگ <script> را نمی‌شناسند. ممکن است در کل نتوانند آن را تفسیر کنند و یا بدتر متن آن را در صفحه نمایش می‌دهند.

برای این که این مشکل پیش نیاید باید در صفحه html توضیحی مبنی بر این که مرورگر کدها را تفسیر نکند بنویسیم. برای نوشتن توضیحات در یک صفحه html باید از علامت‌های –!> در ابتدا و از علامت‌های <– در انتها استفاده کنید. برای مثال به تکه کد زیر توجه کنید:

<script><!-- hide from older browsers
console.log("Hello World!");
//-->
</script>

نکته: دو کاراکتر موجود در انتهای توضیحات (//) برای جلوگیری از این است که مفسر مرورگرهای ناسازگار با جاوا اسکریپت عبارت استفاده شده در انتهای توضیحات (<– ) را به عنوان یک دستور جاوا اسکریپت تفسیر نکند. در صورتی که از دو کاراکتر (//) استفاده نکنید یک خطا ایجاد خواهد شد.

بعد از آن که یاد گرفتیم چگونه یک کد جاوا اسکریپت را از مرورگرهای قدیمی مخفی کنیم، میتوانیم یک متن جایگزین تعیین کنیم تا درصورتی که مرورگر نتوانست کدهای جاوا اسکریپت را تفسیر کند متن فوق به جای آن نشان داده شود. برای این کار باید از تگی به نام <noscript> استفاده کنیم. مرورگرهای جدید و سازگار با جاوا اسکریپت هر چیزی که بین تگ آغازین و پایانی <noscript> وجود دارد نادیده می‌گیرد. از طرف دیگر مرورگرهای قدیمی این دستور را نمی‌شناسند؛ پس این تگ را نادیده می‌گیرند و به سراغ دستورات بعدی می‌روند.

به عنوان مثال به تکه کد زیر توجه کنید:

<html>
<head>
<title>Title of Page</title>
</head>
<body>

<script>
console.log("Hello World!");
</script>
<noscript>
<p>Your browser doesn’t support JavaScript. If it did
support JavaScript, you would see this message: Hi!</p>
</noscript>
<p>This is the first text the user will see If the browser supports JavaScript or the user has enabled JavaScript.</p>
</body>
</html>

در صورتی که مرورگر کاربر از جاوا اسکریپت پشتیبانی نکند، عبارت “Your browser doesn’t support JavaScript. If it did support JavaScript, you would see this message: Hi!” به کابر نمایش داده می‌شود. همچنین درصورتی که مرورگر از جاوا اسکریپت پشیتابی کند و یا کاربر به صورت دستی آن را غیرفعال نکرده باشد، عبارت “This is the first text the user will see If the browser supports JavaScript or the user has enabled JavaScript.” به کاربر نمایش داده می‌شود. برای مطالعه بیشتر به لینک زیر نگاهی بیندازید.

خطایابی در مرورگر

زمانی که یک مرورگر نتواند دستوری از کدهای جاوا اسکریپت را اجرا کند، پیغامی مبنی بر این که یک خطا رخداده است به ما نشان می‌دهد. برای مشاهده پیغام‌ها باید به کنسول (console) جاوا اسکریپت در مرورگرها مراجعه کنید:

  • مرورگر فایرفاکس (firefox): در این مرورگر باید به مسیر زیر بروید تا به کنسول جاوا اسکریپت دسترسی داشته باشید. Menu > More Tools > Web Developer Tools > Error Console
  • مرورگر کروم (chrome):  از مسیر Menu > More Tools > Developer Tools می‌توان به کنسول جاوا اسکریپت دسترسی داشت.
  • مرورگر اوپرا (opera): در مرورگر اوپرا نیز از مسیر Tools > Advanced > Error Console می‌توان به کنسول جاوا اسکریپت دسترسی داشت.

سخن آخر درباره جاوا اسکریپت در مرورگر ها

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

اگر این مطلب برای شما مفید بوده است، مباحث زیر نیز به شما پیشنهاد می‌شوند:
Picture of فاطمه اسماعیلی
فاطمه اسماعیلی
کارشناس رشته مهندسی حرفه‌ای کامپیوتر گرایش نرم افزار، متخصص بازاریابی محتوایی، کارشناس تولید محتوا، طراح و برنامه نویس فرانت اند، فعال در زمینه آموزش برنامه نویسی و راه اندازی سیستم‌های مدیریت محتوا، علاقه مند به زمینه‌های مرتبط با تکنولوژی و کامپیوتر و فعال در حوزه سئو اینستاگرام
مشاهده مقالات بیشتر نویسنده

مقالات مرتبط با موضوع

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *