Что такое JavaScript. Как включить JavaScript. Примеры JavaScript на html странице

В этой статье мы рассмотрим кратко введение в JavaScript. Дадим ответы на популярные вопросы вебмастеров.

JavaScript (сокращенно JS) - язык программирования встраиваемый в HTML страницы с целью удобства общения с пользователем, обработки ошибок и создания динамичности странице в целом

JavaScript является объектно-ориентированным и интерпретируемым языком. Зачастую JS код называют скриптами. Javascript можно назвать настоящим языком заточенным чисто для веб-программирования. Является системно-независимым (работает на любых платформах).

Синтаксис языка во многом напоминает синтаксис Си и Java, семантически же язык гораздо ближе к Self, Smalltalk.

Задачи решаемые JavaScript

Проверку полей форм (тег <form>) до того, как они передались на сервер
Информационные сообщения с предупреждениями
Эффекты для выделения главных элементов и частей страницы
Оригинальные выпадающие меню
Математические вычисления

Обычно с помощью JavaScript делают слайдеры, вывод AJAX. Изучать эти коды новичку не имеет смысла, т.к. они довольно сложные.

Как включить поддержку JavaScript в браузере

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

1. Включить JavaScript в Firefox

Зайдите в "Инструменты", там в "Настройки". Затем выберите вкладку "Содержимое" и поставьте галочку напротив надписи "Использовать JavaScript".

2. Включить JavaScript в Google Chrome

"Настройка и управление Google Chrome" -> "Параметры" -> "Расширенные" -> "Личные данные (Настройки содержания)" -> "JavaScript:" Разрешить всем сайтам использовать JavaScript (рекомендуется) или запретить выполнение JavaScript на всех сайтах

3. Включить JavaScript в Opera

Нажать на клавишу F12 Выбрать пункт "Включить JavaScript"

4. Включить JavaScript в Internet Explorer

"Сервис" -> "Свойства обозревателя" -> вкладка "Безопасность" -> выбираем зону "Интернет" -> кнопка "Другой" -> пункт "Сценарии" -> "Разрешить сценарии"

Как вставить JavaScript в html страницу

Код JavaScript вписывается прямо в html код страницы. Для его выделения используют специальные теги

<script type='text/javascript'>
...
</script>

Атрибут type='text/javascript' указывать не обязательно, но желательно.

Причем использовать <script></script> можно в заголовочных тегах <head>, так и просто в теле страницы <body>.

Писать html теги между открывающим и закрывающим тегом script запрещено. Между тегами можно писать только JavaScript код.

Чтобы не дублировать один и тот же JavaScript на каждой странице его обычно выносят в отдельный файл с расширением .js. Этот файл можно подключить в любом месте html-страницы.

<script type='text/javascript' src='func_javascrjpt.js'></script>

Пример 1. Всплывающие сообщение Hello, World

Ниже представлен код, который при загрузку страницы будет выведено сообщение Hello, World.

<html>
<head>
<title>Hello, World на JavaScript</title>
</head>
<body>
	<p>Пример с Alert. Будет выведено всплывающие сообщение</p>
	<script type='text/javascript'>
		alert('Hello, World!');
	</script>
	<br/>
	<p>Нажмите на ссылку:</p>
	<a href="" onclick="return confirm('Перейти по ссылке?');">Ссылка</a>
</body>
</html>

При нажатие на ссылку будет выведена форма с просьбой подтвердить переход по ссылке.

Пример 2. Альтернатива с обработкой javascript

Ниже представлен пример кода с обработкой кода JavaScript с помощью идентификатора id.

<html>
<head>
<title>Hello, World на JavaScript</title>
<script type='text/javascript'>
	window.onload = function() {
	var linkWithAlert = document.getElementById("check_link");
	linkWithAlert.onclick = function() {
	return confirm('Перейти по ссылке?'); 
	};
};
</script>
</head>
<body>
	<p>Нажмите на ссылку:</p>
	<a href="" id="check_link">Ссылка</a>
</body>
</html>

Пример 3. Смена цвета объекта при наведении курсора

При наведении курсора мышки на определенные области, они изменяют цвет. Например

RED

GREEN

BLUE

Код этого примера:

<html>
<head>
<div class="center">
	<div style="float:left; height: 46px; width: 190px; background: white; border: 1px solid #000; padding-top: 20px" 
	onMouseOver="this.style.background='#F00'" onMouseOut="this.style.background='#fff'">RED</div>
	<div style="float:left; height: 46px; width: 190px; background: white; border: 1px solid #000; padding-top: 20px" 
	onMouseOver="this.style.background='#0f0'" onMouseOut="this.style.background='#fff'">GREEN</div>
	<div style="float:left; height: 46px; width: 190px; background: white; border: 1px solid #000; padding-top: 20px" 
	onMouseOver="this.style.background='#00f'" onMouseOut="this.style.background='#fff'">BLUE</div>
</div>	
</body>
</html>