# 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) :::