PS-Studio.info

Веб и веб-технологии

ABC 21.01.2020 в 15:35

JavaScript - знакомство с базовыми основами языка



Чтобы JavaScript работал, выполнял свою функцию(-и), его необходимо подключить к странице сайта. Делается это несколькими способами.
Если скрипт небольшой по содержанию, его размещают непосредственно в HTML-коде страницы, либо в секции head, либо перед закрывающим тегом body. Сам скрипт при этом заключают в парные теги:

Код
<script>
... здесь содержимое скрипта  
</script>


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

Код
<script src = "script.js"></script>


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

Ранее была применима запись с использованием атрибута type:

Код
<script src = "script.js" type = "text/javascript"></script>


но сейчас она не используется, поскольку атрибут type считается устаревшим.

Если при размещении скрипта непосредственно в HTML-коде страницы его необходимо оборачивать в парные теги script, то внутри подключаемого файла они не используются, в нём находится только непосредственно сам скрипт.

Комментарии в JavaScript-коде

При написании кода вы можете сопровождать его пояснениями(как для себя, так и для своих коллег), или комментариями:

Код
// так пишется однострочный комментарий

/* А так оформляется
  многострочный комментарий */


В соответствии с новыми стандартами, введёнными ECMAScript 5, первой строкой кода файла JavaScript должно быть указание на строгий режим:

Код
"use strict";


Cтрогий режим может быть также активирован для отдельной функции, а не для всего файла.


Переменные

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

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

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

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

myFirstName

Имена переменных чувствительны к регистру, поэтому переменные myName, myname, mYname - это три разных переменных.
Старайтесь, по возможности, давать осмысленные имена своим переменным, это будет давать дополнительную подсказку о её значении.

Чтобы сократить код, можно одной строкой объявлять сразу несколько переменных, разделяя их запятыми, например:

Код
let firstName = "Aleksey",  
  lastName = "Petrov",
  age = 30;



Как создать переменную(или, правильнее говорить, как объявить переменную)? Есть три способа объявления переменных.

Первый способ, классический: с помощью ключевого слова var

Код
var firstTime = 60;


здесь var - ключевое слово, дающее понять, что создаётся новая переменная
firstTime - название переменной
60 - значение, сохранённое в переменной

Второй и третий способы создания переменных относятся к стандарту ES6: с помощью ключевых слов let и const:

Код
let secondTime = 15;
const pi = 3.14;


В чём принципиальное отличие переменной, созданной с помощью let, от переменной, созданной с помощью var, мы сейчас рассматривать не будем, просто примите к сведению, что на данный момент объявление переменной с помощью ключевого слова var признано устаревшим (legacy).

Переменные (вернее их содержимое), созданные с помощью let, можно менять, а вот переменные, созданные с помощью ключевого слова const нет(ну или почти нет).
Другими словами, ключевое слово const создаёт константу (неизменяемое значение в переменной)

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

Код
let score = 50;


Теперь выведем на страницу значение с помощью командыdocument.write(), обратившись к имени переменной:

Код
document.write(score);


в результате на странице мы увидим число 50.

Команда document.write() (а точнее будет назвать её функцией, или даже методом) - отображает на веб-странице то, что вы помещаете в круглых скобках. В данном случае, в скобках мы поместили название переменной score, но так как ей присвоено значение 50, то именно оно и выводится на веб-странице.

Еще одним вариантом вывода информации на веб-странице является вывод информации в всплывающем модальном окне, это делается с помощью функции alert():

Код
alert(score);


в результате на странице откроется модальное окно с значением 50 и пока пользователь не нажмёт кнопку ОК, он не сможет взаимодействовать с остальными элементами страницы сайта.

Функция alert() - выводит в модальном окне на веб-странице то, что вы поместили в скобках. Если в скобках помещается название переменной, его не заключают в кавычки, если же строка, то она заключается в кавычки.

Еще один вариант вывода какой либо информации в модальное окно, это использование команды confirm(),например:

Код
confirm("Вы уверены?");


В результате, при загрузке страницы пользователь увидит модальное окно с двумя вариантами ответа:



и аналогично ситуации с alert(), пользователь не сможет взаимодействовать с остальным содержимым страницы, пока не выберет какой-либо вариант ответа в модальном окне.
При выборе утвердительного ответа возвращается значение true, при выборе отрицательного false. Проверить это можно, сохранив наш код выше в какую-нибудь переменную, а затем значение этой переменной вывести в консоль, где и посмотреть возвращаемый результат.

Сохраняем предыдущий код в переменной, назовём её result:

Код
let result = confirm("Вы уверены?");


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

Код
console.log(result);


Теперь, если в модальном окне вы выбираете ответ "Да", в консоли вы увидите true, если выбираете ответ "Отмена", то в консоли будет false.

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

Код
prompt("Сколько ног у собаки?", "");


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

Код
prompt("Сколько ног у собаки?", "4");




При этом то, что пользователь напишет в окне, то и будет возвращаемым значением. Например, я введу в окне ответ 5.
Если мы выведем результат в консоль, то в консоли мы увидим 5. Используем для этого тот же приём, что применялся нами ранее: результат работы команды prompt() сохраним в переменную, значение которой выведем затем в консоль:

Код
let result = prompt("Сколько ног у собаки?", "4");
console.log(result);




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

Код
let result = prompt("Сколько ног у собаки?", "4");
console.log(typeof(result));


и теперь, если вы в качестве варианта ответа введёте строку или даже число, в консоли вы всё равно увидите тип данных string(строка)



Значение переменной можно переопределить, делается это, например, так:

Код
let score = 50;
score = 35;
console.log(score);


Что мы видим из этого примера? Вначала создана переменная score и ей присвоено значение 50, затем уже созданной переменной заново присваивается значение, на этот раз 35.
Если вывести в консоль конечное значение переменной, то оно будет 35, поскольку мы переназначили начальное значение 50.



Типы данных в JavaScript

Как вы уже заметили из примеров выше, в переменных мы сохраняем (или правильно говоря, присваиваем) какие-то значения. И знак равенства в переменной, идущий после её имени, обозначает не равенство, а дословно: данной переменной присвоено значение такое-то.
Так вот эти значения (данные) могут быть совершенно различных типов. А какие вообще типы данных существуют в языке JavaScript?

Число - числа целые и дробные, сюда относятся также Infinity (получается при делении на 0) и NaN (Note-A-Number, или "не число", получается в результате операции, не имеющей логики, например, при делении числа на строку)

Код
let result = 4/0;
let second = "Вася" * 2


Строка

Каждая строка обязательно заключается в кавычки, например

"Это строка"
'Это тоже строка'
`И это тоже строка`


Если кавычки требуются также внутри самой строки, то делается это так: двойные кавычки для самой строки и одинарные внутри строки:

"Тысяча чертей - сказал Д'артаньян."

либо наоборот:

' Счёт был выставлен на ООО "Олимп" '

также можно использовать экранирование кавычек с помощью слэша:

" Счёт был выставлен на ООО \"Олимп\" "

Symbol - уникальный и неизменяемый тип данных, который может быть использован как идентификатор для свойств объектов.

Логическое значение - существует всего два значения: да (true) и нет (false)

Null, Undefined

Null - когда в коде что-то попросту отсутствует, например, когда мы пытаемся вывести что-то, обращаясь к несуществующим данным
Undefined - когда, к примеру, существует какой-то объект, но он не имеет никакого значения. Например, мы создали переменную myWork, но не присвоили ей никакого значения:

Код
let myWork;


если мы теперь попробуем вывести значение этой переменной в консоль, то получим значение Undefined (не определено).

Объект - все вышеперечисленные типы данных называются примитивными (так как содержат лишь одно значение), в отличие от них объект - это коллекция различных значений, создаётся с помощью фигурных скобок, внутри которых (не обязательно) присутствует список свойств, разделённых между собой запятыми.
Свойство представляет из себя пару "ключ: значение", при этом ключ - это именованная строка (имя свойства), а в качестве значения может выступать что угодно.

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

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

Код
let persone = {
  name: "James",
  age: 25,
  height: 170
}


Получить какое-то значение объекта, можно обратившись к нему. Например, чтобы получить значение имени, мы обращаемся непосредственно к имени объекта, а затем через точку к ключу name:

Код
console.log(persone.name);


Вуаля: в консоли мы видим значение ключа name, а именно: James



то же самое можно выполнить другим способом (менее используемым), результат в консоли будет тот же, James:

Код
console.log(persone["name"]);


Массивы как разновидность объектов

Массив является частным случаем объектов и представляет собой список каких-то данных, разделённых между собой запятыми, заключённый в квадратные скобки.
Например, создадим массив со списком писателей:

Код

let writers = [
  "Лев Толстой",
  "Николай Гоголь",
  "Александр Солженицын"
]


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

Каждый элемент массива имеет свой порядковый номер, причём нумерация начинается от нуля. Таким образом, в массиве выше у первого элемента("Лев Толстой") будет порядковый номер 0, у второго 1, у третьего 2.
Порядковый номер элемента массива поможет нам получить к нему доступ. Например, выведем в консоль значение второго элемента нашего массива.
Как мы видим, у второго элемента порядковый номер 1, чтож, сначала обращаемся к имени массива, затем в квадратных скобках пишем порядковый номер нужного нам элемента массива

Код
console.log(writers[1]);




как и ожидалось, в консоли мы увидели строку Николай Гоголь.

К слову сказать, результат работы команды console.log мы можем видеть не только в консоли браузера, но и в консоли редактора кода VS Code.
Для демонстрации, в файле нашего скрипта я пропишу наш ранее рассмотренный объект и с помощью команды console.log выведу значение ключа name в консоль:

Код
let persone = {
  name: "James",
  age: 25,
  height: 170
}
console.log(persone.name);


если я сейчас выделю весь этот код мышкой и нажму правой кнопкой (или комбинацию клавиш Ctrl + Alt + N),
откроется выпадающее меню, в котором выберу первую строку Run Code (запустить код)



то внизу в окне консоли я увижу тот же результат.

Добавлять комментарии могут только зарегистрированные пользователи.