Учимся программировать на JavaScript: первое знакомство

Введение в язык программирования JavaScriptДанная статья предназначена для читателей с начальным уровнем подготовки по языку JavaScript. В ней я разберу пример кода (программы) в деталях. Это будет первый и последний пример, в котором будет "разжевана" каждая строчка кода. Далее мы помчимся гало­пом по Европам. Более опытные читатели могут просто мельком взглянуть на эту заметку моего блога и сразу перейти к следующей.

 


Оглавление статьи[Показать]


 

Приготовления к написанию кода JavaScript

Для начала надо определиться, в чем мы будем писать свои примеры. Сцена­рии JavaScript можно писать в любом текстовом редакторе. Существуют тек­стовые редакторы от сторонних разработчиков с более продвинутыми функ­циями, например, подсветкой синтаксиса языка. Я же все свои примеры писал в программе Блокнот, входящем в состав любой Windows. Это самый простой путь, не требующий установки новых программ. Тем более, у вас не будет другого выбора, если у вас нет в данный момент подключения к Ин­тернету или диска с нужными программами, а также прав администратора для установки сторонних программ.

Так как сценарии используются в основном в Web-страницах, то для начала надо эту самую Web-страницу создать. Алгоритм действий следующий. От­крываем папку Мои документы в Проводнике и создаем новую папку — JavaScript в примерах. Далее, открываем созданную папку, щелкаем правой кнопкой мыши на свободном месте и выбираем последовательно пункты контекстного меню Создать | Текстовый документ. В результате наших ма­нипуляций будет создан пустой файл под именем Текстовый документ .txt. Так как Web-страницы имеют расширение htm или html, то щелкаем правой кнопкой мыши на созданном файле, выбираем команду Переименовать и присваиваем файлу новое имя, например, 1.htm. Windows спросит вас, дейст­вительно ли вы хотите присвоить файлу новое расширение. На данный во­прос следует ответить утвердительно. После этого еще раз щелкаем правой кнопкой мыши на измененном файле и выбираем уже команду Изменить. У вас запустится стандартный Блокнот (по умолчанию). Пока он пустой. Вы можете теперь вводить код, приведенный в листинге чуть ниже. Будьте вни­мательны, постарайтесь избежать ошибок.

 

Первый сценарий JavaScript

По устоявшейся традиции среди программистов первой программой при изу­чении любого языка программирования должно быть приложение, выводя­щее на экран сообщение "Здравствуй, мир!" (или "Hello, world!"). Не будем пренебрегать традициями и напишем наш первый сценарий в этом духе. В уже открытом Блокноте пишем следующее (листинг 1).

Листинг 1. Пишем первый сценарий

<html>
   <head>
   <title>Наш первый сценарий</title>
   <script type="text/javascript">
      alert("Здравствуй, мир!");
   </script>
   </head>
   <body>
      <h1>Первый пример</h1>
      <p>Добро пожаловать на наш первый урок!</p>
      <script language = "JavaScript">
         <!--
            document.write("Привет, мир!");
         // -->
      </script>
      <p>
      <input type="button" value="Поздороваться"
         onClick="alert('Еще раз здравствуй')"></p>
   </body>
</html>

Сохраните документ под именем helloworld.htm. Мы пока не будем смотреть написанный сценарий в действии, а получше изучим написанное.

 

Разбор полетов

Для того чтобы добавить сценарий JavaScript на Web-страничку, используется пара тегов <script> </script>. Данная пара дает указание браузеру рассмат­ривать текст программы как сценарий. Исключение составляют только обра­ботчики событий, где использование команды script не требуется. Здесь стоит немного задержаться. На сегодняшний день существует рекомендация исполь­зовать строчку

<script type = "text/javascript">

Совсем недавно более распространенным вариантом был код

<script language = "JavaScript">

Обратите внимание, что тег script содержит параметр JavaScript. Этот пара­метр определяет используемый язык сценария. Кроме того, в нем можно ука­зать и номер версии языка.

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

<script type = "text/javascript" language = "JavaScript">

Существует еще один вариант для ленивых, которые не любят набирать лишние символы на клавиатуре:

<script> </script>

Так как по умолчанию считается, что в браузерах используется именно сце­нарий JavaScript, то этот код не вызовет ошибки. Но подобный способ вызы­вает дополнительную нагрузку на браузер, и от такой экономии следует вся­чески воздерживаться.

Как вы уже заметили, сценарии могут размещаться в различных частях доку­мента. Всего способов их размещения четыре:

  • сценарий находится между тегами <head> </head>;
  • сценарий находится в теле программы после тега <body>;
  • сценарий находится в обработчиках событий. Данный способ позволяет выполнять сценарий JavaScript при наступлении нужного события;
  • сценарий находится в отдельном файле. JavaScript позволяет создавать собственные файлы с расширением js. В этом случае на странице указы­вается местоположение такого файла. В нашем примере этот способ не использовался.

Таким образом, на одной странице могут располагаться сразу несколько сце­нариев. В какой последовательности браузер будет выполнять эти сценарии? Ничего сложного тут нет. Просто надо запомнить несколько правил. Сначала идет анализ сценария в заголовке документа HTML (между тегами <head> </head>). После идет выполнение сценариев, расположенных в теле документа (между тегами <body> </body>). А обработчики событий запус­каются при выполнении соответствующих событий. Например, обработчик кнопки onCiick выполняется после нажатия кнопки. Взглянем на пример еще раз. Первый сценарий находится в заголовке документа:

<script type = "text/javascript">
   // выводим окно с сообщением
   alert("Здравствуй, мир!");
</script>

Между тегами сценария находится единственная команда alert, которая вы­водит специальное окно с выбранным сообщением. Внешний вид данного окна может отличаться в разных браузерах. Следующий сценарий уже нахо­дится в теле документа после тега <body> и тоже содержит единственную команду:

<script type = "text/javascript">
   document.write("Привет, мир!");
</script>

Команда document.write позволяет вводить новые строчки в документе. Текст "Привет, мир!" будет записан сразу после строчки "Добро пожаловать  на наш первый урок!" И, наконец, третий сценарий находится в обработчике события onCiick. Как вы уже догадались, данное событие наступает при на­жатии кнопки. В этом сценарии используется уже знакомая нам команда alert.

 

Скрытие сценария JavaScript

У первых браузеров, предназначенных для просмотра Web-страничек, не было возможности использования сценариев. Тег <script> был добавлен в спецификацию HTML чуть позднее. Поэтому старые браузеры не выпол­няют сценарии JavaScript и просто выводят текст вашего сценария на стра­нице. Внешний вид такой странички будет выглядеть не совсем так, как вы задумали.

Чтобы избежать подобных проблем, рекомендуется использовать скрытие сценария, для чего следует обрамлять код сценария тегами комментариев. Они дают указание старым браузерам игнорировать программу сценария. Комментарии в HTML начинаются с дескриптора <!-- и заканчиваются де­скриптором -->:

<script type="text/javascript">
   <!--
   document.write("Ваш браузер поддерживает JavaScript");
   // -->
</ script >

Впрочем, браузерами без поддержки JavaScript на практике никто не пользу­ется, поэтому можете не обращать на эту рекомендацию особого внимания. Я больше не буду в дальнейших примерах использовать этот прием.

 

Комментарии в JavaScript

Как и во многих языках программирования, существует возможность созда­ния комментариев и для JavaScript. Они не выводятся на экран пользователя, но позволяют включить в код сценария необходимую документацию. Если вы напишете очень сложный код, то по прошествии длительного времени можете просто забыть, что он делает. Кроме того, комментарии помогут дру­гому разработчику разобраться в вашем сценарии (если вы в этом заинтере­сованы).

Чтобы включить комментарий в сценарий JavaScript, начните строку с двух символов косой черты (слэш):

// это комментарий

Также можно включить комментарий после строчки кода:

а = а + 1; // к переменной а прибавляем единицу

Если вам понадобится закомментировать сразу несколько строк, то оставлять в начале каждой строки две наклонные косые черты может оказаться утоми­тельным занятием. В этом случае используют комментарии, начинающиеся с /* и заканчивающиеся */, что гораздо удобнее. Данный способ демонстриру­ется в приведенном ниже примере:

/* Этот сценарий содержит самые различные команды и операторы, а также комментарии */

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

 

Проблемы

Итак, мы написали свой первый сценарий, изучили его содержимое. Теперь самое время увидеть написанный сценарий в действии. Найдите созданный файл helloworld.htm в Проводнике и запустите его двойным щелчком мыши. У вас запустится Internet Explorer. Так как мы основную часть примеров бу­дем тестировать на компьютерах с Windows 10, то нас поджидают некоторые трудности. Компания Microsoft в последнее время уделяет много внимания безопасности компьютера. Сценарии JavaScript, написанные нехорошими людьми, могут представлять потенциальную опасность для вашего компьютера. Поэтому по умолчанию при загрузке Web-странички с локального компьютера вы получите сначала несколько предупреждающих сообщений. Сначала вы увидите диалоговое окно Панель информации (рис. 1).

Диалоговое окно Панель информации Internet Explorer

Рис. 1. Диалоговое окно Панель информации

Вам нужно нажать кнопку OK (если вы хотите, чтобы это окно у вас боль­ше не появлялось, то установите соответствующий флажок). Но и это еще не все. Теперь вам придется щелкнуть по желтой полоске наверху страни­цы (но не на крестике в углу этой полоски!). Появится еще одно окно, где нужно выбрать первый пункт Разрешить заблокированное содержимое.... И наконец, в диалоговом окне Предупреждение системы безопасности нажать кнопку Да.

Не волнуйтесь, когда ваш документ будет выложен на сайт, данные преду­преждения выводиться не будут, они появляются только при запуске сцена­риев на локальном компьютере. Впрочем, в следующих заметках моего блога, посвященной советам и хитростям JavaScript, я расскажу, как можно обойти эту чересчур назойливую процеду­ру. Если же вы будете запускать примеры через Mozilla Firefox, то подобных сообщений не увидите.

 

Сценарий JavaScript в действии

Наконец-то мы продрались через частокол предупреждений и можем увидеть написанный сценарий в действии. Сначала вы увидите окно с сообщением "Здравствуй, мир!" После нажатия кнопки OK откроется наша страница. Об­ратите внимание, что в третьей строчке выводится результат второго сцена­рия. Осталось только нажать кнопку Поздороваться, чтобы запустить третий сценарий. На этом краткий курс по запуску сценариев JavaScript будем счи­тать закрытым. В следующих моих блогах мы начнем изучать уже конкретные примеры.

 

Вас заинтересует / Intresting for you:

Определение браузера в JavaScr...
Определение браузера в JavaScr... 374 просмотров Александров Попков Fri, 02 Nov 2018, 11:03:01
JavaScript: определение свойст...
JavaScript: определение свойст... 453 просмотров Александров Попков Fri, 02 Nov 2018, 10:52:06
JavaScript: определение версии...
JavaScript: определение версии... 316 просмотров Дэйзи ак-Макарова Sun, 11 Nov 2018, 05:40:51
Обзор и сравнение фреймворков ...
Обзор и сравнение фреймворков ... 245 просмотров Валерий Павлюков Wed, 13 Mar 2019, 17:28:13
Борис
Author: Борис


Borberd аватар
Borberd ответил в теме #9237 25 сен 2018 04:59
Эхх... первые шаги... Как давно это было!)) Я смотрю JavaScript живее всех живых?)