1. 3. СРЕДСТВА ЯЗЫКА JAVASCRIPT 

  1. 3.2. Первые программы. 

    Содержание 

    3.2.1. Внедрение программ в документ.  

    3.2.2. Ввод-вывод информации. 

    3.2.3. Комментарии. 

    3.2.4. Упражнения. 

    3.2.5. Контрольные вопросы. 

Внимание! При выполнении упражнений, содержащихся в настоящем разделе:

      1. 3.2.1. Внедрение программ в документ. 

Блок <script>...</script>  - это блок языка HTML, специально предназначенный для указания браузеру, что содержимое блока является программным кодом, которой требуется предварительно интерпретировать.

Существует несколько способов вставки кода языка JavaScript в HTML-документ.   Рассмотрим два наиболее часто используемых способа.

По первому способу код программы вставляется непосредственно в html-документ. Операторы языка записываются  между тэгами <script>...</script> и весь этот блок должен находиться в блоке <head>...</head> и (или) в блоке  <body> .. </body>.

Второй способ — это когда межу тэгами <script>...</script> ничего не пишется, а в открывающем тэге указывается путь к файлу с программным кодом, например,  так:
<script type="text/javascript" src="./scripts/lib_Petrov.js"></script>

Такой блок с указанием пути к файлу с операторами языка обычно вставляется в блок <head>...</head>  перед закрывающим тэгом </head>.  Файл  с операторами языка Javascript обычно должен иметь расширение «js». Операторы в файле пишутся без каких либо html-тэгов, по правилам написания операторов.

Вначале научимся использовать первый метод вставки программного кода.

Например, имеется html-файл, содержащий следующий код:

Листинг 3.2.1.

<html><head>

  <title>Студент Петров. Пример 3.2.1.</title>

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

    //внедрение программы в документ (в контейнер <head>...</head>)

    document.write("<h2>Hello, World! This is Petrov Ivan!</h2>");

  </script>

</head>

<body>

  <h1>Студент Петров. Упражнение 3.2.1</h1>

</body>

</html>

Если открыть этот файл в браузере, то на экране должно появиться окно, похожее на рис.3.2.1.

 

Рис.3.2.1. Результат вставки программы в блок <head>...</head>.

Повторите этот пример. Если у вас всё получилось, переходите к следующему примеру. Если не получается, попросите помощи у преподавателя, добейтесь необходимого результата и только после этого идите дальше.

Пример кода для получения того же результата с размещением Javascript-кода в блоке <body> .. </body> может быть таким:

Листинг 3.2.2.

<html><head>

  <title>Студент Петров. Пример 3.2.2.</title>

</head>

<body>

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

    /*внедрение программы в документ

    (в начале контейнера <body>...</body>)*/

    document.write("<h2>Здравствуй, Мир! Это Петров Иван!</h2>");

  </script>

  <h1>Студент Петров. Упражнение 3.2.2</h1>

</body>

</html>

или таким:

Листинг 3.2.3.

<html><head>

  <title>Студент Петров. Пример 3.2.3.</title>

</head>

<body>

  <h1>Студент Петров. Пример 3.2.3</h1>

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

    //внедрение программы в документ

    //в конце контейнера <body>...</body>)

    document.write('<h2>Здравствуй, Мир! Это "программист" Петров Иван!</h2>');

  </script>

</body>

</html>

В первом случае в браузере отобразится страница типа той, которая показана на рис.3.2.2.

 

 

Рис.3.2.2. Результат вставки программы в блок <body>...</body> (в начале блока).

Во втором случае в браузере отобразится что-то типа такого:

 

Рис.3.2.3. Результат вставки программы в блок <body>...</body> (в конце блока).

Повторите все три примера, но с использованием файла с таблицами стилей, которые были созданы Вами при выполнении упражнений предыдущего раздела. Посмотрите, - в чём разница отображения каждой страницы?

Из примеров видно, что одним из атрибутов тега <script> является атрибут language, с помощью которого браузер определяет используемый язык сценариев. Для языка JavaScript значение атрибута равно  “JavaScript”, для JScript – “Jscript”, а для VBScript – “VBScript” и так далее. При использовании языка Javascript атрибут language можно опускать, так как этот язык используется браузерами по умолчанию.

По действующему стандарту атрибут language  вообще отменён. Вместо него в новых версиях браузеров поддерживается атрибут   type=”text/javascript”. Для совместимости новых и старых версий браузеров рекомендуется использовать оба атрибута, хотя при использовании языка  Javascript оба атрибута можно не писать.

Документ может содержать сколько угодно блоков <script>...</script>. В этом случае все они последовательно интерпретируются браузером.

3.2.2. Ввод-вывод информации.

В рассмотренных выше примерах для формирования вывода в HTML-страницу используется метод write() объекта document. В скобках в двойных или одинарных кавычках помещаются выводимые в документ строки. Строки могут включать в себя тэги HTML, которые не отображаются, а управляют разметкой и форматированием, как обычные HTML-тэги.

При использовании метода document.write() в выводимой строке можно использовать тэги, которые не отображаются, а управляют форматированием текста. Такой метод формирования выводимой информации (вручную) трудоёмок и ничем не отличается от вывода непосредственно с использованием тэгов, без использования программирования.

Вывод с использованием программирования более эффективен при формировании выводимой информации программным способом. Это станет понятно в последующих подразделах после изучения основ программирования.

Итак, Вы опробовали один из основных методов вывода информации в документ.

Освоим ещё три более простых метода вывода и ввода информации: alert(), confirm() и prompt().

Alert (предупреждение) – этот метод служит для вывода информации в окне предупреждения. Рассмотрим пример, расположенный ниже.

Листинг 3.2.4

<html>

<head>

  <title>Студент Петров. Пример 3.2.4.</title>

</head>

<body>

    <h3>Пример 3.2.4. Вывод информации с помощью метода alert()</h3>

    <script type="text/javascript">

 alert("Это alert (предупреждение), метод языка JavaScript, с которым экспериментирует Иван Петров");

    </script>

  <h4>

    Ответы на контрольные вопросы

  </h4>

  <ol>

    <li>Вопрос. Когда на экране отобразится текст, расположенный после вызова метода alert()?<br/>

        Ответ. ???

    </li>

    <li>Вопрос. Что означают строка, введённая после символов "//"?<br/>

 Ответ. ???

    </li>    

  </ol>

</body>

</html>

На рис.3.2.4 показано отображение в браузере страницы, имеющей html-код из листинга 3.2.4.

 

Рис. 3.2.4. Метод alert() вывел окно предупреждения в соответствии с кодом листинга 2.2.4.

В самом начале, при открытии страницы, в браузере появляется лишь часть документа, соответствующая html-коду, расположенному до вызова метода alert(). Затем срабатывает оператор вызова метода и появляется окно предупреждения. После появления  окна предупреждения загрузка html-кода приостанавливается.   После нажатия кнопки “ОК”, работа метода alert() завершается, окно предупреждения исчезает, страница дозагружается и отображается в виде, показанном в нижней части рис.3.2.4.

Confirm (подтверждение) – этот метод предназначен не только для вывода информации, но также позволяет пользователю сделать выбор в форме ответа Да/Нет. В результате выбора метод выдаст логическое значение true или false и, таким образом пользователь вводит эти данные в программу. Впоследствии будем использовать такой ввод для выбора хода вычислительного процесса.

Листинг 3.2.5

<html>

<head><title>Простейшая страница с методом confirm()</title>

<script>

confirm("Это confirm-подтверждение. Сделайте выбор: да/нет")

/* Эксперименты студента Петрова с методом confirm() */

</script>

</head>

<body>

</body>

</html>

 

  1. Рис. 3.2.5. Метод confirm() вывел окно подтверждения в соответствии с кодом листинга 3.2.5. 

Prompt (запрос/ответ) – этот метод позволяет пользователю ввести данные в поле ввода текста. При вызове метода в скобках указываются два строковых параметра: первый — строка, которая будет отображена в диалоговом окне (обычно эта строка используется для пояснения вводимой информации). Вторая строка — значение по умолчанию, которое будет выведено в поле ввода текста. Возвращаемое методом значение зависит от действий пользователя. Если пользователь нажал на OK, то возвращаемое методом значение равно строке, содержащей текст, введённый пользователем, либо значению по умолчанию, если ничего не вводилось.  Если пользователь закрыл окно, либо нажал кнопку Отмена (Cancel), то возвращается специальный тип null (об этом типе данных см. в следующем подразделе).

Листинг 3.2.6.

<html> <!-- это - комментарий в языке html. Он может быть и многострочным -->

<head>

<title>Простейшая страница с использованием метда prompt()</title>

<script>

// это - однострочный комментарий в языке JavaScript

prompt("Как вас зовут? (введите свои данные вместо данных по умолчанию)", "Петров Иван Петрович");

/* а это - многострочный комментарий

в языке JavaScript */

</script>

</head>

</html>

 

Рис. 3.2.6. Метод prompt() вывел окно запрос/ответ в соответствии с кодом примера 3.2.6.

Поэкспериментируйте с примерами, приведенными в листингах, демонстрирующих примеры использования  методов ввода-вывода информации.

3.2.3. Комментарии.

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

Однострочный комментарий создаётся вставкой двух подряд идущих прямых слэджа (//) в начале строки, которую надо убрать из программы, но так, чтобы эта строка осталась среди операторов программы. Таким образом скрывают от показа в окне браузера следующий за этими символами текст.

Чтобы сделать комментарием сразу несколько строк текста, нужно ограничить его символами /* … */.  Такой комментарий называют многострочным комментарием.

Образцы комментариев приведены в листингах с примерами. Поэкспериментируйте с комментариями обоих типов. Вспомните, что комментарии используются и в языке HTML, но там для этого используются другие символы. Какие? А как задаются комментарии в таблицах стилей?

3.2.4. Упражнения.

В качестве упражнений повторите все 6 примеров, приведённые в листингах 3.2.1- 3.2.6, и при этом:

1) вместо «Петров Иван» должны отображаться Ваши фамилия и имя;

2) к каждому html-документу с упражнением должен быть подключён css-файл с таблицей стилей, разработанной при освоении предыдущего раздела;

3) на каждой странице-упражнении должна быть строка меню со ссылками для возврата на страницу со списком упражнений и на «домашнюю»;

4) дополните каждую веб-страницу с упражнениями нумерованным списком с ответами на контрольные вопросы:  первую страницу — ответами на первые два вопроса; вторую — на третий и четвёртый вопрос и так далее, ответив в последнем упражнении на последние два вопроса. Вопрос также необходимо показать и он должен стоять перед ответом.

4) файлы с упражнениями должны быть помещены в папку exercises и иметь имена: exercise_3_2_1.html -  exercise_3_2_6.html;

5) таблица со списком-ссылками (файл exercises.html) должна быть дополнена строками со ссылками на эти шесть упражнений;

Пример выполнения упражнений смотрите на сайте студента Петрова.

3.2.5. Контрольные вопросы.

  1. 1.Когда при загрузке html-страницы в браузере на экране отобразится текст, расположенный после вызова метода alert()? 

  2. 2.Что означает строка, введённая после символов "//"? 

  3. 3.Выполнится ли оператор document.write("Петров Иван"), если он будет помещён внутри тэгов <h1><script>...</script></h1>? 

  4. 4.Что первым появится на экране, если посреди текста  html-документа имеется скрипт с оператором confirm("Петров Иван"): 1) первая половина текста; 2) весь тест; 3) вторая половина текста; 4) текст, выводимый с помощью метода confirm()? 

  5. 5.Где появится текст, выводимый с помощью оператора document.write("Петров Иван"), если этот оператор введён в блоке <head>...</head>? 

  6. 6.Что означают строки, введённые между символами "/* и */"? 

  7. 7.Выполнится ли оператор prompt("Петров Иван"), и если да, то что появится по умолчанию в поле ввода данных? 

  8. 8.Какая строка появится в поле ввода при выполнении оператора:
    prompt("Как вас зовут?","Введите свои данные")? 

  9. 9.Что появится на web-странице, если html-код этой страницы содержит скрипт со строкой: //document.write("<h2>Петров Иван</h2>");  ? 

  10. 10.Что появится на web-странице, если html-код этой страницы содержит скрипт с оператором:    document.write("<!--<h1>Здравствуй, Мир! Это Петров!</h1>-->"); ? 

  11. 11.Что появится по умолчанию в поле ввода данных при выполнении оператора  prompt("Петров Иван","")? 

  12. 12.Что появится на web-странице при срабатывании оператора document.write(<h3>Петров Иван</h3>) ?