1. JavaScript Syntax
2. Outputs
JavaScript can "display" data in different ways: Alert box, write to document, write to HTML element and write to the console. Uncomment and execute each code to see what it does.
<!DOCTYPE html>
<html>
<head>
<title>Output</title>
</head>
<body>
<h1>Javascript Outputs</h1>
<div id="output"></div>
<script type="text/javascript">
//Alert box
window.alert("Hello World");
//Write to document
//document.write("Hello World");
//Write to HTML element
//document.getElementById("output").innerHTML = "Hello World";
//Write into the console
//console.log ("Hello World");
</script>
</body>
</html>
Alert box
Write to document
Write to HTML element
Write into the console
3. Variables
Variables are containers for storing data (values) Uncomment each variable to see what it does.
<!DOCTYPE html>
<html>
<head>
<title>Variables</title>
</head>
<body>
<h1>Javascript Variables</h1>
<script type="text/javascript">
//Variable 1
//var bucketOnBeach = "sand, stones, rocks";
//document.write(bucketOnBeach);
//document.write("<br><br>");
//Variable 2
//var a = 3;
//var b = 12;
//var c = a + b;
//document.write(c);
//document.write("<br><br>");
// Concatenation
//var hw = "Hello" + " " + "World";
//document.write(hw);
</script>
</body>
</html>
The JavaScript concatenation operator is a plus sign (+). This operator lets you add the contents of two or more strings together to create one larger string.
4. Arrays
An array is a special variable, which can hold more than one value at a time. Change the code to see what the arrays do.
<!DOCTYPE html>
<html>
<head>
<title>Arrays</title>
</head>
<body>
<h1>Arrays</h1>
<script type="text/javascript">
//First Array
var myArray = ["sand", "shovel", "water"];
document.write(myArray[2]);
document.write("<br><br>");
//Second Multidimensional Array
var myFriends = [
["John", "Male", 31],
["Sandy", "Female", 18],
["Marcus", "Male", 74]
];
document.write(myFriends[2][1]);
</script>
</body>
</html>
5. Functions
A function is code designed to perform a particular task. Also, a function is executed when it is called. Change the "26" and call it to see what the code does.
<!DOCTYPE html>
<html>
<head>
<title>Functions</title>
</head>
<body>
<h1>Functions</h1>
<script type="text/javascript">
function dogYears( yourAge ) {
return (yourAge * 7);
}
document.write( "if you were a dog, you'd be " + dogYears(26) + " years old!");
</script>
</body>
</html>
6. Conditional Statements
Conditional statements are used to perform different actions based on different conditions. Change the age and operators to see what it does.
<!DOCTYPE html>
<html>
<head>
<title>If / Else</title>
</head>
<body>
<h1>If / Else</h1>
<div id="doc"></div>
<script type="text/javascript">
var age = 35;
if(age < 30) {
document.getElementById("doc").innerHTML = "You're just a youngin'";
} else if (age > 50) {
document.getElementById("doc").innerHTML = "You are older than 50";
}
else {
document.getElementById("doc").innerHTML = "You are older than 30";
}
</script>
</body>
</html>