قوانین و اصول اولیه زبان جاوااسکریپت

از ویکی کد
پرش به ناوبری پرش به جستجو
دورهٔ آموزشی جاوااسکریپت
Javascript.jpg
Tutorial
۱آموزش جاوااسکریپت
۲مقدمه‌ای بر جاوااسکریپت
۳JavaScript:قوانین و اصول اولیه زبان جاوااسکریپت
۴JavaScript:خروجی جاوااسکریپت
۵JavaScript:عبارت‌ها در جاوااسکریپت
۶JavaScript:شیوهٔ نوشتن (Syntax) عبارات یا دستورات در جاوااسکریپت
۷JavaScript:نظرات یا کامنت‌ها (Comments) در جاوااسکریپت
۸JavaScript:متغیرها در جاوااسکریپت
۹JavaScript:عملگرهای جاوااسکریپت
۱۰JavaScript:عملگرهای ریاضی در جاوااسکریپت
۱۱JavaScript:عملگرهای مقداردهی در جاوااسکریپت
۱۲JavaScript:انواع داده‌ها در جاوااسکریپت
۱۳JavaScript:توابع در جاوااسکریپت
۱۴JavaScript:اشیاء (object) در جاوااسکریپت
۱۵JavaScript:رویدادها در جاوااسکریپت
۱۶JavaScript:رشته‌های متنی (string) در جاوااسکریپت
۱۷JavaScript:متدهای نوع داده متنی یا رشته‌ای در جاوااسکریپت
۱۸JavaScript:اعداد در جاوااسکریپت
۱۹JavaScript:متدهای داده‌های عددی در جاوااسکریپت
۲۰JavaScript:آرایه‌ها در جاوااسکریپت
۲۱JavaScript:متدهای آرایه در جاوااسکریپت
۲۲JavaScript:مرتب‌سازی آرایه‌ها در جاوااسکریپت
۲۳JavaScript:متدهای پیمایش آرایه در جاوااسکریپت
۲۴JavaScript:اشیاء تاریخ و زمان در جاوااسکریپت
۲۵JavaScript:فرمت‌های تاریخ و زمان در جاوااسکریپت
۲۶JavaScript:متدهای دریافت تاریخ و زمان در جاوااسکریپت
۲۷JavaScript:متدهای تنظیم زمان و تاریخ در جاوااسکریپت
۲۸JavaScript:شی ریاضی (Math) در جاوااسکریپت
۲۹JavaScript:ایجاد عدد تصادفی در جاوااسکریپت
۳۰JavaScript:مقادیر بولین (Booleans) در جاوااسکریپت
۳۱JavaScript:عملگرهای منطقی و مقایسه‌ای در جاوااسکریپت
۳۲JavaScript:ساختار if else و else if در جاوااسکریپت
۳۳JavaScript:تکه کد Switch در جاوا اسکریپت
۳۴JavaScript:حلقه For در جاوااسکریپت
۳۵JavaScript:حلقه While در جاوااسکریپت
۳۶JavaScript:کلمات کلیدی Break و Continue در جاوااسکریپت
۳۷JavaScript:تبدیل نوع داده‌ها در جاوااسکریپت
۳۸JavaScript:عملیات‌های بیتی در جاوااسکریپت
۳۹JavaScript:عبارات با قاعده در جاوااسکریپت
۴۰JavaScript:خطاها در جاوااسکریپت - رخ دادن خطا و رفع آن
۴۱JavaScript:Scope در جاوااسکریپت
۴۲JavaScript:Hoisting یا جا به جایی کدها در جاوااسکریپت
۴۳JavaScript:استفاده از مد یا حالت سخت‌گیرانه (use strict) در جاوااسکریپت
۴۴JavaScript:کلمه کلیدی This در جاوااسکریپت
۴۵JavaScript:کلمه کلیدی Let در جاوااسکریپت
۴۶JavaScript:ثابت‌ها در جاوااسکریپت
۴۷JavaScript:تعریف توابع به صورت پیکان
۴۸JavaScript:کلاس‌ها در جاوااسکریپت
۴۹JavaScript:اشکال‌زدایی در جاوااسکریپت
۵۰JavaScript:راهنمای استایل و استانداردهای کدنویسی در جاوااسکریپت
۵۱JavaScript:بهترین تمرینات جاوااسکریپت
۵۲JavaScript:اشتباهات رایج در برنامه‌نویسی جاوااسکریپت
۵۳JavaScript:کارایی در جاوااسکریپت
۵۴JavaScript:کلمات رزرو شده در جاوااسکریپت
۵۵JavaScript:ورژن‌های جاوااسکریپت
۵۶JavaScript:ECMAScript 5 - JavaScript 5
۵۷JavaScript:ECMAScript 6 - ECMAScript 2015
۵۸JavaScript:جیسون (JSON) در جاوااسکریپت
---


تگ <script>

در زبان HTML، کدهایی که به زبان جاوااسکریپت نوشته می‌شوند می‌بایست در بین دو تگ</script>و<script>قرار بگیرند.[۱]

1 Example
2 
3 <script>
4 
5 document.getElementById("demo").innerHTML = "My First JavaScript";
6 
7 </script>
ممکن است در مثالهایی که با ورژن‌های قدیمی تر زبان جاوااسکریپت نوشته شده‌اند از ویژگی (Attribute) و نوع (Type) استفاده شده باشد:<script type="text/javascript">. ویژگی (Attribute) و نوع (Type) الزامی نیست. زبان جاوااسکریپت زبان پیشفرض اسکریپت‌نویسی در سندهایی است که به زبان HTML نوشته شده‌اند.

توابع‌ها (Functions) و رویدادهای (Events) جاوااسکریپت

یک تابع (Function) جاوااسکریپت مجموعه یا بلاکی از کدهای جاوااسکریپت است که در هنگام فراخوانی آن مجموعه، کدها یا همان بلاک‌های کد اجرا می‌گردد.

برای مثال، یک تابع می‌تواند زمانی که یک رویداد (event) رخ داد، فراخوانی شود، مانند زمانی که کاربر بر روی یک دکمه یا button کلیک می‌کند.

شما در فصل‌های آینده مطالب بیشتری را در مورد توابع‌ها (functions) و رویدادها (events) خواهید آموخت.

جاوااسکریپت در تگ <head> یا تگ <body>

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

اسکریپت‌هایی را که با زبان جاوااسکریپت نوشته می‌شوند را می‌توان در تگ‌های<body>یا در تگ<head>، یا هر دوی این تگ‌ها قرار داد.

قرار دادن اسکریپت در تگ <head>

در این مثال، یک تابع (Function) به زبان جاوااسکریپت در تگ<head>یک صفحه HTML قرار داده شده‌است.

این تابع زمانی اجرا (invoked) یا فراخوانی (called) می‌شود که بر روی یک دکمه یا button کلیک شود.

 1 Example
 2 <!DOCTYPE html>
 3 <html>
 4 <head>
 5 <script>
 6 function myFunction() {
 7   document.getElementById("demo").innerHTML = "Paragraph changed.";
 8 }
 9 </script>
10 </head>
11 <body>
12 
13 <h1>A Web Page</h1>
14 <p id="demo">A Paragraph</p>
15 <button type="button" onclick="myFunction()">Try it</button>
16 
17 </body>
18 </html>

قرار دادن اسکریپت در تگ <body>

در این مثال، یک تابع (Function) به زبان جاوااسکریپت در تگ<body>یک صفحه HTML قرار داده شده‌است.

این تابع زمانی اجرا (invoked) یا فراخوانی (called) می‌شود که بر روی یک دکمه یا button کلیک شود.

 1 Example
 2 <!DOCTYPE html>
 3 <html>
 4 <body>
 5 
 6 <h1>A Web Page</h1>
 7 <p id="demo">A Paragraph</p>
 8 <button type="button" onclick="myFunction()">Try it</button>
 9 
10 <script>
11 function myFunction() {
12  document.getElementById("demo").innerHTML = "Paragraph changed.";
13 }
14 </script>
15 
16 </body>
17 </html>
قرار دادن اسکریپتی که به زبان جاوااسکریپت نوشته شده‌است در پایین‌ترین قسمت تگ <body> موجب می‌شود که سرعت نمایش صفحه بهبود یابد، زیرا عمل تفسیر اسکریپت موجب کاهش سرعت نمایش صفحه می‌شود.

جاوااسکریپت خارجی (External)

اسکریپت‌ها همچنین می‌توانند درفایل‌های خارجی (External) نیز قرار بگیرند:

1 External file: myScript.js
2 function myFunction() {
3  document.getElementById("demo").innerHTML = "Paragraph changed.";
4 }

فایل‌های خارجی (External) جاوااسکریپت، فایلهایی هستند شامل کدهای پر استفاده و پرتکرار جاوااسکریپت که ممکن است در صفحات وب گوناگونی کاربرد داشته باشند.

برای استفاده از اسکریپت‌های خارجی، نام فایل اسکریپت خارجی (External) خود را به عنوان مقدار خاصیت (Attribute) منبع (src) تگ<script>قرار دهید.

1 Example
2 <script src="myScript.js"></script>

شما می‌توانید آدرس فایل (refrence) اسکریپت خارجی خود را به طور دلخواه در یکی از تگ‌های<head>یا<body>قرار دهید.

اسکریپت خارجی شما دقیقاً همانند وقتی که به جای آدرس فایل اسکریپت، خود کد اسکریپت (<script>) را قرار می‌دادید، عمل خواهد کرد.

فایل‌های اسکریپت خارجی نمی‌توانند شامل تگ<script>باشند.

مزایای استفاده از اسکریپت‌های جاوااسکریپت به صورت خارجی (External)

قرار دادن اسکریپت‌ها در فایل‌های خارجی (External) مزایایی دارد:

  • اینکار کدهای HTML و جاوااسکریپت را از یکدیگر جدا می‌کند.
  • اینکار خوانایی کدهای HTML و جاوااسکریپت و همچنین نگهداری از آن‌ها را ساده‌تر می‌کند.
  • فایل‌های جاوااسکریپتی که کش (cache) می‌شوند، می‌توانند موجب بهبود سرعت بارگذاری صفحات شوند.

برای متصل کردن چندین فایل اسکریپت خارجی از چندین تگ script استفاده کنید:

1 Example
2 <script src="myScript1.js"></script>
3 <script src="myScript2.js"></script>

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

اسکریپت‌های خارجی می‌توانند به وسیله یک URL کامل یا یک مسیر مربوط به صفحهٔ وب جاری، آدرس دهی شوند.

این مثال از یک URL کامل برای لینک کردن یک فایل اسکریپت به زبان جاوااسکریپت استفاده می‌کند:

1 Example
2 <script src="https://www.w3schools.com/js/myScript1.js"></script>

این مثال به یک فایل اسکریپت که در یک پوشهٔ مخصوص در وب سایت جاری قرار دارد لینک ایجاد می‌کند:

1 Example
2 <script src="/js/myScript1.js"></script>

این مثال به یک فایل اسکریپت که در همان پوشه صفحهٔ جاری قرار دارد، لینک ایجاد می‌کند:

1 Example
2 <script src="myScript1.js"></script>
شما می‌توانید مطالب بیشتری در مورد مسیر فایل‌ها، در فصل مسیر فایل‌ها در HTML را مطالعه کنید.

منابع آموزشی