Что такое JavaScript (Джава Скрипт) и как его включить. Примеры JS на html странице

В этой статье мы расскажем, что такое JavaScript (Джава Скрипт), приведём примеры, поясним для чего он нужен в html коде. Дадим ответы на популярные вопросы вебмастеров.

Оглавление
1. Что такое JavaScript простыми словами
2. Задачи решаемые JavaScript
3. Как включить поддержку JavaScript в браузере
4. Пример: как вставить JavaScript в html страницу
4.1. Пример 1. Всплывающие сообщение Hello, World
4.2. Пример 2. Альтернатива с обработкой javascript
4.3. Пример 3. Смена цвета объекта при наведении курсора

1. Что такое JavaScript простыми словами

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

JavaScript является объектно-ориентированным и интерпретируемым языком. Также он системно-независим (работает на любых платформах). Зачастую JS код называют "скриптами". Можно сказать, что этот язык "заточен" лишь для веб-программирования.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

4. Пример: как вставить JavaScript в html страницу

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

<script type='text/javascript'>
код на javasript 
</script>

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

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

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

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

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

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

Ниже представлен пример html код, который при загрузке страницы с помощью JavaScript выводит всплывающее сообщение "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>

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

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

Ниже представлен пример html кода с обработкой кода 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>

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

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

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>

Это лишь самые элементарные вещи на JavaScript. Его возможности довольно большие. Не даром в литературных магазинах по этому языку можно найти отдельные книги.

← Перейти в каталог html уроков и советов