Wilhelm's HTML, CSS, JavaScript, and jQuery Templates:
Code Snippets:
Zufallszahl/Random Number;
No Cursor;
Moving Textbox;
Rotate Picture;
Finite-State Machine Using Interval;
OOP (coming soon);
Example 1 (html):
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>***TITEL***</title>
<!-- Use the following value to
display the webpage in edge mode, which is the highest standards mode supported
by Internet Explorer: -->
<meta http-equiv="x-ua-compatible"
content="IE=edge">
<link rel="stylesheet" href="xyz.css"
media="all">
<script type="text/javascript" src=".\\JavaScript\\XYZ.js"></script>
</head>
<body style="background-color:green">
<h1>***Eine Ueberschrift***</h1>
</body>
</html>
Example 1 (JavaScript - nicht
anonym):
function func01()
{
window.alert("Hi, Wilhelm!");
console.log("Hi, Wilhelm :-)");
}
function loadMyStartFunction()
{
func01();
}
window.addEventListener("load", loadMyStartFunction);
***********************************************
Example 2 (html):
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>***TITEL***</title>
<!-- Use the following value to
display the webpage in edge mode, which is the highest standards mode supported
by Internet Explorer: -->
<meta http-equiv="x-ua-compatible"
content="IE=edge">
<link rel="stylesheet" href="xyz.css"
media="all">
<script type="text/javascript" src=".\\JavaScript\\XYZ.js"></script>
</head>
<body style="padding:0; margin:0; border-style:none;">
<h1>***Eine Ueberschrift***</h1>
</body>
</html>
Example 2 (JavaScript - anonym):
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
(function ()
{
// GLOBAL VARIABLES (Scope in JavaScript is function/object
based):
// ===================================================
var iBodyWidth = 0;
var iBodyHeight = 0;
var iMaxBodyX = 0;
var iMaxBodyY = 0;
// SVG "ROOT" Definieren:
var defs = 'http://www.w3.org/2000/svg';
var SVG_ROOT;
function fStartApplication() {
console.log("Start: fStartApplication");
// ......................your
program....................................
// ......................your program....................................
}
function fInit() {
console.log("Start: fInit");
iMaxBodyX = iBodyWidth =
document.body.clientWidth;
iMaxBodyY = iBodyHeight =
window.innerHeight;
console.log("iBodyWidth (iMaxBodyX) = " +
iMaxBodyX + "px");
console.log("iBodyHeight (iMaxBodyY) = "
+ iMaxBodyY + "px");
// SVG in DOM einhaengen und
konfigurieren:
SVG_ROOT = document.createElementNS(defs,
'svg');
document.body.appendChild(SVG_ROOT);
SVG_ROOT.style.width = "100%";
SVG_ROOT.style.height = iBodyHeight +
"px";
fStartApplication();
}
window.addEventListener("load", fInit);
})();
***********************************************
Example 3 (andere JavaScript
Start Möglichkeiten):
window.onload = function()
{
runTheExampleFunction();
}
function runTheExampleFunction()
{
alert("Running runTheExample-function");
}
Example 4 (innerHTML):
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>***TITEL***</title>
<!-- Use the following value to
display the webpage in edge mode, which is the highest standards mode supported
by Internet Explorer: -->
<meta http-equiv="x-ua-compatible"
content="IE=edge">
<link rel="stylesheet" href="xyz.css" media="all">
<script type="text/javascript" src=".\\JavaScript\\XYZ.js"></script>
</head>
<body>
<div id="idMain">
<p id="idFirst">First paragraph</p>
<p id="idSecond">Second paragraph</p>
<p id="third">Third paragraph</p>
</div>
</body>
</html>
**********************************************************
window.onload = function()
{
runAllMyFunctions();
}
function runAllMyFunctions()
{
document.getElementById("idSecond").innerHTML = "Wilhelm";
}
Example 5 (starten mit jQuery):
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>***TITEL***</title>
<!-- Use the following value to
display the webpage in edge mode, which is the highest standards mode supported
by Internet Explorer: -->
<meta http-equiv="x-ua-compatible"
content="IE=edge">
<link rel="stylesheet" href="xyz.css"
media="all">
<script type="text/javascript" src=".\\JavaScript\\XYZ.js"></script>
</head>
<body>
</body>
</html>
*********************************************
jQuery(document).ready(function()
{
// Some Start Up Functions Are Called Here:
Function1();
});
$(document).ready(function()
{
// Some Start Up Functions Are Called Here:
Function2();
});
$(function()
{
// Some Start Up Functions Are Called Here:
Function3();
});
function Function1()
{
alert("Function1");
}
function Function2()
{
alert("Function2");
}
function Function3()
{
alert("Function3");
}
Example 6 (jQuery statt innerHTML):
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>***TITEL***</title>
<!-- Use the following value to
display the webpage in edge mode, which is the highest standards mode supported
by Internet Explorer: -->
<meta http-equiv="x-ua-compatible"
content="IE=edge">
<link rel="stylesheet" href="xyz.css"
media="all">
<script type="text/javascript" src=".\\JavaScript\\XYZ.js"></script>
</head>
<body>
<h1 id="idTitle">Life</h1>
<p id="idFirst">
Now is the time for all good men to come to the aid of their country.
</p>
<p id="idSecond">
<strong>In the end these things matter most:
How well did you love? How fully did you live?</strong>
</p>
</body>
</html>
********************************************************
$(function ()
{
jQuery("#idTitle").fadeOut(500).fadeIn(500);
$("#idFirst").fadeOut(1000).fadeIn(1000);
$("#idSecond").text("XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX");
});
********************************************************
// Return Random Number:
function fReturnRandomNumber()
{
var min = 0;
var max = 4; // Ergebins: 0,1,2,3
return ZufallsZahl = Math.floor(Math.random() * (max - min))
+ min;
}
********************************************************
// keyboard events:
function fKeyboardEvent(event)
{
console.log("KeyCode = " + event.keyCode);
// Arrow Up = 38
// Arrow Down = 40
// Arrow Left = 37
// Arrow Right = 39
if (event.keyCode == 38 || event.keyCode == 40 ||
event.keyCode == 37 || event.keyCode == 39) {
// Wilhelm's Code
..................................
// Wilhelm's Code
..................................
{
}
function fAdd_Event_Listener_for_Keyboard_Keys_when_DOM_or_Whatever_Finished()
{
window.addEventListener("keydown", fKeyboardEvent);
console.log("keydown Event added.");
}
********************************************************
OOP:
https://developer.mozilla.org/de/docs/Web/JavaScript
https://developer.mozilla.org/de/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript
(OOP JavaScript)
http://eloquentjavascript.net/1st_edition/chapter8.html
http://code.tutsplus.com/tutorials/the-basics-of-object-oriented-javascript--net-7670
********************************************************
PHP
:-)