Основы JavaScript - часть 1
Javascript - это язык сценариев, который позволит вам использовать программирование для ваших веб-страниц.
Вы можете создать небольшую программу на Javascript - простой калькулятор или несложную игру.
Но есть и более серьезные сферы применения данного языка. Введение
Javascript - это язык сценариев, который позволит вам использовать программирование для ваших веб-страниц.
Вы можете создать небольшую программу на Javascript - простой калькулятор или несложную игру.
Но есть и более серьезные сферы применения данного языка:
- Определение браузера
Определение того, каким веб-обозревателем пользуется посетитель вашего сайта. В зависимости от того, какой браузер он использует, может быть загружена страница, специально созданная "под" этот браузер.
- Применение так называемых "Cookies"
Сохранение информации на компьютере посетителя вашего сайта и последующее ее считывание в автоматическом режиме при повторном визите человека на ваш сайт. Данная технология называется "cookies".
- Контроль браузера
Открытие страниц в окнах, настроенных определенным образом, когда вы можете указать, будут ли отображаться кнопки навигации браузера, меню и строка состояния.
- Валидация (проверка на соответствие определенным критериям) форм
Проверка введенных в поля формы данных перед их отправкой. В качестве примера можно привести валидацию введенного адреса электронной почты: если в нем нет знака "@", то адрес не является корректным и не должен пройти проверку.
Где помещать Javascript-код?
Так как JavaScript - это не HTML, вам нужно указать браузеру, в каком месте страницы вы вставляете код JavaScript. Делается это с помощью тэга <script>.
<script type="text/javascript"> и </script> говорят браузеру о начале и окончании кода JavaScript соответственно.
Рассмотрим следующий пример:
<html>
<head>
<title>My Javascript Page</title>
</head>
<body>
<script type="text/javascript">
alert("Добро пожаловать!");
</script>
</body>
</html>
Слово "alert" - это стандартная команда в языке JavaScript, которая вызывает появление на экране окошка с оповещением. Посетителю нужно будет нажать на кнопку "ОK" для продолжения.
Введя команду alert между тэгами <script type="text/javascript"> и </script>, мы даем понять браузеру, что это команда языка JavaScript.
Если мы не введем тэги <script>, браузер будет считать эту команду за простой текст, и просто выведет ее на экран.
Вставлять JavaScript можно как в секции <head>, так и в секции <body> html-документа. В общем случае, однако, предпочтительнее большую часть javascript-кода держать в секции <head>.
Первый сценарий
Знание о том, что javascript располагается между тэгами <script> - это начало. Есть еще несколько вещей, которые необходимо знать до того, как написать свой первый javascript-сценарий:
- JavaScript строки заканчиваются точкой с запятой
Вы могли заметить в предыдущем примере то, что строка JavaScript заканчивается точкой с запятой.
Вы можете запросто поместить весь ваш javascript-код в одну строку без нарушения его работы.
Однако вы сильно затрудните самому себе восприятие кода, поэтому такой подход нежелателен.
- Всегда помещайте текст в ""
Когда вы вводите текст, который будет обрабатываться javascript, вы всегда должны вводить его внутри двойных кавычек.
Если вы забыли заключить текст в "", то javascript будет интерпретировать ваш текст как переменную, а не как текст, а это не то, что нам нужно.
- Верхний регистр и нижний регистр - это разные вещи
Всегда помните о том, что в javascript регистр имеет значение.
Это значит, что при написании сценариев вы должны использовать Большие буквы только в нужных местах, и нигде более.
Неверное использование капитализации - вероятно, одна из наиболее типичных ошибок для разработчиков JavaScript!
Давайте рассмотрим следующий пример:
Вместо того, чтобы выводить сообщение в popup-окне, как в предыдущем примере, мы можем просто вывести эту фразу непосредственно в тело документа.
<html>
<head>
<title>My Javascript Page</title>
</head>
<body>
<script>
document.write("Добро пожаловать!");
</script>
</body>
</html>
Команда document.write говорит браузеру о том, что содержимое в скобках после данной команды должно быть выведено в документ. Не забывайте о том, что этот текст указывается в двойных кавычках.
Сценарий из примера выше выведет на странице следующее:
Добро пожаловать!
Рассмотрим еще один пример, чтобы понять, где javascript выводит текст:
<html>
<head>
<title>My Javascript Page</title>
</head>
<body>
Hello!!!<br>
<script>
document.write("Добро пожаловать!<br>");
</script>
Enjoy your stay...<br>
</body>
</html>
На экран будет выведено следующее:
Hello!!! Добро пожаловать! Enjoy your stay...
Как видите, javascript просто выводит текст в том месте, где расположен javascript-код в HTML-коде.
Интересно то, что вы можете "писать" с помощью команды document.write в том числе и любые HTML-тэги.
Например, если вам нужно сделать длинную таблицу со сравнительными значениями температуры в градусах по Цельсию и по Фаренгейту, вместо того, чтобы набирать в таблице все значения, можно было бы их автоматически высчитывать средствами JavaScript и выводить таблицу в документ.
Заглавные буквы
Очень важно понимать, что javascript - регистрозависимый язык, в нем различаются буквы в нижнем и верхнем регистрах.
JavaScript будет считать переменные myvalue и MYVALUE разными переменными.
Рассмотрим такие примеры:
Пример 1.
<html> <head> <title>My Page</title> </head> <body> <script> myvalue=2; myvalue=5; result=myvalue+myvalue; document.write(result); </script> </body> </html>
Пример 2.
<html> <head> <title>My Page</title> </head> <body> <script> myvalue=2; MyValue=5; result=myvalue+MyValue; document.write(result); </script> </body> </html>
Первый пример даст нам 10 (5+5).
Второй пример даст нам 7 (2+5).
Поэтому хороший совет - используйте единообразный синтаксис для всех переменных.
Пишите переменные или полностью в нижнем регистре (variable), или с первой заглавной буквой (Variable), или полностью в верхнем регистре (VARIABLE).
Неважно, какой вариант вы выберете. Главное - придерживайтесь только его!
По материалам www.echoecho.com
Перевод - Дмитрий Науменко
almix
Разработчик Loco, автор статей по веб-разработке на Yii, CodeIgniter, MODx и прочих инструментах. Создатель Team Sense.
Вы можете почитать все статьи от almix'а.
- 0 Yii: Bootstrap tabs, делаем активной вкладку на которую выполняется переход по ссылке (20.03.2014)
- 0 CodeIgniter: Всплывающая форма обратной связи на Ajax в Bootstrap Modal и проверкой Captcha (18.02.2014)
- 0 Opencart: Модуль Filter Product OpenCart_v1.5.x: Как скрывать недоступные опции в фильтре (23.10.2013)
- 0 WordPress: Добавить ссылку "Сохранить фото" для галереи на NextGen с эффектом Lightbox (12.04.2013)
- Выдвигающаяся из значка форма поиска на сайте (27.11.2017)
- Как убрать placeholder при клике по input (04.11.2017)
- Свой дизайн кнопок социальных сетей для сайта. Кнопки "Поделиться" (19.06.2017)
- Загрузка файлов (картинок) по ajax через форму для Opencart (04.09.2016)
- Замена текста при наведении на него мышью. События onmouseover и onmouseout (25.03.2016)
- Прилипание блока к верху сайта при его прокручивании (17.02.2016)
- Разделитель тысяч в эффекте наматываемого счётчика jquery countTo (05.04.2015)
- Сделать слайдер на Owl Carousel c текстом справа (03.02.2015)
- Скролл-эффекты CSS3 и JQuery при прокрутке страницы (13.01.2015)
- Модальное окно Bootstrap 3 с формой, отправляющей email по Ajax (JQuery/PHP/HTML5/JqBootstrapValidation) (20.08.2015)
- Несколько функций в body onload (08.03.2013)
- Как в iframe показывать только определённую область страницы (04.03.2013)
- jQuery Tooltips от Jörn Zaefferer. Всплывающие подсказки с помощью jQuery (08.12.2012)
- Team Sense: Многопользовательский календарь, заменяем радиокнопки на чекбоксы в выборе преподавателей. Массивы в Javascript. (06.12.2012)
- Team Sense: В календарь-расписание уроков добавлено разделение по преподавателям, которым присвоены свои цвета. (04.12.2012)
- CodeIgniter не передаёт $this->uri->segment(3) в функцию контроллера (передача переменной PHP->JavaScript->PHP) (28.11.2012)
- Случаи возникновения ошибки в IE: "Предполагается наличие идентификатора, строки или числа" (Expected identifier, string...) (23.11.2012)
- Воюем с форматом даты в JavaScript. Приведение формата даты в поле input в календаре системы TeamSense к более красивому виду. (18.11.2012)
- Хороший тон: Если у пользователя отключен Javascript в браузере или устаревшая версия браузера (09.08.2012)
- Русификация FullCalendar (13.01.2012)
- Yii: Красивенький и чистенький JavaScript плавно прокручивает страницу до якоря и делает лёгкий откат (22.04.2012)
RSS комментариев к этой статье.
