Declaring and Initializing Variables
scope of variables
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Variables</title>
<script>
// public or script scope
var age;
window.onload = function () {
age = 43;
// function scope
var score = 1000;
out();
}
function out() {
document.getElementById('result').innerHTML = "Age : " + age;
}
</script>
</head>
<body>
<div id="result"></div>
</body>
</html>
Types of Javascript Variables
major variables
- string
- integer
- floating point
- boolean
Operators and Arithmetic in Javascript
document.getElementById is expensive
math mixing floats and integers isn't always 100% accurate
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Math with Variables</title>
<script>
window.onload = function () {
var operand1 = 1234;
var operand2 = 67.23;
var operand3 = 15;
var operand4 = 15;
var out = "";
out += "Addition : " + (operand1 + operand2);
out += "<br />Subtraction : " + (operand1 - operand2);
out += "<br />Multiplication : " + (operand1 * operand2);
out += "<br />Division : " + (operand1 / operand2);
out += "<br />Mod : " + (11 % 3);
out += "<br />Even : " + (12 % 2);
out += "<br />Odd : " + (11 % 2);
out += "<br />Postfix Increment : " + (operand3++);
out += "<br />Prefix Increment : " + (++operand4);
out += "<br />Postfix Decrement : " + (operand3--);
out += "<br />Prefix Decrement : " + (--operand4);
out += "<br />+= 3 : " + (operand4 += 3);
out += "<br />-= 3 : " + (operand4 -= 3);
out += "<br />*= 3 : " + (operand4 *= 3);
document.getElementById('result').innerHTML = out;
}
</script>
</head>
<body>
<div id="result"></div>
</body>
</html>
Javascript Math Functions
documentation of
Javascript Math Functions
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Math Functions</title>
<script>
window.onload = function () {
var out = "";
out += "Math.PI : " + Math.PI;
out += "<br/>Math.sqrt(81) : " + Math.sqrt(81);
out += "<br/>Math.abs(51 - 61) : " + Math.abs(51 - 61);
out += "<br/>Math.round(Math.PI) : " + Math.round(Math.PI);
out += "<br/>Math.random() : " + Math.random();
out += "<br/>Math.random() : " + Math.random();
out += "<br/>Math.floor((Math.random() * 10) + 1) : " + Math.floor((Math.random() * 10) + 1);
out += "<br/>Math.floor((Math.random() * 10) + 1) : " + Math.floor((Math.random() * 10) + 1);
document.getElementById('result').innerHTML = out;
}
</script>
</head>
<body>
<div id="result"></div>
</body>
</html>
Top
Index
It's True You Can Understand Booleans
Boolean can be used as a function
Boolean(10 > 9)
the function below returns true because it only evalutes the values
Boolean(100 == 100.0)
the function below returns false because it evalutes the types and values
Boolean("100" === 100.0)
but the function below returns true because it evalutes the types (numeric) and
values
Boolean(100 === 100.0)
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Javascript Guessing Game</title>
<script>
var randomNumber;
window.onload = function () {
randomNumber = Math.floor((Math.random() * 10) + 1);
console.log(randomNumber);
document.getElementById('btnCheck').addEventListener('click', checkGuess);
}
function checkGuess(){
userGuess = document.getElementById('guess').value;
if (userGuess == randomNumber) {
document.getElementById('result').innerHTML = "<h1>Correct</h1>";
} else {
document.getElementById('result').innerHTML = "<h1>Wrong</h1>";
}
}
</script>
</head>
<body>
<label for="guess">Guess a number between 1 and 10</label>
<input type="number" min="1" max="10" id="guess" />
<button id="btnCheck">Am I right?</button>
<div id="result"></div>
</body>
</html>
Top
Index