Основы JavaScript. Курс JavaScript, часть 2, от начального до продвинутого

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

Основы JavaScript – оглавление:

1. Основы JavaScript
2. Построчное выполнение
3. Два способа закончить инструкции
4. Комментарии

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

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

Основы JavaScript

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

Например, определенные слова означают определенные вещи для движка JavaScript, который запускает наш код, например, ключевое слово «предупреждение», которое мы использовали в предыдущем руководстве, имело значение отображения предупреждения пользователю с конкретными словами, которые они помещают в круглые скобки сразу после . В нашем случае мы написали «Hello, World!» поэтому мы получили оповещение с надписью «Hello, World!».

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

Построчное выполнение

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

Напротив, некоторые языки программирования являются «компилируемыми языками программирования». Некоторыми примерами скомпилированных языков могут быть: C, C++, C#, Swift, Java и так далее. Основное отличие состоит в том, что в компилируемых языках программирования весь код, который вы пишете, будет «скомпилирован» и будет выполнен компьютером как единое целое. Вот почему может быть труднее начать изучение скомпилированного языка программирования, поскольку может быть труднее определить, где вы допустили ошибку в своей программе.

Некоторыми примерами интерпретируемых языков программирования могут быть JavaScript, Python, Bash и Matlab. С интерпретируемыми языками программирования у вас есть неотъемлемое преимущество: вы видите, в какой строке вы допустили ошибку, например, забыли точку с запятой или не совпали скобки в своем коде. Наличие этой характеристики может не иметь большого значения в некоторых приложениях, но когда мы пытаемся загрузить веб-сайт с медленным подключением к Интернету, вы предпочитаете, чтобы каждая строка JavaScript выполнялась как можно быстрее.

Два способа закончить инструкции

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

В зависимости от типа инструкции, которую мы пишем, мы обычно используем одну из них для завершения или упаковки набора инструкций. Мы будем использовать разные типы скобок для разных функций и типов данных. Например, в alert("Hello, World"); код, который мы ранее выполнили, круглые скобки, которые окружают надпись hello world, сообщают компьютеру, что должно быть сказано в предупреждении, а точка с запятой в конце инструкции сообщает компьютеру, что эта инструкция заканчивается здесь, вы можете перейти к следующей инструкции. Это очень похоже на то, как мы используем точку «.» чтобы закончить предложения на английском языке.

Комментарии

Добавление комментариев к коду является неотъемлемой частью программирования. Может быть легко понять, какой код вы пишете, пока вы его пишете, но в зависимости от сложности кода вы можете иметь очень мало представления через шесть месяцев, когда вернетесь к коду.

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

Есть два способа добавления комментариев — это JavaScipt. Первый — добавить простой «однострочный» комментарий с двумя косыми чертами, например:

// this is a comment

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

// this is a comment.
// this is another comment.
// you can keep commenting like this.

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

Скопируйте и вставьте следующий код в свою консоль JavaScript, которую вы открыли в Chrome.

// greet user
alert("Hello, User!");
alert("Hi, User!");

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

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

Когда мы выполняем такой код, мы выполняем одну и ту же функциональность дважды. Но что делать, если вы хотите видеть только одну реализацию за раз? Ну, вы точно знаете, что делать в этом случае, потому что мы уже говорили об этом. Идите вперед и закомментируйте одну из строк после вставки или записи кода, чтобы только вторая реализация «Hi, User!» казнят.

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

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

Другой способ комментирования кода — использование косой черты и символа звездочки. Таким образом, мы можем создавать однострочные или многострочные комментарии в нашем коде.

/* a single line comment */
/* the commenting starts when we put a forward slash and an asterisk
and the commented areas ends
when we close of the comment with an asterisk and the forward slash
like this */

Теперь вы знаете основы JavaScript. В следующем уроке мы увидим чрезвычайно распространенную концепцию в программировании, называемую «переменные», наряду с основными типами данных в JavaScript.

Автор: Роберт Уитни

Эксперт и инструктор по JavaScript, который тренирует ИТ-отделы. Его главная цель — повысить продуктивность команды, научив других эффективно сотрудничать при написании кода.

Просмотреть все сообщения

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

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