Арифметичні оператори JavaScript. Зарезервовані ключові слова в JavaScript

Оператор - це символ(и) або ключове слово, завдяки якому виробляються деякі види обчислень за участю одного або кількох значень. Значення, розташовані ліворуч і праворуч від оператора, називаються операндами . Оператор з одним операндом називається унарним, з двома-бінарним, з трьома-тернарним.

Оператори можуть автоматично перетворювати типи своїх операндів у міру потреби. Наприклад, оператор множення * очікує отримати числа, тому вираз "2" * "3" вважається цілком допустимим завдяки тому, що інтерпретатор виконає неявне перетворення рядків у числа.

Пріоритет операторів

Пріоритет оператора- це властивість оператора, що впливає на черговість його виконання у вираженні кількома різними операторами за відсутності явного вказівки порядок їх обчислення. Оператори з більш високим пріоритетом виконуються раніше за операторів з нижчим пріоритетом.

У колонці Оператор трикрапкою показано розташування операндів щодо оператора.

У колонці А вказано асоціативність оператора. Асоціативність- це порядок, у якому обробляються оператори з однаковим пріоритетом. Наприклад, оператор віднімання має асоціативність зліва направо, тому наступні два вирази еквівалентні:

X - y - z (x - y) - z

Оператор привласнення має асоціативність праворуч наліво, тому наступні два вирази еквівалентні:

W = x = y = z w = (x = (y = z))

У колонці Про зазначено кількість операндів.

У колонці Типи значень перед стрілкою вказані очікувані типи операндів, а після стрілки тип значення, що повертається.

lval (скорочення від left value) – лівосторонній вираз. Це історичний термін, що означає вираз, який може бути ліворуч від оператора привласнення. Лівосторонні вирази є: змінні, властивості об'єктів та елементи масивів.

У таблиці нижче оператори перераховані у порядку зменшення пріоритету, горизонтальні лініївідокремлюють групи операторів із різним рівнем пріоритету.

Математичні операції є одними з найбільш базових та універсальних функцій будь-якої мови програмування. У JavaScript числа часто використовуються в загальних задачах, таких як визначення розмірів вікна браузера, обчислення остаточної ціни грошової транзакції або відстані між елементами у документі сайту.

Щоб бути хорошим розробником, мати високі навички в математиці не обов'язково, проте для цього важливо знати, які типи операцій доступні JavaScript і як використовувати їх для виконання практичних завдань.

На відміну від інших мов програмування, JavaScript має лише один числовий тип даних; він не поділяє цілі числа та числа з плаваючою точкою.

Цей посібник розповість про арифметичних операторів, операторів присвоєння та порядок операцій з числовими даними JavaScript.

Арифметичні оператори

Арифметичні оператори – це символи, що визначають математичні операції та повертають результат. Наприклад, 3 + 7 = 10 символ + визначає синтаксис операції складання.

Багато операторів JavaScript знайомі вам з базової математики, але є також кілька додаткових операторів.

Усі арифметичні оператори JavaScript представлені у наступній таблиці.

Складання та віднімання

Оператори складання та віднімання доступні в JavaScript і можуть використовуватися для знаходження суми та різниці числових значень. JavaScript має вбудований калькулятор, а математичні операції можуть виконуватись безпосередньо в консолі.

Знак плюса дозволяє складати числа, наприклад:

Крім операцій з простими числами JavaScript дозволяє присвоювати числа змінним та виконувати з ними обчислення. Наприклад можна присвоїти числові значення змінним x і y, а результат помістити в z.

// Assign values ​​to x and y
let x = 10;
let y = 20;
// Add x and y and assign the sum to z
let z = x + y;
console.log(z);
30

// Assign values ​​to x and y
let x = 10;
let y = 20;
// Subtract x from y and assign the difference to z
let z = y - x;
console.log(z);
10

// Assign values ​​to x and y
let x = -5.2;
let y = 2.5;
// Subtract y from x and assign the difference to z
let z = x – y;
console.log(z);
-7.7

У JavaScript є одна цікава особливість, яку слід враховувати і знати, це результат складання числа і рядка. Ми знаємо, що 1 + 1 має бути 2, але це рівняння видасть несподіваний результат.

let x = 1 + "1";
console.log(x);
typeof x;
11
"string"

Замість складання чисел JavaScript перетворює всі вирази в рядки та об'єднує їх. Важливо бути обережним із динамічною типізацією JavaScript, оскільки вона може мати небажані результати.

Складання та віднімання JavaScript часто використовуються для прокручування панелі навігації.

function scrollToId() (
const navHeight = 60;
window.scrollTo(0, window.pageYOffset - navHeight);
}
window.addEventListener("hashchange", scrollToId);

В цьому випадку панель прокручуватиметься на 60 пікселів від id.

Множення та розподіл

Оператори множення та поділу JavaScript використовуються для пошуку похідного та приватного числових значень.

Зірочка є оператором множення.

// Assign values ​​to x and y
let x = 20;
let y = 5;
// Multiply x by y to get the product
let z = x * y;
console.log(z);
100

Множення можна використовуватиме розрахунку ціни товару після введення податку з продажу.

const price = 26.5; // Price of item before tax
const taxRate = 0.082; // 8.2% tax rate
// Calculate total after tax to 2 decimal places
let totalPrice = price + (price *taxRate);
totalPrice.toFixed(2);
console.log("Total:", totalPrice);
Total: 28.67

Сліш – оператор поділу.

// Assign values ​​to x and y
let x = 20;
let y = 5;
// Divide y into x to get the quotient
let z = x/y;
console.log(z);
4

Поділ особливо корисний при розрахунку часу, наприклад, при обчисленні кількості годин або відсотка правильних відповідей у ​​тесті.

Модуль числа

Модуль – ще один арифметичний оператор, менш популярний, ніж попередні. Подано символом %. Він повертає залишок при розподілі першого числа на друге.

Наприклад, ми знаємо, що 9 ділиться на 3 без залишку:

Модуль числа дозволяє визначити парне чи непарне число, наприклад:

// Initialize function для тестування, якщо номер є even
const isEven = x => (
// If the remainder after dividing by two is 0, return true
if (x % 2 === 0) (
return true;
}
// If the number is odd, return false
return false;
}
// Test the number
isEven(12);
true

У цьому прикладі 12 ділиться на 2, отже це парне число.

У програмуванні модуль числа часто використовується у поєднанні з умовними операторами.

Зведення в ступінь

Зведення в ступінь – один із найновіших операторів JavaScript. Синтаксис зведення на рівень – дві зірочки поспіль (**).

Наприклад, 10 у п'ятому ступені (10^5) записується так:

10 ** 5;
100000

Операція 10**5 має той же результат, що 10*10, повторена 5 разів.

10 * 10 * 10 * 10 * 10;

Також цю операцію можна записати методом Math.pow().

Math.pow (10, 5);
100000

Використання оператора зведення у ступінь – швидкий спосібвизначити ступінь заданого числа, але, як завжди, при виборі між методом та оператором важливо бути послідовними та писати код в одному стилі.

Інкремент та декремент

Оператори інкременту та декременту збільшують чи зменшують числове значення змінної на одиницю. Вони представлені двома плюсами (++) або двома мінусами (-) і часто використовуються у циклах.

Зверніть увагу: оператори інкременту та декременту можуть використовуватись тільки зі змінними. Спроба використовувати їх із простими числами призведе до помилки.

7++
Uncaught ReferenceError: У неправильному правому ході лівої сторони в postfix operation

Оператори інкременту та декременту можна класифікувати як префіксні та постфіксні операції, залежно від того, де по відношенню до змінної розміщений оператор.

Префіксний інкрементзаписується як ++х.

// Set a variable
let x = 7;

let prefix = ++x;
console.log(prefix);
8

Значення х збільшилося на 1. Постфіксний інкремент пишеться як у ++.

// Set a variable
let y = 7;
// Use the prefix increment operation
let postfix = y++;
console.log(postfix);
7

Постфіксна операція не збільшила значення. Це значення не буде збільшуватися доти, доки вираз не буде оцінено. Для цього потрібно запустити операцію двічі:

let y = 7;
y++;
y++;
console.log(y);
8

Найчастіше ці оператори зустрічаються у циклах. В даному циклі for оператор запускається 10 разів, починаючи з 0.

// Run a loop ten times
for (let i = 0; i< 10; i++) {
console.log(i);
}
0
1
2
3
4
5
6
7
8
9

У цьому прикладі ітерація циклу виконується за допомогою оператора інкременту.

Простіше кажучи, х++ можна як скорочення від х = х + 1, а х-як скорочення від х = х – 1.

Оператори привласнення

Одним із найчастіше використовуваних операторів є оператор привласнення, який вже зустрічався в цьому мануалі. Він представлений знаком рівності (=). Символ = використовується для визначення значення праворуч змінної зліва.

// Assign 27 to age variable
let age = 27;

Крім стандартного оператора присвоєння JavaScript має складові оператори привласнення, які комбінують арифметичний оператор із оператором =.

Наприклад, оператор додавання почне з вихідного значення та додасть до нього нове значення.

// Assign 27 to age variable
let age = 27;
age += 3;
console.log(age);
30

Власне, age += 3 – те саме, як і age = age + 3.

Усі арифметичні оператори можна поєднувати з оператором присвоєння. Нижче наведена довідкова таблиця операторів присвоєння JavaScript.

Складові оператори привласнення часто використовуються в циклах, як інкременти та декременти.

Пріоритет операторів

Оператори виконуються у порядку пріоритетності, як і у звичайній математиці.

Наприклад, множення має вищий пріоритет, ніж додавання.

// First multiply 3 by 5, then add 10
10 + 3 * 5;
25

Якщо спочатку потрібно виконати операцію додавання, візьміть її у круглі дужки – такі операції завжди мають найвищий пріоритет.

// First add 10 and 3, then multiply by 5
(10 + 3) * 5;
65

Нижче ви знайдете таблицю пріоритету арифметичних операторів JavaScript. Для інкременту та декременту постфікс має більш високий пріоритет, ніж префікс.

Інкремент/декремент, множення/розподіл і складання/віднімання мають однаковий рівень пріоритету.

Пріоритет мають не лише арифметичні оператори, а й оператори привласнення, логічні оператори, умовні операториі т.д. Повний списокможна подивитися .

Мова JavaScript підтримує принципи об'єктно-орієнтованого програмування. Всі об'єкти, які ви можете зустріти в роботі, можна розділити на три великі групи:

1. Вбудовані об'єкти мови. Ці об'єкти призначені для роботи з окремими типами даних або виконання типових завдань (наприклад, об'єкти Math, String, Date та ін.). Перед використанням вбудованих об'єктів часто необхідно створити відповідний екземпляр цього об'єкта (крім Math).

2. Зовнішні стандартні об'єкти. Призначені для взаємодії зі стандартними елементами інтерфейсу та функціями браузера. Це такі об'єкти як window, document та event. Всі зовнішні об'єкти доступні в будь-якому місці скрипта і не вимагають створення екземплярів.

3. Об'єкти користувача. Створюються розробником для якихось конкретних потреб. Створення власних об'єктів потребує певних навичок та досвіду розробки.

Будь-який об'єкт містить у собі властивості та методи. Властивість об'єкта - це якийсь кількісний чи якісний параметр, що визначає характеристики об'єкта. Метод об'єкта визначає якусь дію, яка може виконати даний об'єкт. Якщо відволіктися від програмування і розглянути як об'єкт звичайної людини, то його властивостями буде "зростання", "вага", "колір очей", а методами - "є", "пити", "ходити" і т.д.

Звернутися до властивості або методу можна, вказавши їх ім'я та екземпляр об'єкта:

об'єкт.

об'єкт.метод()

Такий запис (через точку) дозволяє однозначно визначити екземпляр об'єкта, чиї властивості та методи ви хочете задіяти. Насправді, характеристики застосовуються як і, як нормальні змінні, а способи - як стандартні функції. Зверніть увагу, що ім'я методу має завжди закінчуватися дужками, навіть якщо ви не передаєте методу жодних параметрів. Наприклад:

// Інтерпретатор викличе МЕТОД open()

// інтерпретатор шукатиме Властивість open,

// не знайде його та видасть помилку

8. Спеціальні оператори JavaScript.

?: Дозволяє Вам виконати просте "if...then...else"

Оцінює два вирази та повертає результат другого виразу.

delete Дозволяє видаляти властивість об'єкта або елемент з певним індексом у масиві.

new Дозволяє Вам створювати зразок типу об'єкта, що визначається користувачем, або одного з вбудованих типів об'єктів.

this Ключове слово, яке Ви можете використовувати, щоб звернутися до поточного об'єкта.

typeof Повертає рядок, що вказує тип неоціненого операнда.

void Оператор void визначає вираз, який оцінять без повернення значення.

9. Пріоритети операторів у JavaScript.

Старшинство Оператора

Старшинством операцій називається порядок, у якому виконуються операції у складних висловлюваннях. Операції одному рівні мають однакову старшинство. Обчислення проводяться ліворуч право всіх бінарних операцій, починаючи з операцій, перерахованих у верхній частині списку, і закінчуючи операціями в нижній частині.

Старшинство операторів, від найнижчого до найвищого будуть наступні:

Присвоєння =+=-=*=/=%=<<=>>=>>>=&=^=|=

Вибір за умовою? :

Логічне АБО ||

Логічне &&&

Побітов АБО |

Побітовий виключне ^

Побітове І &

Нерівність! =

Рівність/Нерівність == !=

Порівняння<<=>> =

Побітове зрушення<< >> >>>

Додавання/віднімання + -

Помножіть/поділ * / %

Заперечення/доповнення/унарний мінус/інкремент/декремент! ~ - ++ --

Виклик, надсилання параметрів () .

Старшинство Оператора

Старшинством операцій називається порядок, у якому виконуються операції у складних висловлюваннях. Операції одному рівні мають однакову старшинство. Обчислення проводяться ліворуч право всіх бінарних операцій, починаючи з операцій, перерахованих у верхній частині списку, і закінчуючи операціями в нижній частині.

Старшинство операторів, від найнижчого до найвищого будуть наступні:

Присвоєння =+=-=*=/=%=<<=>>=>>>=&=^=|=

Вибір за умовою? :

Логічне АБО ||

Логічне І&&

Побітов АБО |

Побітовий виключне ^

Побітове І&

Нерівність! =

Рівність/Нерівність == !=

Порівняння<<=>> =

Побітове зрушення<<>>>>>

Додавання/віднімання + -

Помножіть/поділ * / %

Заперечення/доповнення/унарний мінус/інкремент/декремент! ~ - ++ --

Виклик, надсилання параметрів () .

Зарезервовані ключові словав JavaScript.

JavaScript має низку зарезервованих ключових слів. Ці слова трьох типів: зарезервовані слова JavaScript, зарезервовані слова для майбутнього та слова, які варто уникати для вживання. Ключові слова JavaScript

break false in this void

continue for new true while

delete function null typeof with

else if return var

Ключові слова JavaScript для майбутнього застосування

case debugger export super

catch default extends switch

class do finally throw

const enum import try

Слова, які варто уникати вживати - це ті, які вже мають імена внутрішніх об'єктів або функцій JavaScript. Сюди включені слова, подібні до String або parseInt.

Використання будь-якого ключового слова з перших двох категорій призведе до помилки при компіляції, коли програма завантажуватиметься. Використання зарезервованих слів із третього списку може призвести до проблем неправильної поведінки, якщо ви спробуєте використовувати ваші змінні та оригінальні примітиви з однаковим ім'ям в одній програмі. Наприклад, наступна програма не робитиме те, що ви хочете:

var text = new String("This is a string object");

У цьому випадку ви отримаєте помилку, яка повідомляє про те, що String не є об'єктом. Багато випадків використання попередньо існуючого ідентифікатора не є таким вже зрозумілим.

Сценарії. Створення сценаріїв.

JavaScript є мовою сценаріїв (скриптів), яку застосовують в основному для створення на Web-сторінках інтерактивних елементів. Його можна використовувати для побудови меню, перевірки правильності заповнення форм, зміни зображень або чогось ще, що можна зробити на Web-сторінці. Якщо дивитися на GoogleMaps або службу GMail компанії Google, то можна зрозуміти, на що здатна сьогодні мова JavaScript.

Так як JavaScript є в даний час єдиною мовою сценаріїв, яку підтримують всі основні браузери Web (InternetExplorer, Firefox, Netscape, Safari, Opera, Camino і т.д.), то він використовується дуже широко.

Код JavaScript зазвичай виконується Web-браузером клієнта, і в цьому випадку він називається сценарієм на стороні клієнта. Але код JavaScript можна виконувати також на Web-сервері для формування документів HTML, втілюючи цим сценарій на стороні сервера. Хоча використання JavaScriptзазвичай обмежується сценаріями за клієнта, він також дуже потужним серверним мовою.

При створенні коду JavaScriptпотрібен фактично лише текстовий редактор та Web-браузер. Знання HTML і CSS відіграватиме безперечно позитивну роль, і якщо ви захочете використовувати навички JavaScript на Web-сайті, то знадобиться також Web-сайт. Якщо у вас вже є Web-сайт, то чудово! Якщо ні, то існує безліч безкоштовних серверів, які можна використовувати для розміщення сторінок.

Що стосується текстового редактора, то Windows є редактор NotePad. Хоча цього буде достатньо для редагування JavaScript, HTML і CSS, потужніший редактор, такий, наприклад, як EditPlus або інший, може виявитися зручнішим.

Ну а тепер можна перейти до створення сценарію JavaScript!

Насамперед, необхідно дізнатися, як додати сценарій JavaScript на сторінку HTML. Це можна зробити одним із двох способів: помістити теги Script на Web-сторінці та розмістити код JavaScript всередині цих тегів, або помістити весь код JavaScript в окремий файл і зв'язатися з ним за допомогою тега Script.

Будь-який із цих методів цілком допустимий, але вони мають різне призначення. Якщо є невеликий код, який використовуватиметься лише на одній сторінці, то розміщення його між тегами Script буде гарним рішенням. Якщо, однак, є великий фрагмент коду, який використовуватиметься на кількох сторінках, то, мабуть, краще помістити цей код JavaScript в окремий файл і з'єднатися з ним. Це робиться для того, щоб не потрібно було завантажувати цей код щоразу при відвідуванні різних сторінок. Код завантажується один раз і браузер зберігає його для подальшого використання. Це схоже на те, як використовуються каскадні таблиці стилів (CSS).

Нижче наведено приклади двох способів підключення коду JavaScript:

Функції сценаріїв.

Ви можете оформити фрагменти вихідного тексту як функції, викликаючи цю функцію при необхідності з різних місць сценарію JavaScript.

Зазвичай функції визначаються у розділі заголовка документа HTML, відміченого тегами і. Як ми вже говорили, функція має бути визначена перед викликом. Розміщення всіх функцій у розділі заголовка документа HTML гарантує доступність цих функцій при обробці документа.

Загальний вид визначення функції представлений нижче:

function ім'я([параметр 1] [,параметр 2] [...,параметр N])

рядки тіла функції

Усі параметри передаються за значенням. Тому функція не може змінити вміст змінних, які передаються їй як параметри.

За допомогою ключового слова функція return може повернути значення.

Вирази у JavaScriptявляють собою комбінації операндіві операторів.

Операціїу виразах виконуються послідовно відповідно до значення пріоритету (що більше значення пріоритету, тим він вищий). Результат, що повертається, не завжди має значення того ж типу, що і тип оброблюваних даних. Наприклад, в операціях порівняння беруть участь операнди різних типів, але результат, що повертається завжди буде логічного типу.

Операнди- Це дані, що обробляються сценарієм JavaScript. Як операнди можуть бути як прості типи даних, так і складні, а також інші вирази.

Оператори— це символи мови, які виконують різні операції з даними. Оператори можуть записуватись за допомогою символів пунктуації або ключових слів.

Залежно від кількості операндів розрізняють такі типи операторів:
унарний- В операції бере участь один операнд;
бінарний- В операції беруть участь два операнди;
тернарний— комбінує три операнди.

Найпростіша форма вираження літерал- Щось, що обчислюється саме в себе, наприклад, число 100, рядок "Hellow world". Змінна теж може бути виразом, тому що вона обчислюється у надане їй значення.

Вирази та оператори в JavaScript

1. Арифметичні оператори

Арифметичні операторипризначені для виконання математичних операцій, вони працюють з числовими операндами (або змінними, що зберігають числові значення), повертаючи як результат числове значення.

Якщо один з операндів є рядком, інтерпретатор JavaScript спробує перетворити його на числовий тип, а потім виконати відповідну операцію. Якщо перетворення типів виявиться неможливим, буде отримано результат NaN (не число).

2. Оператори привласнення

Оператори привласненнявикористовуються для присвоєння значень змінним. Комбіновані оператори дозволяють зберегти первісне та наступне значення в одній змінній.

3. Оператори інкременту та декременту

Операції інкременту та декрементує унарними і збільшують і зменшують значення операнда на одиницю. Як операнда може бути змінна, елемент масиву, властивість об'єкта. Найчастіше такі операції використовуються збільшення лічильника в циклі.

4. Оператори порівняння

Оператори порівняннявикористовуються для порівняння операндів, результатом виразу може бути одне з двох значень - true або false. Операндами можуть бути не тільки числа, а й рядки, логічні значення та об'єкти. Проте порівняння може виконуватися лише для чисел і рядків, тому операнди, які є числами чи рядками, перетворюються.

Якщо обидва операнди не можуть бути успішно перетворені на числа або рядки, оператори завжди повертають false .

Якщо обидва операнди є рядками/числами або можуть бути перетворені на рядки/числа, вони будуть порівнюватися як рядки/числа.

Якщо один операнд є рядком/перетворюється на рядок, а інший є числом/перетворюється на число, оператор спробує перетворити рядок на число і виконати порівняння чисел. Якщо рядок не є числом, він перетворюється на NaN і результатом порівняння буде false .

Найчастіше операції порівняння використовуються при організації розгалужень у програмах.

5. Логічні оператори

Логічні операторидозволяють комбінувати умови, що повертають логічні величини. Найчастіше використовуються в умовному вираженні if.

6. Побітові оператори

Побітові операторипрацюють з операндами як із 32-бітною послідовністю нулів і одиниць і повертають числове значення, що означає результат операції, записане в десятковій системі числення. Як операнди розглядаються цілі числа, дробова частина операнда відкидається. Побітові операції можуть використовуватися, наприклад, при шифруванні даних для роботи з прапорами, розмежування прав доступу.

7. Строкові оператори

Існує кілька операторів, які працюють із рядками особливим чином.

8. Спеціальні оператори

9. Коментарі в JavaScript

Однорядковий коментар: перед текстом коментаря необхідно поставити символи // .