2020-04-07
75
Последний четвертый способ встраивания кода языка JavaScript применяется в виде тела url-адреса с использованием специального псевдо-протокола JavaScript. Т.е. в адресной строке браузера можно написать следующее:
javascript:alert(“hello”)
Запустим на выполнение данный запрос, видим отработку метода alert() и появление в окне браузера стандартного всплывающего окна.
Кроме этого можно создать тег ссылки, в атрибуте «href», которой тоже можно обратиться к псевдопротоколу «javascript» и вызвать на исполнение метод alert():
<a href=”javascript:alert(‘hello’)”>Ссылка</a>
Обновляем информацию в браузере и видим ссылку на веб-странице. Нажимаем на данную ссылку и видим отработку данного скрипта. Метод alert() в результате работы ничего не возвращает. Метод возвращает значение «undefined». Если код, прописанный возле псевдопротокола «javascript» вернет некое значение, то это значение будет отображено на экране вместо текущего контента.
Напишем следующее. Обратимся к специальному объекту Date(), предназначенного для работы с датой и временем, и вызовем на исполнение метод toLocaleTimeString(). Отобразим на экране текущее время в строковом виде.
<a href=”javascript:new Date().toLocaleTimeString()”>Ссылка</a>
В этом случае обращаемся к методу, который пока незнаком. О дате и времени разговор будет в следующих главах конспекта. Данный метод в виде результата своей работы возвратит некое значение, т.е. текущее время. Это возвращаемое значение после активации ссылки будет отображено непосредственно в контенте данной страницы. Произойдет, по сути, переход на новую страницу.
Указанный код можно протестировать в браузере Google Chrome. Активируем в этом браузере ссылку и видим на экране отработку данного кода. При этом в браузере Google Chrome, при интерпретации выполняемого кода, видим, что находимся на прежней странице и еще на то, что происходит обновление контента. Вместо контента выводится время.
18:08:34.
Следует обратить внимание, что в браузере Mozilla Firefox при клике по ссылке переходим на новую страницу. С помощью клика по кнопке «Назад» можно вернуться на предыдущую страницу. Нажимая мышью на ссылку в браузере Mozilla Firefox получаем новую страницу, а в браузере Google Chrome получаем ту же страницу, контент которой заменяется новым значением, которое возвращает конструкция кода, указанная в атрибуте «href». Такие существуют небольшие нюансы.
Первый и второй способы встраивания кода языка JavaScript в документ HTML используются наиболее часто. Третий и четвертый способы реже. Четвертый способ используется наиболее редко в практике.
При использовании тегов «<script>» и «<script/>» можно прописать атрибут «type» и указать в его значении строку кода «text/javascript».
<script src=”js/script.js” type=”text/javascript”>
</script>
Данное значение выбрано по умолчанию для данного тега. Обычно упомянутый атрибут не прописывают. В старых реализациях браузеров используется атрибут «language», где можно указать строку «javascript», т.е. язык, код которого будет располагаться внутри тегов «<script>» и «</script>»:
<script src=”js/script.js” type=”text/javascript” language=”javascript”>
</script>
Для современных браузеров использование данных атрибутов для языка JavaScript необязательно. Удалим их из тега «<script>».
В данном материале код языка JavaScript будет встраиваться непосредственно из внешнего файла, а значит код, рассматриваемый в третьем и четвертом способах практически использоваться не будет. В основном, кодирование будет вестись во внешнем файле, т.е. в файле «script.js». Проверим работоспособность данного файла, указав в коде функцию alert():
alert(“hello”);
Сохраняем изменения и обновляем страницу. Последнее, что можно еще рассказать. При подключении внешнего файла «script.js» вне тела страницы, размещенного в тегах «<body >» и «</body >», при установке блока кода языка JavaScript между тегами «<body>» и «</body>», при размещении программного кода в этом блоке без использования атрибута «src» что может произойти?
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8” />
<link rel=”stylesheet” href=”css/style.css” />
<title>JavaScript</title>
</head>
<script src=”js/script.js”></script>
<body>
<div class=”wrap”>
<div class=”karkas”>
<h1>JavaScript</h1>
<script>
</script>
</div>
</div>
</body>
</html>
По сути, подключается код из внешнего файла и код размещенный в блоке «<script></script>» внутри тегов «<body>» и «</body>». Возможно, что еще будет подключен код из атрибута «onClick». Как в этом случае весь этот код будет работать? Весь код языка JavaScript, используемый в документе HTML, во время интерпретации превращается в одно единое целое, в одну программу, в один скрипт. К примеру, во внешнем файле объявляется некая переменная:
var i = 10;
Разговор о том, что такое переменные и как их объявлять будет вестись ниже. В структуре документа непосредственно в блоке кода между тегами «<script>» и «</script>» объявим еще одну следующую переменную, значение которой равно «20»:
<script>
var a = 20;
</script>
Далее, в кнопке «OK», во значении атрибута «onClick» следует прописать вызов метода alert(). В методе alert() указываем один параметр, сумму сложения переменных i и a.
<input type=”button” value=”OK” onClick=”alert(i + a)”>
Нужно отобразить на экране результат сложения двух переменных: i и a. Сохраняем изменения, переходим в браузер, обновляем информацию, активируем кнопку «OK» и видим вывод числа «30».
Видно, что весь код языка JavaScript, используемый в документе HTML, при интерпретации формирует одну глобальную программу, складывается в одну целую цепочку и результат его выполнения можно увидеть на экране. Неважно как добавляется код в структуру документа HTML, он всегда будет формировать одну законченную программу.
Основы синтаксиса.
Теперь расскажем вкратце об основах синтаксиса. При написании скриптов на языке JavaScript используется набор символов «Unicode». При этом язык JavaScript является языком чувствительным к регистру символов, т.е. все ключевые слова, имена переменных, функции и любые другие идентификаторы всегда должны содержать одинаковые наборы прописных и строчных букв. К примеру, при использовании метода alert() (в файле «script.js») информация, указанная в параметре, отображается в всплывающем окне.
alert(“hello”);
Если обратиться к методу alert(), сделав первую букву в названии метода прописной, то произойдет ошибка. В этом случае, при обновлении страницы не видно отработки метода alert(), небольшого кода языка JavaScript, т.к. была допущена ошибка. Текст этой ошибки можно увидеть, если открыть стандартные инструменты разработчика для браузера, например, в браузере Mozilla Firefox. Интерес представляет пункт «Инструменты» в главном меню браузера, подпункт «Веб-разработка» в выпадающем меню и пункт «Инструменты разработчика» в появившемся меню справа. В появившемся окне снизу активируем вкладку «Консоль» в верхнем меню и вкладку «JS» в нижнем. Должно быть видно сообщение об ошибке «Alert is not defined». Это означает, что данная функция неизвестна интерпретатору языка JavaScript.
Для браузера Mozilla Firefox можно использовать плагин «Firebug», который тоже имеет в своем функционале веб-консоль. В этой веб-консоли можно тоже увидеть сообщение об ошибке. При этом еще сообщается, что ошибка была допущена в файле «script.js» на конкретной строке. При исправлении данной ошибки, сохранении изменений и обновлении информации, код скрипта будет работать нормально.
Язык HTML нечувствителен к регистру. Например, атрибут «onClick» можно написать, как атрибут «onclick». Все будет успешно работать. Обновляем информацию, активируем кнопку «OK» и видим, что все работает. Однако в языке JavaScript есть аналогичный обработчик события и его можно написать только как «onclick» (во внешнем файле «script.js»). Ни в коем случае не стоит его указывать как «onClick», так как это приведет к ошибке. Если в теге HTML и можно его так написать, как атрибут этого тега, то в коде языка JavaScript все конструкции нужно писать правильно и всегда учитывать регистр символов. Это нужно помнить.
При написании программ на языке JavaScript можно использовать пробелы и переводы строк, которые не учитываются интерпретатором. Однако переводы строк учитываются в некоторых случаях о которых можно будет поговорить позже, но в основном, если код программы пишется в таком стиле, т.е. когда одна инструкция отделяется от другой инструкции точкой с запятой, то можно использовать сколько угодно пробелов, переводов строк и символов табуляции. Если в этом случае сохраним изменения, перейдем в браузер и обновим информацию, то все успешно отработает. Никаких ошибок в этом случае нет, т.е. при использовании пробелов и переводов строк формируется код программы, который достаточно удобно читать.
Можно ввести несколько инструкций кода, которые можно как-нибудь отделять друг от друга для того, чтобы это было понятно.
alert();
alert();
alert();
alert();
Эта информация касалась пробелов и переводов строк. Обсудим комментарии. Любой язык программирования предоставляет возможность устанавливать комментарии, т.е. некие строки кода, которые не учитываются интерпретатором. Используя комментарии, можно добавлять в текст программы некие пояснения. Укажем снова метод alert() во внешнем файле «script.js» и добавим некий комментарий к данной конструкции, используя два слеша «//». Это будет однострочный комментарий, т.е. некая строка, которая действительна как комментарий до самого конца строки, т.е. до следующего перевода строки. Строки, добавленные после перехода на новую строку, уже не являются комментарием. Два слеша в языке JavaScript используются для обозначения комментариев в тех строках, которые не учитываются интерпретатором этого языка.
Продолжение могло последовать…
Пауза в работе - 26:40.
