4.3.1 Тема "Застосування JavaScript"

Приклад системи з використанням скриптів (тестування)

JavaScript - мова сценаріїв, або скриптів. Скрипт - це програмний код, який не вимагає попередньої обробки (компіляції) перед запуском. 

JavaScript був створений програмістом Brendan Eich з Netscape і представлений в грудні 1995 року під назвою LiveScript. Досить швидко він був перейменований в JavaScript.

У HTML є спеціальний контейнерний тег <script>. Мова сценарію вказується за допомогою атрибута type. Наприклад,

<script   type = "text / javascript">

    Тут розташовується код сценарію

</script>

Програмний код JavaScript можна помістити в документ HTML такими способами:

Приклад 1. Цикли.


 <html>

      <head>

  <title>Сценарій</title>

 </head>

     <body>

   <script type="text/javascript">

       for (var i = 0; i < 10; i++) {

        document.write("Привіт, світе!");

       }

   </script>

  </body>

</html>


Приклад 2. Слайдшоу з кнопкою.
Перед виконанням завдання три довільні фотографії формату jpg помістіть у папку images, змініть їх імена на a1, a2, a3.


<html>

   <head>

  <script language="javascript">

    img1 = new Image ()

    img1.src = "images/a1.jpg"

    img2 = new Image ()

    img2.src = "images/a2.jpg"

    var count=1 

     function slideshow() {

             count++;

             if (count>4){count=1;}

             document.foto.src=eval("img"+count+".src")

    }

  </script>

   <style>

     img {
 border: 2px solid gray;
 height:500px;
      }

   </style>

</head>

<body>

  <center>

     <img src="images/a1.jpg" name="foto" >

     <p>

     <input type="button" value=">>"   name="b1" onclick="slideshow()">

  </center>

</body>

</html>

Приклад 3. Реакція на мишку.

<html>

   <head>

        <style>

img{

           height:300px;

           border: 5px dotted green;

         }

     </style>

   </head>

<body>

  <center>

   <a onMouseOver=   "document.foto.src='images/a2.jpg'" 

        onMouseOut="document.foto.src='images/a1.jpg'">

  <img src="images/a1.jpg" name="foto">

       </a>

   </center>

</body>

</html>


Приклад 4. Ефект лупи.

<html>

<head>

   <script language="javascript">

      function lupa() {

            if (foto.height=="100"){ foto.height="500"}

            else {foto.height="100"}

       }

   </script>

    <style>

        img{

           border: 5px dotted green;

          }

     </style>

</head>

<body>

<center>

<img src="images/a1.png" name="foto"

         onMouseOver="lupa()"          onMouseOut="lupa()">

</center>

</body>

</html>

Практична 4.3_1