Что такое JavaScript и для чего он нужен

В этой статье мы расскажем, что такое 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

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




Читайте также:

• Добавление счетчика посещений на сайт

• Как сделать выпадающие меню

• Как сделать favicon

• Вывод html с помощью AJAX

• Вывод html с помощью JavaScript

• Коды символов для HTML

• Добавление социальных кнопок на сайт


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

Читайте также:

Copy Protected by Chetan's WP-Copyprotect.