PS-Studio.info

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

ABC 28.02.2020 в 16:01

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 str = 'JavaScript';


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

Код
console.log(str.length);




мы получили 10, так как слово JavaScript состоит из 10-и букв. В данном случае свойство length указывается после имени переменной через точку, в конце имени свойства круглые скобки не ставятся. Свойства носят описательный, информационный характер.

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

Код
console.log(str.toUpperCase());
console.log(str.toLowerCase());




Методы есть и для чисел. Например, с помощью метода Math.round() мы можем округлить какое-то число до целого:

Код
let number = 10.5;
console.log(Math.round(number));




Объекты

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

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

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

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


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

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


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



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

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


Мы можем добавлять свойства в объект, например, добавим в наш объект persone новое свойство:

Код
persone.weight = 64;


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

Код

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

  persone.weight = 64;

  console.log(persone);




объект может содержать внутри себя другие объекты, например, добавим в наш объект persone другой объект, skills, и с помощью console.log выведу вновь в консоль содержимое объекта persone:

Код

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

  persone.weight = 64;

  persone.skills = {
  profession: 'artist',
  experience: 10,
  famous: true
  };
  console.log(persone);




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

Код
delete persone.name;


и если теперь в консоли посмотреть на состав объекта 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 (запустить код)



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

Добавление и удаление элементов массива

Пусть у нас будет простейший массив с числами:

Код
let numbers = [1, 2, 3, 4, 5];


удалить последний элемент массива можно с помощью команды pop():

Код
numbers.pop();


и выведем результат в консоль:

Код
console.log(numbers);




напротив, добавить элемент в конец массива можно командой push(), давайте добавим в массив строку 'JavaScript':

Код
numbers.push('JavaScript');




как видите, в конце массива добавился новый элемент, строка JavaScript.

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

Код

let numbers = [ 1, 2, 3, 4, 5 ];

numbers.shift();
console.log(numbers);




Код

let numbers = [ 1, 2, 3, 4, 5 ];

numbers.unshift('Hello, World!');
console.log(numbers);




С помощью цикла можно перебирать элементы массива:

Код
let numbers = [ 1, 2, 3, 4, 5 ];

for (let i = 0; i < numbers.length; i ++) {
  console.log(numbers[i]);
}


Начальное значение переменной i мы задаём равным нулю, так как первый элемент массива имеет индекс 0, и также задаём условие, что значение переменной i должно быть меньше длины массива (numbers.length).



Свойство имя_массива.lenght возвращает длину массива (индекс последнего элемента + единица):

Код

let numbers = [ 1, 2, 3, 4, 5 ];

for (let i = 0; i < numbers.length; i++ ) {
  console.log(numbers[i]);
}

console.log('Длина данного массива равна ' + numbers.length);




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

Код
имя_массива.length - 1


Давайте выведем индекс последнего элемента нашего массива в консоль:

Код

let numbers = [ 1, 2, 3, 4, 5 ];

for (let i = 0; i < numbers.length; i++ ) {
  console.log(numbers[i]);
}

console.log('Длина данного массива равна ' + numbers.length);
console.log('Индекс последнего элемента массива равен ' + (numbers.length - 1) );




Мы получили верный результат, поскольку, не забывайте, что нумерация начинается с нуля:

  • индекс первого элемента равен 0
  • индекс второго элемента равен 1
  • индекс третьего элемента равен 2
  • индекс четвертого элемента равен 3
  • индекс пятого (последнего элемента) равен 4


Метод forEach для перебора массива

Создадим массив:

Код
let fruit = ['Яблоко', 'Груша', 'Абрикос'];


Общий синтаксис перебора массива с помощью метода forEach такой:

название_массива.forEach( function(элемент массива, его индекс, перебираемый массив) {
здесь код, выполняемый для всех элементов массива
});


и сразу пример с нашим фруктовым массивом:

Код
fruit.forEach( function(elem, i, mass) {
  console.log(i + ' : ' + elem + ' - это элемент массива ' + mass);
});




если нужны только элементы массива, можно ограничиться одним параметром у функции:

Код
fruit.forEach( function(param) {
  console.log(param + ' - это элемент массива ');
});


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

Код
let fruit = ['Яблоко', 'Груша', 'Абрикос'];

fruit.forEach( function(param, index) {
  console.log(index);
  });




Функция внутри круглых скобок метода forEach является Callback-функцией, которая применяется к каждому элементу массива.

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