Сниппеты и управляющие структуры. Часть 4 Курс JavaScript от начального до продвинутого в 10 сообщениях в блоге

Это четвертая часть серии сообщений в блоге о JavaScript, которая проведет вас от новичка до продвинутого уровня. К концу этой серии вы будете знать все основы, которые вам нужно знать, чтобы начать программировать на JavaScript. Без лишних слов, давайте начнем с четвертого урока.

Сниппеты и управляющие структуры – содержание:

1. Обновление нашей настройки кодирования до фрагментов
2. Структуры управления

В этом сообщении в блоге мы продолжим с того места, где остановились в третьем сообщении в блоге. На этом этапе у вас должен быть открыт браузер Google Chrome и, в частности, открыта консоль JavaScript. Если вы по какой-то причине закрыли их, самое время снова открыть их.

Если вы работаете на Mac, сочетание клавиш для открытия консоли — нажать «Option + Command + J» после того, как вы откроете Chrome. Если вы используете устройство Windows, вы можете использовать сочетание клавиш «Control + Shift + J», чтобы открыть консоль JavaScript после открытия Chrome. Или вы также можете перейти в меню вверху и перейти в «Просмотр» -> «Разработчик» -> «Консоль JavaScript».

Обновление нашей настройки кодирования до фрагментов

До этого момента курса мы могли писать все построчно и выполнять построчно. Это был бы не самый удобный способ управлять вещами, но, тем не менее, он работал бы. Начиная с этого руководства, мы напишем код, который состоит из нескольких строк кода для создания полного набора инструкций. Чтобы добиться этого, мы будем использовать так называемые «фрагменты» в Google Chrome. Без лишних слов давайте обновим нашу настройку с консоли JavaScript до фрагментов кода Chrome.

В настоящее время у вас должна быть открыта консоль, и если вы следовали предыдущим руководствам, у вас должен быть такой экран:

Когда вы смотрите на этот экран или на свой экран, вы должны увидеть: Элементы, Консоль, Источники, Сеть, Производительность, Память, Приложение и т. д., написанные рядом друг с другом на верхней панели темной области. Если вы видите их в более светлых тонах, это тоже совершенно нормально. Это означает, что вы используете светлый режим, который может быть режимом по умолчанию для дневного времени. Экран, который я показываю, в настоящее время использует цветовую схему для темного режима в настройках консоли Chrome. Если вы видите элементы, консоль, источники, сеть и т. д. в любой цветовой схеме, все готово.

Если вы внимательно посмотрите на верхнюю панель консоли, то увидите, что надпись «Консоль» выглядит немного другим цветом. Нажмите «Источники» рядом с ним.

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

Одно отличие, которое вы можете ожидать, если вы, вероятно, не увидите файл «notes.js», поскольку я создал его ранее. В остальном это должно выглядеть очень похоже на это. Чтобы создать новый файл, нажмите «+ Новый фрагмент». Как только вы нажмете на него, он создаст для вас новый файл JavaScript, и вы сможете назвать его по своему усмотрению. В этом руководстве мы назовем его «index.js», так как принято называть первый или основной файл «index.js».

Если вы хотите следовать этому руководству слово в слово, после нажатия «+ Новый фрагмент» вы можете ввести имя «index.js» и нажать клавишу ввода на клавиатуре. Теперь мы можем щелкнуть внутри открытого файла в открывшейся основной области, чтобы начать кодирование JavaScript.

Давайте начнем с того, что, как мы уже знаем, работает. И это:

alert("Hello, World!");

Вы можете либо написать его самостоятельно для дополнительной практики, либо скопировать и вставить часть кода в созданный нами файл. Я настоятельно рекомендую напечатать его самостоятельно, так как во многих случаях вы узнаете его именно так. После того, как вы наберете его, если вы нажмете клавишу ввода, вы увидите, что код не выполняется. Вместо этого ваш курсор просто перейдет на следующую строку, как и в любой другой области редактирования текста. Есть два основных способа выполнения нашего кода. Первый — нажать на кнопку воспроизведения, расположенную в правом нижнем углу.

Если вы нажмете на эту кнопку воспроизведения, она должна выполнить наш код и отобразить нам результаты.

Как только вы нажмете «ОК», давайте также запустим наш код, используя другой основной способ. Второй основной способ запустить ваш код или фрагмент — использовать сочетание клавиш. Как мы видим, он уже показывает нам ярлык, когда мы нажимаем кнопку запуска. Это сочетание клавиш «Command + Enter». Для этого мы можем нажать клавишу Command, а затем нажать клавишу Enter. Это также запустит наш код и даст нам те же результаты, что и нажатие кнопки воспроизведения.

И теперь вы знаете два способа выполнения нашего кода JavaScript в фрагментах кода Chrome.

Если вы хотите создавать новые файлы, чтобы, возможно, делать заметки о JavaScript или практиковаться в коде JavaScript, вы всегда можете создать новые файлы, нажав «+ Новый фрагмент» и назвав свои файлы по своему усмотрению. Теперь, когда мы подготовили новую настройку кодирования, давайте посмотрим еще немного JavaScript.

Структуры управления

Когда мы пишем код, мы должны учитывать множество сценариев и действий, которые может предпринять пользователь. Эта подготовка к различным сценариям может исходить из разных источников, таких как устройство, на котором работает наш код, размер отображаемого экрана, различные типы браузеров, которые могут быть у пользователя, и так далее. Но как нам убедиться, что мы можем быть готовы к различным сценариям? Если вы будете писать разные коды один за другим, будет ли смысл выполнять их все для пользователя? Чтобы ответить на все это и многое другое, мы будем использовать управляющие структуры.

Структуры управления позволяют нам направлять выполнение кода, чтобы наш код мог адаптироваться к различным условиям. Существует несколько общих элементов, используемых для управляющих структур. В этом уроке мы начнем с самого простого и будем двигаться дальше. Первый, который мы увидим, использует операторы If, else, else if для управления выполнением кода.

Если, еще и еще, если

Это самая простая структура управления, с которой можно начать. Это позволяет нам выполнять некоторый фрагмент кода, если выполняется определенное условие, и выполнять другой фрагмент кода, если выполняется другое условие. Давайте посмотрим это на примере. Предположим, что если на улице идет дождь, я возьму с собой зонтик. Иначе я не возьму зонт. Мы можем перевести точную логику и рассуждения в код следующим образом:

(Перед написанием этого кода мы прокомментируем код из предыдущего кода, который у нас есть в файле, поместив перед ним две косые черты, чтобы он не выполнялся, но у вас все еще была его копия. После добавления косых черт это должно выглядеть так :)

// alert("Hello, World!");
let rainy = true;
if (rainy){
   alert("Take an umbrella");
} else {
   alert("No need for an umbrella");
}

Запуск этого кода даст нам следующий вывод:

// alert("Hello, World!");
let rainy = false;
if (rainy){
   alert("Take an umbrella");
} else {
   alert("No need for an umbrella");
}

Принимая во внимание, что запуск этой версии кода, который говорит, что дождя нет, даст следующий результат:

Когда вы вводите код для внесения изменений в файл кода, если вы внимательно посмотрите на имя файла, вы увидите, что перед именем файла стоит звездочка. Это означает, что файл кода, который мы пишем, сохраняется не полностью. Это может не иметь большого значения, если вы пишете всего пару строк кода, которые вы всегда можете написать, но чаще всего вам нужно сохранить свой код, чтобы вы могли повторно использовать или просмотреть его позже. Мы можем сохранить этот файл кода так же, как мы сохраняем другие файлы, так что это будет «Command + S» на Mac и «Control + S» на Windows.

В нашем случае, поскольку мы выполняем наш код сразу после его написания, он автоматически сохраняет наш файл при выполнении кода. Поэтому, если вы собираетесь написать какой-то код и оставить его на несколько часов, рекомендуется время от времени сохранять код, чтобы убедиться, что вы не потеряете какой-либо значительный прогресс.

Замечательно, что наш код может адаптироваться к бинарному условию, используя операторы If и else, но при этом нам нужно учитывать множество вещей, что, скорее всего, будет иметь место в реальной жизни. Например, что делать, если холодно, и вам нужно получить толстовку, когда холодно. Одним из способов, которым мы могли бы это сделать, было бы утверждение «else if», и мы можем сделать это следующим образом:

// alert("Hello, World!");
let rainy = false;
let cold = true;
if (rainy){
   alert("Take an umbrella");
} else if (cold) {
    alert("Get a hoodie with you, not an umbrella");
} else {
   alert("No need for an umbrella");
}

Вывод этого кода будет выглядеть так:

Поэтому, если определенное условие истинно, будет выполнен первый код, который находится между скобками. В нашем случае, поскольку первое условие проверяет наличие дождя, мы предупредим пользователя о том, что ему следует взять зонт. Если это условие ложно, то есть дождя нет, мы будем продолжать проверять другие условия, используя оператор «иначе, если». Одна вещь, которая значительно отличается от оператора «else if», заключается в том, что мы можем проверить любое количество условий с помощью операторов else if.

Здесь важно помнить, что ваш код будет проверяться сверху вниз на правильность или истинность. Это означает, что с текущим кодом, если погода и дождливая, и холодная, он не распознает холодную погоду, поскольку первое утверждение верно. Мы также можем проверить это, изменив код так, чтобы были и дождливые, и холодные условия.

// alert("Hello, World!");
let rainy = true;
let cold = true;
if (rainy){
   alert("Take an umbrella");
} else if (cold) {
    alert("Get a hoodie with you, not an umbrella");
} else {
   alert("No need for an umbrella");
}

Теперь вам может быть интересно, как я могу решить эту проблему? Что важнее, холодная погода или дождливая? Должны ли вы выбрать одно условие и пожертвовать другим условием? Вам вообще приходится делать такой выбор? Ну не совсем. Это очень распространенная проблема, и она имеет очень распространенное и относительно простое решение. Мы можем использовать выражение «и», чтобы охватить несколько сценариев. Чтобы сообщить JavaScript, что мы хотим использовать «и» для соединения нашей логики программирования, мы будем использовать два таких символа: «&». И поскольку наш код проверяется сверху вниз, мы будем использовать наиболее полную опцию для первого оператора if. Обновленный код выглядит следующим образом.

// alert("Hello, World!");
let rainy = true;
let cold = true;
if (rainy && cold) {
    alert("Wear a hoodie and take an umbrella with you.")
} else if (rainy){
   alert("Take an umbrella");
} else if (cold) {
    alert("Get a hoodie with you, not an umbrella");
} else {
   alert("No need for an umbrella");
}

Запуск этого кода даст вам предупреждение, которое выглядит следующим образом:

Намного лучше. Теперь мы можем комбинировать несколько разных сценариев, в том числе разные комбинации этих сценариев. Но что, если мы хотим рассмотреть сценарий не холодный, а дождливый. И предположим, что мы хотим сказать пользователю, чтобы он не брал конкретно толстовку, а брал только зонт. Для этого мы можем использовать логическое «не», мы можем использовать его в нашем коде с восклицательным знаком перед условием, которое мы хотим указать. Давайте добавим это условие в наш код, чтобы он был более полным.

// alert("Hello, World!");
let rainy = true;
let cold = true;
if (rainy && cold) {
    alert("Wear a hoodie and take an umbrella with you.")
} else if (rainy && !cold){
   alert("Take an umbrella, but not a hoodie.");
} else if (rainy){
   alert("Take an umbrella");
} else if (cold) {
    alert("Get a hoodie with you, not an umbrella");
} else {
   alert("No need for an umbrella");
}

Когда мы добавляем новое условие в дерево if else, если это более полное условие, мы можем поместить его где-нибудь наверху. Таким образом, у нас гораздо меньше шансов на ошибку по сравнению с противоположным подходом. Одним из побочных эффектов внедрения нового кода в существующий код является то, что часть кода может стать избыточной или работать не самым эффективным образом. Мы не будем сильно сосредотачиваться на части эффективности, но сейчас мы видим, что мы покрываем как холодные, так и не холодные условия для дождливой погоды, поэтому мы можем при желании удалить условие, которое просто проверяет «дождливое» состояние. Выполнение этой корректировки кода также называется «рефакторингом кода», в процессе рефакторинга суть заключается в том, чтобы постепенно сделать код более чистым и эффективным.

// alert("Hello, World!");
let rainy = true;
let cold = true;
if (rainy && cold) {
    alert("Wear a hoodie and take an umbrella with you.")
} else if (rainy && !cold){
   alert("Take an umbrella, but not a hoodie.");
} else if (cold) {
    alert("Get a hoodie with you, not an umbrella");
} else {
   alert("No need for an umbrella");
}

Когда мы хотим проверить, выполняется ли одно из условий, мы можем использовать оператор «или», который представляет собой символ вертикальной черты, который дважды используется на вашей клавиатуре и выглядит как «||».

Давайте посмотрим на это на другом примере. Чтобы добавить больше примеров в тот же файл, не мешая новым командам, мы можем закомментировать предыдущий код, который мы использовали, заключив предыдущий код в эти символы, которые мы видели раньше:

/* 
*/

Это косая черта, звездочка и те же символы в порядке, обратном закрытию комментируемой части. Давайте завернем наш текущий код внутрь этих символов, чтобы они не мешали будущему новому коду. Теперь ваш файл кода должен выглядеть так:

// alert("Hello, World!");
/*
let rainy = true;
let cold = true;
if (rainy && cold) {
    alert("Wear a hoodie and take an umbrella with you.")
} else if (rainy && !cold){
   alert("Take an umbrella, but not a hoodie.");
} else if (cold) {
    alert("Get a hoodie with you, not an umbrella");
} else {
   alert("No need for an umbrella");
}
*/

С этого момента мы сосредоточимся на новых частях, которые мы добавляем в файл, чтобы мы могли сосредоточиться на изучении одной вещи за раз. При желании вы можете оставить предыдущий код в режиме комментариев, переместить его в новый файл для справки или, если вы больше не хотите его видеть, вы можете удалить его для более чистого файла.

Давайте продолжим наш пример с падежом «или». Представьте себе сценарий, в котором вы заходите в холодильник за едой и напитками каждый раз, когда чувствуете голод или жажду. Как код будет работать для этого?

let hungry = true;
let thirsty = false;
if (hungry || thirsty) {
    alert("Go to the fridge and check what you have in there.");
}

Выполнение этого кода, как вы, наверное, уже догадались, даст нам следующий результат:

До сих пор примеры, которые мы использовали, были взяты из сценариев, близких к реальным, но большую часть времени вы будете иметь дело с числами в коде. Вы видели числа ранее в этой серии, но мы не слишком много говорили о сравнении или операциях, которые мы могли бы с ними делать. Теперь, когда мы узнали об операторах if else, давайте подробнее поговорим о числах.

Когда мы имеем дело с утверждениями if и else if, мы проверяем истинность утверждения. Но можем ли мы также сделать осмысленный оператор if, если все, что у нас есть, — это числа? Например, что, если я хочу получить зонт, если вероятность дождя превышает 50%, можем ли мы добиться этого с помощью кода? Да, мы можем, и вот как это будет происходить.

let chanceOfRain = 70;
if (chanceOfRain >= 50) {
    alert("Get an umbrella.");
}

Когда мы имеем дело с числами, нам нужен способ преобразовать их в некоторую истинность или ложность, чтобы оператор if работал. Есть несколько способов добиться этого в зависимости от нашего варианта использования.

Например, мы можем проверить, равны ли два числа точно друг другу с помощью трех знаков равенства, например:

let a = 10;
let b = 10;
if (a === b) {
    alert("They are the same.");
}

Это даст нам предупреждение, которое говорит: «Они одинаковы».

Мы также можем проверить, что они не равны, с помощью следующего кода:

let a = 10;
let b = 5;
if (a !== b) {
    alert("They are not the same thing!");
}

Выполнение приведенного выше кода даст нам предупреждение «Это не одно и то же!».

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

// === checks for equality
// !== checks for not equality
// > greater than
// >= greater than or equal to
// < smaller than
// <= smaller than or equal to

Давайте также посмотрим еще пару из них для дополнительной практики и демонстрации кода. Вот несколько примеров кода, которые будут отображать предупреждение, которое они имеют внутри операторов if:

Лучше чем:

let a = 10;
let b = 5;
if (a > b) {
    alert("a is greater than b");
}

Больше или равно:

пусть а = 10; пусть б = 5; if (a >= b) { alert("a больше или равно b"); } [/код]

Другой пример больше или равно:

let a = 10;
let b = 10;
if (a >= b) {
    alert("a is greater than or equal to b");
}

Меньше чем:

let a = 5;
let b = 10;
if (a < b) {
    alert("a is smaller than b");
}

Меньше или равно:

let a = 5;
let b = 10;
if (a <= b) {
    alert("a is smaller than or equal to b");
}

Другой пример меньше или равно:

let a = 10;
let b = 10;
if (a <= b) {
    alert("a is smaller than or equal to b");
}

Используя комбинацию этих знаков сравнения или равенства, мы можем создавать сложные коды, которые могут адаптироваться к различным условиям.

Арифметические операции

Когда мы имеем дело с числами, мы также хотим выполнять арифметические операции. Большинство арифметических операций должно быть довольно знакомым, но есть также специальные арифметические операторы программирования, которые могут быть менее знакомыми.

Вот краткое изложение арифметических операций, которые мы используем в JavaScript, с указанием их значения для вашего удобства:

// * multiplication
// / division
// + addition
// - subtraction
// % modulo operation, gives us the remainder after division
// ** exponentiation

Первые четыре будут работать так, как вы ожидаете:

let a = 12;
let b = 5;
let c = a * b;
// c will be 60
c = a / b;
// c will now be 2.4
c = a + b;
// c will now be 17
c = a - b;
// c will now be 7

Операция по модулю даст нам остаток после деления первого числа на второе число. Если мы продолжим с предыдущим кодом a, b и c:

c = a % b;
// c will now be 2
c = 18 % 5;
// c will now have the value of 3
// because 18 divided by 5 will give us the remainder of 3

Оператор экспоненты выполняет возведение в степень в JavaScript. Он представлен двумя звездочками и переводит первый элемент в степень второго элемента.

c = 2 ** 3;
// c will now have the value of 8
// because 2 * 2 * 2 equals 8

Это был относительно длинный урок, и вы справились! Мы обновили нашу настройку кодирования и многому научились в этом руководстве. В следующем уроке мы продолжим с другими способами управления потоком нашего кода!

Курс JavaScript от начального до продвинутого в 10 сообщениях в блоге:

1. Как начать программировать на JavaScript?
2. Основы JavaScript
3. Переменные и разные типы данных в JavaScript
4. Фрагменты и управляющие структуры
5. Циклы while и циклы for
6. Массив Java
7. Функции JavaScript
8. Объекты JavaScript
9. Методы JavaScript и многое другое
10. Краткое содержание курса JavaScript