Risorse
index.html
<!DOCTYPE html>
<html lang="en">
<!--
*********************************************************************************
PRIMO ESERCIZIO CON JQUERY
=======================================================================
Questa pagina HTML contiene vari tipi di TAG HTML e un menù a scomparsa
che consente di testare alcuni metodi offerti da jQuery.
1. Selettori
Inserendo una stringa nel campo e premento <Seleziona> si può testare
come jQuery seleziona gli elementi.
2. Aggiunta di un elemento alla pagina
Inserendo un valore tra 0 e 1000 viene aggiunta alla pagina una immagine
da sito 'https://picsum.photos'
3. Uso di .each()
Premendo i pulsanti '+' e '-' si scorrono una parte degli elementi della
pagina con il metono jQuery .each() e ne viene aumentato o diminuito il
corpo.
*********************************************************************************
-->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Primo esercizio jquery</title>
<link rel="stylesheet" href="bower_components/bootstrap-4.1.1-dist/css/bootstrap.css">
<link rel="stylesheet" href="css/stile.css">
</head>
<body>
<!--
TESTATA DELLA PAGINA
=====
Viene stilizzata usando classi bootstrap
-->
<header class="jumbotron jumbotron-fluid bg-dark text-light py-5">
<div class="container">
<h1 class="display-4">jQuery/uno</h1>
</div>
</header>
<!--
CORPO PAGINA
=====
La classe container imposta i margini laterali del blocco
-->
<div class="container">
<h1>Duo Reges: constructio interrete.</h1>
<div id="immagini">
<h2>Qui verranno inserite le immagini</h2>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. An hoc usque quaque, aliter in vita? Quod autem in homine
praestantissimum atque optimum est, id deseruit. Proclivi currit oratio. Nec lapathi suavitatem acupenseri Galloni
Laelius anteponebat, sed suavitatem ipsam neglegebat;
<a href='http://loripsum.net/' target='_blank'>Simus igitur contenti his.</a> Ne discipulum abducam, times. Hoc dixerit potius Ennius: Nimium boni est, cui
nihil est mali. Sed quot homines, tot sententiae; </p>
<ol>
<li>Quae adhuc, Cato, a te dicta sunt, eadem, inquam, dicere posses, si sequerere Pyrrhonem aut Aristonem.</li>
<li>Licet hic rursus ea commemores, quae optimis verbis ab Epicuro de laude amicitiae dicta sunt.</li>
<li>Atque hoc loco similitudines eas, quibus illi uti solent, dissimillimas proferebas.</li>
<li>Nec hoc ille non vidit, sed verborum magnificentia est et gloria delectatus.</li>
</ol>
<ul>
<li>Potius inflammat, ut coercendi magis quam dedocendi esse videantur.</li>
<li>Sed tempus est, si videtur, et recta quidem ad me.</li>
<li>Nos commodius agimus.</li>
<li>Suo genere perveniant ad extremum;</li>
</ul>
<h2>Epicuro praecepta dantur.</h2>
<p>Sint modo partes vitae beatae.
<a href='http://loripsum.net/' target='_blank'>Primum quid tu dicis breve?</a> Dolere malum est: in crucem qui agitur, beatus esse non potest. An vero, inquit,
quisquam potest probare, quod perceptfum, quod. Quod quidem nobis non saepe contingit. Solum praeterea formosum,
solum liberum, solum civem, stultost; </p>
<dl>
<dt>
<dfn>A mene tu?</dfn>
</dt>
<dd>Ad eas enim res ab Epicuro praecepta dantur.</dd>
<dt>
<dfn>Sed nimis multa.</dfn>
</dt>
<dd>Curium putes loqui, interdum ita laudat, ut quid praeterea sit bonum neget se posse ne suspicari quidem.</dd>
<dt>
<dfn>Nihil sane.</dfn>
</dt>
<dd>Sed haec ab Antiocho, familiari nostro, dicuntur multo melius et fortius, quam a Stasea dicebantur.</dd>
<dt>
<dfn>Idemne, quod iucunde?</dfn>
</dt>
<dd>Qualis ista philosophia est, quae non interitum afferat pravitatis, sed sit contenta mediocritate vitiorum?</dd>
</dl>
<h3>Primum Theophrasti, Strato, physicum se voluit;</h3>
<p>
<code>Suo genere perveniant ad extremum;</code> Qua igitur re ab deo vincitur, si aeternitate non vincitur? Roges enim
Aristonem, bonane ei videantur haec: vacuitas doloris, divitiae, valitudo; Nos vero, inquit ille;
<mark>Quid enim?</mark> At enim, qua in vita est aliquid mali, ea beata esse non potest. Quid est enim aliud esse versutum?
Quae cum essent dicta, finem fecimus et ambulandi et disputandi. Quae si potest singula consolando levare, universa
quo modo sustinebit?
<a href='http://loripsum.net/' target='_blank'>At multis se probavit.</a>
</p>
<h4>Quamquam id quidem, infinitum est in hac urbe;</h4>
<p>Ergo illi intellegunt quid Epicurus dicat, ego non intellego? Ait enim se, si uratur, Quam hoc suave! dicturum.
<a href='http://loripsum.net/' target='_blank'>Sint ista Graecorum;</a> Non dolere, inquam, istud quam vim habeat postea videro; Et quod est munus, quod opus
sapientiae? </p>
<dl>
<dt>
<dfn>Praeteritis, inquit, gaudeo.</dfn>
</dt>
<dd>Nec vero alia sunt quaerenda contra Carneadeam illam sententiam.</dd>
<dt>
<dfn>Scrupulum, inquam, abeunti;</dfn>
</dt>
<dd>Deque his rebus satis multa in nostris de re publica libris sunt dicta a Laelio.</dd>
<dt>
<dfn>Si longus, levis.</dfn>
</dt>
<dd>Quare obscurentur etiam haec, quae secundum naturam esse dicimus, in vita beata;</dd>
<dt>
<dfn>Haec dicuntur inconstantissime.</dfn>
</dt>
<dd>Occultum facinus esse potuerit, gaudebit;</dd>
</dl>
<ul>
<li>Etenim si delectamur, cum scribimus, quis est tam invidus, qui ab eo nos abducat?</li>
<li>Haec quo modo conveniant, non sane intellego.</li>
<li>Nam de summo mox, ut dixi, videbimus et ad id explicandum disputationem omnem conferemus.</li>
</ul>
<pre>
Quibus expositis facilis est coniectura ea maxime esse
expetenda ex nostris, quae plurimum habent dignitatis, ut
optimae cuiusque partis, quae per se expetatur, virtus sit
expetenda maxime.
Ex rebus enim timiditas, non ex vocabulis nascitur.
</pre>
<p>Cuius quidem, quoniam Stoicus fuit, sententia condemnata mihi videtur esse inanitas ista verborum.
<b>Sed fortuna fortis;</b> Iam id ipsum absurdum, maximum malum neglegi. Quae similitudo in genere etiam humano
apparet. Unum nescio, quo modo possit, si luxuriosus sit, finitas cupiditates habere. Nec vero alia sunt quaerenda
contra Carneadeam illam sententiam.
<a href='http://loripsum.net/' target='_blank'>Omnia peccata paria dicitis.</a>
</p>
<ol>
<li>Quaesita enim virtus est, non quae relinqueret naturam, sed quae tueretur.</li>
<li>Nam et a te perfici istam disputationem volo, nec tua mihi oratio longa videri potest.</li>
<li>Potius inflammat, ut coercendi magis quam dedocendi esse videantur.</li>
<li>Suam denique cuique naturam esse ad vivendum ducem.</li>
<li>Atque his de rebus et splendida est eorum et illustris oratio.</li>
</ol>
<h5>Quae est igitur causa istarum angustiarum?</h5>
<p>Hic ego: Pomponius quidem, inquam, noster iocari videtur, et fortasse suo iure. Minime vero, inquit ille, consentit.
Ubi ut eam caperet aut quando?
<mark>Stoici scilicet.</mark> Conferam tecum, quam cuique verso rem subicias;
<mark>Inde igitur, inquit, ordiendum est.</mark>
</p>
<p>Atqui reperies, inquit, in hoc quidem pertinacem;
<code>Iam in altera philosophiae parte.</code> Hoc est non dividere, sed frangere. At ille non pertimuit saneque fidenter:
Istis quidem ipsis verbis, inquit; </p>
<p>Nam adhuc, meo fortasse vitio, quid ego quaeram non perspicis. Vos autem cum perspicuis dubia debeatis illustrare,
dubiis perspicua conamini tollere. At, illa, ut vobis placet, partem quandam tuetur, reliquam deserit. Nobis
aliter videtur, recte secusne, postea;
<a href='http://loripsum.net/' target='_blank'>Magna laus.</a>
<a href='http://loripsum.net/' target='_blank'>Sedulo, inquam, faciam.</a> Perge porro; </p>
<blockquote cite='http://loripsum.net'>
Ut enim, inquit, gubernator aeque peccat, si palearum navem evertit et si auri, item aeque peccat, qui parentem et qui servum
iniuria verberat.
</blockquote>
<p>Torquatus, is qui consul cum Cn.
<a href='http://loripsum.net/' target='_blank'>Sed fortuna fortis;</a> Quis istud possit, inquit, negare? Quod cum dixissent, ille contra. </p>
<h3>Nec enim, dum metuit, iustus est, et certe, si metuere destiterit, non erit;</h3>
<p>Comprehensum, quod cognitum non habet? Non igitur potestis voluptate omnia dirigentes aut tueri aut retinere virtutem.
Hoc non est positum in nostra actione. Quae contraria sunt his, malane? Non dolere, inquam, istud quam vim habeat
postea videro; Sed haec quidem liberius ab eo dicuntur et saepius. </p>
<blockquote cite='http://loripsum.net'>
Honestum igitur id intellegimus, quod tale est, ut detracta omni utilitate sine ullis praemiis fructibusve per se ipsum possit
iure laudari.
</blockquote>
<pre>
Non metuet autem, sive celare poterit, sive opibus magnis
quicquid fecerit optinere, certeque malet existimari bonus
vir, ut non sit, quam esse, ut non putetur.
Quae tamen a te agetur non melior, quam illae sunt, quas
interdum optines.
</pre>
</div>
</div>
<!--
PANNELLO MOBILE
=====
Vengono utilizzate le classi bootstrap: row, no-gutters, col-auto,
btn, btn-dark, col, bg-dark, px-3, py-2, text-light, form-group,
form-control, w-100, btn-primary, btn-sm, btn-danger, btn-success
-->
<!-- Contenitore dell'intero pannello -->
<div class="offscreen row no-gutters menu">
<!-- Linguetta con bottone per far scorrere il pannello -->
<div class="col-auto">
<button id="show-hide" class="btn btn-dark btn-menu">
<
</button>
</div>
<!-- Corpo del pannello -->
<div class="col">
<div class="bg-dark px-3 py-2 text-light">
<h2>Test</h2>
<!-- Inserimento selettore e selezione elementi nella pagina -->
<div class="form-group">
<label>Inserisci un selettore</label>
<input type="text" class="form-control w-100" id="selector">
</div>
<div class="form-group">
<button id="btn-seleziona" class="btn btn-primary btn-sm">Seleziona</button>
</div>
<!-- FINE -->
<!-- Inserimento ed eleimeinazione di un immagine nella pagina -->
<div class="form-group">
<label>Inserisci un id</label>
<input type="text" class="form-control" id="image-id" placeholder="numero tra 0 e 1000">
</div>
<div class="form-group">
<button id="btn-addImage" class="btn btn-primary btn-sm">Crea immagine</button>
<button id="btn-deleteImage" class="btn btn-danger btn-sm">Cancella</button>
</div>
<!-- FINE -->
<!-- Aumento e diminuzione corpo degli elementi della pagina -->
<div class="form-group">
<button id="btn-aumenta" class="btn btn-danger">+</button>
<button id="btn-diminuisci" class="btn btn-success">−</button>
</div>
<!-- FINE -->
</div>
</div>
</div>
<script src="bower_components/jquery-3.3.1.min/index.js"></script>
<script src="bower_components/bootstrap-4.1.1-dist/js/bootstrap.bundle.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
css/stile.css
/* *********************************************************
CLASSI DI STILE UTILIZZATE PER IL PANNELLO A SCOMPARSA
----
Per le caratteristiche di base vengono utlizzate per
il pannello a scomparsa principalmente le classi
definiti da Bootstrap
----
**********************************************************/
/*
Classe applicata al pannello mobile. Definisce:
- posizione fissa realtiva alla finastra
- larghezza
- transizione
*/
.menu {
width: 280px;
position: fixed;
top: 190px;
right: 0;
-webkit-transition: right 0.7s;
transition: right 0.7s;
}
/*
Classe applicata al pannello mobile. Definisce:
- posizione fuori schermo
- transizione
*/
.offscreen {
right: -243px;
-webkit-transition: right 0.7s;
transition: right 0.7s;
}
/*
Calsse applicata al bottone/linguetta che fa scorrere il pannaello. Definisce:
- elimina arrotondamenti a destra
*/
.btn-menu {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
/*
Classe applicata agli elementi selezionati
*/
.selezionato {
background-color: #ffff00;
color: #dd0000;
outline: 2px dotted #000;
}
js/main.js
/*
=================================================
CODICE JAVASCRIPT CHE RENDE INTERATTIVO
IL PANNELLO MOBILE
=================================================
NB: Il codice utilizza metodi di jQuery ed viene
eseguito in seguito all'eevento ready di document
*/
// Gestore evento ready
$(document).ready(function() {
// evento click su pulsante/linguetta del pannello
$('#show-hide').on('click', function() {
// this è il bottone che riceve l'evento click
// $this l'oggetto jQueri che ingloba il bottone
var $this = $(this);
// azione principale del click: all'elemento
// acendente con class menu (il pannello mobile)
//viene aggiunta o tolta la classe offscreen
$this
.parents('.menu')
.toggleClass('offscreen');
// A fine animazione (impostata in css)
// viene tolto il focus e cambiata l'etichetta
// del pulsante
setTimeout(function() {
$this.blur();
if($this.html() == ">"){
$this.html('<');
} else {
$this.html('>');
}
}, 700);
});
//
// evento click sul pulsante 'seleziona'
$('#btn-seleziona').click(function() {
// Testo inserito nell'utente
var selettore = $('#selector').val();
// rimuovo la classe selezionatp da tutti gli
// elementi che la contengono e la aggiungo
// agli elementi definiti dal selettore
// inserito dall'utente
$('.selezionato').removeClass('selezionato');
if (selettore){
$(selettore).addClass('selezionato');
}
});
// evento click sul pulsante 'Crea immagine'
$('#btn-addImage').click(function () {
// Testo inserito nell'utente
var imageId = $('#image-id').val();
// Url dell'immagine da picsum.photos
var url = 'https://picsum.photos/1280/720?image=' + imageId;
// Crazione immagine
// aggiunta degli attributi e delle classi necessarie
// aggiunta dell'immagine alla div#immagini
$('<img />')
.attr('src', url)
.attr('alt', 'Immagine da picsum ' + imageId)
.addClass('img-fluid my-2')
.appendTo('#immagini');
})
// evento click sul pulsante 'Cancella'
$('#btn-deleteImage').click(function() {
// Oggetto jQueri che contiene tutte le immagini
// contenute in div#immagini
var $imageList = $('#immagini img');
// Eliminazione del primo elemento del set
if ($imageList.length) {
$imageList.eq(0).remove();
}
})
// evento click sul pulsante '+'
$('#btn-aumenta').click(function () {
// Seleziono tutti i titoli (h1,h2,ecc.), e gli elementi
// p, li, dt, dd, pre escludente gli elementi contenuti
// nell'elemento con classe menu
$(':header, p, li, dt, dd, pre').not('.menu *').each(function () {
// per ogni elemento
var $this = $(this);
// estraggo il corpo del carattere, lo converto in numero
var size = parseInt($this.css('font-size'));
// e lo aumento di 2
$this.css('font-size', size + 2 + 'px');
});
})
// evento click sul pulsante '-'
$('#btn-diminuisci').click(function () {
// Seleziono tutti i titoli (h1,h2,ecc.), e gli elementi
// p, li, dt, dd, pre escludente gli elementi contenuti
// nell'elemento con classe menu
$(':header, p, li, dt, dd, pre').not('.menu *').each(function () {
// per ogni elemento
var $this = $(this);
// estraggo il corpo del carattere, lo converto in numero
var size = parseInt($this.css('font-size'));
// e lo diminuisco di 2
$this.css('font-size', size - 2 + 'px');
});
});
});