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 = '' + priceElement.textContent + ''; 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