Различия
Показаны различия между двумя версиями страницы.
Предыдущая версия | |||
— | sintaksis_javascript [2025/07/06 12:39] (текущий) – внешнее изменение 127.0.0.1 | ||
---|---|---|---|
Строка 1: | Строка 1: | ||
+ | ====== Основы синтаксиса JavaScript – разбор ключевых элементов ====== | ||
+ | ~~Title: Синтаксис JavaScript – основные правила написания кода ~~ | ||
+ | {{htmlmetatags> | ||
+ | metatag-description=(Разбираем синтаксис JavaScript: от объявления переменных до работы с функциями. Простые примеры кода и рекомендации для правильного написания JS.) | ||
+ | }} | ||
+ | |||
+ | Для JavaScript существуют различные стандарты форматирования, | ||
+ | |||
+ | * [[JavaScript|JavaScript]] чувствителен к регистру символов. Это означает, | ||
+ | * Имена переменных чувствительны к регистру; | ||
+ | * Принято если переменная состоит из двух слов, то первое слово пишется с маленькой буквы, например: | ||
+ | * **Имена CSS в JavaScript.** В именах многих атрибутов [[CSS]] стилей, | ||
+ | element.style.fontFamily = " | ||
+ | </ | ||
+ | * Операторы должны разделяться между собой символом ";" | ||
+ | * Операторы могут объединяться в блоки. Для этого их следует размещать в фигурных скобках: | ||
+ | * В текст скрипта можно включать однострочные и блочный комментарии, | ||
+ | * В JavaScript значению " | ||
+ | * Если браузер не понимает JS и вы не хотите чтобы скрипт выводился как обычный текст, применяют такой приём с комментариями:< | ||
+ | < | ||
+ | <!-- | ||
+ | alert (' | ||
+ | //--> | ||
+ | </ | ||
+ | </ | ||
+ | * Пробелы и переводы строк в JavaScript не обязательны. Можно написать программу в одну строку. Роль пробелов в блоках – отделять их от остальной программы. | ||
+ | * [[Шаблонные строки в JavaScript]] | ||
+ | ===== Типы данных и их назначение ===== | ||
+ | JavaScript — это язык программирования с динамической системой типов, что означает, | ||
+ | |||
+ | Понимание типов данных важно, потому что это помогает правильно использовать и обрабатывать данные в программе. Если вы знаете, | ||
+ | |||
+ | Типы данных в JavaScript делятся на две основные категории: | ||
+ | * Примитивные типы данных включают в себя числа (number), строки (string), булевые значения (boolean), null, undefined, BigInt и Symbol. Они обладают простой структурой и передаются по значению, | ||
+ | * Объектные типы данных включают в себя объекты (object), массивы (array), функции (function) и другие. Они обладают сложной структурой и передаются по ссылке, | ||
+ | |||
+ | Выражение " | ||
+ | |||
+ | Замечания к некоторым типам данных: | ||
+ | * **Null и Undefined**: | ||
+ | * Тип данных **function** относится к объектам (object). | ||
+ | * Чтобы определить число как **BigInt**, в конце числа добавляется буква n. Это специальный синтаксис, | ||
+ | ===== Приоритетность операторов, | ||
+ | В JavaScript существует понятие " | ||
+ | <file javascript> | ||
+ | let result = 10+2*3; // | ||
+ | </ | ||
+ | Для определения точного порядка выполнения можно использовать скобки. Выражения, | ||
+ | <file javascript> | ||
+ | let result = (10+2)*3; // | ||
+ | </ | ||
+ | JavaScript имеет встроенный приоритет для разных видов операторов. Например, | ||
+ | <file javascript> | ||
+ | let result = 5+10 > 8; // Результат будет true, ибо 15 > 8 | ||
+ | </ | ||
+ | |||
+ | Условные выражения, | ||
+ | <file javascript> | ||
+ | if (condition1) { | ||
+ | // Выполняемый код, если condition1 true | ||
+ | } else if (condition2) { | ||
+ | // Выполняемый код, если condition1 false и condition2 true | ||
+ | } else { | ||
+ | // Выполняемый код, если оба условия false | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | Операторы присвоения, | ||
+ | |||
+ | <file javascript> | ||
+ | let a = 5; // Сначала высчитается 5, а затем присваивается a | ||
+ | </ | ||
+ | |||
+ | Правильное понимание порядка выполнения операторов поможет избежать ошибок и писать более читаемый код. Благодаря этим знаниям вы сможете улучшить качество JavaScript-кода и сделать его более эффективным. | ||
+ | ===== Переменные в JavaScript. Разница между " | ||
+ | |||
+ | <panel type=" | ||
+ | |||
+ | Понимание hoisting важно для предотвращения ошибок и написания предсказуемого кода. Оно может влиять на поведение программы, | ||
+ | |||
+ | JavaScript имеет три способа объявления переменных: | ||
+ | * **var**: Используется в основном для совместимости с устаревшим кодом или когда требуется глобальная область видимости. Область видимости: | ||
+ | * **let**: Используется для переменных, | ||
+ | * **const**: Используется для константных значений, | ||
+ | <panel type=" | ||
+ | Если вы не планируете переназначать переменную (то есть создавать новый объект и присваивать его этой переменной), | ||
+ | </ | ||
+ | <panel type=" | ||
+ | В браузере глобальная область видимости связана с объектом window (в [[Nodejs|Node.js]] глобальная область видимости связана с объектом global). Переменные, | ||
+ | <file javascript> | ||
+ | let globalLet = " | ||
+ | console.log(window.globalLet); | ||
+ | console.log(globalLet); | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | Переменные в JavaScript объявляются при помощи ключевого слова var, которое располагается в начале объявления. При объявлении переменной можно присвоить значение (проинициализировать). Если переменная не была проинициализирована при объявлении, | ||
+ | <file javascript> | ||
+ | var имя_переменной [= значение] [, имя_переменной [= значение] ... ]; | ||
+ | </ | ||
+ | Ниже приводятся несколько примеров объявления переменных: | ||
+ | <file javascript> | ||
+ | var angle; // | ||
+ | var counter_1 = 0; // | ||
+ | var FirstName, LastName = " | ||
+ | </ | ||
+ | Примеры: | ||
+ | <file javascript> | ||
+ | // var | ||
+ | function exampleVar() { | ||
+ | if (true) { | ||
+ | var localVar = " | ||
+ | } | ||
+ | console.log(localVar); | ||
+ | } | ||
+ | |||
+ | // let | ||
+ | function exampleLet() { | ||
+ | if (true) { | ||
+ | let localVar = " | ||
+ | } | ||
+ | console.log(localVar); | ||
+ | } | ||
+ | |||
+ | // const | ||
+ | const PI = 3.14; | ||
+ | try { | ||
+ | PI = 2.71; // Вызывает TypeError | ||
+ | } catch (e) { | ||
+ | console.log(e); | ||
+ | } | ||
+ | </ | ||
+ | ===== Унарные операторы (префикс, | ||
+ | В JavaScript существуют два типа операторов: | ||
+ | |||
+ | Префиксный оператор — это унарный оператор, | ||
+ | <file javascript> | ||
+ | let x = 5; | ||
+ | x = -x; // x становится -5 | ||
+ | console.log(x); | ||
+ | |||
+ | let isAdmin = false; | ||
+ | let isNotAdmin = !isAdmin; | ||
+ | console.log(isNotAdmin); | ||
+ | </ | ||
+ | Постфиксный оператор — это унарный оператор, | ||
+ | <file javascript> | ||
+ | let counter = 10; | ||
+ | counter--; | ||
+ | console.log(counter); | ||
+ | |||
+ | let obj = { count: 5 }; | ||
+ | let currentValue = obj.count--; | ||
+ | console.log(currentValue); | ||
+ | console.log(obj.count); | ||
+ | </ | ||
+ | |||
+ | Унарные операторы являются важными элементами JavaScript, поскольку они помогают выполнять быстрые и эффективные операции с данными. Они также позволяют изменять значения переменных и объектов с помощью простых операций. | ||
+ | |||
+ | Например, | ||
+ | |||
+ | <file javascript> | ||
+ | let str = " | ||
+ | let num = +str; // num становится 20 | ||
+ | console.log(num); | ||
+ | </ | ||
+ | Унарные операторы также полезны при проверке на существование (null или undefined): | ||
+ | |||
+ | <file javascript> | ||
+ | let user = null; | ||
+ | let exists = !!user; // exists становится false | ||
+ | console.log(exists); | ||
+ | </ | ||
+ | Кроме того, унарные операторы позволяют быстро инкрементировать или декрементировать переменную, | ||
+ | <file javascript> | ||
+ | let score = 0; | ||
+ | let newScore = ++score; | ||
+ | console.log(newScore); | ||
+ | </ | ||
+ | Унарные операторы являются мощным инструментом для работы с данными в JavaScript, поэтому важно понимать их роль и использование. | ||
+ | ===== Логические операторы && || ! ?? ===== | ||
+ | Логические операторы используются для сравнения и объединения логических значений. Вот некоторые из самых распространенных логических операторов: | ||
+ | |||
+ | * && (логическое " | ||
+ | * || (логическое " | ||
+ | * ! (логическое " | ||
+ | * ?? (оператор нулевого слияния, | ||
+ | Логические операторы возвращают true или false в зависимости от результата сравнения. | ||
+ | |||
+ | <file javascript> | ||
+ | let a = 5; | ||
+ | let b = 10; | ||
+ | |||
+ | let result1 = a < b && a !== b; // true (оба условия выполняются) | ||
+ | let result2 = a === b || b > 20; // false (оба условия ложные) | ||
+ | let result3 = !(a < b); // false (отрицание true) | ||
+ | let result4 = null ?? " | ||
+ | </ | ||
+ | |||
+ | Пример использования ??. В этом примере displayName получает username, если оно не равно null или undefined, иначе присваивается " | ||
+ | <file javascript> | ||
+ | let username = null; | ||
+ | let guestName = " | ||
+ | |||
+ | let displayName = username ?? guestName; | ||
+ | console.log(displayName); | ||
+ | </ | ||
+ | ===== Операторы цикла for, while, do ===== | ||
+ | Циклы в JavaScript позволяют выполнять блок кода, пока заданное условие выполняется. Основной целью использования циклов является автоматизация выполнения однотипных действий. | ||
+ | {{ : | ||
+ | * Цикл for используется, | ||
+ | * Цикл while выполняется, | ||
+ | * Цикл do...while гарантирует выполнение блока кода хотя бы раз, даже если условие сразу false. | ||
+ | ==== Цикл while ==== | ||
+ | |||
+ | <file javascript> | ||
+ | while (B){S} | ||
+ | где | ||
+ | B - условие продолжения. Если это выражение ложно, то выполнение цикла завершается, | ||
+ | {} - тело цикла, | ||
+ | S - операторы. | ||
+ | </ | ||
+ | var number = 0; | ||
+ | while (number <= 12) { | ||
+ | console.log(number); | ||
+ | number = number + 2; | ||
+ | }</ | ||
+ | ==== Цикл do ==== | ||
+ | |||
+ | Цикл do...while похож на while, но код в блоке выполняется по крайней мере один раз, даже если условие сразу false. Поэтому и тестируемое выражение записывают после тела цикла: | ||
+ | <file javascript> | ||
+ | do { | ||
+ | var name = prompt(" | ||
+ | } while (!name); | ||
+ | console.log(name); | ||
+ | </ | ||
+ | |||
+ | ==== Цикл for, for…of, for…in ==== | ||
+ | Цикл for – это самый распространенный вид цикла в JavaScript. Он позволяет указать исходное условие, | ||
+ | |||
+ | Вот общий синтаксис этого цикла: | ||
+ | <file javascript> | ||
+ | for (A; B; I){S} | ||
+ | |||
+ | где | ||
+ | A - первоначальное выражение, | ||
+ | B - условие продолжения. Если это выражение ложно, то выполнение цикла завершается, | ||
+ | I - выражение инкремента, | ||
+ | {} - тело цикла, | ||
+ | S - операторы. | ||
+ | </ | ||
+ | В цикле перебирается строка с 0 -ого элемента и до последнего символа. | ||
+ | <file javascript> | ||
+ | var str=' | ||
+ | for (i = 0; i < str.length; i++) { | ||
+ | console.log(str[i]); | ||
+ | } | ||
+ | </ | ||
+ | Используйте for...in, когда вам нужно перебрать свойства объекта. | ||
+ | <file javascript> | ||
+ | for (переменная in объект) { | ||
+ | // Блок кода, выполняемый на каждой итерации | ||
+ | } | ||
+ | |||
+ | const person = { | ||
+ | firstName: ' | ||
+ | lastName: ' | ||
+ | age: 30 | ||
+ | }; | ||
+ | |||
+ | for (let key in person) { | ||
+ | console.log(key, | ||
+ | }; | ||
+ | </ | ||
+ | Используйте for...of, когда вы имеете дело с итерабельными объектами (массивы, | ||
+ | <file javascript> | ||
+ | for (переменная of итерабельный_объект) { | ||
+ | // Блок кода, выполняемый на каждой итерации | ||
+ | } | ||
+ | |||
+ | const numbers = [1, 2, 3, 4, 5]; | ||
+ | |||
+ | for (let num of numbers) { | ||
+ | console.log(num); | ||
+ | } | ||
+ | </ | ||
+ | ===== Условный оператор if, else if и else. Вложенные операторы if ===== | ||
+ | Основная структура оператора if выглядит следующим образом: | ||
+ | <file javascript> | ||
+ | if (условие) { | ||
+ | // Выполняемый код, если условие истинно | ||
+ | } | ||
+ | </ | ||
+ | Условие – это выражение или значение, | ||
+ | |||
+ | В этом примере мы используем if, else if и else для определения, | ||
+ | <file javascript> | ||
+ | let age = 18; | ||
+ | |||
+ | if (age < 18) { | ||
+ | | ||
+ | } else if (age >= 18 && age < 35) { | ||
+ | | ||
+ | } else { | ||
+ | | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | Условные операторы можно вкладывать друг в друга для более сложных проверок. Вот пример вложенного оператора if: | ||
+ | |||
+ | <file javascript> | ||
+ | let temperature = 25; | ||
+ | let isRaining = false; | ||
+ | |||
+ | if (temperature > 30) { | ||
+ | | ||
+ | if (isRaining) { | ||
+ | | ||
+ | } | ||
+ | } else { | ||
+ | | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | В этом примере мы проверяем температуру и дождь. Если температура больше 30 градусов, | ||
+ | ===== Тернарный оператор ===== | ||
+ | Тернарный оператор, | ||
+ | <file javascript> | ||
+ | условие ? выражение1 : выражение2 | ||
+ | </ | ||
+ | Если температура больше 25 градусов, | ||
+ | <file javascript> | ||
+ | let temperature = 30; | ||
+ | let weather = temperature > 25 ? ' | ||
+ | console.log(weather); | ||
+ | </ | ||
+ | Для избежания ошибок сравнение лучше заключать в скобки. Например, | ||
+ | <file javascript> | ||
+ | var checknodns = document.getElementById(' | ||
+ | var test = (checknodns.checked) ? " | ||
+ | </ | ||
+ | |||
+ | ===== Условная конструкция switch/case ===== | ||
+ | |||
+ | Когда выполняется инструкция switch, она вычисляет значение выражения, | ||
+ | |||
+ | **Можно ли использовать выражения после case?** Стандарт ECMAScript v3 допускает указание после case произвольного выражения, | ||
+ | |||
+ | Следующая инструкция switch эквивалентна повторяющимся инструкциям if/else: | ||
+ | <file javascript> | ||
+ | switch(n) { | ||
+ | case 1: | ||
+ | // Выполняется, | ||
+ | // Исполняем блок кода 1. | ||
+ | break; // Здесь останавливаемся | ||
+ | case 2: | ||
+ | // Выполняется, | ||
+ | // Исполняем блок кода 2. | ||
+ | break; // Здесь останавливаемся | ||
+ | case 3: | ||
+ | // Выполняется, | ||
+ | // Исполняем блок кода 3. | ||
+ | break; // Здесь останавливаемся | ||
+ | default: // Если все остальное не подходит... | ||
+ | // Исполняем блок кода 4. | ||
+ | break; // Здесь останавливаемся | ||
+ | } | ||
+ | </ | ||
+ | Инструкция break приводит к передаче управления в конец инструкции switch или цикла. Конструкции case в инструкции switch задают только начальную точку исполняемого кода, но не задают никаких конечных точек. В случае отсутствия инструкций break инструкция switch начинает исполнение блока кода с метки case, соответствующей значению выражения, | ||
+ | |||
+ | <panel type=" | ||
+ | * В функциях return можно использовать вместо break, так как он сразу завершает выполнение функции. | ||
+ | * Вне функций return не сработает, | ||
+ | </ | ||
+ | |||
+ | Ниже приводится более реальный пример использования инструкции switch; он преобразует значение в строку способом, | ||
+ | <file javascript> | ||
+ | function convert(x) { | ||
+ | switch(typeof x) { | ||
+ | case ' | ||
+ | return x.toString(16); | ||
+ | case ' | ||
+ | return '"' | ||
+ | case ' | ||
+ | return x.toString().toUpperCase(); | ||
+ | default: | ||
+ | // Любой другой тип преобразуем обычным способом | ||
+ | return x.toString() | ||
+ | } | ||
+ | } | ||
+ | </ | ||
+ | |||
📌 Удобный подбор VPS по параметрам доступен на DIEGfinder.com - официальном инструменте проекта DIEG. Это часть единой экосистемы, созданной для того, чтобы помочь быстро найти подходящий VPS/VDS сервер для любых задач хостинга.
📌 Для тестирования скриптов, установщиков VPN и Python-ботов рекомендуем использовать надежные VPS на короткий срок. Подробнее о быстрой аренде VPS для экспериментов - читайте здесь.
💥 Подпишись в Телеграм 💥 и задай вопрос по сайтам и хостингам бесплатно!7 Самых Популярных Статей
- Как запустить скрипты и веб-приложения на Python
- Что такое страны TIER 1,2,3
- 7 способов сравнения файлов по содержимому в Windows или Linux
- Установка и тестирование веб-панели HestiaCP
- Nginx простые примеры конфигурации
- top, htop, atop определение загрузки ОС (Load average, LA)
- Использование rsync в примерах
7 Самых Популярных Обзоров
- Хостинг для Python-скриптов и приложений
- ТОП 4 лучших антидетект браузеров (Бесплатные & Платные)
- Подборка купонов (промокоды) на хостинг, антидетект браузеры
- Обзор THE.Hosting (PQ Hosting): надежный хостинг с профессиональной поддержкой
- Хостинг в России
- Хостинг в Европе
- Обзор браузера Dolphin {anty} для мультиаккаунтинга