JavaScript. Основные понятия с примерами

января 12, 2018

JavaScript. Основные понятия с примерами

Язык управления сценариями просмотра гипертекстовых страниц на стороне клиента, основная идея языка состоит в возможности изменения атрибутов html контейнеров и свойств среды отображения в процессе просмотра страницы пользователя, при этом перезагрузки страницы не происходит. На практике это выражается, например, в изменении фона страницы, интегрированных в неё картинок и других объектом, открытии нового окна или выдачи предупреждения.
Название JavaScript является зарегистрированным товарным знаком компании Sun Microsystem. Реализация от Microsoft официально называется JScript. Существует и VBScript. Сходство с языком Java в синтаксисе и объектно-ориентированных свойствах. Во всем остальном Java и JavaScript совершенно разные языки. Ни один не является подмножеством другого. Спецификация языка описывается стандартом ECMA-262 (European Computer Manufacturers Association).

Размещение кода JavaScript на HTML странице

JavaScript код исполняется браузером, в который встроен соответствующий интерпретатор. Поэтому выполнение программы зависит от того, когда интерпретатор получает управление.
В общем случае можно выделить 4 способа функционального применения JavaScript:

Гипертекстовая ссылка (схема URL)
Обработчик событий (в атрибутах отвечающих событий)
Постановка (Entity)
Вставка (контейнер <script>

Примечание.
Два простейших оператора: alert(строка) – выводит строку в окно предупреждения, document.write – выводит строку в текущий HTML-документ.

Простой HTML документ	Использование document.write()
<html> <body> <h1> Заголовок </h1> </body> </html>	<html> <body> <script>document.write(<h1> Заголовок </h1>) </script> </body> </html>

1 способ. URL-схема JavaScript

Каждый ресурс имеет свой уникальный URL (Uniform Resource Locator), который указывается в <a href="">, <img src="" /> и <form action="">.
Основная идея – применения в URL-схеме в том, что вместо стандартного перехода по ссылке запускается обработчик JavaScript.

view raw Ex1.html hosted with ❤ by GitHub

view raw Ex2.html hosted with ❤ by GitHub

	<form method=post name= "form" action= "JavaScript: form.e.value="Зажали кнопку: Заполнить"; void(0);">
	<input type=text name=e size=30 value=""> <br>
	<input type=submit value="Заполнить"> <br>
	<input type=submit value="Заполнить"><br>
	<input type=reset value="Очистить">
	</form>

view raw Ex3.html hosted with ❤ by GitHub

2 способ. Обработчик событий

Обработчики событий указываются в атрибутах тех Контейнеров html, с которыми они связаны.

	<form>
	<input type=button value="Кнопка" onClick="alert('Вы нажали кнопку');">
	</form>
	<body onLoad="alert('Приветсивуем!');">… </body>

view raw Ex4.html hosted with ❤ by GitHub

3 способ. Подстановки

Имеют формат &{код программы}. Используется в качестве атрибута HTML-контейнеров.

	<html>
	<head>
	<script> function l() {
	src=window.location.href;
	return(str.length);
	}
	</script>
	<body>
	<form>
	<input type=text size="&{l()};" value="&{window.location.href;}">
	</form>
	</body>
	</html>

view raw Ex5.html hosted with ❤ by GitHub

Подстановки поддерживаются не во всех браузерах.

4 способ. Вставка контейнер-скрипт

Контейнер-скрипт позволяет внедрять JavaScript код в код html-документа и даёт возможность генерации текста документа.
Размещать контейнер-скрипт можно либо в разделе заголовка head, либо в разделе body. Сам код может быть вписан непосредственно в контейнер-скрипт, либо вынесен в отдельный файл,а затем включён в станицу.

1 вариант

view raw Ex6.html hosted with ❤ by GitHub

2 вариант

view raw Ex7.html hosted with ❤ by GitHub

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

Размещение скрипта в блоке head

	<html>
	<head>
	<script>
	function time_scroll() {
	var d = new Date() ;
	window.status=d.getHours()
	+ ':'+ d.getMinutes()
	+ ':'+ d.getSeconds();
	setTimeout('time_scroll()', 1000);
	}
	</script>
	</head>
	<body onLoad="time-scroll()">
	<h1> Часы в строке статуса </h1>
	</body>
	</html>

view raw Ex8.html hosted with ❤ by GitHub

Функция time_scroll() вызывается обработчиком onLoad при загрузке страницы. В тей текущая дата заносится в переменную d, а время в привычном формате часы, секунды, минуты записываются в поле статуса окна браузера. Затем функция setTimeout перезапускет time_scroll с задержкой в 1 с.

Вставка скрипта в тело документа

Пример похож на предыдущий, только время отображается на текущей странице

	<body>
	<script>
	var d = new Date();
	window.status=d.getHours()
	+ ':'+ d.getMinutes()
	+ ':'+ d.getSeconds();
	</body>

view raw Ex9.html hosted with ❤ by GitHub

Указание языка сценария

Выполняется в атрибуте type.

view raw Ex11.html hosted with ❤ by GitHub

По умолчанию JavaScript.

Поиск по этому блогу

StatelyCode