Natřete to webům Natřete to webům aneb co si zkusit nabarvit cizí web na červeno nebo do něj přidat vlastní funkce…? Pavel Kříž DEN OTEVŘENÝCH DVEŘÍ FIM Z čeho se skládá webová stránka Webová stránka (jeden „dokument“) Skládá se z HTML elementů Elementy dohromady tvoří strom (podobná struktura jako složky na disku) Obsahuje/odkazuje kaskádové styly – CSS Pravidla říkající, jak má který element ve stránce vypadat a jak má být umístěn Obsahuje/odkazuje skript(y) v jazyce JavaScript (ECMAScript) „Oživují“ stránku (interaktivní prvky, dodatečné stažení dalších dat, atd.) V principu mohou s manipulovat celou stránkou DEN OTEVŘENÝCH DVEŘÍ FIM Jak si to všechno prohlédnout V Chrome přes pravé tlačítko myši na nějakém místě ve stránce a volbu prozkoumat Zobrazí se Vývojářské nástroje Dozvíme, jak je nastylován daný element Vývojářské nástroje lze zobrazit i pomocí kláves F12 nebo Ctrl-Shift-i DEN OTEVŘENÝCH DVEŘÍ FIM DEN OTEVŘENÝCH DVEŘÍ FIM Spouštíme vlastní kód v JavaScriptu Na záložce „Console“ je možné zadat příkaz v JS, který se v „v rámci stránky“ provede Příklady: Mění styl alert("Pokus") document.body.style.backgroundColor="red" document.querySelector(".bigPrice").innerHTML = "Ahoj!" CSS selektor HTML elementu Mění obsah elementu v HTML Pozor, úpravy vidíme jen my a jen do znovu-načtení stránky DEN OTEVŘENÝCH DVEŘÍ FIM Jak změnit web trvale? Pro trvalé změny webu (v našem prohlížeči!) budeme potřebovat nějaké rozšíření pro webový prohlížeč: Tampermonkey (Chrome, FF, Edge,…) – skripty, CSS Greasemonkey (Firefox) – skripty, CSS Stylish (Chrome, Firefox,…) – CSS Nainstalujeme z Internetového obchodu Chrome K dispozici už hotové úpravy pro známé weby (na skripty pozor! mohou vám např. ukrást Facebook účet) Možnost uložit si v prohlížeči vlastní skript, který se spustí vždy pro vybraný web DEN OTEVŘENÝCH DVEŘÍ FIM Vytvoření Tampermonkey skriptu Naistalovat Tampermonkey do Chrome Ikona na liště vpravo nahoře v Chrome Tlačítko Přidat nový skript… // ==UserScript== // @name New Userscript // @namespace http://tampermonkey.net/ // @version 0.1 // @description try to take over the world! Upravit „předponu“ // @author You stránek // @match https://www.alza.cz/* // @grant none // ==/UserScript== (function() { Sem napíšeme JS kód, který 'use strict'; se provede na stránkách // Your code here... })(); DEN OTEVŘENÝCH DVEŘÍ FIM Jak psát speciální symboly Speciální symboly na české QWERTZ klávesnici: Středník ; – před klávesou 1 Složené závorky { } – pravý Alt + B, pravý Alt + N Křížek # – pravý Alt + X atd… (viz obrázek) DEN OTEVŘENÝCH DVEŘÍ FIM Praktický příklad // ==UserScript== // @name New Userscript // @namespace http://tampermonkey.net/ // @version 0.1 // @description try to take over the world! // @author You // @match https://www.alza.cz/* Element s cenou // @grant none // ==/UserScript== „Nadpis“ stránky (obsahuje Zakódujeme název (function() { název produktu) produktu 'use strict'; var h1 = document.querySelector("h1"); var priceElement = document.querySelector(".bigPrice"); var encodedName = encodeURIComponent(h1.textContent.trim()); priceElement.innerHTML = '<a style="color:inherit;" href="http://www.heureka.cz/?h%5Bfraze%5D=' + encodedName + '">' + priceElement.textContent + '</a>'; Vytvoříme odkaz na Heureku a })(); vložíme jej místo cenovky Uložíme skript pomocí tlačítka Uložit DEN OTEVŘENÝCH DVEŘÍ FIM Praktický příklad (pokrač.) Vrátíme se na stránku webu načteme stránku znovu (F5 nebo Ctrl-R), aby se skript spustil (poprvé) Upravit existující skript v Tampermonkey lze pomocí tlačítka Řídící panel Naučte se JavaScript , dnes se v něm píší celé webové aplikace DEN OTEVŘENÝCH DVEŘÍ FIM.