آیا میخواهید از اکانت خود خارج شوید؟

بله

معرفی زبان برنامه نویسی (JavaScript) جاوا اسکریپت

معرفی زبان برنامه نویسی (JavaScript) جاوا اسکریپت

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

 

جاوا اسکریپت چیست؟

 

JavaScript (به اختصار "JS") یک زبان برنامه نویسی پویا و کامل است که می تواند تعامل را به یک وب سایت اضافه کند. این زبان توسط Brendan Eich (بنیانگذار پروژه موزیلا ، بنیاد موزیلا و شرکت موزیلا) اختراع شد.

جاوا اسکریپت پر کاربرد و مبتدی پسند است. با تجربه بیشتر ، می توانید بازی های گرافیک 2 بعدی و 3 بعدی متحرک ، برنامه های جامع مبتنی بر پایگاه داده و موارد دیگر بسازید!

جاوا اسکریپت نسبتاً جمع و جور است ، در عین حال بسیار انعطاف پذیر. توسعه دهندگان ابزارهای مختلفی را با زبان JavaScript نوشته اند ، و با حداقل تلاش قفل بسیاری از قابلیت ها را باز می کنند.

 

Hello world! در جاوا اسکریپت

 

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

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

 

  1. به سایت آزمایش خود بروید و پوشه جدیدی به نام  scripts ایجاد کنید . در پوشه اسکریپت ها ، یک فایل جدید با نام main.js ایجاد کنید و آن را ذخیره کنید.
  2. درست در صفحه اصلی index.html، این کد را در یک خط جدید وارد کنید </body>:
    <script src="scripts/main.js"></script>
  3. این کد کار همان کار <link>عنصر CSS را انجام می دهد. این کد جاوا اسکریپت را روی صفحه اعمال می کند ، بنابراین می تواند بر روی HTML تأثیر بگذارد (همراه با CSS و هر چیز دیگری در صفحه).
  4. این کد را به main.jsپرونده اضافه کنید:
    const myHeading = document.querySelector('h1'); myHeading.textContent = 'Hello world!';
  5. مطمئن شوید که فایلهای HTML و JavaScript ذخیره شده اند. سپس index.htmlدر مرورگر خود اجرا کنید. شما باید جمله “Hello World” رو در صفحه باز شده ببینید.

 

دوره سقوط اصول این زبان

 

برای اینکه درک بهتری از نحوه کار JavaScript داشته باشید ، بیایید برخی از ویژگیهای اصلی زبان را توضیح دهیم. شایان ذکر است که این ویژگی ها در همه زبان های برنامه نویسی مشترک است. اگر بر این اصول مسلط باشید ، شروع به برنامه نویسی به زبان های دیگر نیز می کنید!

 

1- متغیر ها

متغیرها ظروفی هستند که مقادیر را ذخیره می کنند. شما با اعلام یک متغیر با varیا letکلمه کلیدی ، و سپس نامی که به متغیر می دهید شروع می کنید:

let myVariable;

پس از اعلام یک متغیر ، می توانید به آن یک مقدار بدهید:

myVariable = 'Bob';

همچنین ، می توانید هر دو این عملیات را در یک خط انجام دهید:

let myVariable = 'Bob';

شما با فراخوانی نام متغیر مقدار را بازیابی می کنید:

myVariable;

پس از اختصاص مقدار به یک متغیر ، می توانید بعدا آن را در کد تغییر دهید:

let myVariable = 'Bob';

myVariable = 'Steve';

توجه داشته باشید که متغیرها ممکن است مقادیری را نگهدارند که انواع داده مختلفی دارند :

متغیرتوضیحمثال
رشتهاین نوع متغیر دنباله ای از متن است که به عنوان رشته شناخته می شود. برای نشان دادن اینکه یک مقدار یک رشته است ، آن را در علامت های سینگل کوتیشن بنویسید.let myVariable = 'Bob';
عدداین نوع یک عدد است. شماره ها در اطراف خود کوتیشن ندارند.let myVariable = 10;
بولیناین یک مقدار True / False است. کلمات trueو falseکلمات کلیدی خاصی هستند که به علامت کوتیشن نیاز ندارند.let myVariable = true;
آرایهاین ساختاری است که به شما امکان می دهد مقادیر مختلفی را در یک فضا ذخیره کنید.let myVariable = [1,'Bob','Steve',10];
به هر یک از اعضای آرایه اینگونه مراجعه کنید:
myVariable[0]، myVariable[1]و غیره
هدف - شیاین نوع می تواند هر چیزی باشد. همه چیز در JavaScript یک شی است و می تواند در یک متغیر ذخیره شود. همین را یاد بگیرید که یاد بگیرید.let myVariable = document.querySelector('h1');
همه مثالهای فوق نیز

 

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

 

عملگر های ریاضی در جاوا اسکریپت

 

An operator یک نماد ریاضی است که بر اساس دو مقدار (یا متغیر) نتیجه می گیرد. در جدول زیر ، می توانید ساده ترین اپراتورها را به همراه چند مثال برای امتحان در کنسول JavaScript مشاهده کنید.

 

عملگرتوضیحنماد (ها)مثال
اضافه کردندو عدد را با هم جمع کنید یا دو رشته را با هم ترکیب کنید.+6 + 9;
'Hello ' + 'world!';
تفریق ، ضرب ، تقسیماینها همان کاری را انجام می دهند که انتظار دارید در ریاضیات پایه انجام دهند.-، *،/9 - 3;
8 * 2; // multiply in JS is an asterisk
9 / 3;
مقداردهیهمانطور که قبلاً مشاهده کردید: این عملگر یک مقدار را به یک متغیر اختصاص می دهد.=let myVariable = 'Bob';
تست برابریاین عملگر آزمایشی را برای بررسی برابر بودن دو مقدار انجام می دهد. نتیجه true/ false(بولی) را برمی گرداند .===let myVariable = 3;
myVariable === 4;
نه ، آیا برابر نیستاین عملگر مقدار منطقی مخالف آنچه قبل از آن است را برمی گرداند. آن trueرا به a falseو غیره تبدیل می کند. وقتی در کنار عملگر Equality استفاده می شود ، عملگر نفی آزمایش می کند که آیا دو مقدار برابر نیستند .!، !==

برای "نه" ، عبارت اساسی این است true، اما مقایسه برمی گردد falseزیرا ما آن را نفی می کنیم:

let myVariable = 3;
!(myVariable === 3);

"آیا برابر نیست" در اصل همان نتیجه را با نحو متفاوت می دهد. در اینجا ما در حال آزمایش هستیم " myVariableبرابر 3 نیست". این برمی گردد falseزیرا myVariableIS برابر با 3 است:

let myVariable = 3;
myVariable !== 3;

 

شرط ها در جاوا اسکریپت

 

شرط ها ساختارهای کدی هستند که برای آزمایش درست یا غلط بودن عبارت استفاده می شوند. شکل بسیار متداول شرطها if ... elseعبارت است. مثلا:

let iceCream = 'chocolate';

if(iceCream === 'chocolate') {

 alert('Yay, I love chocolate ice cream!');

} else 

{

 alert('Awwww, but chocolate is my favorite...');

}

عبارت داخل if( ... ) همان شرط است. این با استفاده از عملگرها(همانطور که در بالا توضیح داده شد) متغیر را iceCreamبا رشته مقایسه می کند chocolateتا ببیند که این دو برابر هستند. اگر این مقایسه برگردد true، اولین بلوک کد اجرا می شود. اگر مقایسه درست نباشد ، بلاک دوم کد - بعد از elseعبارت - به جای آن اجرا می شود.

 

function ها در جاوا اسکریپت

 

توابع راهی برای عملکردی است که می خواهید دوباره استفاده کنید. ممکن است مجموعه ای از کد را به عنوان تابعی تعریف کنید که وقتی نام تابع را در کد خود فراخوانی می کنید ، اجرا شود. این جایگذین خوبی برای نوشتن مکرر همان کد است. قبلاً بعضی از کاربردهای توابع را قبلاً دیده اید. مثلا:

let myVariable = document.querySelector('h1');

alert('hello!');

این توابع ، document.querySelectorو alertدر مرورگر تعبیه شده اند.

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

به عنوان مثال ، این عملکرد alert()باعث می شود یک جعبه پاپ آپ در داخل پنجره مرورگر ظاهر شود ، اما ما باید یک رشته را به عنوان آرگومان به آن دهیم تا به عملکرد بگوییم چه پیامی را نمایش دهد.

شما همچنین می توانید عملکردهای خود را تعریف کنید. در مثال بعدی ، یک تابع ساده ایجاد می کنیم که دو عدد را به عنوان آرگومان گرفته و آنها را ضرب می کند:

function multiply(num1,num2) {  let result = num1 * num2;  return result; }

این را در کنسول اجرا کنید. سپس با چندین ورودی تست کنید. مثلا:

multiply(4, 7);

multiply(20, 20);

multiply(0.5, 3);

 

رویداد ها در جاوا اسکریپت

 

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

document.querySelector('html').onclick = function() {

   alert('Ouch! Stop poking me!');

}

روش های زیادی برای اتصال یک کنترل کننده رویداد به یک عنصر وجود دارد. در اینجا <html>عنصر را انتخاب می کنیم ، onclickخاصیت هندلر آن را برابر با یک تابع ناشناس (یعنی بدون نام) قرار می دهیم که حاوی کدی است که ما می خواهیم رویداد کلیک اجرا شود.

توجه داشته باشید که

document.querySelector('html').onclick = function() {};
 

برابر است با

let myHTML = document.querySelector('html');

myHTML.onclick = function() {};

فقط کوتاه تره

 

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

منبع: developer.mozilla.org

لینک کوتاه مقاله : https://BugLand.ir/A/33a