Show sourcecode
The following files exists in this folder. Click to view.
webbsrvprg/style/webbsrvprg/webbutveckling1/Övningar/
61GgijAIoDL._AC_UF1000,1000_QL80_.jpg
CSS/
Pawmatchhh.png
apa.jpg
ex.html
foretagsprojekt/
foretagsprojekt.zip
goldie.jpg
jamie.html
javascript.html
javascript_cart.html
jquery.html
kanin.png
krokodil.jpg
labradoodle.jpg
labrador.jpg
loggapaw.png
maldiverna.jpg
mason.jpg
mosaic.jpg
ovning0.html
ovning1.html
ovning2.html
ovning3.html
ovning4_a.html
ovning4_b.html
ovning4_c.html
ovning6.html
ovning8.html
ovning9.html
ovning9apelsin.html
ovning9äpple.html
ovningflexbox.html
ovningform.html
ovningssida.html
responsivewebb/
startsida.hund.jpeg
startsida.hund2.jpg
sunset.la.webp
test.html
testsida.html
wp9473997-maldives-4k-wallpapers.jpg
wp9474007-maldives-4k-wallpapers.jpg
javascript.html
143 lines UTF-8 Windows (CRLF)
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143
<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Javascript exempel</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
#button1 {
position: relative;
}
#button2 {
position: relative;
}
.bg-orange {
background-color: orange;
width: 150px;
}
.red {
background-color: red;
width: 60px;
height: 60px;
}
.green {
background-color: green;
width: 60px;
height: 60px;
}
.blue {
background-color: blue;
width: 60px;
height: 60px;
}
</style>
</head>
<body>
<div id="div1"></div>
<button id="button1" type="button">Hej</button>
<div id="div2"></div>
<button id="button2" type="button">då</button>
<div id="a">Lorem ipsum dolor sit</div>
<button type="button" id="b">Dölj/visa texten</button>
<h1 id="rubrik" style="display:none;">
Webbutveckling är knepigt men kul!
</h1>
<button type="button" id="rubrikBtn">Visa / Dölj rubrik</button>
<div class="hoverDiv">Jamie</div>
<div class="hoverDiv">En annan divruta att köra musen över!</div>
<br>
<button type="button" id="kr">röd</button>
<button type="button" id="kg">grön</button>
<button type="button" id="kb">blue</button>
<div>
<div class="red"></div>
<div class="green"></div>
<div class="blue"></div>
<div class="red"></div>
<div class="green"></div>
<div class="blue"></div>
<div class="red"></div>
<div class="green"></div>
<div class="blue"></div>
<div class="red"></div>
</div>
<script>
$("#kr").click(function () {
$(".red").slideToggle();
});
$("#kr").mouseover(function () {
$(".red").hide();
});
$("#kr").mouseout(function () {
$(".red").show();
});
$("#kg").click(function () {
$(".green").slideToggle();
});
$("#kg").mouseover(function () {
$(".green").hide();
});
$("#kg").mouseout(function () {
$(".green").show();
});
$("#kb").click(function () {
$(".blue").slideToggle();
});
$("#kb").mouseover(function () {
$(".blue").hide();
});
$("#kb").mouseout(function () {
$(".blue").show();
});
</script>
<script>
$('.hoverDiv').on('mouseover', function () {
$(this).addClass('bg-orange');
});
$('.hoverDiv').on('mouseout', function () {
$(this).removeClass('bg-orange');
});
</script>
<script>
$("#rubrikBtn").click(function () {
$("#rubrik").slideToggle();
});
</script>
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
$("#b").on('click', function () {
$("#a").toggle("slow");
});
</script>
<script>
document.getElementById("button1").addEventListener("click", showWelcome);
function showWelcome() {
document.getElementById("div1").innerHTML =
"Hej och välkomna till sista lektionen för dagen!";
}
document.getElementById("button2").addEventListener("click", hideWelcome);
function hideWelcome() {
document.getElementById("div1").innerHTML =
" ";
}
</script>
</body>
</html>