Ваш помощник в обучении

Array

leafleafleafDocy banner shape 01Docy banner shape 02
Updated on 02.06.2022

Практическое применение. Введение.

Содержание

Вопрос 1. Введение

Вопрос 2. Подключение внешних сценариев.

Вопрос 3. Возможности отображения JavaScript.

Литература

Это первое учебно-практическое занятие по JavaScript. Для дальнейшей практической работы вам понадобится редактор Brackets. Надо создать новую папку и создать в ней пустой файл index.html. Далее – открываем его в редакторе. Тут у вас будет 2 выбора: или примеры копировать в редактор через буфер обмена (Ctrl + C – скопировать, Ctrl + V – вставить), или набирать самим. Копировать – быстрее. Набивать самим – дольше, но лучше для понимания процессов и запоминания. Итак, начинаем.

Вопрос 1. Введение.

Изменяем содержимое HTML.

В HTML методах JS есть getElementById ()/

Метод document.getElementById() возвращает ссылку на элемент, который имеет атрибут id с указанным значением.

Аргументы:

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

Возвращаемое значение:

  • ссылка на объект element: если элемент с указанным идентификатором найден, метод вернёт ссылку на этот элемент. Если на странице используется более одного элемента с указанным идентификатором, метод вернёт ссылку на первый из них;
  • null (если элемент с указанным идентификатором не найден).

Обратите внимание, что при указании идентификатора учитывается регистр символов, так например метод document.getElementById(«Main») вернёт значение null вместо ссылки на элемент <div id=«main»> по той простой причине, что символы

«M» и «m» имеют различный регистр.

Пример:

<!DOCTYPE html>

<html>

<body>

<h2>Чем нам может помочь JS?</h2>

<p id=«demo»>С помощью JavaScript мы можем изменять текст на странице</p>

<button type=«button» onclick=’document.getElementById(«demo»).innerHTML = «Как-то так»’>кнопка</button>

</body>

</html>

Изменяем содержимое значения атрибутов HTML.

Для этого примера вам понадобится 2 любые картинки (в примере они называются p_on.gif n p_off.gif). Их надо положить в папку с index.html.

<!DOCTYPE html>

<html>

<body>

<h2>Чем нам может помочь JS?</</h2>

<h4>JavaScript может менять значения атрибутов HTML</br>

В данном случае JavaScript помогает менять атрибуты тега scr для картинки</h4>

<button onclick=«document.getElementById(‘myImage’).src=’p_on.gif’«>да будет свет</button>

<img id=«myImage» src=«p_off.gif» style=«width:100px»>

<button onclick=«document.getElementById(‘myImage’).src=’p_off.gif’«>электричества нет</button>

</body>

</html>

JavaScript может изменить стили HTML.

Изменение стиля элемента HTML является вариантом изменения атрибута HTML.

<!DOCTYPE html>

<html>

<body>

<h2> Чем нам может помочь JS?</h2>

<p id=«demo»>JavaScript может менять стили HTML </p>

<button type=«button» onclick=«document.getElementById(‘demo’).style.fontSize=’35px’«>кнопка<

/button>

</body>

</html>

JavaScript может скрывать и показывать элементы HTML

В этом примере мы воспользуемся атрибутами display:none и display=’block’.

<!DOCTYPE html>

<html>

<body>

<h2> Чем нам может помочь JS?</h2>

<h4>JavaScript может скрывать и показывать элементы HTML</h4>

<p id=«demo» style=«display:none»>Приветик</p>

<button type=«button» onclick=«document.getElementById(‘demo’).style.display=’none’«>прячем</ button>

<button type=«button» onclick=«document.getElementById(‘demo’).style.display=’block’«>показыв аем</button>

</body>

</html>

Вопрос 2. Подключение внешних сценариев.

Функция JavaScript представляет собой блок кода JavaScript, который может быть выполнен при вызове. Это возможно потому, что JavaScript является языком сценариев по умолчанию в HTML.

Например, функция может быть вызвана при возникновении события, такого, как нажатие пользователем кнопки. В документ HTML можно поместить любое количество скриптов. Скрипты можно размещать как в разделе <BODY>, так и в разделе <HEAD> страницы HTML или в обоих. При этом, размещение скриптов в нижней части раздела <BODY> улучшает скорость отображения страницы, поскольку компиляция скриптов замедляет отображение.

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript внутри блока body</h2>

<p id=«demo»>начальный текст.</p>

<button type=«button» onclick=«myFunction()»>Пробуем</button>

<script>

function myFunction() { document.getElementById(«demo»).innerHTML = «Начальный текст мы изменим на что хотим.»;

}

</script>

</body>

</html>

Внешний JavaScript.

Скрипты JS можно хранить и подключать с помощью внешнего файла.

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

Внешние файлы имеют следующие преимущества:

  • Он отделяет HTML и код.
  • Это упрощает чтение и поддержку HTML и JavaScript.
  • Кэшированные файлы JavaScript могут ускорить загрузку страниц.

Файлы JavaScript имеют файл *.js.

Чтобы использовать внешний сценарий, надо создать соответствующий файл или в папке JS или рядом с файлом страницы (*.html). Далее, поместите имя файла сценария в атрибут src (Source) тега <script>:

<script src=«myScript.js»></script>

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

<script src=«myScript1.js»></script>

<script src=«myScript2.js»></script>

Как уже говорилось, лучше всего размещать ссылку в самом низу блока <body>. В любом случае, сценарий будет вести себя так, как если бы он находился именно там, где находится тег <script>.

Вопрос 3. Возможности отображения JavaScript.

JavaScript может «отображать» данные различными способами:

  • Запись в HTML-элемент с помощью innerHTML.
  • Запись в HTML-вывод с помощью document.write().
  • Запись в окно оповещения с помощью window.alert().
  • Запись в консоль браузера с помощью console.log().

Использование InnerHtml.

Свойство innerHTML представляет собой содержимое элемента (элементы-потомки, комментарии, текст и т.д.), которое хранится в нём в виде строки. Свойство доступно для чтения и записи, поэтому у нас есть возможность получать и изменять содержимое элемента.

Примечание: если текстовый узел элемента содержит символы «&», «<» или «>», то свойство innerHTML преобразует эти символы в «&amp;», «&lt;» и «&gt;» соответственно. Для получения правильной копии содержимого текстового узла используйте свойство textContent.

// Получение содержимого элемента var content = element.innerHTML;

// Установка содержимого для элемента element.innerHTML = content;

При установке нового содержимого, сначала удаляется старое содержимое элемента, и только затем устанавливается новое. Обратите внимание, свойство innerHTML отсутствует у пустых элементов, его можно применять только с теми элементами, которые имеют открывающий и закрывающий тег. Чтобы получить доступ к HTML-элементу, JavaScript может использовать метод Document. getElementById (ID).

Атрибут ID определяет элемент HTML.

Изменение свойства InnerHtml элемента HTML является обычным способом отображения данных в формате HTML. Свойство InnerHtml определяет HTML-содержимое:

<!DOCTYPE html>

<html>

<body>

<h2>первые шаги в JS</h2>

<p>Вычисления</p>

<p id=«demo»></p>

<script>

document.getElementById(«demo»).innerHTML = 22 + 6;

</script>

</body>

</html>

Использование Document.Write().

Метод document.write() выводит на страницу переданные ему аргументы. Метод document.write() работает только на этапе загрузки страницы. Если document.write() вызвать после того, как страница загрузилась, результатом будет – перезаписанная страница, с текстом, который был добавлен с помощью document.write(). document является одним из предопределенных объектов JavaScript, а write() – это предопределенный метод объекта document. Точка объединяет объект и метод, показывая, что данный метод принадлежит объекту document.

Для тестирований кода удобно использовать функцию Document.

Write ():

<!DOCTYPE html>

<html>

<body>

<h2>My First Web Page</h2>

<p>My first paragraph.</p>

<script>

document.write(105 + 2222/2);

</script>

</body>

</html>

При полной загрузке HTML-документа с помощью Document. Write () будет удален весь существующий HTML-код:

<!DOCTYPE html>

<html>

<body>

<h2>My First Web Page</h2>

<p>My first paragraph.</p>

<script> document.write(5/2);

</script>

</br>

<button type=«button» onclick=«document.write(5/2)»>пробуем</button>

</body>

</html>

Использование window.Alert ().

Метод alert() выводит на экран модальное окно с сообщением. Модальное окно означает, что выполнение сценария и дальнейшее взаимодействие со страницей приостанавливается до тех пор, пока не закроется данное окно, в данном случае, пока не будет нажата кнопка OK для продолжения работы:

<script>

alert(«Hello world!»);

</script>

Для отображения различных данных можно использовать окно оповещения:

<!DOCTYPE html>

<html>

<body>

<h4>Вы увидели это сообщение <br> После нажатия ок</h4>

<script> window.alert(5*5);

</script>

</body>

</html>

Использование Console.log().

Для целей отладки можно использовать метод Console. log () для отображения данных.

<!DOCTYPE html>

<html>

<body>

<h2>Активируем вылавливание багов с помощью кнопки F12</h2>

<p>выбираем «Console» в меню инспектора.</p>

<script> console.log(5 + 6);

</script>

</body>

</html>

Рис. 1. Log для тестов

Литература:

  1. https://learn.javascript.ru.
  2. https://innerhtml.ru.
  3. https://webref.ru/css.
  4. https://htmlbase.ru.

Статьи

Раздел 2 -Предыдущий Циклы Вперед - Раздел 2 Практическое применение. Написание в JS. Типы данных.

    Powered By EazyDocs