Добавление сценариев Javascript в HTML

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

Скрипты используются в html-страницах для увеличения функциональности и возможностей взаимодействия с посетителями сайта.

Для добавления сценария на страницу HTML используется дескриптор:

<sсript type="text/javascript"></sсript>

Атрибуты дескриптора:

· language — отвергнутый в настоящее время; использовался для определения языка и версии;

· type атрибут, пришедший на замену language; он сообщает браузеру, какой язык используется внутри дескрипторов;

· src — атрибут определяет URL внешнего исходного JavaScript-файла, сценарий которого прикрепляется к html-странице.

Варианты тега script:

1. Устаревший вариант:

<sсriptlanguage="javascript">...</sсript>

2. Действующий вариант:

<sсript type="text/javascript">...</sсript>

3. Вариант с прикрепленным файлом скрипта:

<sсriptsrc="/jscripts/myscript.js"> </sсript>

Итак, тег script обычно помещается в html-страницу в область head. Этот тег говорит о том, что внутри находится сценарий, в нашем случае скрипт на языке javascript. Браузер «понимает», что это уже не html-код, поэтому, когда html-парсер браузера доходит до тегаscript, то он передает инициативу интерпретаторуjavascript.

Закрывающий тег script говорит о том, что далее уже опять следует html-код.

Встраивание javascript в html происходит двумя основными способами, которые рассмотрим на примере:

Пример: Вывести в браузере сообщение «ЭтоJavaScript!», используя скрипт на языке JavaScript

1. Встраивание JavaScript непосредственно в HTML-страницу:

<body> <sсript type="text/javascript"> document.write("Это JavaScript!"); </sсript>Этообычный HTML документ.

В данном примере дескриптор script может находиться как в теле документа, т.е. теге body (как в примере), так и в области head.

2. Размещение сценария во внешнем файле:

В html-документе помещается код:

<head> <sсriptsrc="/jscripts/myscript.js"></sсript> </head>

При прикреплении внешнего файла со скриптом тегscript следует размещать в области head.

В файле с расширением js (в данном конкретном примере — myscript.js) код выглядит так:

document.write("Это JavaScript!")

В примере имеется в виду, что файл со скриптом находится в каталоге jscripts. При прикреплении в html-файле надо указывать относительный путь к файлу со скриптом.

Важно:

 Функция document.write() используется для вывода информации на экран.

 Тогда как document.writeln() — используется для перевода на новую строку, если используется тег форматирования pre.

 alert() — это метод для вывода модального (диалогового) окна с сообщением

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

Пример: Поменяйте местами alert иdocument.write

<sсript type="text/javascript"> alert ("Hello?"); document.write("Hello!"); </sсript>

Важно: особенность модального окна alertсостоит в том, что пользователь не может продолжить работу, пока не нажмет на кнопку

Обратите внимание, как работает javascript, помещенный в теги оформления шрифта:

Пример: Перенести скрипт в BODY после тега H1

<h1> <sсript type="text/javascript"> alert ("Hello?"); document.write("Hello!"); </sсript> </h1>

Задание Js 1. Вывести в окно браузера следующие данные: Ваше ФИО, возраст, хобби (каждое на новой строке)

 

Задание Js 2. Добавить фразу «Hello, дружище» в тело документа таким образом, чтобы содержимое, которое уже там находится, осталось на месте (код представлен ниже):

... <body><h1>Приветствие!</h1> </body> </html>

 

Задание Js 3. Найдите и исправьте ошибки во фрагментах кода:

1.

document.whrit("Проблемы?");

2.

alert(Hello);

Понравилась статья? Добавь ее в закладку (CTRL+D) и не забудь поделиться с друзьями:  




Подборка статей по вашей теме: