---
# System prepended metadata

title: Kurs WWW. Lista nr 4
tags: [pwit, www20]

---


# Kurs WWW. Lista nr 4
###### tags: `www20` `pwit`

:::info
grupa PWit, wtorki 12-14
:::


## Deklaracje

:::info
Studenci wypełniają poniższą tabelkę przed rozpoczęciem zajęć. 
:::
Gotowość rozwiązania zadania należy wyrazić poprzez postawienie X w odpowiedniej kolumnie! 

Można również wyrazić chęć prezentacji któregoś zadeklarowanych zadań za pomocą znaku ==X== (X na żółtym tle).


|                            | 1 | 2 | 3 | 4 | 
|--------------------------- | - | - | - | - |
| Kacper Bajkiewicz          | X+ | X | X |   |
| Jakub	Bok                  |   | x | x |   |
| Kamila Brzozowska          | x+ | x | x |   |
| Monika Jędrzejkowska       |   |   |   |   |
| Karol	Kęciński             |   | x | x | x |
| Szymon Kiczak              | x | x | x |   |
| Szymon Kosakowski          | ==X== | X | X | X |
| Denys	Lukeniuk             | X  |   |   | X  |
| Piotr	Mańkowski            |   |   |   |   |
| Mateusz Materek            |   |   |   |   |
| Sonia	Pawluk               |   |   |   |   | 
| Patryk Pęczak              | X | X | X |   |
| Bartosz Polaszek           |   |   |   |   |
| Marcin Rogala              | x | x |   | x |
| Aleksander Szymański       | ==X== | ==X== | ==X== | X |
| Jakub	Świgło               |   | x | x |   |
| Nikola Wrona               | x+ | x | x |   |
----------------------------------------------

Zadanie 1: Szymon Kosakowski

Zadanie 2: Kamila Brzozowska	

Zadanie 3: Aleksander Szymański	
Ciało dokumentu .html
```
<body>
    <button id="mark all">Mark all</button>
    <button id="write log">Write log</button>
    <div id="div">
            <img id="1" src="1.jpg">
            <img id="2" src="2.jpg">
            <img id="3" src="3.jpg">
            <img id="4" src="4.jpg">
    </div>

    <ul id="log">
            <li>Log:</li>
    </ul>
    <script src="zad3.js"></script>
</body>
```
Plik .js z komentarzami
```
//zgarnięcie wszystkich zdjęć z dokumentu
var allImages = $('img');
//ustawianie pozycji marked na false
for(var i = 1; i <= allImages.length ; i++) {
    $("div").data( "" + i, { marked: false } )
}
//tablica która będzie trzymać wszystkie niewypisane jeszcze logi
var logs = []
//wywołana po kliknięciu przycisku, dodaje do listy wszystkie zaznaczenia / odznaczenia zdjęć
function Log() {
    var ul = document.getElementById("log"); //zgarnięcie listy z html
    for(var i=0; i < logs.length; i++) { //pętla po wszystkich logach
        var li = document.createElement("li"); //utworzenie nowego elementu listy
        li.appendChild(document.createTextNode("" + logs[i])); //dodanie tekstu do utworzonego elementu listy
        ul.appendChild(li); //dodanie elementu do listy
    }
    logs = []; //wyzerowanie logów
}

//funkcja dodająca logi do tablicy z logami
function WriteToLog(name) {
    logs.push(""+name);
}

//funckja dodająca ramkę do zdjęcia
function Mark(idx) {
    WriteToLog("Zaznaczono" + idx); //dodajemy zaznaczenie do logów
    el = document.getElementById(idx); //zgarnięcie odpowiedniego zdjęcia
    el.style.border = "3px solid yellow"; //ustawienie ramki
    var obrazek = $("div").data(""+idx); //zgarnięcie rzeczy funkcją data
    obrazek.marked = true; //ustawienie pozycji marked na true (wymagane w poleceniu)
}

//funkcja usuwająca ramkę do zdjęcia
function Unmark(idx) {
    WriteToLog("Odznaczono" + idx); //dodawanie odznaczenia do logów
    el = document.getElementById(idx); //zgarnięcie odpowiedniego zdjęcia
    var obrazek = $( "div" ).data(""+idx); //zgarnięcie rzeczy funkcją data
    obrazek.marked = false; //ustawienie marked na false (wymagane w poleceniu)
    el.style.border = "none"; //usunięcie ramki
}     
//funkcja wywoływana gdy klikamy zdjęcie
function Click(idx) {
    var obrazek = $( "div" ).data(idx); //zgarnięcie rzeczy funkcją data
    if(obrazek.marked) { //czy obrazek zaznaczony
        Unmark(idx); //zaznacz
    } else {
        Mark(idx); //odznacz
    }
}
//bez tego przyciski nie działały
$("button").data("clicked", true)
//funkcja zaznaczająca wszystkie zdjęcia, wywoływana na przycisk
function MarkAll() {
    for(var i = 1; i <= allImages.length; i++) {
        Mark(i)
    }
}
//funkcja odznaczająca wszystkie zdjęcia, wywoływana na przycisk
function UmarkAll() {
    for(var i = 1; i <= allImages.length ; i++) {
        Unmark(i);
    }
}
//wywoływanie funkcji po kliknięciu zdjęcia
$("img").click(function() {
    Click(this.id)
  });
//wywołanie odpowiedniej funkcji po kliknięciu pzycisku
$("button").click(function() {
    var przycisk = $("button").data(); //zgarnięcie rzeczy o przyciskach funkją data
    switch( $( "button" ).index( this ) ) { //sprawdzamy który przycisk był kliknięty
        case 0: //przycisk od zaznaczania / odznaczania zdjęć
            if(przycisk.clicked) {
                MarkAll();
                przycisk.clicked = false;
            } else {
                UmarkAll();
                przycisk.clicked = true;
            }
            break;
        case 1: //przycisk od logów
            Log();
            break;
    }
  });
```
Zadanie 4: Denys Lukeniuk	

:::info 
[link]( https://github.com/FelixKeetch/Studies/blob/master/KursWWW/Lista4/zadanie4.html)
:::
