Scribd Logo
Upload

Welcome to Scribd!

  • WEB Lab8

    Uploaded by

    Boardwing
    3 views4 pages

    Original Title

    WEB_lab8

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    3 views4 pages

    WEB Lab8

    Uploaded by

    Boardwing

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 4

    Горбань Ю. В., ст. гр.

    КІ-18
    Лабораторна робота № 8
    Тема: «Принципи створення динамічних ефектів. Обробка користувацького
    введення даних»
    Мета: за допомогою JavaScript обробляти користувацьке введення даних,
    автоматично створювати сторінки з результатами обробки цих даних та з
    різноманітними динамічними ефектами.

    Завдання №
    Створити сторінку з анкетою, ім’я респондента та результати обробки
    виводити на іншій сторінці, аналогічно до того, як показано в прикладі, та
    обов’язково обробити дані згідно завдання – вибір тексту запрошення та
    кольору гіперпосилань.

    <body>
    <h1>Сторінка персоналізації</h1>
    <form>
    <label>Введіть ім'я</label>
    <input type="text" id="userName">
    <div class="linkColorChange">
    <label>Вибір кольору гіперпосилань</label>
    <select id="selectLinkColor">
    <option value="Green">Green</option>
    <option value="Yellow">Yellow</option>
    <option value="Blue">Blue</option>
    <option value="Red">Red</option>
    <option value="White">White</option>
    </select>
    </div>

    <div class="GreetingText">
    <label>Вибір привітання</label>
    <select id="selectGreetingText">
    <option value="Привіт">Привіт</option>
    <option value="Hello">Hello</option>
    <option value="Добрий день">Добрий день</option>
    </select>
    </div>

    </form>
    <button onclick="NewPage()">Далі</button>
    </body>

    Скрипт:
    function PlaceGreetingText(greetingText, placeholder){

    switch(greetingText){
    case 'Привіт':
    placeholder.innerHTML = 'Привіт, '
    break;
    Горбань Ю. В., ст. гр. КІ-18
    case 'Hello':
    placeholder.innerHTML = "Hello, ";
    break;
    case 'Добрий день':
    placeholder.innerHTML = "Добрий день, ";
    }
    }

    function NewPage(){
    let color = document.getElementById('selectLinkColor').value;
    let greetingText = document.getElementById('selectGreetingText').value;
    let userName = document.getElementById('userName').value;

    document.open();
    document.write('<html><head></head>');
    document.write('<body><a href="#">Гіперпосілання обраного кольору</a>');
    document.write('<p><span id="greeting"></span><span id="user"></span></p>');
    document.write('</body></html>');
    document.close();

    let links = document.getElementsByTagName('a');

    for(let i = 0; i < links.length; i++)


    links[i].style.color = color;

    let user = document.getElementById('user');


    user.innerHTML = userName;

    PlaceGreetingText(greetingText, document.getElementById('greeting'));

    Рисунок 8.1 – Сторінка персоналізації

    Завдання №2
    Виконати маніпуляції із таблицею: Зміщення червоного квадрату: у
    кожному рядку червоний квадрат циклічно зміщується не залишаючи за
    собою сліду.
    Горбань Ю. В., ст. гр. КІ-18

    <body>
    <table>
    <tr>
    <td>1:1</td>
    <td>2:1</td>
    <td>3:1</td>
    <td>4:1</td>
    <td>5:1</td>
    </tr>
    <tr>
    <td>1:2</td>
    <td>2:2</td>
    <td>3:2</td>
    <td>4:2</td>
    <td>5:2</td>
    </tr>
    <tr>
    <td>1:3</td>
    <td>2:3</td>
    <td>3:3</td>
    <td>4:3</td>
    <td>5:3</td>
    </tr>
    <tr>
    <td>1:4</td>
    <td>2:4</td>
    <td>3:4</td>
    <td>4:4</td>
    <td>4:5</td>
    </tr>
    <tr>
    <td>1:5</td>
    <td>2:5</td>
    <td>3:5</td>
    <td>4:5</td>
    <td>5:5</td>
    </tr>
    </table>
    </body>

    Скрипт:
    table = document.querySelector('table');

    let rows = table.rows;

    function InitializeRed(rows){
    for(let i = 0; i < rows.length; i++)
    rows[i].cells[i].style.backgroundColor = "red";
    Горбань Ю. В., ст. гр. КІ-18
    }

    function LoopRed(row, startCellIndex){

    let i=startCellIndex;
    setInterval(() => {
    if(i<5){
    row[i-1].style.backgroundColor = "white";
    row[i].style.backgroundColor = "red";
    i++;
    }
    else{
    row[i-1].style.backgroundColor = "white";
    row[0].style.backgroundColor = "red";
    i=1;

    } ,1000);
    }

    InitializeRed(rows);

    for(let i = 0; i < rows.length; i++)


    LoopRed(rows[i].cells, i+1);

    Висновок: в ході лабораторної роботі було отримано навички обробки


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

    You might also like