Лабораторна робота №13

Хід роботи:

  1. В Вашій робочій папці створіть папку JavaScript. В ній створіть папку LR1. В створеній папці створіть документ prizvyshe.html.
  2. Файл prizvyshe.html заповніть тегами, що визначають структуру.
  3. В створений html-документ в контейнер, використовуючи мову JavaScript, всіма відомими Вам способами вставте наступний текст:

    Цей текст вставлено першим способом – для першого способу;

    Цей текст вставлено другим способом – для другого способу і т.д.

    1 спосіб. В контейнер <BODY> додаємо наступне: <SCRIPT LANGUAGE="JavaScript"> document.write("Необхідний текст"); </SCRIPT> Поясніть для чого використовується тег <SCRIPT> та для чого необхідний параметр LANGUAGE.

    Зверніть увагу, що для попередження проблем у роботі браузерів, що не підтримують роботу зі скриптами доречно використовувати оператори: <!-- та -->. У разі їх використання такі браузери просто сприйматимуть скрипт як коментар. Тепер зверніть увагу, що існують браузери (наприклад, Netscape Navigator), що розпізнають оператор --> як помилковий. Для попередження виникнення помилки використовують два символи /. Символи // в JavaScript вказують браузерам, що необхідно ігнорувати символи, записані після них. Враховуючи сказане наш скрипт може виглядати так:

    <SCRIPT LANGUAGE="JavaScript"> <!-- document.write("Необхідний текст"); // --> </SCRIPT>

    Перевірте працездатність обох скриптів. Надалі будемо використовувати другу форму написання скриптів.

    В першому способі для об’єкту з ім’ям document викликається метод write, в якості параметра якого служить текстовий рядок Необхідний текст. Об’єкт document – це html-документ, завантажений у вікно браузера. Він містить в собі об’єкти, властивості та методи, що призначені для роботи з елементами цього документу.

    2 спосіб. В папці LR1 створіть файл script.js. В контейнер <BODY> файлу prizvyshe.html додаємо наступне: <SCRIPT LANGUAGE="JavaScript" SRC="script.js"> </SCRIPT> А в файл script.js додайте наступне: document.write("<HR>"); document.write("Необхідний текст"); document.write("<HR>");

    Перевірте зміни, які відбулись при відображенні Вашого html-документу.

    3 спосіб. Цей спосіб полягає у використанні функцій та змінних. Додайте в контейнер <HEAD> Вашого html-документу наступне: <SCRIPT LANGUAGE="JavaScript"> <!-- var MyMsg = "Необхідний текст"; function printMsg(){ document.write(MyMsg); } // --> </SCRIPT> В контейнер <BODY> додайте наступне: <SCRIPT LANGUAGE="JavaScript"> <!-- printMsg(); // --> </SCRIPT>

    Перевірте зміни, які відбулись при відображенні документу. Замініть використані імена змінних та функцій на імена, які вміщатимуть Ваше прізвище. Наприклад, ім’я змінної можна записати у вигляді PrizvysheZminna.

    Зауважимо, що мова JavaScript не є типізованою. Це означає, що не можна явним чином вказати тип створюваних змінних. Цей тип визначається автоматично, коли змінній в перший раз присвоюється деяке значення. Надалі можна легко змінити тип змінної, просто присвоїв їй значення іншого типу.

    4 спосіб. Розглянемо створення діалогового вікна. Створіть ще одну функцію: function printMsg2(){ alert("Необхідний текст"); }

    Та зробіть виклик цієї функції в контейнері <BODY>. Перевірте зміни, які відбулися при відображенні документа. Крім запропонованої в цьому прикладі діалогової панелі, можна створювати і більш складні панелі, навіть із вводом будь-якої інформації.

    5 спосіб. Розглянемо створення діалогової панелі введення інформації для подальшого виводу цієї інформації у вікні браузеру. Створіть функцію: function printHello(){ VstupSpovish=prompt("Введіть сповіщення:", ""); document.write(VstupSpovish); }

    Поясніть для чого необхідна функція prompt, та які параметри для неї необхідні. Зробіть виклик цієї функції в контейнері <BODY>. Перевірте зміни, які відбулися при відображенні документа. Внесіть зміни в функцію таким чином, щоб, при відображенні сповіщення, поле вводу вже було заповнене текстом за замовчуванням, який можна редагувати.

    6 спосіб. Додайте в контейнер <BODY> Вашого html-документу наступне: <A HREF="" onMouseover="alert('Необхідний текст');">Наведіть мишку</A>.

    Перевірте які зміни відбулися. Внесіть зміни так, щоб діалогове вікно з’являлось не при наведенні мишки на посилання, а при натисканні на посилання. Внесіть зміни так, щоб при наведенні мишки на посилання, виконувалась процедура, що відобразить у вікні браузера текст: «Мені це вдалося!!!».

  4. Напишіть скрипт який при натисканні на посилання видасть діалогове вікно з запитом Ваших ПІБ, а після заповнення необхідного поля і натискання кнопки «ОК» видасть напис: «Ваші ПІБ: Введена в діалоговому вікні інформація».
  5. Змініть попередній скрипт таким чином, щоб перед виведенням ПІБ у вікно браузера з’являлось діалогове вікно з текстом: «Ви ввели наступні дані: Введена в попередньому діалоговому вікні інформація».
  6. Коли в виразах зустрічаються змінні різних типів, JavaScript може автоматично перетворювати числові дані в текстові, зворотне ж перетворення доводиться виконувати з допомогою спеціальних функцій, таких як parseInt та parseFloat. Розглянемо на прикладі: <HTML> <HEAD> <TITLE>Приклад перетворення типів даних</TITLE> </HEAD> <BODY> <TABLE> <SCRIPT LANGUAGE="JavaScript"> <!-- var Text=""; Text=7+" - число сім"+"<BR>"; Text2=(parseInt("3")+4)+ " - число сім"+"<BR>"; document.write(Text+Text2); // --> </SCRIPT> </TABLE> </BODY> </HTML>

    В даному прикладі ми задали змінну Text, та проініціалізували її порожнім рядком. Далі ми присвоїли цій змінній суму числа 7 та двох текстових рядків.

    При обчисленні цього виразу значення 7 автоматично перетворюється в текст. Подальше сумування виконується як конкатенація трьох текстових рядків. В наступному рядку текстове значення «3» перетворюється в числове значення за допомогою функції parseInt, до результату перетворення додається число 4, а далі виконується конкатенація з двома текстовими значеннями. В результаті змінна Text2 буде містити те ж саме значення, що й змінна Text.

    Перевірте результат роботи даного прикладу.

Контрольні запитання:

  1. Для чого використовують символи <!-- та --> у скриптах?
  2. Поясніть призначення функцій parseInt та parseFloat.
  3. Яке значення змінної Text отримаємо в даному випадку: Text=parseInt("шість")+4?