Панорама советов

Язык программирования JavaScript.

Чтобы сразу перейти к примерам, жми кнопку "Примеры" на навигационной панели вверху-слева.

Для начала обучения и работы с JavaScript, необходимо установить и настроить следующие программы:

Oперационную систему на ваш компьютер (ноутбук и т.д.): Windows (платная) или MacOS (платная) или Linux (бесплатная) и т.д.

Веб-браузер, для тестирования кода. В настоящее время наиболее часто используемые браузеры это Yandex, Firefox, Chrome, Opera, Safari, и Internet Explorer.

IDE (Integrated Development Environment) – «интегрированная среда разработки» (WebStorm, Sublime Text и т.д.), чтобы писать текст (код), загружать картинки, аудио, видео.

Графический редактор, такие как The Gimp, Paint.NET, или Photoshop, чтобы создавать изображения.

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

FTP программу, чтобы загружать веб-страницы на сервер для публичного просмотра, например Cyberduck, Fetch, и FileZilla.

Систему автоматизации, такую как Grunt или Gulp, для автоматического выполнения повторяющихся задач, например, минимизации кода и запуска тестов.

Шаблоны, библиотеки, фреймворки и т. д., чтобы ускорить написание общей функциональности.

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

JavaScript.

JavaScript – это интерпретируемый язык программирования, стандартизированный международной организацией ЕСМА в спецификации ЕСМА-262. ECMAScript используется как встраиваемый язык для программного доступа к объектам приложений. Наиболее широкое применение находит в браузерах как язык сценариев для придания интерактивности веб-страницам, позволяет: создавать новые HTML‐теги, удалять существующие, менять стили элементов, прятать, показывать элементы, реагировать на действия посетителя, обрабатывать клики мыши, перемещения курсора, нажатия на клавиатуру, посылать запросы на сервер и загружать данные без перезагрузки страницы, получать и устанавливать cookie, запрашивать данные, выводить сообщения.

Спецификация ECMAScript описывает типы данных, инструкции, ключевые и зарезервированные слова, операторы, объекты, регулярные выражения и т.д.

Информация по JavaScript и браузерам, также есть в и справочниках от разработчиков браузеров. Другие источники по DOM/HTML/CSS/JavaScrip: https://w3.org; dev.w3.org; http://help.dottoro.com; https://whatwg.org/specshttp://javascript.ru/manual – справочник по JavaScript на русском языке.

Быстрый запрос по JavaScript и браузерам: «JavaScript MDN»(Mozilla Developer Network).

Как работает JavaScript?

Код скриптов (сценариев) пишется в текстовом формате в IDE (Integrated Development Environment) – «интегрированная среда разработки», редакторы (WSCode, Sublime Text и т.д.).

Для выполнения программ, не важно на каком языке, существуют два способа: «компиляция» и «интерпретация». Компиляция – это когда исходный код программы, при помощи специального инструмента, другой программы, которая называется «компилятор», преобразуется в другой язык, как правило – в машинный код. Этот машинный код затем распространяется и запускается. При этом исходный код программы остаётся у разработчика. Интерпретация – это когда исходный код программы получает другой инструмент, который называют «интерпретатор», и выполняет его «как есть». При этом распространяется именно сам исходный код (скрипт). С помощью JavaScript описываются сценарии, или скрипты, которые могут выполняться при помощи специальных модулей – интерпретаторов скриптов, которые перед выполнением преобразуют JavaScript в машинный код или близко к нему, оптимизируют, а уже затем выполняют его «как есть». Во все основные браузеры встроен интерпретатор JavaScript, именно поэтому они могут выполнять скрипты на странице.

Программы на языке JavaScript можно вставить в любое место HTML при помощи тега SCRIPT (сценарий). Тег script содержит исполняемый код. Браузер, когда видит script: Начинает отображать страницу, показывает часть документа до script. Встретив тег script , переключается в JavaScript‐режим и не показывает, а исполняет его содержимое. Закончив выполнение, возвращается обратно в HTML‐режим и только тогда отображает оставшуюся часть документа. Чтобы не было сюрпризов при запуске примеров локально, убедитесь, что в элементе HEAD есть строка (meta charset="utf‐8"). Если вы будете открывать файл с диска, то именно он укажет браузеру кодировку. В HTML пишут только самые простые скрипты, а сложные выносят в отдельный файл, который подключается в HTML. Чтобы подключить несколько скриптов, используйте несколько тегов. Благодаря этому один и тот же большой скрипт, содержащий, к примеру, библиотеку функций, может использоваться на разных страницах без полной перезагрузки с сервера. В одном теге SCRIPT нельзя одновременно подключить внешний скрипт и указать код, а следует разбить на два: один – с src , другой – с кодом.

Биты. Каждая часть информации может быть представлена в виде последовательности нулей и единиц, бит. Биты – это сущности с двумя состояниями, обычно описываемые как нули и единицы, передаются виде высоких и низких электрических зарядов. Все данные хранятся как длинные последовательности бит. Значение каждой позиции числа удваивается при движении справа налево: 128 64 32 16 8 4 2 1 (0 0 0 0 1 1 0 1 / 0 + 0 + 0 + 0 + 8 + 4 + 0 + 1 = двоичное число 13).

Величины. Величины - куски, представляющие единицы информации. У каждой величины есть тип, определяющий её роль.
Всего есть шесть основных типов: числа, строки, булевые величины, объекты, функции и неопределённые величины. Их можно комбинировать и изменять при помощи операторов {инструкций}.
Литерал объекта — это список пар имя:значение в фигурных скобках {}.
{имя:«Джон», фамилия:«Доу», возраст:50, цвет глаз:«голубой»}.

Операторы. Оператор - то, что выполняет (вид) действия со значениями. Операнд – то, к чему применяется оператор. Например: 5 * 2 – оператор умножения с левым и правым операндами.

Бинарные операторы:
сложение +,
вычитание -,
умножение *,
деление /,
остаток от деления %, alert( 8 % 3 ); // 2, остаток от деления 8 на 3,
объединение конкатенация строк (+),
преобразование к числу (унарный плюс +)=alert( +apples + +oranges ); // 5,
равно == ,
не равно!=,
строгое равенство ===,
строгое неравенство !==,
меньше <,
больше >,
меньше или равно <=,
больше или равно >=,
Инкремент/декремент: ++ , ‐‐; i = i + 1; i = i ‐ 1.
присваивание =.

Логические операторы:
&& И,
! НЕ,
|| ИЛИ.

Унарные операторы:
- для отрицательного значения,
! для логического отрицания,
typeof для определения типа величины.

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

Для указания конца оператора используется символ ; (точка с запятой).

Язык поддерживает условные операторы if и if...else.
Для объединения нескольких условий можно использовать логические операции || (ИЛИ) или && (И).
В JavaScript существует несколько видов операторов цикла: for, for.,.in, while, do...while и оператор выбора switch.
Также имеется оператор остановки выполнения цикла break.
Оператор continue используется для немедленного перехода к выполнению следующей итерации, пропуская остальную часть выполнения кода текущей итерации.

Блоки. Блоком является набор операторов JavaScript, заключенных в фигурные скобки {}.

Переменные. Переменная состоит из имени и выделенной области памяти, которая ему соответствует. Для объявления или, другими словами, создания переменной используется ключевое слово var:
var message;
После объявления, можно записать в переменную данные: var message;
message = 'Hello'; // сохраним в переменной строку Эти данные будут сохранены в соответствующей области памяти и в дальнейшем доступны при обращении по имени:
var message;
message = 'Hello!';
alert( message ); // выведет содержимое переменной
Для краткости можно совместить объявление переменной и запись данных:
var message = 'Hello!';
Можно даже объявить несколько переменных сразу:
var user = 'John', age = 25, message = 'Hello'.
Переменные, которые названы БОЛЬШИМИ_БУКВАМИ , являются константами, то есть никогда не меняются. Как правило, они используются для удобства, чтобы было меньше ошибок.

Данные. В языке JavaScript используется шесть типов данных – числа (Number), строки (String), объекты (Object), логический (Boolean), null и undefined.

Число. JavaScript поддерживает числа, как целые, так и с плавающей запятой. Также существуют специальные представления чисел, например NaN (не число). Примеры чисел: 3.14 (вещественное число), 15 (целое число), 0177 (восьмеричное число 177), 0ХА8 (шестнадцатеричное число А8).

Строка. Строки объявляются при помощи двойных кавычек или апострофов. Строка может состоять из нескольких символов в формате Unicode.

Логический тип Boolean. Логический тип допускает значения true и false. Любое выражение, равное 0, считается эквивалентным false, а любое выражение, равное числу, отличному от 0, будет эквивалентным true.

Нуль. Переменная типа null не имеет никакого определенного значения. Undefined означает, что тип не определен.

Неопределенное значение. Значение undefined имеет переменная после ее объявления и до присвоения ей какого-либо определенного значения.

Объекты. Он используется для коллекций данных и для объявления более сложных сущностей. Объявляются объекты при помощи фигурных скобок {...} , например: var user = { name: "Aся" };.

Во многих случаях JavaScript выполняет преобразования типов данных автоматически, когда они необходимы.
Например, при сложении строки и числа число будет преобразовываться в строку. Однако можно задавать и явное преобразование значения переменной в требуемый тип.
Например, числа могут быть преобразованы в строки, а строки – в числовой тип /функции parselnt() и parseFloat().

Выражения. В языке JavaScript выделяют логические или числовые выражения.
Любая допустимая комбинация констант и переменных, объединенных знаками операций, является выражением.
Знак равенства (=) используется как присваивание.
Например, выражение Pi = 3.14; подразумевает "Присвоить значение 3.14 переменной Pi". А для задания операции сравнения двух значений на равенство применяется двойной знак равенства (==). Символ "+" в выражении означает "сложение" или "объединение строк".

Функции. Функция - один из основных типов данных. Встроенные в браузер и созданные (определяемые) программистом.
Встроенные функции, /document.querySelector/ или /alert/, встроены в браузер для того, чтобы вы использовали их всякий раз, когда вам это необходимо.
Определяемые функции - созданные программистом. Перед тем как воспользоваться функцией, её необходимо предварительно определить. Определение функции = /объявления параметров/ и /блока инструкций/.

Описание функции имеет следующий вид: function имя (аргументы) { операторы }.

Например: let x = myFunction(4, 3);
document.getElementById("demo").innerHTML = x;
function myFunction(a, b) {
return a * b;
}
Оператор () вызывает функцию.
Возвращает return: 12.

Например, функция alert() = window.alert("Возвращает (выводит)вызывает всплывающий блок, появляющийся в окне браузера"), но мы должны дать ему строку в качестве аргумента, чтобы сказать функции, что писать во всплывающем блоке.

Методы. Методы - встроенные в браузер разработчиками функции и значения. Все значения (Строка «string», Число «number», Булевый логический тип «boolean», Объекты «object»), за исключением (Специальное значение «null», Специальное значение «undefined»), содержат встроенные в браузер разработчиками функции и значения, доступные «через точку».

Язык программирования JavaScript. Примеры.

Подготовка.

Скрипт в index.html.

Скрипт во внешнем файле main.js.

Скрипты во внешних файлах async и defer.

Метод "Вывести окно предупреждения".

Метод "Вывести неотображаемый текст".

Метод "Изменить стиль шрифта".

Метод "Добавить прослушиватель события".

Метод "Отобразить активный элемент".

Метод "Изменить содержание элемента".

Метод "Выпадающее меню".

Метод "Залипание навигации".

Метод "Изменить значение атрибута класса".

Метод "Изменить значение атрибута класса прокруткой".

Метод "Изменить размер текста прокруткой".

Метод "Изменить параграф наведением мыши".

Метод "Изменить содержание параграфа кнопкой".

Метод "Изменить параграфы наведением и отводом мыши".

Метод "Добавить копию текста кнопкой".

Метод "Добавить копию текста наведением".

Метод "Изменить содержание параграфа двойным кликом".

Метод "Изменить содержание параграфа одним кликом".

Метод "Изменить цвет параграфа одним кликом".

Метод "Добавить HTML содержимое тела документа".

Метод "Изменить HTML содержимое тела документа".

Метод "Изменить атрибут кнопки кликом".

Метод "Удалить параграф кликом кнопки".

Метод "Удалить класс "mystyle" из DIV".

Метод "Заменить всё в строке".

Метод "Заменить всё в строке глобально".

Метод "Замена в строке без учёта регистра".

Метод "Создание копий текста".

Метод "Подстановки переменных в строках".

Метод "Шаблоны строк".

Метод "Сортировка массива по алфавиту".

Метод "Обращение массива вспять".

Метод "Сортировка в порядке убывания".

Метод "Сортировка массива по алфавиту и по номерам".

Метод "Поиска наименьшего или наибольшего значения массива".

Метод "Поиска наименьшего числа массива".

Метод "Поиска наибольшего числа массива".

Метод "Сортировка Массивов объектов в порядке возрастания".

Метод "Карта массива".

Метод "Карта массива одноуровневая".

Метод "Фильтр массива".

Подготовка.

it-js-podgotovka

В папке - Мои документы создайте файл - index.html. В файле - index.html создайте шаблон html формата и сохраните его:

	
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Document.</title>
  <style>
  //Однострочный комментарий
  /* Это ‐ 
  многострочный комментарий.*/
  </style>
 </head>
<body>

Кликните на файл - index.html.
Браузер выведет чистую страницу с названием "Document.".

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

Скрипт в index.html.

it-js-script-index

В папке - Мои документы создайте файл - index.html. В файле - index.html создайте шаблон html формата и сохраните его:

	
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Document.</title>
  <style>
  </style>
 </head>
<body>
<script>document.write(1+2);</script>
</body>
</html>

Кликните на файл - index.html.
Браузер выведет результат работы скрипта - document.write(1+2); - число 3. (прописанного в файле - index.html).

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

Скрипт во внешнем файле.

it-js-script-vnesh-fail

В папке - Мои документы создайте папку с именем - js.
В папке - js создайте папку - scripts.
В папке - scripts создайте файл с именем - main.js.
В файле - main.js пропишите скрипт и сохраните его:

document.write(5 + 6);

Создайте файл - index.html и поместите в папку - js.
В файле - index.html создайте шаблон html формата и сохраните его:

	
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Document.</title>
  <style>
  </style>
 </head>
<body>
<script src="Рабочий стол/js/scripts/main.js"></script>
</body>
</html>

Кликните на файл - index.html.
Браузер выведет результат работы скрипта - document.write(5 + 6); - число 11. (прописанного в файле - main.js).

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

Скрипты во внешних файлах async и defer.

it-js-script-vnesh-failii

В папке - Мои документы создайте папку с именем - js.
В папке - js создайте папку - scripts.
В папке - scripts создайте файл с именем - main.js.
В папке - scripts создайте файл с именем - main2.js.
В файле - main.js пропишите скрипт и сохраните его:

document.write(5 + 6);

В файле - main2.js пропишите скрипт и сохраните его:

document.write(1 + 1);

Создайте файл - index.html и поместите в папку - js.
В файле - index.html создайте шаблон html формата и сохраните его:

	
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Document.</title>
  <style>
  </style>
 </head>
<body>
<script async src="Рабочий стол/js/scripts/main.js async"></script>
<script async src="Рабочий стол/js/scripts/main2.js async"></script>
<script async src="Рабочий стол/js/scripts/main.js defer"></script>
<script async src="Рабочий стол/js/scripts/main2.js defer"></script>
</body>
</html>

Кликните на файл - index.html.
Браузер выведет результат работы скрипта - document.write(5 + 6); - число 11. (прописанного в файле - main.js) и результат работы скрипта - document.write(1 + 1); - число 2. (прописанного в файле - main2.js). Атрибуты async/defer – только для внешних скриптов. Скрипт выполняется полностью асинхронно. То есть, при обнаружении атрибута async браузер не останавливает обработку страницы, а спокойно работает дальше. Когда скрипт будет загружен – он выполнится. А в таком коде (с defer ) первым сработает всегда 1.js , а скрипт 2.js , даже если загрузился раньше, будет его ждать. Второе отличие – скрипт с defer сработает, когда весь HTML‐документ будет обработан браузером.

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

Метод"Вывести окно предупреждения".

it-js-window.alert

В папке - Мои документы создайте файл - index.html. В файле - index.html создайте шаблон html формата и сохраните его:

	
<!DOCTYPE html> 
<html> 
<body> 
<title> Метод вывода "window.alert".</title> 	
<script> 
window.alert("Возвращает (выводит) в браузер window.alert (окно предупреждения)!");
</script> 
</body> 
</html> 

Кликните на файл - index.html.
Браузер выведет результат работы скрипта - страницу с названием (Метод вывода "window.alert") и окно предупреждения с текстом: "Возвращает (выводит) в браузер window.alert (окно предупреждения)!". При нажатии на кнопку "ОК" окно предупреждения закрывается.

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

Метод "Вывести неотображаемый текст".

it-js-style.display

В папке - Мои документы создайте файл - index.html. В файле - index.html создайте шаблон html формата и сохраните его:

	
<!DOCTYPE html>
<html>
<body>
<title>Метод "Вывести неотображаемый текст".</title>
<p id="demo" style="display:none">При нажатии на кнопку "Открытие текста" метод document.getElementById ищет (получает) элемент "p" с id ('demo') и выводит (возвращает) неотображаемый текст внутри этого элемента.</p>
<button type="button" onclick="document.getElementById('demo').style.display='block'">Открытие текста.</button>
</body>
</html>

Кликните на файл - index.html.
Браузер выведет результат работы скрипта - страницу с названием (Метод вывода "Неотображаемый текст".) и текстом: "При нажатии на кнопку "Открытие текста" метод document.getElementById ищет (получает) элемент "p" с id ('demo') и выводит (возвращает) неотображаемый текст внутри этого элемента."

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

Метод "Изменить стиль шрифта".

it-js-style.fontSize

В папке - Мои документы создайте файл - index.html. В файле - index.html создайте шаблон html формата и сохраните его:

	
<!DOCTYPE html>
<html>
<body>
<title>Метод "Изменить стиль шрифта".</title>
<p id="demo">При нажатии на кнопу "Изменить стиль" (font change  - смена шрифта) fontSize (шрифтРазмер) меняется с 16px до 35px.</p>
<button type="button" onclick="document.getElementById('demo').style.fontSize='35px'">Изменить стиль</button>
</body>
</html>

Кликните на файл - index.html.
Браузер выведет результат работы скрипта - страницу с названием (Метод "Изменить стиль шрифта".) и текстом: "При нажатии на кнопу "Изменить стиль" (font change - смена шрифта) fontSize (шрифтРазмер) меняется с 16px до 35px."

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

Метод "Добавить прослушиватель события".

it-js-addEventListener

В папке - Мои документы создайте файл - index.html. В файле - index.html создайте шаблон html формата и сохраните его:

	
<!DOCTYPE html>  
<html>   
<body>     
<h1>Метод addEventListener/добавитьСобытияПрослушиватель/.</h1>     
<p id="demo">Кликни в любом месте документа.</p>     
<script>     
document.addEventListener("click", function(){   document.getElementById("demo").innerHTML = "В скрипте этого HTML документа прописан метод document.addEventListener /документ.добавитьСобытияПрослушиватель/ и при Кликании в любом месте документа /событии нажатия/ происходит прослушивание события и выполняется фукция document.getElementById.innerHTML /документ.получитьЭлементИзIdДемо.вывести содержание элемента HTML параграфа/, в результате вы увидете этот текст."; });    
</script>     
</body>    
</html>

Кликните на файл - index.html.
Браузер выведет результат работы скрипта - страницу с текстом:" Метод addEventListener/добавитьСобытияПрослушиватель/. Кликни в любом месте документа." Далее. "В скрипте этого HTML документа прописан метод document.addEventListener /документ.добавитьСобытияПрослушиватель/ и при Кликании в любом месте документа /событии нажатия/ происходит прослушивание события и выполняется фукция document.getElementById.innerHTML /документ.получитьЭлементИзIdДемо.вывести содержание элемента HTML параграфа/, в результате вы увидете этот текст."

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

Метод "Отобразить активный элемент".

it-js-document.activeElement.tagName

В папке - Мои документы создайте файл - index.html. В файле - index.html создайте шаблон html формата и сохраните его:

	
<!DOCTYPE html> 
<html> 
<h1>Метод document.activeElement.tagName / отобразить активный элемент.</h1>
<p>В скрипте этого HTML документа прописан метод document.activeElement.tagName /отобразить активный элемент/ и при Кликании на определенном элементе HTML документа  выполняется фукция document.getElementById("demo").innerHTML = x и происходит вывод имени тэга этого элимента: input, button или body.</p>
<body onclick="myFunction()">  
<input type="text" value="Поле ввода"> 
<button>Кнопка</button>
<h1 id="demo"></h1>  
<script> 
function myFunction() {   var x = document.activeElement.tagName;   document.getElementById("demo").innerHTML = x; } 
</script>  
</body> 
</html> 

Кликните на файл - index.html.
Браузер выведет результат работы скрипта - страницу с текстом:"В скрипте этого HTML документа прописан метод document.activeElement.tagName /отобразить активный элемент/ и при Кликании на определенном элементе HTML документа выполняется фукция document.getElementById("demo").innerHTML = x и происходит вывод имени тэга этого элимента: input, button или body."

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

Метод "Изменить содержание элемента".

it-js-innerHTML

В папке - Мои документы создайте файл - index.html. В файле - index.html создайте шаблон html формата и сохраните его:

	
<!DOCTYPE html> 
<html> 
<body>
<h1>Метод "Изменить содержание элемента".</h1>	  
<p>В скрипте прописан код изменяющий HTML элемент параграф с индентификатором "демо". Метод /документ.добавитьСобытияПрослушиватель/ с принимаемыми параметрами, аргументами "клик" и myFunction, вызывает обработчик события и функцию. Функция myFunction вызывает блок /инструкцию/ с методом /документ.получитьЭлементСId (демо).внутреннийHTML = "этот текст"/, который изменяет содержимое /свойство inner внутренний HTML код/ элемента параграф с индентификатором "демо" возвращая в него строку /этот текст/..</p> 
<p id="demo">  
<script> 
document.addEventListener("click", myFunction);  function myFunction() { document.getElementById("demo").innerHTML = "этот текст"; } 
</script>  
</body> 
</html> 

Кликните на файл - index.html.
Браузер выведет результат работы скрипта - страницу с текстом:"В скрипте прописан код изменяющий HTML элемент параграф с индентификатором "демо". Метод /документ.добавитьСобытияПрослушиватель/ с принимаемыми параметрами, аргументами "клик" и myFunction, вызывает обработчик события и функцию. Функция myFunction вызывает блок /инструкцию/ с методом /документ.получитьЭлементСId (демо).внутреннийHTML = "этот текст"/, который изменяет содержимое /свойство inner внутренний HTML код/ элемента параграф с индентификатором "демо" возвращая в него строку /этот текст/." При кликании в любом месте документа добавится /этот текст/.

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

Метод "Выпадающее меню".

it-js-classList.downmenu

В папке - Мои документы создайте файл - index.html. В файле - index.html создайте шаблон html формата и сохраните его:

	
<!DOCTYPE html> 
<html> 
<head> 
<style> 
.dropbtn {   background-color: blue;  /*свойство: значение*/ color: white;   padding: 16px; /*padding-поле внутреннее*/   font-size: 18px;   border: none; cursor: pointer; /*указатель*/ }  
.dropbtn:hover, .dropbtn:focus {   background-color: green; }  
.dropdown {   position: relative; /*относительный*/   
display: inline-block; }  
.dropdown-content {   display: none;   position: absolute;   background-color: yellow;   min-width: 160px;   overflow: auto; /*переполнение*/  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); }  
.dropdown-content a {   color: black;   padding: 12px 16px;  text-decoration: none;   display: block; }  
.dropdown-content a:hover {background-color: red;}  
.show {display:block;} </style> 
</head> 
<body>  
<h1>Drop-down menu - раскрывающееся (вниз) или падающее меню.</h1> 
<div class="dropdown">   
<button id="myBtn" class="dropbtn">Открыть</button>   
<div id="myDropdown" class="dropdown-content">     
<a href="#home">Главная</a>     
<a href="#about">О Нас</a>     
<a href="#contact">Контакты</a>   
</div> 
</div>  
<script> 
document.getElementById("myBtn").onclick = function() {myFunction()}; /*Метод документ.получитьЭлемент С АйДи (мояКнопка) с принимаемыми параметрами, аргументами "клик" и myFunction, вызывает обработчик события и функцию.*/   
function myFunction() {   document.getElementById("myDropdown").classList.toggle("show"); /* Функция myFunction классСписок classList переключается toggle между добавлением и удалением класса show, который используется для скрытия и отображения содержимого выпадающего списка */} 
</script>  
</body> 
</html>

Кликните на файл - index.html.
Браузер выведет результат работы скрипта - страницу с текстом:"Drop-down menu - раскрывающееся (вниз) или падающее меню." и кнопкой "Открыть" синего цвета. При наведении курсора на кнопку "Открыть" меняется ее цвет на зеленый. При нажатии выпадает вниз меню желтого цвета. При наведении на блоки меню их цвет меняется на красный.

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

Метод "Залипание навигации".

it-js-classList.sticknavbar

В папке - Мои документы создайте файл - index.html. В файле - index.html создайте шаблон html формата и сохраните его:

	
<!DOCTYPE html> 
<html> 
<head> 
<style> 
body {   margin: 0; /*margin-поле внешнее*/  font-size: 50px; }  
.header {   background-color: green; /*свойство: значение*/  padding: 20px; /*padding-поле внутреннее*/  text-align: center; }  
#navbar {   overflow: hidden; /*переполнение*/  background-color: yellow; }  
#navbar a {   float: left; /*float- плавающая область*/  display: block;   color: black;   text-align: center;   padding: 14px 36px;   text-decoration: none;   font-size: 20px; }  
#navbar a:hover {   background-color: blue;   color: black; }  #navbar a.active {   background-color: red;   color: black; }  .content {   padding: 16px; }  
.sticky {   position: fixed; /*fixed-неподвижная;*/  top: 0;   width: 100% }  
.sticky + .content {   padding-top: 10px;  /*sticky-залипание*/} 
</style> 
</head> 
<body onscroll="myFunction()">  
<div class="header">   
<h1>Sticky-залипание.</h1>   
</div>  
<div id="navbar">   
<a class="active" href="javascript:void(0)">Главная</a>  
<a href="javascript:void(0)">О нас</a>   
<a href="javascript:void(0)">Контакты</a> 
</div>  <div class="content">   
<h2>Прокрутите вниз, чтобы увидеть эффект залипания.</h2>
<p>body {   margin: 0; /*margin-поле внешнее*/  font-size: 50px; }  
.header {   background-color: green; /*свойство: значение*/  padding: 20px; /*padding-поле внутреннее*/  text-align: center; }  
#navbar {   overflow: hidden; /*переполнение*/  background-color: yellow; }  
#navbar a {   float: left; /*float- плавающая область*/  display: block;   color: black;   text-align: center;   padding: 14px 36px;   text-decoration: none;   font-size: 20px; }  
#navbar a:hover {   background-color: blue;   color: black; }  #navbar a.active {   background-color: red;   color: black; }  .content {   padding: 16px; }  
.sticky {   position: fixed; /*fixed-неподвижная;*/  top: 0;   width: 100% }  
.sticky + .content {   padding-top: 10px;  /*sticky-залипание*/}</p>  
</div>  
<script> 
var navbar = document.getElementById("navbar"); // = присвоить; 
var sticky = navbar.offsetTop;  // offsetTop-сдвигСверху;
function myFunction() {   
if (window.pageYOffset >= sticky) {   navbar.classList.add("sticky")   } //Описание : function имя (аргументы) { операторы };
else {   navbar.classList.remove("sticky"); /*remove-перемещать*/  } } 
</script>  
</body> 
</html>

Кликните на файл - index.html.
Браузер выведет результат работы скрипта - страницу с текстом в шапке сайта:"Sticky-залипание." на зеленом фоне и навигационной панелью желтого цвета с красной кнопкой "Главная". При наведении курсора на кнопки "О нас" и "Контакты" меняется их цвет на синий. При прокрутке вниз виден эффект залипания.

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

Метод "Изменить значение атрибута класса".

it-js-className.divСhange

В папке - Мои документы создайте файл - index.html. В файле - index.html создайте шаблон html формата и сохраните его:

	
<!DOCTYPE html> 
<html> 
<head> 
<style> 
.mystyle {   width: 300px;   height: 50px;   background-color: green; font-size: 20px;  color: white;  text-align: center; margin-bottom: 10px; /*margin-bottom-поле внешнее снизу*/ }  
.newClassName {   width: 600px;   height: 100px;   background-color: blue;   text-align: center;   font-size: 36px;   color: black;   margin-bottom: 10px; } 
</style> 
</head> 
<body>  
<h1>Изменить значение атрибута класса DIV /селектор "mystyle" на "newClassName"/.</h1>  
<div id="myDIV" class="mystyle">Элемент DIV</div>  
<button onclick="myFunction()">Попробовать</button>  
<script> 
function myFunction() {   document.getElementById("myDIV").className = "newClassName"; } 
</script>  
</body> 
</html>

Кликните на файл - index.html.
Браузер выведет результат работы скрипта - страницу с текстом :"Изменить значение атрибута класса DIV /селектор "mystyle" на "newClassName"/." с блоком зеленого цвета с текстом белого цвета "Элемент DIV" и кнопкой "Попробовать". При нажатии на кноку увеличивается размер блока и меняется цвет на синий, а текст становится черным.

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

Метод "Изменить значение атрибута класса прокруткой".

it-js-className.Scroll

В папке - Мои документы создайте файл - index.html. В файле - index.html создайте шаблон html формата и сохраните его:

	
<!DOCTYPE html> 
<html> 
<head> 
<style> 
.test {   background-color: yellow; } 
</style> 
</head> 
<body style="height:800px">  
<h1>Метод "Изменить значение атрибута класса прокруткой".</h1>  
<p id="myP" style="position:fixed">Прокрутите 10 пикселей от верхней части окна, добавится класс "test" (желтый цвет фона) в этот параграф. Прокрутите вверх, чтобы удалить класс.</p>  
<script> 
window.onscroll = function() {myFunction()}; /*при прокрутке окна присвоить функцию майФанкшн*/ 
function myFunction() {   
if (document.body.scrollTop > 10 
/* если - аргумент: тело документа прокучивается сверху больше чем на 10 пикселей*/
|| document.documentElement.scrollTop > 10 ) 
/*|| или создан в документе Элемент документа с прокруткой сверху больше чем на 10 пикселей*/
{     document.getElementById("myP").className = "test";  } /*оператор: в документе получить Элемент с АйДи значением мой параграф методом имяКласса присвоить значение тест*/
else {     document.getElementById("myP").className = "";   } } /* ещё - оператор: в документе получить Элемент с АйДи мой парагрф методом имяКласса присвоить пустое значение*/
</script>  
</body> 
</html>

Кликните на файл - index.html.
Браузер выведет результат работы скрипта - страницу с текстом :"Метод "Изменить значение атрибута класса прокруткой". При прокрутке 10 пикселей от верхней части окна вниз, добавится класс "test" (желтый цвет фона) в параграф. При прокрутке вверх, удалится класс "test" (желтый цвет фона) в параграфе.

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

Метод "Изменить размер текста прокруткой".

it-js-className.Scroll.fs

В папке - Мои документы создайте файл - index.html. В файле - index.html создайте шаблон html формата и сохраните его:

	
<!DOCTYPE html> 
<html> 
<head> 
<style> 
.fs {  font-size: 46px;} 
</style> 
</head> 
<body style="height:800px">  
<h1>Метод "Изменить размер текста прокруткой".</h1>  
<p id="myP" style="position:fixed">Прокрутите вниз, добавится стиль параграфа ".fs" (font-size: 46px;). Прокрутите вверх, чтобы удалить стиль.</p>  
<script> 
window.onscroll = function() {myFunction()}; /*при прокрутке окна присвоить функцию майФанкшн*/ 
function myFunction() {   
if (document.body.scrollTop > 10 
/* если - аргумент: тело документа прокучивается сверху больше чем на 10 пикселей*/
|| document.documentElement.scrollTop > 10 ) 
/*|| или создан в документе Элемент документа с прокруткой сверху больше чем на 10 пикселей*/
{     document.getElementById("myP").className = "fs";  } /*оператор: в документе получить Элемент с АйДи значением мой параграф методом имяКласса присвоить значение "fs"*/
else {     document.getElementById("myP").className = "";   } } /* ещё - оператор: в документе получить Элемент с АйДи мой парагрф методом имяКласса присвоить пустое значение*/
</script>  
</body> 
</html>

Кликните на файл - index.html.
Браузер выведет результат работы скрипта - страницу с текстом :Метод "Изменить размер текста прокруткой". При прокрутке вниз, текст параграфа увеличится с 16 до 46px. При прокрутке вверх, текст параграфа уменьшится до 16px.

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

Метод "Изменить параграф наведением мыши".

it-js-pOnmouseoverChange

В папке - Мои документы создайте файл - index.html. В файле - index.html создайте шаблон html формата и сохраните его:

	
<!DOCTYPE html> 
<html> 
<body>
<h1>Метод "Изменить параграф наведением мыши".</h1>  
<p id="demo" onmouseover="myFunction()">Наведите курсор на парагаф, чтобы изменить текст в этом параграфе.</p>  
<script> 
function myFunction() {   document.getElementById("demo").innerHTML = "Параграф изменен"; } 
</script>  
</body> 
</html>

Кликните на файл - index.html.
Браузер выведет результат работы скрипта - страницу с заголовком: Метод "Изменить параграф наведением мыши". При наведении курсора на парагаф, текст в этом параграфе изменится.

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

Метод "Изменить содержание параграфа кнопкой".

it-js-pBtnChange

В папке - Мои документы создайте файл - index.html. В файле - index.html создайте шаблон html формата и сохраните его:

	
<!DOCTYPE html> 
<html> 
<body>
<h1>Метод "Изменить содержание параграфа кнопкой".</h1>	  
<p id="demo">Нажмите кнопку, чтобы изменить текст в этом параграфе.</p>  
<button onclick="myFunction()">Изменить</button>  
<script> 
function myFunction() {   document.getElementById("demo").innerHTML = "Параграф изменен."; } /*inner-внутренний*/
</script>  
</body> 
</html>

Кликните на файл - index.html.
Браузер выведет результат работы скрипта - страницу с заголовком: Метод "Изменить содержание параграфа кнопкой". При нажатии на кнопку "Изменить" текст в этом параграфе изменится.

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

Метод "Изменить параграфы наведением и отводом мыши".

it-js-pChOnmouseOverOut

В папке - Мои документы создайте файл - index.html. В файле - index.html создайте шаблон html формата и сохраните его:

	
<!DOCTYPE html> 
<html> 
<body>
<h1>Метод "Изменить параграфы наведением и отводом мыши".</h1>  
<p id="b" onmouseover="t()" onmouseout="r()">Наведите курсор на парагаф, чтобы изменить текст в этом параграфе.</p>  
<script> 
function t() {   document.getElementById("b").innerHTML = "Параграф изменен"; }
function r() {   document.getElementById("b").innerHTML = "Параграф снова изменен"; }  
</script>  
</body> 
</html>

Кликните на файл - index.html.
Браузер выведет страницу с заголовком: Метод "Изменить параграфы наведением и отводом мыши". При наведении курсора на текст, текст изменится, при отведении курсора от текста, он снова изменится.

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

Метод "Добавить копию текста кнопкой".

it-js-pAddCopyBtn

В папке - Мои документы создайте файл - index.html. В файле - index.html создайте шаблон html формата и сохраните его:

	
<!DOCTYPE html> 
<html> 
<body>
<h1>Метод "Добавить копию текста кнопкой".</h1>  
<p>Это параграф.</p>  
<button onclick="myFunction()">Попробовать</button>  
<script> 
function myFunction() {   
var x = document.createElement("P");   
var t = document.createTextNode("Это параграф.");   x.appendChild(t);   
document.body.appendChild(x); } 
</script>  
</body> 
</html>

Кликните на файл - index.html. Браузер выведет страницу с заголовком:Метод "Добавить копию текста кнопкой". При нажатии на кнопку добавится копия текста ниже.

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

Метод "Добавить копию текста наведением".

it-js-pAddCopyOnmouseOver

В папке - Мои документы создайте файл - index.html. В файле - index.html создайте шаблон html формата и сохраните его:

	
<!DOCTYPE html> 
<html> 
<body>
<h1>Метод "Добавить копию текста наведением".</h1>  
<p onmouseover="myFunction()">Это параграф.</p>
<script> 
function myFunction() {   
var x = document.createElement("P");   
var t = document.createTextNode("Это параграф.");   
x.appendChild(t);   /*append  добавлять child дочерний*/
document.body.appendChild(x); } 
</script>  
</body> 
</html>

Кликните на файл - index.html. Браузер выведет страницу с заголовком: Метод "Добавить копию текста наведением". При наведении на параграф добавится копия текста ниже.

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

Метод "Изменить содержание параграфа двойным кликом".

it-js-p2ClickChange

В папке - Мои документы создайте файл - index.html. В файле - index.html создайте шаблон html формата и сохраните его:

	
<!DOCTYPE html> 
<html> 
<body>
<h1>Метод "Изменить содержание параграфа двойным кликом".</h1>  
<p id="demo" ondblclick="myFunction()">Это параграф.</p>  
<script> 
function myFunction() {   document.getElementById("demo").innerHTML = "Параграф изменен."; } 
</script>  
</body> 
</html>

Кликните на файл - index.html. Браузер выведет страницу с заголовком: Метод "Изменить содержание параграфа двойным кликом". При двойным кликании на параграфе изменится текст.

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

Метод "Изменить содержание параграфа одним кликом".

it-js-p1ClickChange

В папке - Мои документы создайте файл - index.html. В файле - index.html создайте шаблон html формата и сохраните его:

	
<!DOCTYPE html> 
<html> 
<body>  
<h1>Метод "Изменить содержание параграфа одним кликом".</h1> 
<p id="demo">Это параграф.</p>  
<script> 
document.getElementById("demo").addEventListener("click", myFunction);  
function myFunction() {   document.getElementById("demo").innerHTML = "Параграф изменен."; } 
</script>  
</body> 
</html>

Кликните на файл - index.html. Браузер выведет страницу с заголовком: Метод "Изменить содержание параграфа одним кликом". При одном кликании на параграфе изменится текст.

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

Метод "Изменить цвет параграфа одним кликом".

it-js-p1ClickColor

В папке - Мои документы создайте файл - index.html. В файле - index.html создайте шаблон html формата и сохраните его:

	
<!DOCTYPE html> 
<html> 
<body>  
<h1>Метод "Изменить цвет параграфа одним кликом".</h1>
<p onclick="myFunction(this, 'red')">Кликни меня, чтобы изменить цвет моего текста.</p> 
<script> 
function myFunction(element, color) {   element.style.color = color; } 
</script>  
</body> 
</html>

Кликните на файл - index.html. Браузер выведет страницу с заголовком: Метод "Изменить цвет параграфа одним кликом". При одном кликании на параграфе изменится цвет.

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

Метод "Добавить HTML содержимое тела документа".

it-js-bodyAdd

В папке - Мои документы создайте файл - index.html. В файле - index.html создайте шаблон html формата и сохраните его:

	
<!DOCTYPE html> 
<html> 
<body>  
<h1>Метод "Добавить HTML содержимое тела документа".</h1> 
<p>Нажмите кнопку, чтобы отобразить HTML содержимое тела документа.</p> 
<button onclick="myFunction()">Попробовать</button>  
<p id="demo"></p>  
<script> 
function myFunction() {   var x = document.body.innerHTML;   document.getElementById("demo").innerHTML = x; } 
</script>  
</body> 
</html>

Кликните на файл - index.html. Браузер выведет страницу с заголовком: Метод "Добавить HTML содержимое тела документа". При нажатии на кнопку содержание тела документа будет добавляться в документ каждый раз.

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

Метод "Изменить HTML содержимое тела документа".

it-js-bodyChange

В папке - Мои документы создайте файл - index.html. В файле - index.html создайте шаблон html формата и сохраните его:

	
<!DOCTYPE html> 
<html> 
<body>  
<h1>Заголовок.</h1>  
<p>При нажатии на кнопку содержание тела документа будет изменено.</p>
<button onclick="myFunction()">Попробовать</button>  
<script> 
function myFunction() {   document.body.innerHTML = "Тело документа изменено."; } 
</script>  
</body> 
</html>

Кликните на файл - index.html. Браузер выведет страницу с заголовком: Метод "Изменить HTML содержимое тела документа". При нажатии на кнопку содержание тела документа будет изменено.

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

Метод "Изменить атрибут кнопки кликом".

it-js-btnClickChangeAtr

В папке - Мои документы создайте файл - index.html. В файле - index.html создайте шаблон html формата и сохраните его:

	
<!DOCTYPE html> 
<html> 
<head> 
<style> 
.example {   color: red;   padding: 5px;   width: 150px;   font-size: 15px; }  /*padding-поле внутреннее*/ 
.newClass {   color: blue;   padding: 15px;   width: 250px;   font-size: 18px;   background-color: yellow; } 
</style> 
</head> 
<body>
<h1>Метод "Изменить атрибут кнопки кликом".</h1> 	  
<p>Нажмите кнопку, чтобы изменить значение второго атрибута элемента button.</p>  
<button onclick="myFunction()" class="example">Попробовать</button> <script> 
function myFunction() {   var a = document.getElementsByTagName("BUTTON")[0];   a.attributes[1].value = "newClass"; } /*[]-идентификатор*/
</script>  
</body> 
</html>

Кликните на файл - index.html. Браузер выведет страницу с заголовком: Метод "Изменить атрибут кнопки кликом". При нажатии на кнопку атрибут кнопки изменится и стиль кнопки будет изменен.

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

Метод "Удалить параграф кликом кнопки".

it-js-BtnDeleteP

В папке - Мои документы создайте файл - index.html. В файле - index.html создайте шаблон html формата и сохраните его:

	
<!DOCTYPE html> 
<html> 
<body>
<h1>Метод "Удалить параграф кликом кнопки".</h1> 	  
<p id="demo">Нажмите кнопку, чтобы удалить параграф.</p>  
<button onclick="myFunction()">Попробовать</button>  
<script> 
function myFunction() {   document.getElementById("demo").innerHTML = ""; } 
</script>  
</body> 
</html>

Кликните на файл - index.html. Браузер выведет страницу с заголовком: Метод "Удалить параграф кликом кнопки". При нажатии на кнопку параграф удалится.

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

Метод "Удалить класс "mystyle" из DIV".

it-js-styleBlockRemove

В папке - Мои документы создайте файл - index.html. В файле - index.html создайте шаблон html формата и сохраните его:

	
<!DOCTYPE html> 
<html> 
<head> 
<style> 
.mystyle {background-color: coral;   color: white;   font-size: 25px; } 
</style> 
</head> 
<body>  
<p>Нажмите кнопку, чтобы удалить класс "mystyle" из DIV.</p>  <button onclick="myFunction()">Попробовать</button>  <p><strong><div id="myDIV" class="mystyle"> Я являюсь элементом DIV </div>  
<script> 
function myFunction() {   document.getElementById("myDIV").classList.remove("mystyle"); } 
</script>  
</body> 
</html>

Кликните на файл - index.html.
Браузер выведет страницу с блоком оранжевого цвета с текстом :" Я являюсь элементом DIV " и кнопкой "Попробовать". При нажатии на кноку оранжевый фон исчезнет и изменится стиль шрифта.

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

Метод "Заменить всё в строке".

it-js-replaceAllstring

В папке - Мои документы создайте файл - index.html. В файле - index.html создайте шаблон html формата и сохраните его:

	
<!DOCTYPE html>
<html>
<body>
<h2>Метод "Заменить всё в строке".</h2>
<p>Это исходная строка. Исходная строка меняется. Исходная строка изменена. Метод text.replaceAll меняет "исходная" на "текущая" во всех словах строки.</p>
<p id="demo"></p>
<script>
let text = "Это исходная строка. Исходная строка меняется. Исходная строка изменена."
text = text.replaceAll(/Исходная/g,"Текущая");
text = text.replaceAll(/исходная/g,"текущая");
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>

Кликните на файл - index.html.
Браузер выведет страницу с текстом:" Метод "Заменить всё в строке". "Это исходная строка. Исходная строка меняется. Исходная строка изменена". Метод text.replaceAll меняет "исходная" на "текущая" во всех словах строки на "Это текущая строка. Текущая строка меняется. Текущая строка изменена".

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

Метод "Заменить всё в строке глобально".

it-js-replaceAllstringGlobal

В папке - Мои документы создайте файл - index.html. В файле - index.html создайте шаблон html формата и сохраните его:

	
<!DOCTYPE html>
<html>
<body>
<h2>Метод "Заменить всё в строке глобально".</h2>
<p>Это исходная строка. Исходная строка меняется. Исходная строка изменена. Метод text.replaceAll меняет /Исходная/g на "текущая" во всех словах строки.</p>
<p id="demo"></p>
<script>
let text = "Это исходная строка. Исходная строка меняется. Исходная строка изменена."
text = text.replaceAll(/Исходная/g,"Текущая");
text = text.replaceAll(/исходная/g,"текущая");
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>

Кликните на файл - index.html.
Браузер выведет страницу с текстом:" Метод "Заменить всё в строке глобально". "Это исходная строка. Исходная строка меняется. Исходная строка изменена". Метод text.replaceAll меняет /Исходная/g на "текущая" во всех словах строки на "Это текущая строка. Текущая строка меняется. Текущая строка изменена".

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

Метод "Замена в строке без учёта регистра".

it-js-replaceStringI

В папке - Мои документы создайте файл - index.html. В файле - index.html создайте шаблон html формата и сохраните его:

	
<!DOCTYPE html>
<html>
<body>
<h2>Метод "Замена в строке без учёта регистра".</h2>
<button onclick="myFunction()">Заменить</button>
<p id="demo">Это исходная строка. Исходная строка меняется. ИСХОДНАЯ строка изменена. Метод text.replace //i меняет "исходная" на "текущая" во всех словах строки без учёта регистра поочередно при каждом клике.</p>
<script>
function myFunction() {
  let text = document.getElementById("demo").innerHTML; 
  document.getElementById("demo").innerHTML =
  text.replace(/исходная/i,"текущая");
}
</script>
</body>
</html>

Кликните на файл - index.html.
Браузер выведет страницу с текстом:" Метод "Замена в строке без учёта регистра". Кнопка "Заменить". Это исходная строка. Исходная строка меняется. ИСХОДНАЯ строка изменена. Метод text.replace //i меняет "исходная" на "текущая" во всех словах строки без учёта регистра поочередно при каждом клике.

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

Метод "Создание копий текста".

it-js-textRepeat

В папке - Мои документы создайте файл - index.html. В файле - index.html создайте шаблон html формата и сохраните его:

	
<!DOCTYPE html>
<html>
<body>
<h2>Метод "Создание копий текста".</h2>
<button onclick="myFunction()">Создание</button>
<p id="demo">Метод text.repeat(4) создаёт 4 копии текста в прогрессии при каждом нажатии.<br></p>
<script>
function myFunction() {
  let text = document.getElementById("demo").innerHTML; 
  let result = text.repeat(4);
  document.getElementById("demo").innerHTML = result; }	
</script>
</body>
</html>

Кликните на файл - index.html.
Браузер выведет страницу с текстом: Метод "Создание копий текста". Кнопка "Создание". Метод text.repeat(4) создаёт 4 копии текста в прогрессии при каждом нажатии.

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

Метод "Подстановки переменных в строках".

it-js-variablesStrings

В папке - Мои документы создайте файл - index.html. В файле - index.html создайте шаблон html формата и сохраните его:

	
<!DOCTYPE html>
<html>
<body>
<h1>Метод "Подстановки переменных в строках".</h1>
<p id="demo"></p>
<script>
let firstName = "Имя";
let lastName = "Фамилия";
let text = `Привет ${firstName}, ${lastName}!`;
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>

Кликните на файл - index.html.
Браузер выведет страницу с текстом: Метод "Подстановки переменных в строках". Привет Имя, Фамилия!

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

Метод "Шаблоны строк".

it-js-templateStrings

В папке - Мои документы создайте файл - index.html. В файле - index.html создайте шаблон html формата и сохраните его:

	
<!DOCTYPE html>
<html>
<body>
<h1>Метод "Шаблоны строк".</h1>
<p id="demo"></p>
<script>
let header = "Шаблон строк";
let tags = ["Шаблон строк", "подменен", "сейчас"];
let html = `<h4>${header}</h4><ul>`;
for (const x of tags) {
  html += `<li>${x}</li>`; }
html += `</ul>`;
document.getElementById("demo").innerHTML = html;
</script>
</body>
</html>

Кликните на файл - index.html.
Браузер выведет страницу с текстом: Метод "Шаблоны строк". Заголовок 4 уровня "Шаблон строк". Маркированный список: *Шаблон строк *подменен *сейчас.

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

Метод "Сортировка массива по алфавиту".

it-js-arraySortAlphabet

В папке - Мои документы создайте файл - index.html. В файле - index.html создайте шаблон html формата и сохраните его:

	
<!DOCTYPE html>
<html>
<body>
<h2>Метод "Сортировка массива по алфавиту".</h2>
<button onclick="myFunction()">Сортировка</button>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
	const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits;
function myFunction() {
  fruits.sort();
document.getElementById("demo2").innerHTML = fruits; }	
</script>
</body>
</html>

Кликните на файл - index.html.
Браузер выведет страницу с текстом: Метод "Сортировка массива по алфавиту". Кнопка "Сортировка". "Banana,Orange,Apple,Mango". При нажатии кнопку "Сортировка" браузер дополнительно выведет "Apple,Banana,Mango,Orange".

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

Метод "Обращение массива вспять".

it-js-arrayReverse

В папке - Мои документы создайте файл - index.html. В файле - index.html создайте шаблон html формата и сохраните его:

	
<!DOCTYPE html>
<html>
<body>
<h2>Метод "Обращение массива вспять".</h2>
<button onclick="myFunction()">Сортировка</button>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
	const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits;
function myFunction() {
  fruits.reverse();
document.getElementById("demo2").innerHTML = fruits; }	
</script>
</body>
</html>

Кликните на файл - index.html.
Браузер выведет страницу с текстом: Метод "Обращение массива вспять". Кнопка "Сортировка". "Banana,Orange,Apple,Mango". При нажатии кнопку "Сортировка" браузер дополнительно выведет "Mango,Apple,Orange,Banana".

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

Метод "Сортировка массива в порядке убывания".

it-js-arraySortReverse

В папке - Мои документы создайте файл - index.html. В файле - index.html создайте шаблон html формата и сохраните его:

	
<!DOCTYPE html>
<html>
<body>
<h2>Метод "Сортировка массива в порядке убывания".</h2>
<button onclick="myFunction()">Сортировка</button>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
	const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits;
function myFunction() {
  fruits.sort();//Комбинируя sort() и reverse(), вы можете отсортировать массив в порядке убывания:
  fruits.reverse();
document.getElementById("demo2").innerHTML = fruits; }	
</script>
</body>
</html>

Кликните на файл - index.html.
Браузер выведет страницу с текстом: Метод "Сортировка массива в порядке убывания". Кнопка "Сортировка". "Banana,Orange,Apple,Mango". При нажатии кнопку "Сортировка" браузер дополнительно выведет "Orange,Mango,Banana,Apple".

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

Метод "Сортировка массива по алфавиту и по номерам".

it-js-arraySortAlfNom

В папке - Мои документы создайте файл - index.html. В файле - index.html создайте шаблон html формата и сохраните его:

	
<!DOCTYPE html>
<html>
<body>
<h2>Метод "Сортировка массива по алфавиту и по номерам".</h2>
<button onclick="myFunction1()">по алфавиту</button>
<button onclick="myFunction2()">по номерам</button>
<p id="demo"></p>
<script>
const points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo").innerHTML = points;  
function myFunction1() {
  points.sort();
  document.getElementById("demo").innerHTML = points;
}
function myFunction2() {
  points.sort(function(a, b){return a - b});
  document.getElementById("demo").innerHTML = points;
}
</script>
</body>
</html>

Кликните на файл - index.html.
Браузер выведет страницу с текстом: Метод "Сортировка массива по алфавиту и по номерам". Кнопка "по алфавиту". Кнопка "по номерам". Массив "40,100,1,5,25,10". При нажатии кнопок произойдет сортировка по алфавиту или по номерам.

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

Метод "Поиска наименьшего или наибольшего значения массива".

it-js-arraySortMinMax

В папке - Мои документы создайте файл - index.html. В файле - index.html создайте шаблон html формата и сохраните его:

	
<!DOCTYPE html>
<html>
<body>
<h2>Метод "Поиска наименьшего или наибольшего значения массива".</h2>
<button onclick="myFunction1()">наименьшего</button>
<button onclick="myFunction2()">наибольшего</button>
<p id="demo"></p>
<script>
	const points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo").innerHTML = points; 
function myFunction1() {
  points.sort(function(a, b){return a-b});
  document.getElementById("demo").innerHTML = points[0];
}
function myFunction2() {
  points.sort(function(a, b){return b-a});
  document.getElementById("demo").innerHTML = points[0];
}
</script>
</body>
</html>

Кликните на файл - index.html.
Браузер выведет страницу с текстом: Метод "Поиска наименьшего или наибольшего значения массива". Кнопка "наименьшего". Кнопка "наибольшего". Массив "40,100,1,5,25,10". При нажатии кнопок произойдет поиск значения наименьшего или наибольшего.

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

Метод "Поиска наименьшего числа массива".

it-js-arrayMin

В папке - Мои документы создайте файл - index.html. В файле - index.html создайте шаблон html формата и сохраните его:

	
<!DOCTYPE html>
<html>
<body>
<h2>Метод "Поиска наименьшего числа массива".</h2>
<p>Наименьшее число: <span id="demo"></span>.</p>
<script>
const points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo").innerHTML = myArrayMin(points);
function myArrayMin(arr) {
  return Math.min.apply(null, arr);
}
</script>
</body>
</html>

Кликните на файл - index.html.
Браузер выведет страницу с текстом: Метод "Поиска наименьшего числа массива". Наименьшее число: 1.

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

Метод "Поиска наибольшего числа массива".

it-js-arrayMax

В папке - Мои документы создайте файл - index.html. В файле - index.html создайте шаблон html формата и сохраните его:

	
<!DOCTYPE html>
<html>
<body>
<h2>Метод "Поиска наибольшего числа массива".</h2>
<p>Наибольшее число: <span id="demo"></span>.</p>/* Выделение промежутка текста */
<script>
const points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo").innerHTML = myArrayMax(points);
function myArrayMax(arr) {
  return Math.max.apply(null, arr);
}/* apply - применить */
</script>
</body>
</html>

Кликните на файл - index.html.
Браузер выведет страницу с текстом: Метод "Поиска наибольшего числа массива". Наибольшее число: 100.

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

Метод "Сортировка Массивов объектов в порядке возрастания".

it-js-arrayObjSort

В папке - Мои документы создайте файл - index.html. В файле - index.html создайте шаблон html формата и сохраните его:

	
<!DOCTYPE html>
<html>
<body>
<h2>Метод "Сортировка Массивов объектов в порядке возрастания".</h2>
<button onclick="myFunction()">Сортировка</button>
<p id="demo"></p>
<script>
const cars = [
//определить перем. с кл.сл. const и присв.зн. массива обектов
  {type:"Volvo", year:2016},//объект массива
  {type:"Saab", year:2001},
  {type:"BMW", year:2010}
];
function myFunction() {
//вызывать кл.сл. myFunction(без парам.){вып.код}  	 
displayCars();//показать функц.;
cars.sort(function(a, b){return a.year - b.year});//сортировать по();
displayCars();//показать функц.;
function displayCars() {
//вызывать кл.сл. displayCars(без парам.){вып.код}	
  document.getElementById("demo").innerHTML =//вывод;
  cars[0].type + " " + cars[0].year + "<br>" + //первый элемент — [0]
  cars[1].type + " " + cars[1].year + "<br>" +
  cars[2].type + " " + cars[2].year;
}
}
</script>
</body>
</html>

Кликните на файл - index.html.
Браузер выведет страницу с текстом: Метод "Сортировка Массивов объектов в порядке возрастания". Кнопка "Сортировка". При нажатии кнопоки произойдет сортировка: Saab 2001 BMW 2010 Volvo 2016.

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

Метод "Карта массива".

it-js-arrayObjMap

В папке - Мои документы создайте файл - index.html. В файле - index.html создайте шаблон html формата и сохраните его:

	
<!DOCTYPE html>
<html>
<body>
<h2>Метод "Карта массива".</h2>
<p>Метод map() создаёт новый массив, применяя функцию умножения на 2 к каждому элементу массива, принимая 3 аргумента (значение, индекс, массив).</p>
<button onclick="myFunction()">Создать</button>
<p id="demo"></p>
<script>	
const numbers1 = [45, 4, 9, 16, 25];
document.getElementById("demo").innerHTML = numbers1;
function myFunction () {
const numbers2 = numbers1.map(myFunction);
document.getElementById("demo").innerHTML = numbers2;
function myFunction(value, index, array) { return value * 2;}
}
</script>
</body>
</html>

Кликните на файл - index.html.
Браузер выведет страницу с текстом: Метод "Карта массива". Метод map() создаёт новый массив, применяя функцию умножения на 2 к каждому элементу массива, принимая 3 аргумента (значение, индекс, массив). Кнопка "Создать". 45,4,9,16,25. При нажатии кнопоки появится: 90,8,18,32,50.

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

Метод "Карта массива одноуровневая".

it-js-arrayObjMapFlat

В папке - Мои документы создайте файл - index.html. В файле - index.html создайте шаблон html формата и сохраните его:

	
<!DOCTYPE html>
<html>
<body>
<h2>Метод "Карта массива одноуровневая".</h2>
<p>Сначала сопоставляет все элементы массива, а затем создаёт новый массив, объединяя элементы исходного массива.</p>
<button onclick = "myFunction()">Объединить</button>
<p id="demo"></p>
<script>
function myFunction () {	
const myArr = [1, 2, 3, 4, 5, 6];
const newArr = myArr.flatMap(x => [x, x * 10]);//flat-одноуровневый;
document.getElementById("demo").innerHTML = newArr;
}
</script>
</body>
</html>

Кликните на файл - index.html.
Браузер выведет страницу с текстом: Метод "Карта массива одноуровневая". Сначала сопоставляет все элементы массива, а затем создаёт новый массив, объединяя элементы исходного массива. Кнопка "Объединить". 1,2,3,4,5,6. При нажатии кнопоки появится: 1,10,2,20,3,30,4,40,5,50,6,60.

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

Метод "Фильтр массива".

it-js-arrayObjFilter

В папке - Мои документы создайте файл - index.html. В файле - index.html создайте шаблон html формата и сохраните его:

	
<!DOCTYPE html>
<html>
<body>
<h2>Метод "Фильтр массива".</h2>
<p>Метод создает новый массив с элементами массива, которые больше 18.</p>
<button onclick = "myFunction()">Отфильтровать</button>
<p id="demo"></p>
<script>
const numbers = [45, 4, 9, 16, 25];
document.getElementById("demo").innerHTML = numbers;
function myFunction () {
const over18 = numbers.filter(mFunction);
document.getElementById("demo").innerHTML = over18;
function mFunction(value, index, array) {
  return value > 18;
} }
</script>
</body>
</html>

Кликните на файл - index.html.
Браузер выведет страницу с текстом: Метод "Фильтр массива". Метод создает новый массив с элементами массива, которые больше 18. Кнопка "Отфильтровать". 45,4,9,16,25. При нажатии кнопоки появится: 45,25.

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

Есть совет? Остались вопросы? Нужна помощь? Свяжитесь с администратором сайта.