Immagine utilizzate per l'esercizio "Interruttore".
HTML
/bootstrap/esercizi.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento senza titolo</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link href="../css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="../css/custom.css" rel="stylesheet" type="text/css">
<link href="../css/custom-fonts.css" rel="stylesheet" type="text/css">
</head>
<body>
<nav class="navbar navbar-inverse navbar-darkblue navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" data-toggle="collapse" data-target="#mainNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
<div class="navbar-brand"> Sistemi Interattivi </div>
</div>
<div class="collapse navbar-collapse" id="mainNavbar">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#">Home</a></li>
<li> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Esercizi <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#esercizio1">Esercizio 1</a></li>
<li><a href="#esercizio2">Esercizio 2</a></li>
<li><a href="#">Esercizio 3</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<div class="jumbotron">
<div class="container">
<h1>Ecco Javascript!</h1>
<p class="animated fade-top out"><span id="data_giorno">mercoledì</span> <span id="data_data">00</span> <span id="data_mese">dicembre</span> <span id="data_anno">0000</span> ore <span id="data_ora">00</span>:<span id ="data_minuti">00</span>:<span id="data_secondi">00</span></p>
<p><a class="btn btn-primary btn-lg animated rotate out fast delay05" href="#" role="button">Learn more</a> </p>
</div>
</div>
<section id="esercizio1" class="sezione">
<div class="container">
<h1>Primo esercizio javascript</h1>
<p>Questo è il mio primo esercizio che calcola la media tra due numeri.</p>
<p>La media tra <span id="numero1">primo numero</span> e <span id="numero2">secondo numero</span> è <span id="media">media dei due numeri</span>.</p>
</div>
</section>
<section id="esercizio2" class="sezione">
<div class="container">
<h1>Esercizio sulle funzioni</h1>
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<img src="https://unsplash.it/500/400/?image=200" alt="Immagine casuale" class="img-responsive center-block" id="immagineDemo"/>
<p class="text-center">
<button class="btn btn-primary" onclick="cambiaImmagine(201)">Immagine 201</button>
<button class="btn btn-primary" onclick="cambiaImmagine(202)">Immagine 202</button>
<button class="btn btn-primary" onclick="cambiaImmagine(401)">Immagine 401</button>
<button class="btn btn-primary" onclick="cambiaImmagine(501)">Immagine 501</button>
</p>
</div>
</div>
</div>
</section>
<section id="esercizio3" class="sezione bg-dark">
<div class="container">
<h1>Mini calcolatrice</h1>
<form id="minicalcolatrice">
<div class="row">
<div class="form-group col-xs-3">
<input id="operando1" type="text" class="form-control" placeholder="Operando" />
</div>
<div class="form-group col-xs-3">
<select id="operatore" class="form-control">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">:</option>
<option value="^">^</option>
</select>
</div>
<div class="form-group col-xs-3">
<input id="operando2" type="text" class="form-control"
placeholder="Operando" />
</div>
<div class="form-group col-xs-3">
<button class="btn btn-primary btn-block" type="submit">=</button>
</div>
</div>
</form>
<p class="text-center">
<span id="calc_result" class="h2">Qui apparirà il risultato</span>
</p>
</div>
</section>
<section id="numeriCasuali" class="sezione">
<div class="container">
<h1>Generatore di numeri casuali</h1>
<form id="casuali">
<label>Quanti numeri vuoi generare</label>
<div class="row">
<div class="form-group col-sm-10">
<input id="casualiQuanti" type="text" class="form-control" placeholder="inserisci un numero" />
</div>
<div class="col-sm-2">
<button type="button" id="btnGenera" class="btn btn-primary">Genera</button>
</div>
</div>
</form>
<p>
<span id="casualiGenerati" class="h2">Qui appariranno i numeri generati.</span>
</p>
</div>
</section>
<section id="esercizio4" class="sezione bg-dark">
<div class="container">
<h1>Interruttore</h1>
<div class="row">
<div class="col-xs-4 col-md-2 col-lg-1 text-right">
<button type="button" class="interruttore" id="int_1"></button>
</div>
</div>
</div>
</section>
<script src="../js/jquery-3.2.0.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script>
/*
Carcolo della media
*/
var n1, n2, m;
n1 = 23;
n2 = 11;
m = (n1 + n2) / 2;
document.getElementById('numero1').innerHTML = n1;
document.getElementById("numero2").innerHTML = n2;
document.getElementById('media').innerHTML = m;
</script>
<script>
/*
Cambia immagine
*/
function cambiaImmagine (num) {
var sorgente = "https://unsplash.it/500/400/?image=" + num;
document.getElementById('immagineDemo').src = sorgente;
}
</script>
<script>
/* =============================
OROLOGIO
=============================*/
var mesi = ["gennaio","febbraio","marzo","aprile","maggio","giugno",
"luglio","agosto","settembre","ottobre","novembre","dicembre"];
var giorni = ["domenica","lunedì","martedì","mercoledì","giovedì",
"venerdì","sabato"];
function orologio ( ){
var adesso = new Date();
var ora, minuti, secondi;
ora = adesso.getHours();
if (ora < 10) {
ora = "0" + ora;
}
minuti = adesso.getMinutes();
if (minuti < 10) {
minuti = "0" + minuti;
}
secondi = adesso.getSeconds();
if (secondi < 10) {
secondi = "0" + secondi;
}
document.getElementById("data_giorno").innerHTML = giorni[adesso.getDay()];
document.getElementById("data_data").innerHTML = adesso.getDate();
document.getElementById("data_mese").innerHTML = mesi[adesso.getMonth()];
document.getElementById("data_anno").innerHTML = adesso.getFullYear();
document.getElementById("data_ora").innerHTML = ora;
document.getElementById("data_minuti").innerHTML = minuti;
document.getElementById("data_secondi").innerHTML = secondi;
};
orologio();
setInterval(function(){
orologio();
}, 1000);
</script>
<script>
/* =============================
MINICALCOLATRICE
=============================*/
var minicalc = document.getElementById("minicalcolatrice");
minicalc.onsubmit = function () {
var messaggio = "", num1, num2, risultato = 0, operatore;
num1 = parseFloat(document.getElementById("operando1").value);
num2 = parseFloat(document.getElementById("operando2").value);
operatore = document.getElementById("operatore").value;
if (isNaN(num1) || isNaN(num2)){
messaggio ="Inserisci un numero!";
} else if (operatore == "+") {
messaggio = "Il risultato è " + (num1 + num2);
} else if (operatore == "-") {
messaggio = "Il risultato è " + (num1 - num2);
} else if (operatore == "*") {
messaggio = "Il risultato è " + (num1 * num2);
} else if (operatore == "/") {
messaggio = "Il risultato è " + (num1 / num2);
} else {
messaggio = "Il risultato è " + (num1 ^ num2);
}
document.getElementById('calc_result').innerHTML = messaggio;
return false;
}
</script>
<script>
/*
ANIMAZIONI
*/
/*
window.onload = function () {
var elementi = document.getElementsByClassName("out");
while (elementi.length > 0){
elementi[0].classList.remove("out");
}
};
*/
window.onload = function() {
$('.out').removeClass('out');
}
</script>
<script>
/*
Generatore numeri casuali
*/
document.getElementById("btnGenera").onclick = function() {
var quanti = parseInt(document.getElementById("casualiQuanti").value);
if (quanti > 0) {
var str = "";
for (var i = 0; i < quanti; i++) {
var num = Math.round(Math.random() * 100);
if ( i > 0) {
str = str + ", ";
}
str = str + num;
}
document.getElementById("casualiGenerati").innerHTML = "Numeri generati: " + str;
} else {
document.getElementById("casualiGenerati").innerHTML = "Inserisci un numero maggiore di 0";
}
};
</script>
<script>
/*
Interruttore
*/
$(document).ready(function() {
$('.interruttore').click(function() {
$(this).toggleClass('on');
})
});
</script>
</body>
</html>
/css/custom.css
@charset "utf-8";
/* CSS Document */
/* Modifica colori di fondo e di primo piano di jumbotron*/
.jumbotron {
background-color: #333333;
color: white;
}
/* =================================================
COLORI
================================================= */
/*
=========================================================
Invece che definire i colori per l'elemento con classe
jumbotron posso definire classi generiche che applichino
accoppiamenti di colore e di caratteristiche di font
applicabili a qualsiasi elemento
=========================================================
*/
/* colori di sfondo e di primo piano per gli elementi com
class bg-dark */
.bg-dark {
background-color: #333333;
color: white;
}
/* Definisto a colori per il link ipertestuale */
.bg-dark a {
color: #ffffaa;
}
.bg-dark a:hover {
color: #bbbb99;
}
/*
Bootstrap definisce un colore specifico per l'elemento
small (elemento html che serve a identificare una
parte di testo scritta in corpo minore dello standard)
quando e dentro un titolo. Questo colore (#777777) è poco
leggibile con il background che ho scelto quindi lo
cambio. Uso l'opzione !important per fare in modo che
questa regola sostituisca qualsiasi regola precedente
anche se più specifica.
*/
.bg-dark small, .bg-dark .small {
color: #bbbbbb !important;
}
/* Altro esempio */
.bg-deepblue {
background-color: #001633;
color: #ffffee;
}
.bg-deepblue small, .bg-deepblue .small {
color: #bbbbaa !important;
}
.bg-deepblue a {
color: #bbffff;
}
.bg-deepblue a:hover {
color: #bbbbaa;
}
/* =================================================
UTILITÀ
================================================= */
/* Aggiungono margine inferiore
classe responsive più sotto vengono definiti
margini maggiori per schermi superioni a 768px*/
.mb-sm {
margin-bottom: 5px;
}
.mb-md {
margin-bottom: 15px;
}
.mb-lg {
margin-bottom: 30px;
}
/* Classe sostituita da quella definita sotto */
.icon-circle {
border: solid 2px #888;
padding: 12px 7px 7px 15px;
border-radius: 50%;
}
/* Ho creato questa nuova classe da aggiungere alla classe gluphicon
per ottenere un incona grande circondata da un bordo circolare
Migliore della precedente e meno legata alla grandezza del carattere*/
.glyphicon-circle {
border: solid 2px #888;
padding: 12px 15px;
border-radius: 50%;
font-size: 36px;
top: 2px;
}
/* La classe text-center-sm allinea
il testo al centro solo sui dispositivi a schermo piccolo */
.text-center-sm {
text-align: center;
}
/* =================================================
BOTTONI
================================================= */
/* Elimina l'arrotondamento dei pulsanti */
.btn {
border-radius: 0;
/* Converte i maiuscolo e aumente lo spazio tr i caratteri */
text-transform: uppercase;
letter-spacing: 1px;
}
.btn-outline, a.btn-outline {
background-color: transparent;
color: #ffffee;
border: solid 2px #ffe;
letter-spacing: 3px;
}
.btn-outline:hover, a.btn-outline:hover {
background-color: rgba(255, 255, 255, 0.6);
color: #333333;
}
/* =================================================
NAVBAR
=================================================*/
.navbar-fixed-padding {
padding-top: 50px;
}
.navbar-darkblue {
background-color: darkblue;
}
.navbar-darkblue .navbar-brand {
color: yellow;
}
/* =================================================
SEZIONI
================================================= */
.sezione {
padding: 80px 0;
}
/* =================================================
ANIMAZIONI
================================================= */
.animated {
transition-property: all;
transition-timing-function: ease-in-out;
transition-duration: 1s;
}
.delay05 {
transition-delay: 0.5s;
}
.delay1 {
transition-delay: 1s;
}
.delay2 {
transition-delay: 2s;
}
.slow {
transition-duration: 1.5s;
}
.fast {
transition-duration: 0.5;
}
.animated.out {
opacity:0;
}
.fade-top.out {
transform: translateY(-50px);
}
.rotate.out {
transform: rotate(-720deg);
}
/* ==================================================
INTERRUTTORE
================================================== */
.interruttore {
border: 0;
background-color: transparent;
height: 90px;
width: 90px;
background-image: url(../img/interruttore.png);
background-position: top left;
}
.interruttore.on {
background-position: top right;
}
.interruttore:focus {
outline: 0;
}
/* =================================================
RESPONSIVE
================================================= */
/* Tablet verticali */
@media only screen and (min-width:768px) {
.mb-sm {
margin-bottom: 15px;
}
.mb-md {
margin-bottom: 30px;
}
.mb-lg {
margin-bottom: 60px;
}
}
/* Tablet orizzontali */
@media only screen and (min-width:992px) {
/* Su tablet orizzontali e desk top la classe text-center-sm allinea
il testo a sinistra */
.text-center-sm {
text-align: left;
}
}