Blog logotype

Введение в JavaScript. Введение. Codecademy на русском

Данная статья является переводом урока Introduction из курса Introduction to JavaScript. Если появятся вопросы, обязательно пишите в комментариях. С радостью отвечу на все. Также принимаются замечания и предложения. Источник.

Introduction

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

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

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

Нажмите Next чтобы начать обучение.

Console

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

Команда console.log() используется для вывода текста в консоль. Рассмотрим следующий пример:
console.log("Hello!");

В этом примере, Hello! выводиться в консоль. Заметьте, в конце строки ставитья точка с запятой. Хоть ваш код и запуститься без точки с запятой, но рекомендуется всегда включать их, чтобы убедиться в правильности написанного кода.

Вы увидете в следующем примере, что в скобках можно поместить любой тип данных, который нужно вывести в консоль.

Инструкция

  1. Используя команду concole.log выведите в консоль вашу любимую пиццу. Напишите её внутри кавычек ('').
  2. На следующей строке вашу любимую книгу или фильм.

Data Types

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

Ниже приведены примеры четырёх примитивных типов данных (их также называют примитивами - прим.пер.), которые закладывают фундамент для всех программ JavaScript. Примитивные типы данных, как следует из их названия, представляют собой простые в своей форме данные.

console.log('New York City');
console.log(40.7);
console.log(true);
console.log(null);

В приведённном выше примере, в консоль выводяться следующие четыре примитивные типы данных:

  • String (строка) - совокупность символов (буквы, пробелы, числа и символы), заключённые в одинарные кавычки ('Hello') или двойные кавычки ("World!"). В примере 'New York City' - это строка.
  • Number (число) - любое число, включая десятичные знаки: 4, 1516, .002, 23.42. В примере выше, 40.7 - это число.
  • Boolean (булевый, логический) - включает такие значения, как true (истина) или false (ложь), без кавычек. В примере true - булевый тип данных.
  • Null - это null, означает отсутствие значения.

Подведём итог: string - это группа символов, Number - это числа, null - это отсутствие значения, boolean - костюм призрака на Хэллоуин. Стоп, это ложь! Конечно же, boolean - это истина или ложь. (смейтесь - прим.пер.)

Инструкция

  1. В первой строке выведите в консоль строку JavaScript.
  2. Во второй строке, выведите число 33.7.
  3. В третьей строке, выведите булевое значение true (истина) в консоль.
  4. В четвёртой строке выведите null.

Math Operators

Не пугайтесь! Вы не должны быть сильны в математике, чтобы изучать JavaScript. Однако, необходимо знать некоторые операторы, чтобы писать полезные программы.

JavaScript поддерживает следующие математические операторы:

  1. Сложение +
  2. Вычитание -
  3. Умножение *
  4. Деление /

Вот примеры того, как они работают:

console.log(3 + 4); // Возращает 7
console.log(5 - 1); // Возращает 4
console.log(4 * 2); // Возращает 8
console.log(9 / 3); // Возращает 3

В приведённом выше примере, каждая строка включает разные математические операции, результаты которых выводяться в консоль.

Инструкция

  1. Внутри console.log() прибавьте к своему возрасту 3.5. В этом возрасте вы улетите на Марс.
  2. В новой строке напишите другой console.log(). Внутри него вычтете текущий год и 1969-ый.
    Столько лет прошло с первого полёта на луну.
  3. Создайте ещё один console.log(). Внутри него поделите 65 на 240.
  4. И напишите последний console.log(). Внутри него умножьте 0.2708 и 100.
    Столько процентов гелия входит в состав солнца. Получается, что если мы стояли бы на солнце, то говорили как бурундуки! (из фил."Элвин и бурундуки" - прим.пер.)

Properties

Когда вы вводите новые данные в программу на JavaScript, браузер сохраняет их как экземляр типа данных. Экземпляр - это отдельный случай (или объект) типа данных.

JavaScript будет сохранять новый фрагмент данных, например, 'Hello', как строку в памяти компьютера. Другой пример, число 40.7 сохранено как экземпляр числового типа данных.

Экземпляр, как строка 'Hello', также имеет и дополнительную информацию.

Например, каждый строковый экземпляр включает в себя такое свойство, как length (длина - прим.пер.), в котором хранится количество символов в нём. Мы можем вернуть значения данного свойства, добавив после строки точку и его название:
console.log('Hello'.length);

В приведённом выше примере, извлекается значение свойства length строки 'Hello'. Программа выведет число 5 в консоль, потому что слово Hello состоит из пяти символов.

Инструкция

  1. Используя .length выведите в консоль количество символов следующей строки:
    Teaching the world how to code

Built-in Methods

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

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

console.log('Hello'.toUpperCase()); // 'HELLO'
console.log('Hey'.startsWith('H')); // true

Давайте рассмотрим каждую строку отдельно:

  • В первой строке метод .toUpperCase()`` вызывается к строке 'Hello'. Результат выводиться в консоль. Метод возвращает значение строки, преобразованное в верхний регистр: 'HELLO'`.
  • Во второй строке метод .startsWith() вызывается к экземпляру "Hey". Также он включает в себя символ 'H', находящийся между скобками. Так как строка 'Hey' начинается с буквы 'H', метод возращает true.

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

Инструкция

  1. Используя метод .toUpperCase()`` выведите в консоль строку Codecademy` заглавными буквами.
  2. Используя документацию по JavaScript, найдите и вызовите метод, который может обрезать лишние пробелы в начале и в конце следующей строки:
    ' Remove whitespace '

Libraries

Чтобы вызвать методы экземпляров, по определению, необходимо создать экземпляр, прежде чем можно использовать их. А что если вы хотите вызывать метод без экземпляра? Вот тут и понадобятся библиотеки JavaScript. Библиотеки включают методы, которые можно вызвать без создания экземпляров.

Один такой сборник, например, включает в себя математические методы, в точку названная библиотека Math (по сути - математическая библиотека - прим.пер.).

Давайте посмотрим, как вызывается метод .random() из библиотеки Math:
console.log(Math.random()); // рандомное число между 0 и 1

В вышеприведённом примере, мы вызываем .random(), написав название библиотеки, точку и название метода с круглыми скобками. Данный метод возращает случайное число между 0 и 1, что и выводит пример.

Чтобы вывести рандомное число между 0 и 50, нужно умножить этот код на 50, как здесь:
Math.random() * 50;

Результат в данном примере скорее всего десятичное число. Чтобы убедиться получилось ли именно десятичное число, JavaScript предоставляет метод Math.floor(), который возвращает наибольшее целое число, меньшее, либо равное указанному числу. Вы можете использовать данный метод, чтобы округлить наше рандомное число, как здесь:
Math.floor(Math.random() * 50);

В данном случае:

  1. Math.random генерирует случайное число от 0 до 1.
  2. Мы умножаем это число на 50, чтобы получить рандомное число от 0 до 50.
  3. Затем, Math.floor округляет это число в меньшую сторону.

Инструкция

  1. Внутри console.log создайте случайное числос помощью метода Math.random, затем умножьте его на 100.
  2. Теперь, используйте Mah.floor, чтобы получить округлённое число.
    Внутри console.log вы помещаете Math.random() * 100 внутри скобок метода Math.floor.
  3. Найдите метод в математический библиотеках JavaScript, который возращает наименьшее целое число, большее или равное десятичного числа.
    Используйте данный метод с числом 43.8. Выведете результат в консоль.
  4. Используя документацию JavaScript, найдите метод из библиотеки Number, который проверяет, целое ли число.
    Поместите число 2017 в скобки и используйте console.log, чтобы вывести результат.

Comments

Когда мы пишем программы на JavaScript, необходимо комментировать наш код.

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

Есть два типа комментариев кода в JavaScript:

  1. Однострочные комментарии, собственно, помещается только в одну строку и обозначаются двумя слешами //.
// Выведет первые 5 чисел после точки от числа Пи
console.log('Pi is equal to ' + 3.14159);
  1. Многострочный комментарий соответственно может содержать в себя несколько строк, начинается с /* и заканчивается */.
/*
console.log('Весь этот код');
console.log('Закомментирован');
console.log('Поэтому он не запуститься);
*/

Инструкция

  1. Давайте попрактикуемся в добавлении комментариев.
    Справа вы можете увидеть отрывок из книги "Уловка-22" Джозефа Хеллера.
    В первой строке добавьте одиночный комментарий со строкой Opening line.
  2. Одиночные комментарии отлично подходят для обозначения контекста вашего кода. Многострочные комментарии чаще всего подходят для предотвращения выполнения кода. Однако оба типа использовать для любой цели.
    Закомметируйте с четвёртой по девятую строку многострочным комментарием.

Review Types and Operators

Давайте повторим все понятия, которые мы узнали за этот урок:

  • JavaScript включает в себя четыре основных типов данных: string, numbers, boolean и null соответственно.
  • Данные можно выводить в консоль с помощью команды console.log().
  • Четыре встроенных математических операторов: +, -, *, /.
  • JavaScript связывает определённые свойства с определёнными типами данными.
  • В JavaScript есть встроенные методы для различных типов данных.
  • Библиотеки - это совокупность методов, которые могут вызываться без экземпляров.
  • Вы можете писать однострочные комментарии с // и многострочные комментарии между /* и */.