Variables and arrays are used to store data to use within your code. A variable can store one piece of data whle an array can store multiple values.
To create a variable use the var, let, or const commands.
Open up a new HTML file, name it variables.html, add the standard HTML elements, and then add the following code to the body tag:
<script>
var firstName = "Peter";
var lastName = "Smith";
document.write( "<p>Hello " + firstName + " " + lastName + "</p>" );
</script>Inside a document.write() command, text in between quotes is treated as plain text, while text outside of quotes is treated as a variable, array, or other JavaScript command.
Open the the file using a browser. The body section should include a greeting.
Create an HTML file and add the following code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript Variables Exercise</title>
</head>
<body>
<script>
var linkName = "W3Schools";
var linkLogo = "w3schools.png";
var linkURL = "http://www.w3schools.com/";
var linkDescription = "W3Schools is a web developer information website, with tutorials and references relating to web development topics such as HTML, CSS, JavaScript and PHP.";
</script>
</body>
</html>Use document.write() and the provided variables to display the link information using well formatted HTML. For example, the first variable may look like this:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript Variables Exercise</title>
</head>
<body>
<script>
var linkName = "W3Schools";
var linkLogo = "w3schools.png";
var linkURL = "http://www.w3schools.com/";
var linkDescription = "W3Schools is a web developer information website, with tutorials and references relating to web development topics such as HTML, CSS, JavaScript and PHP.";
document.write("<h1>" + linkName + "</h1>");
</script>
</body>
</html>When you have completed the goal, the body tag will only include one script tag, the four provided variables, and a number of document.write()` commands outputting the variables with HTML.
Open up a new HTML file, name it variables.html, add the standard HTML elements, and then add the following code to the body tag:
<script>
var x = 5;
var y = 10;
document.write( "<p>Five plus ten is " + x + y + "</p>" );
document.write( "<p>Five times ten is " + x * y + "</p>" );
</script>Open the the file using a browser. The body section should contain a series of math answers.
To create an array, use the same syntax as a variable, except the type of variable with be an array:
var colours = new Array();Then populate the array using keys:
colours[0] = 'Red';
colours[1] = 'Blue';
colours[2] = 'Green';Outputting an array value is similar to outputting a variable, except the variable is followed by a key:
document.write("<p>My favourtie colour is " + colours[0] + ".</p>");Create an array list of items. Then use a series of document.write() commands to display the list.
Full tutorial URL:
https://codeadam.ca/learning/javascript-variables-arrays.html
