Så tog fat i min JavaScript bog, læste de første 230 sider og legede lidt med det i Netbeans.
Dog er det sværeste for mig er ikke at scripte et eller andet, men hvad skal det være?
Hvis der er nogle der har nogle små sjove øvelser så del dem endelig.
Indtil videre har jeg ikke lavet så meget udover at håndtere cookies, tilføje en resize listener
og lave en lille farvelade.
Overvejede et slideshow af en art som det næste, for at se hvordan det er anderledes fra CCS3 med key frames.
Men ved ikke om jeg skal kværne 100 sider i bogen før det. Eller hvor indviklet det er.
JavaScript er jo rimelig nemt at forstå når man kommer fra OOP. Objekter, loops, regler for operators, functions mm.
Er alt sammen ens.
Hvis der er andre der ville lege med det jeg selv har lavet.
Kode: Vælg alt
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
body, html, table, td {
width: 99%;
height: 99%;
}
td {
text-align: center;
vertical-align: middle;
}
h1 {
font-size: 3em;
}
h2 {
font-size: 2em;
}
td div {
width: 300px;
height: auto;
margin: auto auto;
padding: 10px 0px 10px 0px;
background-color: black;
}
td div p {
color: white;
}
td div div {
display: inline-block;
width: 90px;
height: 70px;
cursor: pointer;
}
td div div:nth-child(2) {
background-color: red;
}
td div div:nth-child(3) {
background-color: green;
}
td div div:nth-child(4) {
background-color: blue;
}
td div div:nth-child(5) {
background-color: white;
display: block;
width: 280px;
}
</style>
<script type="text/javascript" src="Script1.js"></script>
</head>
<body onload="getBrowserSize();">
<table>
<tr>
<td>
<h1>Your browser size is</h1>
<h2 id="size"></h2>
<div>
<p>Choose a color</p>
<div id="red" onclick="changeBackgroundColor(this.id);">
<p>t</p>
</div>
<div id="green" onclick="changeBackgroundColor(this.id);"></div>
<div id="blue" onclick="changeBackgroundColor(this.id);"></div>
<div id="white" onclick="changeBackgroundColor(this.id);"></div>
</div>
</td>
</tr>
</table>
</body>
</html>
Kode: Vælg alt
window.addEventListener("resize", getBrowserSize);
function getBrowserSize() {
var width = document.body.clientWidth;
var height = document.body.clientHeight;
document.getElementById("size").innerHTML = width + " x " + height + " Pixels";
}
/*
*Cookie management
*/
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
var expires = "expires="+d.toUTCString();
document.cookie = cname + "=" + cvalue + "; " + expires;
}
function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i=0; i<ca.length; i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1);
if (c.indexOf(name) != -1) return c.substring(name.length, c.length);
}
return "";
}
function checkCookie() {
var user = getCookie("username");
if (user != "") {
alert("Welcome again " + user);
} else {
user = prompt("Please enter your name:", "");
if (user != "" && user != null) {
setCookie("username", user, 365);
}
}
}
/*
*Change website color section
*/
function changeBackgroundColor(id) {
var color = document.getElementById(id).id.toString();
document.body.style.backgroundColor= color;
}
Cristian