همه چیز در مورد جاوا اسکریپت

سطح تعریف سطح بالا

جاوا اسکریپت یک اسکریپت یا زبان برنامه نویسی است که به شما امکان می دهد چیزهای پیچیده را در صفحات وب پیاده سازی کنید - هر بار یک صفحه وب بیش از آن که فقط نشسته و نمایش اطلاعات استاتیک را برای شما به نمایش بگذارد - به روز رسانی محتوای به موقع، نقشه های تعاملی، انیمیشن 2D / گرافیک سه بعدی، اسکرول کردن jukebox های ویدئویی، و غیره - شما می توانید شرط بگذارید که جاوا اسکریپت احتمالا درگیر است. این سومین لایه کیک لایه ای از فناوری های وب استاندارد است که دو مورد از آنها (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() {
  let name = prompt('Enter a new name');
  para.textContent = 'Player 1: ' + name;
}

سعی کنید بر روی این آخرین نسخه از برچسب متن کلیک کنید تا ببینید چه اتفاقی می افتد (همچنین توجه داشته باشید که می توانید این نسخه ی نمایشی را در GitHub پیدا کنید - کد منبع را مشاهده کنید یا آن را اجرا کنید)!

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

پس چه می تواند واقعا انجام دهد؟

 بخشزبان اصلی جاوا اسکریپت شامل برخی از ویژگی های برنامه نویسی رایج است که به شما اجازه می دهد تا موارد زیر را انجام دهید:

ارزش های مفید داخل متغیرها را ذخیره کنید. در مثال بالا به عنوان مثال، ما از یک نام جدید برای وارد شدن درخواست می کنیم و سپس آن نام را در یک متغیر نام نام ذخیره می کنیم.

عملیات بر روی تکه های متن (به نام "رشته ها" در برنامه نویسی). در مثال بالا ما رشته "Player 1:" را می گیریم و برای ایجاد برچسب متن کامل به نام متغیر نام می رویم، به عنوان مثال '' پخش 1: کریس '.

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

و خیلی بیشتر!

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

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

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

DOM (Document Object Model) API به شما اجازه می دهد تا HTML و CSS را دستکاری کنید، ایجاد، حذف و تغییر HTML، استفاده از پویا سبک های جدید به صفحه خود و غیره هر بار که یک پنجره ظاهر می شود بر روی یک صفحه ظاهر می شود و یا برخی از محتوای جدید نمایش داده می شود برای مثال، همانطور که در نسخه ی نمایشی ساده ما مشاهده کردیم، DOM در عمل است.

API جغرافیایی اطلاعات جغرافیایی را بازیابی می کند. این است که چگونه نقشه های گوگل قادر به پیدا کردن مکان شما و نقشه آن را بر روی نقشه.

API Canvas و WebGL به شما امکان می دهد گرافیک متحرک 2D و 3D را ایجاد کنید. افراد با استفاده از این فناوری های وب، چیزهای شگفت انگیزی را انجام می دهند - آزمایش های Chrome و نمونه های وب را ببینید.

API های صوتی و تصویری مانند HTMLMediaElement و WebRTC به شما این امکان را می دهند که چیزهای جالب و جالب دیگری را با چند رسانه ای مانند پخش صوتی و تصویری درست در یک صفحه وب و یا گرفتن عکس از دوربین وب خود و نمایش آن بر روی کامپیوتر شخصی دیگر (امتحان Snapshot ساده ما امتحان کنید) برای دریافت این ایده)

توجه داشته باشید: بسیاری از نسخه های بالا در مرورگر قدیمی کار نمی کنند - هنگام آزمایش، ایده خوبی است که از مرورگر مدرن مانند فایرفاکس، کروم، لبه یا اپرا برای اجرای کد خود استفاده کنید. شما باید تست مرورگر متقابل را در نظر بگیرید جزئیات بیشتری را در هنگام ارسال کد تولید (یعنی کد واقعی که مشتریان واقعی استفاده می کنند) نزدیک تر می کند.

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

API توییتر شما اجازه می دهد تا چیزهایی مانند نمایش آخرین توییت های خود را در وب سایت خود انجام دهید.

API نقشه های گوگل و OpenStreetMap API به شما امکان می دهد تا نقشه های سفارشی را به وب سایت خود اضافه کنید و سایر قابلیت های آن را نیز داشته باشید.

توجه: این API ها پیشرفته هستند و ما در این ماژول هیچکدام از اینها را پوشش نخواهیم داد. شما می توانید اطلاعات بیشتری در مورد ما در ماژول API های وب مشتری مشاهده کنید.

خیلی بیشتر در دسترس هم هست! با این حال، هنوز خیلی هیجان زده نشوید. بعد از مطالعه ی جاوا اسکریپت برای 24 ساعت دیگر نمیتوانید فیس بوک، Google Maps یا Instagram را بسازید. و به همین دلیل است که شما اینجا هستید - اجازه دهید حرکت کنیم!

بخش جاوا اسکریپت چیست؟

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

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

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

این یک چیز خوب است، به عنوان یک استفاده معمول از جاوا اسکریپت است که به صورت پویا HTML و CSS را برای به روز رسانی یک رابط کاربر، از طریق API Object Model Document (همانطور که در بالا ذکر شد)، اصلاح می کند. اگر جاوا اسکریپت بارگیری شود و سعی کرد تا قبل از اینکه HTML و CSS روی آنها اجرا شود، تأثیر بگذارد، اشتباه رخ می دهد.

بخش امنیت مرورگر

هر برگه مرورگر سطل جداگانه خود برای اجرای کد است (این سطلها "محیط های اجرای" در شرایط فنی نامیده می شوند) - این بدان معنی است که در اکثر موارد کد در هر برگه کاملا جداگانه اجرا می شود و کد در یک برگه نمی تواند به طور مستقیم بر روی کد در تب دیگری - و یا در وب سایت دیگری تاثیر می گذارد. این یک اقدام امنیتی خوب است - اگر این مورد نبود، دزدان دریایی می توانند شروع به نوشتن کد برای سرقت اطلاعات از سایر وب سایت ها و سایر موارد بدی کنند.

توجه: راه هایی برای ارسال کد و داده ها بین وب سایت ها / تب های مختلف به صورت ایمن وجود دارد، اما این تکنیک های پیشرفته است که ما در این دوره پوشش نمی دهیم.

JavaScript در حال اجرا orderSection است

هنگامی که مرورگر یک بلوک جاوا اسکریپت روبرو می شود، به طور کلی آن را از بالا به پایین اجرا می کند. این به این معنی است که شما باید مراقب باشید که چه کاری انجام دهید. به عنوان مثال، اجازه دهید به بلوک جاوا اسکریپت که در اولین نمونه ما دیده ایم بازگردیم.

const para = document.querySelector('p');

para.addEventListener('click', updateName);

function updateName() {
  let name = prompt('Enter a new name');
  para.textContent = 'Player 1: ' + name;
}

در اینجا ما یک پاراگراف متن (خط 1) را انتخاب می کنیم، سپس یک شنونده رویداد را به آن اضافه می کنیم (خط 3)، به طوری که وقتی پاراگراف کلیک می شود، کد بلوک کد updateName () (خطوط 5-8) اجرا می شود. بلوک کد updateName () این بلوک های کد قابل استفاده مجدد ("توابع" نامیده می شود) از یک کاربر برای نام جدید می پرسد و سپس آن نام را به پاراگراف اضافه می کند تا صفحه نمایش را به روز کند.

اگر شما مرتب دو خط اول کد را تغییر دادید، دیگر کار نمی کند - به جای آن، شما یک خطا در کنسول توسعه دهنده مرورگر دریافت می کنید - TypeError: para undefined است. این به این معنی است که پارا پارا هنوز وجود ندارد، بنابراین ما نمی توانیم یک شنونده رویدادی را به آن اضافه کنیم.

توجه: این یک خطای بسیار معمول است - شما باید مراقب باشید که اشیاء اشاره شده در کد خود را قبل از تلاش برای انجام کارهای مربوط به آنها وجود دارد.

ترجمه شده در مقایسه با CodeSection کامپایل شده

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

از سوی دیگر، زبانهای کامپایل شده قبل از اینکه توسط رایانه اجرا شوند، تبدیل شده (کامپایل شده) به شکل دیگری. به عنوان مثال، C / C ++ در زبان مونتاژ کامپایل شده است و سپس توسط کامپیوتر اجرا می شود.

جاوا اسکریپت یک زبان برنامه نویسی تفسیری سبک است. هر دو رویکرد مزایای مختلفی دارند که ما در این مرحله بحث نخواهیم کرد.

CodeSection در سمت سرور در مقابل سمت سرویس گیرنده

شما همچنین ممکن است اصطلاحات مربوط به سمت سرور و کد سمت سرویس گیرنده را بخصوص در زمینه توسعه وب بشنوید. کد سمت سرویس گیرنده کد است که در رایانه کاربر اجرا می شود - هنگامی که یک صفحه وب مشاهده می شود، کد کلاینت صفحه بارگیری می شود، سپس اجرا می شود و توسط مرورگر نمایش داده می شود. در این ماژول ما صریحا درباره جاوا اسکریپت سمت سرویس گیرنده صحبت می کنیم.

از طرف دیگر، سرور سمت سرور بر روی سرور اجرا می شود، سپس نتایج آن در مرورگر دانلود و نمایش داده می شود. نمونه هایی از زبان های وب محبوب در سمت سرور عبارتند از PHP، Python، Ruby، ASP.NET و ... JavaScript! جاوا اسکریپت نیز می تواند بعنوان یک زبان در کنار سرور مورد استفاده قرار گیرد، مثلا در محیط محبوب Node.js - شما می توانید در مورد جاوا اسکریپت سمت سرور در وب سایت های پویای ما - موضوع برنامه نویسی سمت سرور ببینید.

CodeSection پویا در مقابل استاتیک

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

یک صفحه وب بدون محتوای به روز رسانی دینامیک به عنوان استاتیک نامیده می شود - این فقط محتوای مشابه را در همه زمان ها نشان می دهد.

چگونه جاوا اسکریپت را به صفحه خود اضافه می کنی؟

JavaScript به شیوه مشابه با CSS به صفحه HTML شما اعمال شده است. در حالی که CSS از عناصر <link> برای اعمال شیوه های خارجی و عناصر <style> برای اعمال شیوه های داخلی به HTML استفاده می کند، جاوا اسکریپت فقط یک دوست در دنیای HTML - عنصر <script> دارد. بیایید یاد بگیریم که چگونه این کار می کند.

JavaScriptSection داخلی

اول از همه، یک کپی محلی از فایل مثال ما apply-javascript.html ایجاد کنید. ذخیره آن در دایرکتوری جایی منطقی است.

فایل را در مرورگر وب خود و در ویرایشگر متن خود باز کنید. خواهید دید که HTML یک صفحه وب ساده حاوی دکمه قابل کلیک است.

بعد، به یو برو

<script>

  // JavaScript goes here

</script>

حالا ما برخی از جاوا اسکریپت ها را در داخل المان <script> اضافه می کنیم تا صفحه را جالب تر کنیم - کد زیر را فقط زیر خط "// JavaScript goes here" اضافه کنید:

document.addEventListener("DOMContentLoaded", function() {
  function createParagraph() {
    let para = document.createElement('p');
    para.textContent = 'You clicked the button!';
    document.body.appendChild(para);
  }

  const buttons = document.querySelectorAll('button');

  for(let i = 0; i < buttons.length ; i++) {
    buttons[i].addEventListener('click', createParagraph);
  }
});

فایل خود را ذخیره کنید و مرورگر را تازه سازی کنید - در حال حاضر باید ببینید که وقتی بر روی دکمه کلیک میکنید، یک پاراگراف جدید تولید می شود و زیر آن قرار می گیرد.

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

منبع :developer.mozilla.org

توجه: شما می توانید این نسخه را در GitHub به عنوان application-javascript-internal.html ببینید (همچنین ببینید که آن را نیز زنده نگه دارید).

JavaScriptSection خارجی

این کار عالی است، اما اگر می خواستیم جاوا اسکریپت خود را در یک فایل خارجی قرار دهیم، چه می شود؟ بیایید این را در حال حاضر بررسی کنیم.

اول، یک فایل جدید در همان پوشه به عنوان نمونه HTML خود را ایجاد کنید. call it script.js - اطمینان حاصل کنید که این extension extension نام دارد. به همین دلیل است که به عنوان جاوا اسکریپت شناخته شده است.

عنصر <script> فعلی خود را با زیر تغییر دهید: