Вы заинтересованы в изучении JavaScript, но у вас мало свободного времени? Тогда вы пришли в нужное место! В этом кратком руководстве по JavaScript мы рассмотрим основы языка и начнем ваш путь к тому, чтобы стать разработчиком JavaScript.
JavaScript — это язык программирования, используемый для создания интерактивных веб-сайтов. Его можно использовать для создания анимации, интерактивных форм и других интересных функций, которые делают Интернет более динамичным.
Вот несколько вещей, которые вы узнаете в этом уроке:
- Переменные и типы данных
- Операторы
- Условные операторы
- Циклы
- Функции
Не волнуйтесь, если вы еще не знакомы с этими терминами. Мы объясним их все подробно и приведем примеры, которые помогут вам понять. С помощью этого краткого руководства вы сможете начать писать свой собственный код JavaScript в кратчайшие сроки!
Комментарии
Комментарии — это неисполняемый код. Это означает, что вы можете принять к сведению каждую строку. Если вы хотите прокомментировать одну строку, используйте //, а для нескольких строк используйте /* и */.
// this line not executed let num = 1; // num variable equal to one num++; // num variable is two /* * Multiline comment. * You can write * multiple lines comments. */
Типы данных
JavaScript предоставляет восемь различных типов данных.
StringNumberBigintBooleanUndefinedNullSymbolObject
Переменные
Переменные JavaScript используются для хранения значений данных. В JavaScript переменные объявляются с помощью ключевых слов "var", "let"или"const".
Имена переменных должны быть уникальными, содержать только буквы, цифры и знаки подчеркивания и не могут начинаться с цифры.
let name = "John"; // a string variable let age = 25; // a number variable let isStudent = true; // a boolean variable console.log(name); // outputs "John" console.log(age); // outputs 25 console.log(isStudent); // outputs true
Переменным также могут быть присвоены нулевые или неопределенные значения, указывающие на то, что им еще не назначено значение.
let x; // variable defined but not assigned a value console.log(x); // outputs undefined let y = null; // variable assigned a null value console.log(y); // outputs null
Переменные также используются для хранения результатов выражений, вычислений и вывода функций. Их можно использовать во всей программе, а их значения можно изменять по мере необходимости.
let a = 10; let b = 5; let c = a + b; //stores the result of the addition of a and b in the variable c console.log(c); //outputs the value of variable c, which is 15
Переменным также можно присваивать значения других переменных, что позволяет выполнять более сложные вычисления и выражения.
Струны
Строки JavaScript — это тип данных, используемый для хранения текста и управления им. Их можно создать, заключив текст в одинарные кавычки (''), двойные кавычки ("") или обратные кавычки (` `). После создания строки можно объединять, нарезать, сравнивать или искать определенные символы или подстроки с использованием различных строковых методов. Некоторые распространенные строковые методы в JavaScript включают в себя:
- length: возвращает длину строки.
- indexOf: возвращает индекс первого вхождения символа или подстроки в строку.
- slice: возвращает часть строки на основе начального и конечного индекса.
- replace: заменяет символ или подстроку в строке другим значением.
- toUpperCase: изменяет все символы в строке на верхний регистр.
- toLowerCase: изменяет все символы в строке на строчные.
let greeting = "Hello, World!";
console.log(greeting.length); // output: 13
console.log(greeting.indexOf("Wo")); // output: 7
console.log(greeting.slice(0,5)); // output: "Hello"
console.log(greeting.replace("World", "Universe")); // output: "Hello, Universe!"
console.log(greeting.toUpperCase()); // output: "HELLO, WORLD!"
console.log(greeting.toLowerCase()); // output: "hello, world!"
Escape-последовательности JavaScript в строках:
\n // newline "Hello\nWorld"
\t // tab "Hello\tWorld"
\v // vertical tab "Hello\vWorld"
\b // backspace "Hello\bWorld"
\f // form feed "Hello\fWorld"
\r // carriage return "Hello\rWorld"
\' // single quote (') 'It\'s a nice day'
\" // double quote (") "She said, \"Hello World\""
\\ // backslash (\) "C:\\Windows\\System32"
Примечание. Управляющие последовательности также можно использовать для представления специальных символов, которые нельзя ввести напрямую, например символов Unicode.
Неизменяемость строк
В JavaScript строки неизменяемы. Это означает, что после создания строки ее значение нельзя изменить. Любая операция над строкой, такая как добавление символов или замена подстроки, создаст новую строку, а не изменит исходную.
let str = "Hello"; str[0] = "J"; console.log(str); // Output: "Hello"
В приведенном выше коде мы пытаемся изменить первый символ строки «str» на «J». Однако, когда мы регистрируем `str`, он по-прежнему печатает «Hello», потому что строка неизменяема и ее значение нельзя изменить.
Вместо этого мы можем создать новую строку, содержащую измененное значение:
let str = "Hello"; str = "J" + str.slice(1); console.log(str); // Output: "Jello"
Массивы
Массивы JavaScript — это наборы связанных элементов данных или переменных JavaScript, которые хранятся в одной структуре. Каждый элемент в массиве идентифицируется уникальным порядковым номером, начиная с нуля. Массивы являются одной из самых популярных структур данных в JavaScript и используются в самых разных приложениях, от базового хранения и сортировки данных до сложных операций с данными и их анализа.
Создать массив в JavaScript просто. Вы можете объявить массив, используя квадратные скобки [ ] и присвоив ему значения.
let fruits = ["🍎", "🍌" , "🍊" , "🍇"];
В этом примере переменная «фрукты» представляет собой массив строковых значений. Квадратные скобки [ ] указывают, что это массив, а значения внутри скобок — это элементы, содержащиеся в массиве. Вы также можете создать массив, содержащий смесь типов данных:
let myArray = ["John Doe", 25, true];
В этом примере переменная «myArray» представляет собой массив, содержащий строку, число (целое число) и логическое значение (истина).
Вы можете получить доступ к элементам массива по их порядковому номеру, начиная с нуля. Например, чтобы получить доступ к первому элементу в массиве «фрукты», вы должны использовать:
console.log(fruits[0]); // arrays index starting zero // Output: "🍎"
Это выведет «🍎 » на консоль. Вы также можете изменять элементы массива, присваивая им новые значения.
fruits[2] = “🥝”;
Массивы позволяют манипулировать различными способами, например добавлять или удалять элементы, сортировать, фильтровать и т. д. Вот несколько примеров распространенных методов массива:
.push(): добавляет элемент в конец массива.
fruits.push(“🍍”);
В этом примере мы добавили строковое значение «Ананас» в конец массива «фрукты».
.pop(): удаляет последний элемент из массива и возвращает его.
let lastFruit = fruits.pop(); // "🍍"
В этом примере мы удалили последний элемент из массива «fruits» (теперь это «🍍») и присвоили его переменной «lastFruit».
.sort(): сортирует элементы массива в алфавитном порядке.
fruits.sort();
В этом примере мы отсортировали элементы в массиве «фрукты» в алфавитном порядке.
В целом, массивы являются фундаментальной частью программирования на JavaScript и широко используются в веб-разработке, включая разработку интерфейсов и серверов. С помощью методов массивов вы можете легко манипулировать и преобразовывать данные внутри массивов, что делает их мощным и универсальным инструментом для любого программиста.
Функции
Функции — это многократно используемые блоки кода, которые выполняют определенную задачу. Они могут вызываться другими частями кода для выполнения одной и той же задачи снова и снова. У функции есть имя, иногда она принимает аргументы (входные данные), а иногда возвращает значение.
В JavaScript существует три основных способа объявить функцию:
Объявление функции:
Это наиболее распространенный способ объявления функции. Он начинается с ключевого слова function, за которым следует имя функции, список параметров в круглых скобках (необязательно), а затем тело функции в фигурных скобках.
function add(a, b) {
return a + b;
}
Выражение функции:
Функциональное выражение — это когда вы присваиваете функцию переменной. Это полезно, когда вы хотите передать функцию в качестве аргумента другой функции.
const add = function(a, b) {
return a + b;
};
Функция стрелки:
Стрелочная функция — это сокращение для функционального выражения. Это полезно, когда вы хотите написать лаконичный код. Она начинается с набора круглых скобок (необязательно, если имеется только один параметр), за которыми следует стрелка =›, а затем тело функции в фигурных скобках (если имеется более одного оператора) или без фигурных скобок (если есть только одно утверждение).
const add = (a, b) => a + b;
Это три основных способа объявления функции в JavaScript. У каждого есть свой вариант использования и преимущества, поэтому полезно знать их все.
возврат ключевое слово
Ключевое слово return используется в функциях JavaScript для завершения выполнения функции и возврата значения вызывающей функции. Возвращаемое значение может быть либо выражением, либо неопределенным, если выражение не указано. Возвращаемое значение является результатом функции и может быть сохранено в переменной для последующего использования.
Булевы значения
В JavaScript логическое значение — это тип данных, представляющий логическое значение либо true, либо false.
Логические значения часто используются в условных операторах, где значение выражения оценивается как логическое значение.
let x = 5;
let y = 10;
if (x < y) {
console.log('x is less than y');
}
В этом примере выражение x ‹ y оценивается как true, что приводит к выполнению кода внутри оператора if. Если бы выражение было оценено как false, код внутри оператора if не был бы выполнен.
Логические значения также можно использовать в сочетании с логическими операторами (&&, ||, !) для создания более сложных выражений.
let x = 5;
let y = 10;
let z = 15;
if (x < y && y < z) {
console.log('x is less than y and y is less than z');
}
операторы if
В JavaScript оператор if используется для выполнения блока кода, если указанное условие истинно. Синтаксис оператора if следующий:
if (condition) {
// code to be executed if the condition is true
}
Условие – это выражение, которое оценивается как истина или ложь. Если условие истинно, будет выполнен блок кода в фигурных скобках. Если условие false, блок кода будет пропущен.
let a = 5;
if (a > 3) {
console.log('a is greater than 3');
}
В этом примере условие a › 3 равно true, поэтому оператор console.log будет выполнен и появится сообщение «a больше 3. >» будет напечатано на консоли.
Оператор иначе
Операторы if также могут быть расширены за счет включения оператора else, который выполняется, если выполняется условие в операторе if. является ложным.
let a = 2;
if (a > 3) {
console.log('a is greater than 3');
} else {
console.log('a is less than or equal to 3');
}
В этом примере условие a › 3 ложно, поэтому вместо него будет выполнен код внутри блока else. На консоль будет выведено сообщение «a меньше или равно 3».
Оператор else if
Операторы if также могут быть объединены в цепочку с операторами else if для проверки нескольких условий.
let a = 5;
if (a > 10) {
console.log('a is greater than 10');
} else if (a > 5) {
console.log('a is greater than 5');
} else {
console.log('a is less than or equal to 5');
}
Операторы сравнения
В JavaScript операторы сравнения используются для сравнения двух значений и возврата логического значения (true или false) на основе сравнения. Существует шесть операторов сравнения:
- == (равно): сравнивает два значения на равенство, но не проверяет тип данных значений.
- === (строгое равенство): сравнивает два значения как на равенство, так и на тип данных.
- != (не равно): сравнивает два значения на предмет неравенства, но не проверяет тип данных значений.
- !== (строгое не равно): сравнивает два значения как для неравенства, так и для типа данных.
- › (больше): сравнивает два значения и возвращает true, если левый операнд больше правого операнда.
- ‹ (меньше чем): сравнивает два значения и возвращает true, если левый операнд меньше правого операнда.
Эти операторы широко используются в программировании на JavaScript для сравнения значений и управления потоком выполнения в программе.
Оператор переключения
В JavaScript оператор switch используется для выполнения одного блока кода из нескольких опций на основе заданного выражения. Синтаксис оператора switch следующий:
switch(expression) {
case option1:
// code to be executed if expression matches option1
break;
case option2:
// code to be executed if expression matches option2
break;
case option3:
// code to be executed if expression matches option3
break;
default:
// code to be executed if expression does not match any option
}
Оператор switch оценивает выражение и сравнивает его значение с каждым из параметров, указанных в операторах case. Если значение соответствует опции, выполняется блок кода, связанный с этой опцией. Если ни один из параметров не соответствует значению выражения, выполняется блок кода, связанный с оператором по умолчанию.
Оператор break используется для выхода из оператора switch после выполнения блока кода, связанного с соответствующей опцией. Если оператор break опущен, код будет продолжать выполняться в следующих случаях, пока не встретится оператор break.
В целом, оператор switch является полезной управляющей структурой в JavaScript для выполнения одного блока кода из нескольких опций на основе заданного выражения.
Тернарный оператор
В JavaScript тернарный оператор — это сокращенный способ написания оператора if-else. Это однострочное выражение, которое дает одно из двух значений, в зависимости от того, является ли условие истинным или ложным. Синтаксис тернарного оператора следующий:
// condition ? value1 : value2
Если условие истинно, тернарный оператор возвращает value1. Если условие ложно, тернарный оператор возвращает value2.
Например, предположим, что мы хотим присвоить переменной результат «Удачно» или «Неудовлетворительно» в зависимости от того, выше или ниже оценка учащегося 60. Мы могли бы напишите следующий оператор if-else:
let grade = 75;
let result;
if (grade >= 60) {
result = "Pass";
} else {
result = "Fail";
}
В качестве альтернативы мы могли бы использовать тернарный оператор для достижения того же результата более кратко и лаконично:
let grade = 75; let result = (grade >= 60) ? "Pass" : "Fail";
В целом, тернарный оператор — полезный инструмент в JavaScript для более лаконичного написания условных выражений.
Объекты
В JavaScript объект — это структура данных, которая хранит данные в виде пар ключ-значение. Ключи представляют собой строки или символы, а значения могут быть любого типа данных, включая строки, числа, логические значения, массивы, функции и даже другие объекты. Объекты часто используются для представления объектов реального мира, таких как человек, автомобиль или книга.
Есть несколько способов создания объектов в JavaScript. Один из способов — использовать литеральную нотацию объекта, которая включает в себя заключение пар ключ-значение в фигурные скобки:
let person = {
name: "John",
age: 30,
gender: "male",
interests: ["reading", "music"],
greet: function() {
console.log("Hello, my name is " + this.name);
}
};
В этом примере мы создали объект с именем person с четырьмя свойствами (имя, возраст, пол и интересы) и метод ( приветствовать). Ключевое слово this относится к текущему объекту, поэтому this.name относится к свойству name объекта person. .
Мы также можем создавать объекты с помощью функции-конструктора, которая представляет собой специальную функцию, используемую для создания и инициализации объектов:
function Person(name, age, gender, interests) {
this.name = name;
this.age = age;
this.gender = gender;
this.interests = interests;
this.greet = function() {
console.log("Hello, my name is " + this.name);
}
}
let john = new Person("John", 30, "male", ["reading", "music"]);
В целом, объекты — это мощная функция JavaScript, которая позволяет нам гибко и динамично организовывать данные и управлять ими.
Петли
Циклы в JavaScript позволяют многократно выполнять блок кода. В JavaScript есть три типа циклов: for, while и do while.
цикл for
Цикл for обычно используется, когда вы знаете, сколько раз вы хотите выполнить цикл. Он состоит из трех частей: инициализация, условие и увеличение/уменьшение.
for (let i = 0; i < 5; i++) {
console.log(i);
}
Этот код запишет числа от 0 до 4 в консоль.
цикл пока
Цикл while используется, когда вы не знаете, сколько раз вы хотите выполнить цикл. Цикл будет продолжаться до тех пор, пока условие истинно.
let i = 0;
while (i < 5) {
console.log(i);
i++;
}
Этот код также запишет в консоль числа от 0 до 4.
выполнить цикл
Цикл do while похож на цикл while, но он всегда будет выполнять блок кода хотя бы один раз, даже если условие ложно.
let i = 0;
do {
console.log(i);
i++;
} while (i < 5);
Этот код также запишет в консоль числа от 0 до 4.
Циклы полезны для перебора массивов, выполнения вычислений и выполнения кода на основе пользовательского ввода.
Outro
Поздравляем! Вы добрались до конца нашего краткого руководства по JavaScript. Мы надеемся, что вы изучили основы языка и готовы продолжить свое путешествие в качестве разработчика JavaScript.
Помните, практика делает совершенным. Чем больше вы работаете с JavaScript, тем удобнее вы будете разбираться в синтаксисе и концепциях. Не бойтесь экспериментировать и пробовать новое.
В Интернете доступно бесконечное количество ресурсов, которые помогут вам продолжить изучение JavaScript, от онлайн-курсов до форумов и сообществ, где вы можете обратиться за помощью и советом.
Мы надеемся, что это руководство дало вам прочную основу для дальнейшего развития, и желаем вам удачи в ваших начинаниях с JavaScript!
