javascript
some examples from class:
helloWorld
<script>
function helloWorld(){
window.alert("Hello World");
}
</script>
<input type="submit" value="hello" onclick="helloWorld();">
helloWorldy
index.html:
<input type="submit" value="dank memes" onclick="getRekt();">
<script src="helloWorld.js"></script>
helloWorld.js:
function getRekt(){
window.alert("no thanx m8");
}
swapWords
index.html:
<input type="text" id="firstWord">
<input type="text" id="secondWord">
<input type="submit" value="swap words" onclick="doSwap();">
<div id="swappedWord"></div>
<script src="swapWords.js"></script>
swapWords.js:
function doSwap(){
var word1, word2, result;
word1 = document.getElementById("firstWord").value;
word2 = document.getElementById("secondWord").value;
result = "Swapped words are: " + word2 + " " + word1;
document.getElementById("swappedWord").innerHTML = result;
}
addNumbers
<script>
function addNumbers(){
var num1,num2,answer;
num1 = document.getElementById("txtNum1").value;
num2 = document.getElementById("txtNum2").value;
answer = parseInt(num1) + parseInt(num2);
document.getElementById("showAnswerHere").innerHTML = answer;
}
</script>
<input type="text" id="txtNum1">
<input type="text" id="txtNum2">
<input type="submit" value="calculate" onclick="addNumbers();">
<div id="showAnswerHere"></div>
randoms
<script>
function meme(){
//generate a random number between 1 and 10:
var randomNumber = Math.floor((Math.random() * 10) + 1);
window.alert(randomNumber);
}
<script>
<body>
<input type="submit" value="meme" onclick="meme();">
</body>
headsTails
put these images in your html folder:
<script>
function flip(){
//generate a random number between 1 and 2:
var randomNumber = Math.floor((Math.random() * 2) + 1);
var image = document.getElementById('imageCoin');
if(randomNumber==1){
image.src = "heads.jpg";
}
else
{
image.src = "tails.jpg";
}
}
</script>
<body>
<input type="submit" value="flip" onclick="flip();">
<br>
<img id="imageCoin" src='heads.jpg'>
</body>
post-test loops
repeats at least 1 or more times:
<script>
function launch(){
var counter = 10;
var launchSequence = document.getElementById('countdownHere');
do{
launchSequence.innerHTML = launchSequence.innerHTML + counter + " ";
counter--;
}
while(counter>0)
}
</script>
<body>
<input type="submit" value="launch" onclick="launch();">>
<br>
<div id="countdownHere"></div>
</body>
pre-test loops
repeats at least 0 or more times:
<script>
function launch(){
var counter = 10;
var launchSequence = document.getElementById('countdownHere');
while(counter>0){
launchSequence.innerHTML = launchSequence.innerHTML + counter + " ";
counter--;
}
}
</script>
<body>
<input type="submit" value="launch" onclick="launch();">
<br>
<div id="countdownHere"></div>
</body>
for loops
for more controlled looping:
<script>
function launch(){
var launchSequence = document.getElementById('countdownHere');
for(var counter = 10; counter > 0; counter--){
launchSequence.innerHTML = launchSequence.innerHTML + counter + " ";
}
}
</script>
<body>
<input type="submit" value="launch" onclick="launch();">
<br>
<div id="countdownHere"></div>
</body>