Чи чутливий JavaScript до регістру символів. JavaScript – Синтаксис. Прогалини в JavaScript

💖 Подобається?Поділися з друзями посиланням

Програма JavaScript складається зі змінних, операторів, функцій, об'єктів та інших конструкцій мови. Всі вони будуть детально розглянуті у цьому підручнику. А у цій темі я розповім, як вони пишуться у коді програми. Синтаксис JavaScript є звичайним і багато в чому збігається з іншими мовами прораммування.

Прогалини та переклад рядка

JavaScript не вимагає пробілів між змінними та різними орераторами. Але дозволяє ставити прогалини там, де Вам потрібно:

Переклад рядка також можна робити там, де Вам зручно. Є один виняток: не можна робити переклад рядка всередині тексту, що знаходиться в лапках. Докладніше це питання буде розглянуто щодо рядків. В інших випадках Ви самі вирішуєте, де перекладати рядок

Можна написати так:

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

При написанні своїх назв, наприклад, під час створення змінних, також враховується регістр символів. company та Company - це дві різні змінні.

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

JavaScript Програми

Комп'ютерна програма є список "інструкцій", щоб бути "виконані" комп'ютером.

У мові програмування, ці програмні інструкціїназиваються заяви.

JavaScript є мовою програмування.

JavaScript заяви поділяються крапкою з комою.

У HTML, JavaScript програми можуть бути виконані за допомогою веб-браузера.

Заяви JavaScript

заяви JavaScript складаються з:

Значення, Оператори, вирази, ключові словата коментарі.

Значення JavaScript

Синтаксис JavaScript визначає два типи значень: Фіксовані значення та значення змінних.

Фіксовані значення називаються літерали.

Значення змінних називаються змінними.

Найбільш важливими правилами написання фіксовані значення є:

Числа записуються з або без десяткових знаків:

Рядок текст, написаний в подвійні або одинарні лапки:

Змінні JavaScript

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

JavaScript використовує var ключове слово, щоб оголосити змінні.

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

У цьому прикладі х визначається як змінна. Тоді х призначається (враховуючи) значення 6:

Оператори JavaScript

JavaScript використовує оператор присвоєння (=) для присвоєння значень змінним:

JavaScript використовує арифметичні оператори(+ - * /) для обчислення значень:

JavaScript Вирази

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

Обчислення називається оцінка.

Наприклад, 5 * 10 набуває значення 50:

Вирази також можуть містити значення змінних:

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

Наприклад, "Джон" + "," + "Доу", набуває значення "Джон Доу":

JavaScript Ключові слова

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

var ключове слово вказує браузеру, щоб створити нову змінну:

JavaScript Коментарі

Не всі оператори JavaScript будуть "виконані".

Код після того, як подвійні косі риси // або між /* та */ розглядається як коментар.

Коментарі ігноруються і не будуть виконані:

JavaScript Ідентифікатор

Ідентифікатори є іменами.

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

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

У JavaScript, перший символ повинен бути літерою, підкреслення (_) або долар ($) .

Наступні символи можуть бути літери, цифри, символи підкреслення або долар.

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

JavaScript чутливий до регістру

Усі ідентифікатори JavaScript чутливі до регістру.

Змінні LastName і ПРІЗВИЩЕ, дві різні змінні.

JavaScript не інтерпретує VAR або Var як ключове слово var.

JavaScript та Camel Case

Історично склалося так, програмісти використовували три способи поєднання кількох слів в одне ім'я змінної:

Дефіси:

first-name, last-name, master-card, inter-city.

Дефіс не допускаються у JavaScript. Вона призначена для віднімань.

Нижнє підкреслення:

first_name, last_name, master_card, inter_city.

Справа Camel:

FirstName, LastName, MasterCard, InterCity.

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

firstName, lastName, masterCard, interCity.

JavaScript Набір символів

JavaScript використовує набір символів Unicode.

Unicode обкладинки (майже) всі символи, розділові знаки і символи в світі.

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

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

Якщо ви по неуважності пропускаєте крапку з комою, прогалини, ну або з іншої причини ваш код не має стиль (а це важливо!), то раджу ESLint.

Пропозиції складаються з:

  • значень
  • Операторів
  • Виразів
  • Ключових слів
  • коментарів

У JavaScript існує два типи значень: змінні та літерали.

Змінні

Змінні використовуються для збереження значень. Для оголошення змінних у JavaScript використовується ключове слово var.
Змінні ми можемо оголосити трьома варіантами:

  • За допомогою ключового слова var. Наприклад, var y = 56;
  • Просто надавши значення. Наприклад, y = 56;
    Але це варіант небажаний, оскільки у разі змінна стає глобальної.
    Чому глобальна змінна – це погано? Хоча б тому, що стаючи глобальною, вона виходить з-під контролю області дії функції. Вона може бути змінена іншим кодом, так і сама переписати значення в чужому коді
  • За допомогою ключового слова let.
    Т.к. JavaScript (до ECMAScript 6) не існує область видимості в межах блоку, то ввели let, що дозволяє оголосити змінні з областю видимості - блок.
    Наприклад, if (true) (let y = 4;) console.log (y); // ReferenceError: y is not defined

    Переглянути поточну підтримку ES6 можна.

Літерали

Літерали – фіксовані значення. До них належать такі типи даних, як null, Boolean, Number, Object, String.
Наприклад, коли ми оголошуємо масив, то частина, яка йде після знаку, є літералом масиву.

Var food = ['cheese', 'potates', 'cucumber'];

А food – це змінна.

Числа

Числа записуються як із десятковими знаками, так і без них.

10.50 1001

Для того, щоб інтерпретатор зрозумів, що означає точка - виклик методу або точку, що плаває, нам потрібно йому підказати, одним із способів:

1..toString() 1 .toString() // пробіл перед точкою (1).toString() 1.0.toString()

Рядок (String)

String — текст, написаний за допомогою подвійних чи одинарних лапок.

"I am string“ "And I am string’

По-хорошому, вам треба визначити які лапки використовувати і дотримуватися свого вибору під час написання коду.

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

Ідентифікатори

Назва, яку ми дає змінним, функціями, властивостями називається ідентифікатором.
Він може містити лише буквено-цифрові символи, "$" та "_".
Чим ідентифікатор відрізняється від String?

String – дані, а ідентифікатор – частина коду.

Var surname = "Smit";

"Smit" однозначно дані - літерал рядка, тоді як surname - сховище для цього значення.
Зверніть увагу, що дефіс в ідентифікаторі не допускається, оскільки він використовується для віднімання.

Вирази

Вираз - комбінація значень, змінних, операторів, яка обчислює значення.
Наприклад, вираз, 3 * 5 обчислює 15.
Вираз може містити змінну
x * 4
Звичайно, значення можуть бути рядком.
Наприклад вираз:

"The day" + "is" + "sunny" // обчислюється в рядок "The day is sunny".

Вирази можна розділити на ті, що надають значення змінної і ті, які просто обчислюють значення.
Перший випадок:

а другий:

До речі, варто нам додати крапку з комою і в нас уже не вираз, а пропозиція!

Var x = 56;

Кома для виразів

Кома обчислює обидва операнда і повертає праве значення.

Var x = 0; var y = (x ++, 4); console.log(x); //1 console.log(y); //4

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

Кожна з наступних рядківмістить вираз:

X x + 6 changeArray("a","b")

Скрізь де js очікує пропозицію, ви можете також писати та вирази.
Подібна пропозиція називається інструкція-вираз.

Але ви не можете писати пропозицію, де js передбачає вираз. Наприклад, IF пропозиція не може стати аргументом функції.

Порівняння речення та виразу

Погляньмо на IF пропозицію та на умовний оператор, який є виразом.

Var result; if (x > 0) (result = " Додатне число"; ) else ( result = "Негативне число"; )

Еквівалентно:

Var result = (x > 0? "Позитивне число": "Негативне число");

Між знаком = і;
вираз.

Для того, щоб запобігти двозначності при синтаксичному розборі, JS не дозволяє використовувати літерали об'єкта та вираження функцій як речення.

  • З цього випливає, що речення-вирази не повинні починатися з:
  • фігурних дужок

з ключового слова function
Якщо вираз починається з тієї чи іншої, слід його писати у тих висловлювання.

Для цього вираз міститься дужки.

Функція-оголошення та функція-вираз

Припустимо, ми хочемо оголосити анонімну функцію-вираз, тоді пишемо так:

(function()(return "ready!")());

Давайте розглянемо, чим ця функція відрізнятиметься від функції-оголошення виду

  • Function getReady() ( return "ready!" )
  • Очевидно, що анонімна не має імені. Але воно цілком можливо, тоді це буде іменована функція-вираз.
  • Функція-оголошення створюється інтерпретатором до виконання коду, а функція-вираз лише за час виконання.

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

А якщо ми так запишемо?

GetReady(); var getReady = function()( return "ready!"; ) getReady();
У першому рядку отримаємо помилку: TypeError: getReady is not a function
П'ята ж виведе нам «ready», оскільки функцію було вже оголошено.

Це явище називається спливанням (hoisting), чому воно відбувається описано в пості про .

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

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

Цей мануал ознайомить вас з основами синтаксису та структурування коду JavaScript.

Функціональність і зручність читання

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

Деякі правила синтаксису є обов'язковими для JavaScript. Якщо вони не дотримуються, консоль видасть помилку і сценарій припинить роботу.

Розглянемо таку помилку у програмі «Hello, World!».
// Example of a broken JavaScript program

console.log("Hello, World!"

Uncaught SyntaxError: missing) після argument list

Щоб сценарій міг продовжити роботу, потрібно додати круглу дужку, що закриває. Ось так помилка в синтаксисі JavaScriptможе вплинути працювати програми.

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

Розглянемо такі три варіанти присвоєння значення змінної:

const greeting = "Hello"; // no whitespace між variable & string
const greeting = "Hello"; // excessive whitespace after assignment
const greeting = "Hello"; // single whitespace між variable & string

Усі три наведені вище рядки працюватимуть однаково. Але третій варіант (greeting = «Hello») на сьогоднішній день є найчастіше використовуваним і зручним для читання способом написання коду, особливо при розгляді його в контексті більш об'ємної програми.

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

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

Пробільні символи

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

const userLocation = "New York City, "+"NY";
const userLocation="New York City, "+"NY";
const userLocation = "New York City, "+"NY";

Змінна userLocation матиме значення New York City, NY незалежно від стилю присвоєння цього значення. Для JavaScript не має жодного значення, які пробіли використовуються.

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

читається простіше, ніж:

Важливим винятком із цього правила є призначення кількох змінних. Зверніть увагу на позицію = у наступному прикладі:

const companyName = "MyCompany";
const companyHeadquarters = "New York City";
const companyHandle = "mycompany";

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

Зайві переходи рядка також ігноруються JavaScript. Як правило, додаткові порожні рядкивставляються над коментарем та після блоку коду.

Круглі дужки

У ключових словах, таких як if, switch і for, до та після круглих дужок зазвичай додаються пробіли. Розгляньте наступний приклад:

// An example of if statement syntax
if () ( )
// Check math equation and print a string to the console
if (4< 5) {
console.log("4 is less than 5.");
}
// An example of for loop syntax
for () ( )
// Iterate 10 times, printing out each iteration number to the console
for (let i = 0; i 0) (
square(number);
}

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

// An example object
const objectName = ();
// Initialize triangle object
const triangle = (
type: "right",
angle: 90,
sides: 3,
};

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

Структурування коду

Технічно весь код JavaScript можна помістити в один рядок. Але такий код дуже складно читати та підтримувати. Тому програма поділяється на рядки.

Наприклад, оператор if/else можна написати в один рядок, а можна поділити:

// Conditional statement written on one line
if (x === 1) ( /* execute code if true */ ) else ( /* execute code if false */ )
// Conditional statement with indentation
if (x === 1) (
// execute code if true
) else (
// execute code if false
}

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

Відкрита дужка наприкінці першого рядка – простий методструктурування операторів та об'єктів JavaScript. Іноді дужки виносяться в окремі рядки:

// Conditional statement with braces on newlines
if (x === 1)
{
// execute code if true
}
else
{
// execute code if false
}

Така структура JavaScript, як і в інших мовах, використовується досить рідко.

Вкладені оператори повинні відокремлюватися:

// Initialize a function
функція єEqualToOne(x) (
// Check if x is equal to one
if (x === 1) (
// on success, return true
return true;
) else (
return false;
}
}

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

Ідентифікатори

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

Чутливість до регістру

Імена чутливі до регістру. Тобто, myVariable і myvariable будуть сприйматися як дві різні змінні.

var myVariable = 1;
var myvariable = 2;

За загальною угодою імена пишуться в верблюжому регістрі (camelCase): перше слово пишеться з малої літери, але кожне наступне слово починається з великої літери. Глобальні змінні чи константи пишуться у верхньому регістріта поділяються символами підкреслення.

const INSURANCE_RATE = 0.4;

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

// Initialize a class
class ExampleClass (
constructor() ( )
}

Щоб забезпечити читання коду, потрібно послідовно використовувати ідентифікатори у всіх файлах програми.

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

Ідентифікатори також не повинні містити жодних зарезервованих ключових слів. Ключові слова – це JavaScript, які мають вбудовану функціональність. До них відносяться var, if, for та this.

Наприклад, ви не зможете присвоїти значення змінної з ім'ям var.

var var = "Some value";

JavaScript знає ключове слово var, тому видасть помилку:

SyntaxError: Unexpected token (1:4)

JavaScript може бути реалізований за допомогою операторів JavaScript, які містяться в теги HTML script... /script на веб-сторінці.

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

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

JavaScript code

Тег скрипта містить два важливі атрибути -

  • Мова - цей атрибут вказує, яку мову сценаріїв ви використовуєте. Як правило, його значення буде JavaScript. Хоча недавні версії HTML(та XHTML, його наступник) припинили використання цього атрибуту.
  • Тип. Цей атрибут тепер рекомендується для вказівки мови сценаріїв, і його значення має бути встановлено на «text / javascript».

Таким чином, ваш сегмент JavaScript буде виглядати таким чином:

JavaScript code

Ваш перший скрипт JavaScript

Візьмемо приклад для друку «Hello World». Ми додали додатковий коментар HTML, який оточує наш код JavaScript. Це щоб зберегти наш код з браузера, який не підтримує JavaScript. Коментар закінчується "// ->". Тут «//» означає коментар у JavaScript, тому ми додаємо це, щоб браузер не читав коментаря HTMLяк частина коду JavaScript. Потім ми викликаємо функцію document.write , яка записує рядок у наш HTML-документ.

Ця функція може бути використана для запису тексту, HTML або обох. Погляньте на наступний код.

Цей код дасть наступний результат:

Hello World!

Прогалини та розриви рядків

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

Крапки з комою в JavaScript

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

Але при форматуванні в одному рядку наступним чином, ви повинні використовувати крапки з комою -

Примітка.

Хороша практика програмування полягає у використанні крапок із комою.

Чутливість корпусу

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

Таким чином, ідентифікатори Time і TIME будуть передавати різні значення JavaScript.