نمای کلی: جاوا اسکریپت چیست؟
جاوا اسکریپت یک زبان برنامه نویسی پویا است که برای توسعه وب، در برنامه های کاربردی وب، برای توسعه بازی و بسیاری موارد دیگر استفاده می شود. جاوا به شما امکان می دهد ویژگی های دینامیک را در صفحات وب پیاده سازی کنید که صرفا با HTML و CSS قابل انجام نیستند. بسیاری از مرورگرها از جاوا اسکریپت به عنوان یک زبان برنامه نویسی برای انجام کارهای پویا در وب استفاده می کنند. هر زمان که برای مشاهده منوی دراپ داون کلیک کنید، محتوای اضافی اضافه شده به یک صفحه، و تغییر دینامیک رنگ عناصر در یک صفحه، نام بردن چند ویژگی، اثرات جاوا اسکریپت را مشاهده خواهید کرد.
جاوا اسکریپت چیست؟
جاوا اسکریپت یک زبان برنامه نویسی است که به شما امکان می دهد ویژگی های پیچیده را در صفحات وب پیاده سازی کنید – هر بار که یک صفحه وب اطلاعات ثابتی از قبیل نمایش به روز رسانی محتوا، نقشه های تعاملی، انیمیشن های 2D/ گرافیک های سه بعدی، اسکرول جوک باکس های ویدئویی، و… را نشان می دهد می توانید شرط ببندید که جاوا اسکریپت احتمالاً در آن نقش دارد. این سومین لایه از فنآوریهای وب استاندارد است که دو مورد از آن (HTML و CSS) را با جزئیات بیشتری در بخشهای دیگر حوزه یادگیری پوشش دادهایم.
HTML : زبان نشانه گذاری است که ما از آن برای ساختاردهی و معنا بخشیدن به محتوای وب استفاده می کنیم، به عنوان مثال تعریف پاراگراف ها، عنوان ها، و جداول داده، یا جاسازی تصاویر و ویدیوها در صفحه.
CSS : زبان قوانین سبک است که ما از آن برای اعمال یک استایل به محتوای HTML خود استفاده می کنیم، به عنوان مثال رنگ های پس زمینه و فونت ها را تنظیم می کنیم و محتوای خود را در چندین ستون قرار می دهیم.
جاوا اسکریپت : یک زبان برنامه نویسی است که به شما امکان می دهد محتوای به روز رسانی پویا ایجاد کنید، چند رسانه ای را کنترل کنید، تصاویر را متحرک کنید، و .. (خوب، نه همه چیز، اما شگفت انگیز است که با چند خط کد جاوا اسکریپت می توانید به چه چیزهای زیادی برسید.)
این سه لایه به خوبی روی هم قرار می گیرند. بیایید یک برچسب متنی ساده را به عنوان مثال در نظر بگیریم. میتوانیم آن را با استفاده از HTML علامتگذاری کنیم تا به آن ساختار و هدف بدهیم:
<p>Player 1: Chris</p>
سپس میتوانیم مقداری CSS به ترکیب اضافه کنیم تا زیبا به نظر برسد:
p {
font-family: 'helvetica neue', helvetica, sans-serif;
letter-spacing: 1px;
text-transform: uppercase;
text-align: center;
border: 2px solid rgba(0,0,200,0.6);
background: rgba(0,0,200,0.3);
color: rgba(0,0,200,0.6);
box-shadow: 1px 1px 2px rgba(0,0,200,0.4);
border-radius: 10px;
padding: 3px 10px;
display: inline-block;
cursor: pointer;
}
و در نهایت، می توانیم مقداری جاوا اسکریپت برای پیاده سازی رفتار دینامیک اضافه کنیم:
const para = document.querySelector('p');
para.addEventListener('click', updateName);
function updateName() {
const name = prompt('Enter a new name');
para.textContent = `Player 1: ${name}`;
}
سعی کنید روی آخرین نسخه برچسب متن کلیک کنید تا ببینید چه اتفاقی میافتد (همچنین توجه داشته باشید که میتوانید این نسخه آزمایشی را در GitHub پیدا کنید – کد منبع را ببینید یا آن را به صورت زنده اجرا کنید. )
جاوا اسکریپت می تواند کارهای خیلی بیشتری را انجام دهد – بیایید با جزئیات بیشتر به بررسی آن بپردازیم.
جاوا اسکریپت واقعاً چه کاری می تواند انجام دهد؟
زبان جاوا اسکریپت کلاینت ساید اصلی شامل برخی از ویژگی های برنامه نویسی رایج است که به شما امکان می دهد کارهایی مانند گزینه های زیرا را انجام بدهید:
مقادیر مفید را در داخل متغیرها ذخیره کنید. به عنوان مثال، در مثال بالا، ما درخواست می کنیم که یک نام جدید وارد شود و سپس آن نام را در متغیری به نام name ذخیره کنیم.
عملیات روی قطعات متن (که در برنامه نویسی به عنوان “رشته” شناخته می شود). در مثال بالا، رشته “Player 1:” را می گیریم و آن را به متغیر نام وصل می کنیم تا برچسب متن کامل را ایجاد کنیم، به عنوان مثال. “بازیکن 1: کریس”.
اجرای کد در پاسخ به رویدادهای خاصی که در یک صفحه وب رخ می دهد. ما از یک رویداد کلیک در مثال بالا استفاده کردیم تا تشخیص دهیم چه زمانی روی برچسب کلیک میشود و سپس کدی را اجرا میکنیم که برچسب متن را بهروزرسانی میکند.
و خیلی بیشتر!
با این حال، چیزی که هیجان انگیزتر است، عملکردی است که بر روی زبان جاوا اسکریپت کلاینت ساید ساخته شده است. به اصطلاح رابط های برنامه نویسی کاربردی (API) قدرت های فوق العاده ای را برای استفاده در کد جاوا اسکریپت در اختیار شما قرار می دهند.
APIها مجموعههای آمادهای از بلوکهای سازنده کد هستند که به توسعهدهنده اجازه میدهند برنامههایی را پیادهسازی کند که در غیر این صورت پیادهسازی آنها سخت یا غیرممکن خواهد بود. آنها همان کاری را برای برنامهنویسی انجام میدهند که کیتهای مبلمان آماده برای خانهسازی انجام میدهند – گرفتن پانلهای آماده و پیچاندن آنها برای ساختن یک قفسه کتاب بسیار سادهتر از این است که خودتان طراحی را انجام دهید، بروید و آن را پیدا کنید. چوب را درست کنید، تمام پانل ها را به اندازه و شکل مناسب ببرید، پیچ های با اندازه مناسب را پیدا کنید و سپس آنها را کنار هم قرار دهید تا یک قفسه کتاب درست کنید.
آنها به طور کلی به دو دسته تقسیم می شوند.
APIs در مرورگر وب شما تعبیه شدهاند و میتوانند دادههای محیط رایانه اطراف را در معرض نمایش قرار دهند یا کارهای پیچیده مفیدی را انجام دهند. مثلا:
DOM (Document Object Model) API به شما امکان می دهد HTML و CSS را دستکاری کنید، ایجاد، حذف و تغییر دهید، به صورت پویا سبک های جدید را در صفحه خود اعمال کنید (همانطور که در نسخه ی نمایشی ساده خود در بالا دیدیم) برای مثال، DOM در حال عمل است.
Geolocation API اطلاعات جغرافیایی را بازیابی می کند. به این ترتیب Google Maps می تواند موقعیت مکانی شما را پیدا کرده و آن را روی نقشه ترسیم کند.
Canvas و WebGL API به شما امکان می دهد گرافیک های متحرک دو بعدی و سه بعدی ایجاد کنید. مردم با استفاده از این فناوریهای وب، کارهای شگفتانگیزی انجام میدهند – به آزمایشهای Chrome و نمونههای وب مراجعه کنید.
APIهای صوتی و تصویری مانند HTMLMediaElement و WebRTC به شما این امکان را می دهند که کارهای بسیار جالبی را با چند رسانه ای انجام دهید، مانند پخش صدا و ویدیو مستقیماً در یک صفحه وب، یا گرفتن ویدیو از دوربین وب خود و نمایش آن در رایانه یک شخص دیگر.
توجه: بسیاری از دموهای بالا در مرورگرهای قدیمی کار نمی کنند – هنگام آزمایش، ایده خوبی است که از یک مرورگر مدرن مانند فایرفاکس، کروم، اج یا اپرا برای اجرای کد خود استفاده کنید. هنگامی که به تحویل کد تولید نزدیک می شوید (یعنی کد واقعی که مشتریان واقعی از آن استفاده خواهند کرد) باید آزمایش مرورگر متقابل را در نظر بگیرید. API های تردپارتی به طور پیش فرض در مرورگر تعبیه نشده اند و معمولاً باید کد و اطلاعات آنها را از جایی در وب بگیرید. مثلا:
Twitter API به شما امکان می دهد کارهایی مانند نمایش آخرین توییت های خود را در وب سایت خود انجام دهید.
Google Maps API و OpenStreetMap API به شما این امکان را می دهد که نقشه های سفارشی را در وب سایت خود جاسازی کنید، و سایر عملکردهای مشابه را انجام دهید.
توجه: این APIها پیشرفته هستند و ما هیچ یک از آنها را در این ماژول پوشش نمی دهیم. میتوانید در ماژول APIهای وب سمت مشتری، اطلاعات بیشتری در مورد این موارد پیدا کنید.
چیزهای بیشتری نیز موجود است! با این حال، هنوز هیجان زده نشوید. پس از ۲۴ ساعت مطالعه جاوا اسکریپت، نمیتوانید فیسبوک، نقشههای گوگل یا اینستاگرام بعدی را بسازید — اصول اولیه زیادی وجود دارد که باید ابتدا آنها را پوشش دهید. و به همین دلیل است که شما اینجا هستید – بیایید ادامه دهیم!
جاوا اسکریپت در صفحه شما چه می کند؟
در اینجا ما در واقع شروع به بررسی برخی از کدها می کنیم و در حین انجام این کار، بررسی می کنیم که وقتی جاوا اسکریپت را در صفحه خود اجرا می کنید واقعاً چه اتفاقی می افتد.
بیایید به طور خلاصه داستان اتفاقی که هنگام بارگذاری یک صفحه وب در مرورگر رخ می دهد را مرور کنیم. هنگامی که یک صفحه وب را در مرورگر خود بارگذاری می کنید، کد خود (HTML، CSS و جاوا اسکریپت) را در یک محیط اجرایی (برگه مرورگر) اجرا می کنید. این مانند کارخانه ای است که مواد خام (کد) را می گیرد و یک محصول (صفحه وب) را تولید می کند.
یکی از کاربردهای رایج جاوا اسکریپت، تغییر پویا HTML و CSS برای به روز رسانی یک رابط کاربری، از طریق Document Object Model API است (همانطور که در بالا ذکر شد). توجه داشته باشید که کد موجود در اسناد وب شما معمولاً به ترتیبی که در صفحه ظاهر می شود بارگیری و اجرا می شود. اگر جاوا اسکریپت قبل از HTML و CSS که قرار است اصلاح شود، بارگیری و اجرا شود، ممکن است با خطاهایی همراه شود. در ادامه مقاله، در بخش استراتژیهای بارگذاری اسکریپت، راههایی برای رفع این مشکل خواهید آموخت.
امنیت مرورگر
هر برگه مرورگر دارای سطل جداگانه خود برای اجرای کد است (این سطل ها در اصطلاح فنی “محیط های اجرایی” نامیده می شوند) – این بدان معنی است که در بیشتر موارد کد در هر برگه کاملاً جداگانه اجرا می شود و کد موجود در یک برگه نمی تواند مستقیماً اجرا شود. کد را در یک برگه دیگر یا در وب سایت دیگری تحت تأثیر قرار دهید. این یک اقدام امنیتی خوب است – اگر اینطور نبود، دزدان اینترنتی می توانستند شروع به نوشتن کد برای سرقت اطلاعات از وب سایت های دیگر و موارد بد دیگر کنند.
توجه: راههایی برای ارسال کد و داده بین وبسایتها/برگههای مختلف به صورت ایمن وجود دارد، اما اینها تکنیکهای پیشرفتهای هستند که در این دوره به آنها نمیپردازیم.
دستور اجرای جاوا اسکریپت
وقتی مرورگر با بلوکی از جاوا اسکریپت روبرو می شود، معمولاً آن را به ترتیب از بالا به پایین اجرا می کند. این بدان معنی است که باید مراقب باشید که چیزها را به چه ترتیبی قرار می دهید. به عنوان مثال، اجازه دهید به بلوک جاوا اسکریپت که در مثال اول خود دیدیم برگردیم:
const para = document.querySelector('p');
para.addEventListener('click', updateName);
function updateName() {
const name = prompt('Enter a new name');
para.textContent = `Player 1: ${name}`;
}
در اینجا ما یک پاراگراف متنی (خط 1) را انتخاب می کنیم، سپس یک شنونده رویداد را به آن متصل می کنیم (خط 3) به طوری که وقتی روی پاراگراف کلیک می شود، بلوک کد ()updateName (خطوط 5-8) اجرا می شود. بلوک کد ()updateName (این نوع بلوکهای کد قابل استفاده مجدد «توابع» نامیده میشوند) از کاربر یک نام جدید میخواهد، و سپس آن نام را در پاراگراف وارد میکند تا نمایشگر بهروزرسانی شود.
اگر ترتیب دو خط اول کد را عوض کنید، دیگر کار نمی کند – در عوض، یک خطا در کنسول توسعه دهنده مرورگر برگردانده می شود – TypeError: para تعریف نشده است. این بدان معناست که شی para هنوز وجود ندارد، بنابراین ما نمی توانیم شنونده رویداد به آن اضافه کنیم.
توجه: این یک خطای بسیار رایج است – قبل از اینکه بخواهید چیزهایی با آنها انجام دهید، باید مراقب باشید که اشیاء ارجاع شده در کد شما وجود داشته باشند.
تفسیر شده در مقابل کد کامپایل شده ممکن است اصطلاحاتی را بشنوید که در زمینه برنامه نویسی تفسیر و کامپایل شده اند. در زبان های تفسیر شده، کد از بالا به پایین اجرا می شود و نتیجه اجرای کد بلافاصله برمی گردد. قبل از اجرای مرورگر، لازم نیست کد را به شکل دیگری تبدیل کنید. کد به شکل متنی مناسب برای برنامه نویس دریافت می شود و مستقیماً از آن پردازش می شود.
از طرف دیگر زبان های کامپایل شده قبل از اجرا توسط کامپیوتر به شکل دیگری تبدیل می شوند (کامپایل می شوند). به عنوان مثال، C++/C در کد ماشین کامپایل می شود که سپس توسط کامپیوتر اجرا می شود. این برنامه از یک فرمت باینری که از کد منبع اصلی برنامه تولید شده است اجرا می گردد.
جاوا اسکریپت یک زبان برنامه نویسی تفسیر شده سبک است. مرورگر وب کد جاوا اسکریپت را به شکل متن اصلی خود دریافت می کند و اسکریپت را از روی آن اجرا می کند. از نقطه نظر فنی، اکثر مفسران جاوا اسکریپت مدرن در واقع از تکنیکی به نام کامپایل به موقع برای بهبود عملکرد استفاده می کنند. کد منبع جاوا اسکریپت در حین استفاده از اسکریپت به فرمت باینری سریعتر کامپایل می شود تا بتوان آن را در سریع ترین زمان ممکن اجرا کرد. با این حال، جاوا اسکریپت هنوز به عنوان یک زبان تفسیر شده در نظر گرفته می شود، زیرا کامپایل در زمان اجرا انجام می شود، نه زودتر از زمان.
هر دو نوع زبان مزایایی دارند، اما ما در حال حاضر در مورد آنها صحبت نمی کنیم.
کد سرور ساید در مقابل کد کلاینت ساید
ممکن است اصطلاحات کد سمت سرور و سمت سرویس گیرنده را نیز بشنوید، به خصوص در زمینه توسعه وب. کد کلاینت ساید کدی است که بر روی رایانه کاربر اجرا می شود – وقتی یک صفحه وب مشاهده می شود، کد کلاینت ساید صفحه دانلود می شود، سپس اجرا می شود و توسط مرورگر نمایش داده می شود. در این ماژول به صراحت در مورد جاوا اسکریپت کلاینت ساید صحبت می کنیم.
از طرف دیگر کد سرورساید بر روی سرور اجرا می شود، سپس نتایج آن دانلود و در مرورگر نمایش داده می شود. نمونه هایی از زبان های محبوب وب سرورساید عبارتند از PHP، Python، Ruby، ASP.NET و… جاوا اسکریپت! جاوا اسکریپت همچنین می تواند به عنوان یک زبان سرورساید استفاده شود، به عنوان مثال در محیط محبوب Node.js – می توانید اطلاعات بیشتری در مورد جاوا اسکریپت سرورساید در وب سایت های دینامیک – مبحث برنامه نویسی سرورساید کسب کنید.
کد داینامیک در مقابل استاتیک
کلمه داینامیک برای توصیف هر دو زبان جاوا اسکریپت کلاینت ساید و زبان های سرورساید استفاده می شود – به توانایی به روز رسانی صفحه وب / برنامه برای نشان دادن چیزهای مختلف در شرایط مختلف، تولید محتوای جدید در صورت لزوم اشاره دارد. به عنوان مثال. کد سرورساید به صورت پویا محتوای جدیدی را در سرور تولید می کند، کشیدن داده ها از پایگاه داده، در حالی که جاوا اسکریپت سمت کلاینت ساید به صورت پویا محتوای جدیدی را در داخل مرورگر روی مشتری تولید می کند. مثلا، ایجاد یک جدول HTML جدید، پر کردن آن با داده های درخواست شده از سرور، سپس نمایش جدول در یک صفحه وب که به کاربر نشان داده شده است. معنی در دو زمینه کمی متفاوت اما مرتبط است، و هر دو رویکرد (سرور ساید و کلاینت ساید) معمولاً با هم کار می کنند.
یک صفحه وب بدون محتوای به روز رسانی دینامیک ثابت شناخته می شود و همیشه فقط یک محتوا را نشان می دهد.
چگونه جاوا اسکریپت را به صفحه خود اضافه کنید؟
جاوا اسکریپت در صفحه HTML شما به روش مشابه CSS اعمال می شود. در حالی که CSS از عناصر <link> برای اعمال شیوه نامه های خارجی و عناصر <style> برای اعمال شیوه نامه های داخلی در HTML استفاده می کند، جاوا اسکریپت فقط به یک عنصر <script> در دنیای HTML نیاز دارد – بیایید یاد بگیریم که چگونه این کار می کند.
جاوا اسکریپت داخلی
1. اول از همه، یک کپی محلی از فایل مثال application-javascript.html ایجاد کنید. آن را در یک دایرکتوری در جایی معقول ذخیره کنید.
2. فایل را در مرورگر وب و در ویرایشگر متن خود باز کنید. خواهید دید که HTML یک صفحه وب ساده حاوی یک دکمه قابل کلیک ایجاد می کند.
3. سپس، به ویرایشگر متن خود بروید و موارد زیر را در سر خود اضافه کنید – درست قبل از خود
24. closing </head> tag:
25. <script>
26.
27. // JavaScript goes here
28.
29. </script>
9. اکنون مقداری جاوا اسکریپت را در عنصر <script> خود اضافه می کنیم تا صفحه کاری جالب تر انجام دهد — کد زیر را درست در زیر خط “// JavaScript going here” اضافه کنید:
1. document.addEventListener('DOMContentLoaded', () => {
2. function createParagraph() {
3. const para = document.createElement('p');
4. para.textContent = 'You clicked the button!';
5. document.body.appendChild(para);
6. }
7.
8. const buttons = document.querySelectorAll('button');
9.
10. for (const button of buttons) {
11. button.addEventListener('click', createParagraph);
12. }
});
23. فایل خود را ذخیره کرده و مرورگر را به روز کنید – اکنون باید ببینید که وقتی روی دکمه کلیک می کنید، یک پاراگراف جدید ایجاد شده و در زیر قرار می گیرد.
توجه: اگر به نظر می رسد که مثال شما کار نمی کند، دوباره مراحل را طی کنید و مطمئن شوید که همه چیز را درست انجام داده اید. آیا کپی محلی خود از کد شروع را به عنوان یک فایل html ذخیره کردید؟ آیا عنصر <script> خود را درست قبل از تگ </head> اضافه کردید؟ آیا جاوا اسکریپت را دقیقاً مطابق شکل وارد کردید؟ جاوا اسکریپت به حروف کوچک و بزرگ حساس است، بنابراین باید سینتکس را دقیقاً همانطور که نشان داده شده است وارد کنید، در غیر این صورت ممکن است کار نکند.
توجه: میتوانید این نسخه را در GitHub بهعنوان application-javascript-internal.html ببینید (آن را نیز به صورت زنده ببینید).
جاوا اسکریپت خارجی
این عالی کار می کند، اما اگر بخواهیم جاوا اسکریپت خود را در یک فایل خارجی قرار دهیم چه؟ بیایید این را بررسی کنیم.
1. ابتدا یک فایل جدید در همان پوشه فایل HTML نمونه خود ایجاد کنید. اسم آن را script.js بگذارید — مطمئن شوید که پسوند نام فایل js. را داشته باشد، زیرا به این ترتیب به عنوان جاوا اسکریپت شناخته می شود.
2. عنصر <script> فعلی خود را با عبارت زیر جایگزین کنید:
17. <script src="script.js" defer></script>
Copy to Clipboard
18. Inside script.js, add the following script:
19. function createParagraph() {
20. const para = document.createElement('p');
21. para.textContent = 'You clicked the button!';
22. document.body.appendChild(para);
23. }
24.
25. const buttons = document.querySelectorAll('button');
26.
27. for (const button of buttons) {
28. button.addEventListener('click', createParagraph);
}
16. مرورگر خود را ذخیره و رفرش کنید، و شما باید همان چیز قبلی را ببینید! درست به همان صورت کار می کند، اما اکنون جاوا اسکریپت خود را در یک فایل خارجی داریم. این به طور کلی از نظر سازماندهی کد شما و قابل استفاده مجدد آن در چندین فایل HTML چیز خوبی است. بعلاوه، خواندن HTML بدون ریختن تکه های عظیم اسکریپت در آن آسان تر است.
توجه: میتوانید این نسخه را در GitHub بهعنوان application-javascript-external.html و script.js ببینید.
کنترل کننده های جاوا اسکریپت درون خطی
توجه داشته باشید که گاهی اوقات با بیتهایی از کد جاوا اسکریپت واقعی در داخل HTML مواجه میشوید. ممکن است چیزی شبیه این به نظر برسد.
function createParagraph() {
const para = document.createElement('p');
para.textContent = 'You clicked the button!';
document.body.appendChild(para);
}
<button onclick="createParagraph()">Click me!</button>
به جای آن از addEventListener استفاده کنید
به جای گنجاندن جاوا اسکریپت در HTML خود، از ساختار جاوا اسکریپت خالص استفاده کنید. تابع ()querySelectorAll به شما امکان می دهد تمام دکمه های یک صفحه را انتخاب کنید. سپس میتوانید از میان دکمهها حلقه بزنید و با استفاده از ()adEventListener برای هر کدام یک کنترلر اختصاص دهید. کد این مورد در زیر نشان داده شده است:
const buttons = document.querySelectorAll('button');
for (const button of buttons) {
button.addEventListener('click', createParagraph);
}
این ممکن است کمی طولانیتر از ویژگی onclick باشد، اما برای همه دکمهها کار میکند – مهم نیست چند دکمه در صفحه وجود دارد، و یا اینکه چه تعداد اضافه یا حذف شدهاند. جاوا اسکریپت نیازی به تغییر ندارد.
توجه: نسخه application-javascript.html خود را ویرایش کنید و چند دکمه دیگر به فایل اضافه کنید. وقتی دوباره بارگذاری می کنید، باید متوجه شوید که همه دکمه ها با کلیک کردن، یک پاراگراف ایجاد می کنند.
استراتژی های بارگذاری اسکریپت
تعدادی از مسائل مربوط به بارگیری اسکریپت ها در زمان مناسب وجود دارد. هیچ چیز به این سادگی که به نظر می رسد نیست! یک مشکل رایج این است که تمام HTML یک صفحه به ترتیب ظاهر شدن بارگذاری می شود. اگر از جاوا اسکریپت برای دستکاری عناصر روی صفحه (یا به طور دقیق تر، مدل شیء سند) استفاده می کنید، اگر جاوا اسکریپت قبل از HTML بارگیری و تجزیه شود، کد شما کار نخواهد کرد.
در مثالهای کد بالا، در مثالهای داخلی و خارجی، جاوا اسکریپت بارگذاری میشود و قبل از تجزیه بدنه HTML در سر سند اجرا میشود. این ممکن است باعث خطا شود، بنابراین ما از برخی ساختارها برای دور زدن آن استفاده کرده ایم.
در مثال داخلی، می توانید این ساختار را در اطراف کد مشاهده کنید:
document.addEventListener('DOMContentLoaded', () => {
...
});
این یک شنونده رویداد است که به رویداد DOMContentLoaded مرورگر گوش می دهد، که نشان می دهد بدنه HTML کاملاً بارگذاری و تجزیه شده است. جاوا اسکریپت داخل این بلوک تا زمانی که آن رویداد فعال نشده است اجرا نمی شود، بنابراین از خطا اجتناب می شود (شما در مورد رویدادها بعداً در دوره یاد خواهید گرفت. )
در مثال خارجی، ما از ویژگی مدرنتر جاوا اسکریپت برای حل مشکل استفاده میکنیم، ویژگی defer، که به مرورگر میگوید پس از رسیدن به عنصر تگ <script> به دانلود محتوای HTML ادامه دهد.
<script src="script.js" defer></script>
در این حالت هر دو اسکریپت و HTML به طور همزمان بارگیری می شوند و کد کار می کند.
توجه: در مورد خارجی، ما نیازی به استفاده از رویداد DOMContentLoaded نداشتیم زیرا ویژگی defer مشکل را برای ما حل کرد. ما از راه حل defer برای مثال جاوا اسکریپت داخلی استفاده نکردیم زیرا defer فقط برای اسکریپت های خارجی کار می کند.
یک راه حل قدیمی برای حل این مشکل این بود که عنصر اسکریپت خود را درست در پایین بدنه قرار دهید (به عنوان مثال درست قبل از تگ <body/>)، به طوری که پس از تجزیه تمام HTML بارگیری شود. مشکل این راه حل این است که بارگیری/تجزیه اسکریپت تا زمانی که HTML DOM بارگیری نشده باشد کاملاً مسدود می شود. در سایتهای بزرگتر با جاوا اسکریپت زیاد، این میتواند باعث یک مشکل عملکرد بزرگ شود و سرعت سایت شما را کند کند.
async و به تعویق انداختن
در واقع دو ویژگی مدرن وجود دارد که می توانیم از آنها برای دور زدن مشکل اسکریپت مسدود کردن استفاده کنیم – async و defer (که در بالا دیدیم). بیایید به تفاوت بین این دو نگاه کنیم.
اسکریپتهایی که با استفاده از ویژگی async بارگیری میشوند، اسکریپت را بدون مسدود کردن صفحه در هنگام واکشی اسکریپت دانلود میکنند. با این حال، هنگامی که دانلود کامل شد، اسکریپت اجرا می شود، که صفحه را از رندر مسدود می کند. شما هیچ تضمینی دریافت نمی کنید که اسکریپت ها به ترتیب خاصی اجرا شوند. زمانی که اسکریپت های صفحه به طور مستقل از یکدیگر اجرا می شوند و به هیچ اسکریپت دیگری در صفحه وابسته نیستند، بهتر است از async استفاده کنید.
اسکریپت های بارگذاری شده با ویژگی defer به ترتیب ظاهر شدن در صفحه بارگیری می شوند. تا زمانی که محتوای صفحه همه بارگذاری نشود، اجرا نمیشوند و اگر اسکریپتهای شما به DOM در محل بستگی داشته باشند، مفید خواهند بود (مثلاً یک یا چند عنصر را در صفحه تغییر میدهند).
در اینجا یک نمایش بصری از روش های مختلف بارگذاری اسکریپت و معنای آن برای صفحه شما آورده شده است:
<script async src="js/vendor/jquery.js"></script>
<script async src="js/script2.js"></script>
<script async src="js/script3.js"></script>
شما نمی توانید به ترتیبی که اسکریپت ها در آن بارگذاری می شوند تکیه کنید. jquery.js ممکن است قبل یا بعد از script2.js و script3.js بارگیری شود و اگر اینطور باشد، هر عملکردی در آن اسکریپت ها بسته به jquery یک خطا ایجاد می کند زیرا jquery در زمان اجرای اسکریپت تعریف نخواهد شد.
از async باید زمانی استفاده شود که شما یک دسته از اسکریپت های پس زمینه برای بارگیری دارید و فقط می خواهید آنها را در اسرع وقت در جای خود قرار دهید. به عنوان مثال، ممکن است شما چند فایل داده بازی برای بارگیری داشته باشید، که زمانی که بازی واقعاً شروع می شود به آنها نیاز خواهد بود، اما در حال حاضر فقط می خواهید به نمایش مقدمه، عناوین و لابی بازی ادامه دهید، بدون اینکه آنها توسط بارگذاری اسکریپت مسدود شوند.
اسکریپت های بارگذاری شده با استفاده از ویژگی defer (به زیر مراجعه کنید) به ترتیبی که در صفحه ظاهر می شوند اجرا می شوند و به محض دانلود اسکریپت و محتوا، اجرا می شوند:
<script defer src="js/vendor/jquery.js"></script>
<script defer src="js/script2.js"></script>
<script defer src="js/script3.js"></script>
در مثال دوم، میتوانیم مطمئن باشیم که jquery.js قبل از script2.js و script3.js و script2.js قبل از script3.js بارگیری میشود. تا زمانی که محتوای صفحه همه بارگذاری نشود، اجرا نمیشوند، که اگر اسکریپتهای شما به DOM در جای خود بستگی داشته باشند، مفید است (مثلاً یکی از عناصر بیشتری را در صفحه تغییر میدهند.)
به طور خلاصه:
async و defer هر دو به مرورگر دستور می دهند تا اسکریپت(های) را در یک رشته جداگانه دانلود کند، در حالی که بقیه صفحه (DOM و غیره) در حال دانلود است، بنابراین بارگیری صفحه در طول فرآیند واکشی مسدود نمی شود.
اسکریپت های دارای ویژگی async به محض تکمیل دانلود اجرا می شوند. این صفحه را مسدود می کند و هیچ دستور اجرای خاصی را تضمین نمی کند.
اسکریپتهای دارای ویژگی defer به ترتیبی که هستند بارگیری میشوند و تنها زمانی اجرا میشوند که همه چیز بارگذاری تمام شود
اگر اسکریپت های شما باید فورا اجرا شوند و هیچ وابستگی ندارند، از async استفاده کنید.
اگر اسکریپتهای شما باید منتظر تجزیه بمانند و به اسکریپتهای دیگر و/یا DOM در جای خود وابسته باشند، آنها را با استفاده از defer بارگیری کنید و عناصر <script> متناظر آنها را به ترتیبی که میخواهید مرورگر آنها را اجرا کند قرار دهید.
کامنتها: مانند HTML و CSS، این امکان وجود دارد که کامنت ها را در کد جاوا اسکریپت خود بنویسید که توسط مرورگر نادیده گرفته می شود و برای ارائه دستورالعمل هایی به توسعه دهندگان همکار خود در مورد نحوه کار کد (و شما، اگر بعد از آن به کد خود بازگردید) وجود دارد. شش ماه و نمی توانم به یاد بیاورم که چه کار کرده اید). کامنت ها بسیار مفید هستند، و شما باید اغلب از آنها استفاده کنید، به خصوص برای برنامه های بزرگتر. دو نوع وجود دارد:
یک کامنت تک خطی بعد از یک اسلش دوبل رو به جلو (//) نوشته می شود، به عنوان مثال.
// I am a comment
یک کامنت چند خطی بین رشته های /* و */ نوشته می شود، به عنوان مثال.
/*
I am also
a comment
*/
برای مثال، میتوانیم جاوا اسکریپت آخرین نسخه نمایشی خود را با نظراتی مانند این حاشیهنویسی کنیم:
// Function: creates a new paragraph and appends it to the bottom of the HTML body.
function createParagraph() {
const para = document.createElement('p');
para.textContent = 'You clicked the button!';
document.body.appendChild(para);
}
/*
اگر کلیدی را بفشارید( هر کلیدی) عملکرد.createParagraph() اجراءخواهد شد
*/
const buttons = document.querySelectorAll('button');
for (const button of buttons) {
button.addEventListener('click', createParagraph);
وب بدون جاوا اسکریپت چگونه خواهد بود؟
بدون جاوا اسکریپت، HTML و CSS تمام چیزی است که در وب خواهید داشت که صرفا شما را به چند پیاده سازی صفحه وب محدود می کند. 90٪ (اگر نه بیشتر) از صفحات وب شما ثابت خواهد بود، و شما فقط تغییرات پویا مانند انیمیشن هایی که CSS ارائه می دهد خواهید داشت.
چگونه جاوا اسکریپت همه چیز را دینامیک می کند
HTML ساختار سند وب شما و محتوای آن را تعریف می کند. CSS سبک های مختلفی را برای محتویات ارائه شده در سند وب اعلام می کند.
HTML و CSS اغلب به جای زبان برنامه نویسی، زبان نشانه گذاری نامیده می شوند، زیرا آنها در هسته خود نشانه گذاری هایی را برای اسناد با پویایی بسیار کمی ارائه می دهند.
از سوی دیگر، جاوا اسکریپت یک زبان برنامه نویسی پویا است که از محاسبات ریاضی پشتیبانی می کند، به شما امکان می دهد به صورت پویا محتویات HTML را به DOM اضافه کنید، اعلان های سبک دینامیک ایجاد کنید، مطالب را از یک وب سایت دیگر منتقل کنید و …
قبل از اینکه به نحوه انجام همه این کارها توسط جاوا اسکریپت بپردازیم، اجازه دهید به یک مثال سریع نگاه کنیم.
این کدپن را بررسی کنید: https://codepen.io/Dillion/full/XWjvdMG
در کدپن، خواهید دید که وقتی در فیلد ورودی تایپ می کنید، متن روی صفحه نمایش داده می شود. که این ویژگی توسط جاوا اسکریپت ممکن شده است. شما نمی توانید این ویژگی را با HTML، CSS و یا هر دوی آنها با هم دریافت کنید.
جاوا اسکریپت می تواند بسیار بیشتر از آنچه که ما در این مقاله پوشش می دهیم مفید باشد. برای شروع کار با JS، به موارد زیر می پردازیم:
- نحوه استفاده از جاوا اسکریپت در HTML
- انواع داده
- متغیرها
- نظرات
- کارکردها
نحوه استفاده از جاوا اسکریپت در HTML
درست مانند CSS، جاوا اسکریپت را می توان در HTML به روش های مختلفی استفاده کرد، مانند:
1- جاوا اسکریپت درون خطی Inline JavaScript
در اینجا، کد جاوا اسکریپت را در تگ های HTML در برخی ویژگی های خاص مبتنی بر JS دارید.
به عنوان مثال، تگهای HTML دارای event attributes هستند که به شما امکان میدهند هنگام راهاندازی رویداد، مقداری کد را به صورت درون خطی اجرا کنید. منظوراین است:
<button onclick="alert('You just clicked a button')">Click me!</button>
این نمونه ای از جاوا اسکریپت درون خطی است. مقدار onclick می تواند مقداری محاسبه Match باشد، یک افزوده دینامیک به DOM – هر syntax-valid JavaScript code.
2- جاوا اسکریپت داخلی، با تگ اسکریپت
درست مانند استایل تگ برای اعلان های استایل در یک صفحه HTML، برای جاوا اسکریپت نیز تگ اسکریپت وجود دارد. در اینجا نحوه استفاده از آن آمده است:
<script>
} ()function
alert("I am inside a script tag")
}
</script>
3- جاوا اسکریپت خارجی
ممکن است بخواهید کد جاوا اسکریپت خود را در فایل دیگری داشته باشید. جاوا اسکریپت خارجی این اجازه را می دهد. برای این موارد نحوه عمل اینگونه است:
<!-- index.html -->
<script src="./script.js"></script>
script.js//
;alert("I am inside an external file")
ویژگی src تگ اسکریپت به شما امکان می دهد یک منبع برای کد جاوا اسکریپت اعمال کنید. این مرجع مهم است زیرا به مرورگر اطلاع می دهد که محتوای script.js را نیز فتچ (واکشی) کند.
script.js می تواند در یک فهرست با index.html باشد، یا می توان آن را از وب سایت دیگری دریافت کرد. برای مورد دوم، باید URL کامل (https://…/script.js) را ارسال کنید.
به پسوند js. توجه کرده اید؟ این پسوند فایل های جاوا اسکریپت است، درست مانند HTML که دارای html. است.
اکنون که راههای اعمال جاوا اسکریپت در HTML خود را بررسی کردیم، اجازه دهید به برخی از ویژگیهای جاوا اسکریپت را بپردازیم
انواع داده در جاوا اسکریپت
در جاوا اسکریپت، داده ها باید از یک نوع باشند. جاوا اسکریپت باید این هماهنگی را شناسایی کند تا بداند چگونه از آن با داده های دیگر استفاده کند یا چگونه روی چنین داده هایی کار کند.
در اینجا انواع داده های اساسی که جاوا اسکریپت پشتیبانی می کند آورده شده است:
- عدد (به عنوان مثال، 6، 7، 8.9): که می توانید عملیات حسابی (مانند جمع) و بسیاری موارد دیگر را روی آن اعمال کنید.
- رشته (استرینگ) (مانند “جاوا اسکریپت”، “یک جمله طولانی”، یک پاراگراف کوتاه): هر چیزی که بین نقل قول های تکی (‘…’)، نقل قول های دوتایی (“…”) و بکتیک ها (…) یافت می شود. هیچ تفاوتی بین نقل قول های تکی و دوگانه وجود ندارد، اما بکتیک ها دارای ویژگی های بیشتری هستند، مانند:
- درون یابی متغیرها در رشته ها، مانند: نام من ${name} است. name در اینجا یک متغیر است که به رشته تزریق می شود.
- رشته های چند خطی. با نقل قول های معمولی، باید کاراکترهای فرار مانند \n را برای یک خط جدید اضافه کنید، اما بکتیک ها به شما این امکان را می دهند که رشته خود را در خط دیگری ادامه دهید، مانند این:
let str = `I am a
;`multiline string
- Boolean (فقط می تواند دارای دو مقدار باشد: true یا false): بیشتر شبیه بله (درست) یا خیر (نادرست)
- آرایه (به عنوان مثال، [1, 2, “hello”, false]): گروهی از داده ها (که می توانند از هر نوع باشند، از جمله آرایه ها) که با کاما از هم جدا می شوند. نمایه سازی از 0 شروع می شود. دسترسی به محتوای چنین گروهی می تواند مانند این باشد: array[0]، که برای این مثال 1 را برمی گرداند، زیرا اولین مورد است.
- Object (به عنوان مثال {name: ‘javascript’, age: 5}): همچنین گروهی از داده ها اما به شکل یک جفت key:value. کلید باید یک رشته باشد و مقدار آن می تواند هر نوعی باشد که هرگونه آبجکن دیگری را میتواند شامل شود.دسترسی به محتوای گروه با کلید انجام می شود، برای مثال obj.age یا obj[“age”] 5 را برخواهد گرداند.
- تعریف نشده (تنها داده ای که این نوع پشتیبانی می کند undefined می باشد ): این داده را می توان به طور صریح به یک متغیر اختصاص داد، یا به طور ضمنی (توسط جاوا اسکریپت) اگر متغیری اعلام شده باشد اما مقداری به آن اختصاص داده نشده باشد. در ادامه این مقاله، اعلان متغیر و تخصیص مقدار را بررسی خواهیم کرد.
- Null (تنها داده ای که این نوع پشتیبانی می کند null است): Null به این معنی است که هیچ مقداری وجود ندارد. دارای یک مقدار است، اما نه یک مقدار واقعی – بلکه تهی است.
- Function (برای مثال function(){ console.log(“function”) }): یک تابع یک نوع داده است که هنگام فراخوانی یک بلوک از کد را فراخوانی می کند. در مورد توابع در ادامه این مقاله بیشتر صحبت خواهیم کرد.
درک انواع داده جاوا اسکریپت ممکن است کمی پیچیده باشد. شاید شنیده باشید که آرایه ها و توابع نیز شی هستند و این درست است.
درک این موضوع مستلزم درک ماهیت نمونه های اولیه جاوا اسکریپت است. اما، در سطح پایه، اینها انواع داده هایی هستند که ابتدا باید در جاوا اسکریپت بدانید.
متغیرها در جاوا اسکریپت
متغیرها محفظه هایی برای مقادیر هر نوع داده ای هستند. آنها مقادیری را به گونه ای نگه می دارند که وقتی از متغیرها استفاده می شود، جاوا اسکریپت از مقداری که آنها برای آن عملیات نشان می دهند استفاده نماید.
متغیرها را می توان اعلام کرد و می توان به آنها یک مقدار اختصاص داد. هنگامی که یک متغیر را اعلام می کنید، این کار را انجام می دهید:
;let name
برای موارد فوق، نام اعلام شده است، اما هنوز مقداری ندارد.
همانطور که از بخش انواع داده انتظار دارید، جاوا اسکریپت به طور خودکار مقدار undefined را به name اختصاص می دهد. بنابراین اگر سعی کنید از name در هر جایی استفاده کنید، undefined برای آن عملیات استفاده خواهد شد.
در اینجا به معنای اختصاص دادن یک مقدار به یک متغیر است:
;let name
;"name = "JavaScript
حالا اگر از name استفاده کنید، نشان دهنده جاوا اسکریپت خواهد بود.
اعلامیه ها و تکالیف را می توان در یک خط انجام داد مانند:
;"let name = "JavaScript
ممکن است از خود پرسیده باشید چرا let ؟ دلیل آن این است: جاوا اسکریپت از سه روش اعلان متغیرها پشتیبانی می کند که عبارتند از:
- عملگر var: این از همان زمان آغاز به کار با جاوا اسکریپت همراه بوده است. شما می توانید متغیرها را اعلام کنید و مقادیری را به آنها اختصاص دهید که می توانند بعداً در کد تغییر کنند. منظور این است:
;"var name = "JavaScript
;"name = "Language
- عملگر let: این عملگر نیز بسیار شبیه var است – مقادیری را به متغیرهایی که میتوانند بعداً در کد تغییر دهند، اعلام و تخصیص میدهد. تفاوت عمده بین این اپراتورها این است که var چنین متغیرهایی را بالا می کشد، در حالی که let نمی کند. مفهوم بالابر را می توان به طور خلاصه با کد زیر توضیح داد:
}()function print
;console.log(name)
;console.log(age)
;"var name = "JavaScript
;let age = 5
{
;()print
هنگام فراخوانی تابع چاپ (()print)، اولین console.log به صورت تعریف نشده چاپ می شود در حالی که دومین console.log این خطا را نشان می دهد که “نمی توان به age قبل از مقداردهی اولیه دسترسی پیدا کرد”.
این به این دلیل است که اعلان متغیر name به بالای تابع بالا می رود (بالا می رود) و تخصیص متغیر در همان خط باقی می ماند در حالی که اعلان age و انتساب در همان خط می ماند.
در اینجا نحوه کامپایل کد بالا آمده است:
}()function print
;var name
;console.log(name)
;console.log(age)
;"name = "JavaScript
;let age = 5
}
;()print
مشکلات بالابر ممکن است به طور غیرمنتظره ای رخ دهد، و به همین دلیل است که باید به جای var از let استفاده کنید.
- عملگر const: این عملگر نیز متغیرها را بالا نمیبرد، اما یک کار دیگر را انجام میدهد: تضمین میکند که به یک متغیر نمیتوان مقدار دیگری غیر از آنچه در زمان اولیه اختصاص داده شده است، اختصاص داد.
مثلا:
let name = "JavaScript"
name = "Language" // no errors
const age = 5
age = 6 // error, cannot reassign variable
کامنت ها در جاوا اسکریپت
درست مانند HTML، گاهی اوقات ممکن است بخواهیم یادداشتی را در کنار کد خود قرار دهیم که نیازی به اجرا نداشته باشد.
ما می توانیم این کار را در جاوا اسکریپت به دو صورت انجام دهیم:
- با نظرات تک خطی، مانند این: // نظر تک خطی
- یا با نظرات چند خطی، مانند این:
*/
a multi
line comment
/*
توابع در جاوا اسکریپت
با توابع، می توانید بلوکی از کد را که می تواند در مکان های دیگر در کد خود استفاده شود، ذخیره نمایید. فرض کنید می خواهید “جاوا اسکریپت” و “زبان” را در مکان های مختلف کد خود چاپ کنید. به جای انجام این کار:
console.log("JavaScript")
console.log("Language")
some things here//
console.log("JavaScript")
console.log("Language")
more things here//
console.log("JavaScript")
console.log("Language")
این عملیات را انجام دهید:
}()function print
console.log("JavaScript")
console.log("Language")
{
()print
some things here//
()print
more things here//
()print
به این ترتیب، بلوک کد مکرر را در یک تابع ذخیره کرده ایم که می تواند در هر کجا که بخواهیم استفاده شود. اما این همه ماجرا نیست. فرض کنید می خواستیم میانگین سه عدد را پیدا کنیم. کد برای این عملیات:
let num1 = 5
let num2 = 6
let num3 = 8
let average = (num1 + num2 + num3) / 3
انجام این کار خارج از یک عملکرد ممکن است ضرری نداشته باشد، اما اگر مجبور بودیم این کار را در بسیاری از جاها انجام دهیم چه؟ سپس، ما یک تابع مانند این خواهیم داشت:
}function findAverage(n1, n2, n3)
let aver = (n1 + n2 + n3) / 3
return aver
{
let num1 = 5
let num2 = 6
let num3 = 8
let average = findAverage(num1, num2, num3)
later on, somewhere else//
(...)let average2 = findAverage
later on, somewhere else//
(...)let average3 = findAverage
همانطور که در اعلان findAverage متوجه خواهید شد، ما n1، n2، n3 در پرانتز داریم. اینها پارامترهایی هستند که به عنوان مکان نگهدار برای مقادیری عمل می کنند که هنگام فراخوانی تابع ارائه می شوند.
بلوک کد از این متغیرها برای یافتن میانگین استفاده می کند و کلمه کلیدی بازگشتی میانگین را از تابع برمی گرداند.
Placeholders توابع شما را قابل استفاده مجدد میکنند به طوری که مقادیر مختلف در زمانهای مختلف میتواند برای استفاده از منطق یکسان به توابع ارسال شود.
چگونه جاوا اسکریپت همه چیز را داینامیک می کند
HTML ساختار سند وب شما و محتوای آن را تعریف می کند. CSS سبک های مختلفی را برای محتویات ارائه شده در سند وب اعلام می کند.
HTML و CSS اغلب به جای زبان برنامه نویسی، زبان نشانه گذاری نامیده می شوند، زیرا آنها در هسته خود نشانه گذاری هایی را برای اسناد با پویایی بسیار کمی ارائه می دهند.
از سوی دیگر، جاوا اسکریپت یک زبان برنامه نویسی پویا است که از محاسبات ریاضی پشتیبانی می کند، به شما امکان می دهد به صورت پویا محتویات HTML را به DOM اضافه کنید، اعلان های سبک داینامیک ایجاد کنید، مطالب را از یک وب سایت دیگر منتقل کنید و …
قبل از اینکه به نحوه انجام همه این کارها توسط جاوا اسکریپت بپردازیم، اجازه دهید به یک مثال سریع نگاه کنیم.
این کدپن را بررسی کنید: https://codepen.io/Dillion/full/XWjvdMG |
در کدپن، خواهید دید که وقتی در فیلد ورودی تایپ می کنید، متن روی صفحه نمایش داده می شود. که این ویژگی توسط جاوا اسکریپت ممکن شده است. شما نمی توانید این ویژگی را با HTML، CSS و یا هر دوی آنها با هم دریافت کنید.
جاوا اسکریپت می تواند بسیار بیشتر از آنچه که ما در این مقاله پوشش می دهیم مفید باشد. برای شروع کار با JS، به موارد زیر می پردازیم:
- نحوه استفاده از جاوا اسکریپت در HTML
- انواع داده
- متغیرها
- کامنت ها
- تابع ها
نحوه استفاده از جاوا اسکریپت در HTML
درست مانند CSS، جاوا اسکریپت را می توان در HTML به روش های مختلفی استفاده کرد، مانند:
1- اضافه کردن کدها بصورت درون خطی Inline JavaScript
در اینجا، کد جاوا اسکریپت را در تگ های HTML در برخی ویژگی های خاص مبتنی بر JS دارید.
به عنوان مثال، تگهای HTML دارای event attributes هستند که به شما امکان میدهند هنگام راهاندازی رویداد، مقداری کد را به صورت درون خطی اجرا کنید. منظوراین است:
<button onclick="alert('You just clicked a button')">Click me!</button>
این نمونه ای از جاوا اسکریپت درون خطی است. مقدار onclick می تواند مقداری محاسبه Match باشد، یک افزوده دینامیک به DOM – هر سینتکس معتبری از کد جاوا اسکریپت باشد.
2- اضافه کردن کدها بصورت داخلی، با تگ اسکریپت
درست مانند استایل تگ برای اعلان های استایل در یک صفحه HTML، برای جاوا اسکریپت نیز تگ اسکریپت وجود دارد. در اینجا نحوه استفاده از آن آمده است:
<script>
}()function
alert("I am inside a script tag")
{
</script>
3- اضافه کردن بصورت فایل خارجی
ممکن است بخواهید کد جاوا اسکریپت خود را در فایل دیگری داشته باشید. برای این موارد نحوه عمل اینگونه است:
<-- index.html --!>
<script src="./script.js"></script>
script.js//
;alert("I am inside an external file")
ویژگی src تگ اسکریپت به شما امکان می دهد یک منبع برای کد جاوا اسکریپت اعمال کنید. این مرجع مهم است زیرا به مرورگر اطلاع می دهد که محتوای script.js را نیز واکشی کند.
script.js می تواند در یک فهرست با index.html باشد، یا می توان آن را از وب سایت دیگری دریافت کرد. برای مورد دوم، باید URL کامل (https://…/script.js) را ارسال کنید.
به پسوند js. توجه کرده اید؟ این پسوند فایل های جاوا اسکریپت است، درست مانند HTML که دارای html. است.
اکنون که راههای اعمال جاوا اسکریپت در HTML خود را بررسی کردیم، اجازه دهید به برخی از ویژگیهای جاوا اسکریپت بپردازیم.
انواع داده
در جاوا اسکریپت، داده ها باید از یک نوع باشند. جاوا اسکریپت باید این هماهنگی را شناسایی کند تا بداند چگونه از آن با داده های دیگر استفاده کند یا چگونه روی چنین داده هایی کار کند.
در اینجا انواع داده های اصلی که جاوا اسکریپت پشتیبانی می کند آورده شده است:
- عدد (به عنوان مثال، 6، 7، 8.9): که می توانید عملیات حسابی (مانند جمع) و بسیاری موارد دیگر را روی آن اعمال کنید.
- رشته (مانند “جاوا اسکریپت”، “یک جمله طولانی”، یک پاراگراف کوتاه): هر چیزی که بین نقل قول های تکی (‘…’)، نقل قول های دوتایی (“…”) و بکتیک ها (…) یافت می شود. هیچ تفاوتی بین نقل قول های تکی و دوگانه وجود ندارد، اما بکتیک ها دارای ویژگی های بیشتری هستند، مانند:
- درون یابی متغیرها در رشته ها، مانند: نام من ${name} است. name در اینجا یک متغیر است که به رشته تزریق می شود.
- رشته های چند خطی. با نقل قول های معمولی، باید کاراکترهای فرار مانند \n را برای یک خط جدید اضافه کنید، اما بکتیک ها به شما این امکان را می دهند که رشته خود را در خط دیگری ادامه دهید، مانند این:
let str = `I am a
;`multiline string
- Boolean (فقط می تواند دارای دو مقدار باشد: true یا false): بیشتر شبیه بله (درست) یا خیر (نادرست)
- آرایه (به عنوان مثال، [1, 2, “hello”, false]): گروهی از داده ها (که می توانند از هر نوع باشند، از جمله آرایه ها) که با کاما از هم جدا می شوند. شمارش از “0” شروع می شود. دسترسی به محتوای چنین گروهی می تواند مانند این باشد: array[0]، که برای این مثال 1 را برمی گرداند، زیرا اولین مورد است.
- Object (به عنوان مثال {name: ‘javascript’, age: 5}): همچنین گروهی از داده ها اما به شکل یک جفت key:value. کلید باید یک رشته باشد و مقدار آن می تواند هر نوعی باشد که هرگونه آبجکت دیگری را میتواند شامل شود.دسترسی به محتوای گروه با کلید انجام می شود، برای مثال obj.age یا obj[“age”], هر دو مورد 5 را بر خواهدگرداند.
- تعریف نشده (تنها داده ای که این نوع پشتیبانی می کند undefinedمی باشد ): این داده را می توان به طور صریح به یک متغیر اختصاص داد، یا به طور ضمنی (توسط جاوا اسکریپت) اگر متغیری اعلام شده باشد اما مقداری به آن اختصاص داده نشده باشد. در ادامه این مقاله، اعلان متغیر و تخصیص مقدار را بررسی خواهیم کرد.
- Null (تنها داده ای که این نوع پشتیبانی می کند null است): Null به این معنی است که هیچ مقداری وجود ندارد. دارای یک مقدار است، اما نه یک مقدار واقعی – بلکه تهی است.
- Function (برای مثال function(){ console.log(“function”) }): یک تابع یک نوع داده است که هنگام فراخوانی یک بلوک از کد را فراخوانی می کند. در مورد توابع در ادامه این مقاله بیشتر صحبت خواهیم کرد.
درک انواع داده جاوا اسکریپت ممکن است کمی پیچیده باشد. شاید شنیده باشید که آرایه ها و توابع نیز شی هستند و این درست است.
درک این موضوع مستلزم درک ماهیت نمونه های اولیه جاوا اسکریپت است. اما، در سطح پایه، اینها انواع داده هایی هستند که ابتدا باید در جاوا اسکریپت بدانید.
متغیرها
متغیرها محفظه هایی برای مقادیر هر نوع داده ای هستند. آنها مقادیری را به گونه ای نگه می دارند که وقتی از متغیرها استفاده می شود، جاوا اسکریپت از مقداری که آنها برای آن عملیات نشان می دهند استفاده نماید.
متغیرها را می توان اعلام کرد و می توان به آنها یک مقدار اختصاص داد. هنگامی که یک متغیر را اعلام می کنید، این کار را انجام می دهید:
;let name
برای موارد فوق، نام اعلام شده است، اما هنوز مقداری ندارد.
همانطور که از بخش انواع داده انتظار دارید، جاوا اسکریپت به طور خودکار مقدار undefined را به name اختصاص می دهد. بنابراین اگر سعی کنید از name در هر جایی استفاده کنید، undefined برای آن عملیات استفاده خواهد شد.
در اینجا به معنای اختصاص دادن یک مقدار به یک متغیر است:
;let name
;"name = "JavaScript
حالا اگر از name استفاده کنید، نشان دهنده جاوا اسکریپت خواهد بود.
نوع و مقدار را می توان در یک خط انجام داد مانند:
;"let name = "JavaScript
ممکن است از خود پرسیده باشید چرا let ؟ دلیل آن این است: جاوا اسکریپت از سه روش اعلان متغیرها پشتیبانی می کند که عبارتند از:
- عملگر var: این از همان زمان آغاز به کار با جاوا اسکریپت همراه بوده است. شما می توانید متغیرها را اعلام کنید و مقادیری را به آنها اختصاص دهید که می توانند بعداً در کد تغییر کنند. منظور این است:
;"var name = "JavaScript
;"name = "Language
- عملگر let: این عملگر نیز بسیار شبیه var است – مقادیری را به متغیرهایی که میتوانند بعداً در کد تغییر دهند، اعلام و تخصیص میدهد. تفاوت عمده بین این اپراتورها این است که var را می توان اگر خارج از تابع تعریف شده باشد به آن دسترسی داشت اما در مورد متغییر let اینطور نیست این مفهوم را می توان به طور خلاصه با کد زیر توضیح داد:
}()function print
;console.log(name)
;console.log(age)
;"var name = "JavaScript
; let age = 5
{
;()print
هنگام فراخوانی تابع چاپ (()print)، اولین console.log به صورت تعریف نشده چاپ می شود در حالی که دومین console.log این خطا را نشان می دهد که “نمی توان به age قبل از مقداردهی اولیه دسترسی پیدا کرد”.(“Cannot access age
before initialization”)
این به این دلیل است که اعلان متغیر name به بالای تابع بالا می رود و تخصیص متغیر در همان خط باقی می ماند در حالی که اعلان age و انتساب در همان خط می ماند.
در اینجا نحوه کامپایل کد بالا آمده است:
}()function print
;var name
;console.log(name)
;console.log(age)
;"name = "JavaScript
;let age = 5
{
;()print
مشکلات بالابر(منظور تعریف متغییر بصورت global است) ممکن است به طور غیرمنتظره ای رخ دهد، و به همین دلیل است که باید به جای var از let استفاده کنید.
- عملگر const: عملگر ثابت این عملگر نیز متغیرها را بالا نمیبرد، اما یک کار دیگر را انجام میدهد: تضمین میکند که به یک متغیر نمیتوان مقدار دیگری غیر از آنچه در زمان اولیه اختصاص داده شده است، اختصاص داد.
مثلا:
;"let name = "JavaScript
name = "Language" // no errors
;const age = 5
age = 6 // error, cannot reassign variable
کامنت ها
درست مانند HTML، گاهی اوقات ممکن است بخواهیم یادداشتی را در کنار کد خود قرار دهیم که نیازی به اجرا نداشته باشد.
ما می توانیم این کار را در جاوا اسکریپت به دو صورت انجام دهیم:
- با نظرات تک خطی، مانند این: // نظر تک خطی
- یا با نظرات چند خطی، مانند این:
*/
a multi
line comment
/*
توابع
با توابع، می توانید بلوکی از کد را که می تواند در مکان های دیگر در کد خود استفاده شود،ذخیره نمایید. فرض کنید می خواهید “جاوا اسکریپت” و “زبان” را در مکان های مختلف کد خود چاپ کنید. به جای انجام این کار:
console.log("JavaScript")
console.log("Language")
// some things here
console.log("JavaScript")
console.log("Language")
// more things here
console.log("JavaScript")
console.log("Language")
این عملیات را انجام دهید:
}()function print
console.log("JavaScript")
console.log("Language")
}
()print
// some things here
()print
// more things here
()print
به این ترتیب، بلوک کد مکرر را در یک تابع ذخیره کرده ایم که می تواند در هر کجا که بخواهیم استفاده شود. اما این همه ماجرا نیست. فرض کنید می خواستیم میانگین سه عدد را پیدا کنیم. کد برای این عملیات:
let num1 = 5
let num2 = 6
let num3 = 8
let average = (num1 + num2 + num3) / 3
انجام این کار خارج از یک عملکرد ممکن است ضرری نداشته باشد، اما اگر مجبور بودیم این کار را در بسیاری از جاها انجام دهیم چه؟ سپس، ما یک تابع مانند این خواهیم داشت:
}function findAverage(n1, n2, n3)
let aver = (n1 + n2 + n3) / 3
return aver
}
let num1 = 5
let num2 = 6
let num3 = 8
let average = findAverage(num1, num2, num3)
later on, somewhere else//
(...)let average2 = findAverage
later on, somewhere else//
(...)let average3 = findAverage
همانطور که در اعلان findAverage متوجه خواهید شد، ما n1، n2، n3 در پرانتز داریم. اینها پارامترهایی هستند که به عنوان مکان نگهدار برای مقادیری عمل می کنند که هنگام فراخوانی تابع ارائه می شوند.
بلوک کد از این متغیرها برای یافتن میانگین استفاده می کند و کلمه کلیدی بازگشتی میانگین را از تابع برمی گرداند.
Placeholders توابع شما را قابل استفاده مجدد میکنند به طوری که مقادیر مختلف در زمانهای مختلف میتواند برای استفاده از منطق یکسان به توابع ارسال شود.
دیدگاهتان را بنویسید