but will not execute until the entire document is rendered. After the page is finished, all deferred external JavaScripts will execute
in the same order in which they were declared.
Note: you can only declare external scripts by using the
src
attribute with a filename and path.
<!DOCTYPE html>
<html
lang=
"en"
>
<head>
<meta
charset=
"UTF-8"
>
<title>
Document
</title>
<script
src=
"myJSfile.js"
defer
></script>
<!--
OR
-->
<script
src=
"myJSfile.js"
defer=
'defer'
></script>
</head>
<body>
<h1
id=
"myH1"
>
My Heading
</h1>
</body>
</html>
11
Comments
Comments are “notes” that are ignored by JavaScript and are intended for humans to read instead.
There are three types of comment tags used in JavaScript:
1. // two forward slashes comments out everything until the end of the line
2.
<!--
this acts exactly the same as //
3. /* comments out everything until */ is found. This can span multiple lines
12
Variables
Variables are like containers that can store data (values) for us. We can declare variables using the
var
keyword, and in JavaScript
we can freely assign and change the data type.
In addition, we can use the
typeof()
method to check what kind of data type our variable currently holds.
var
x = 10;
// Declaring a variable named x, equal to 10
typeof
(x);
// Returns 'number'
x =
'BCIT'
;
typeof
(x);
// Returns 'string', i.e. a sequence of characters
We will see later in the class that variables can also contain
arrays
(lists of things) and references to
objects
Getting and Setting Values
When writing JavaScript, there are two fundamental concepts that we will need to use and understand:
getting
and
setting
.
We may need, for example, to ask the browser how wide the current window is. To accomplish this, we can
get
the value by
calling one of JavaScripts built-in properties,
window.innerWidth
. We can choose to store this value in a variable if we need
to use it later in the script, but this is optional – it is perfectly acceptable to just ask for, i.e.
get
, this value without storing it.
Example:
// 'Getting' the current window width
console.log(window.innerWidth);
// Optionally storing the value in a variable
var
currentWidth = window.innerWidth;
alert(currentWidth);
// an example of how we might later use this value
In contrast to
getting
,
setting
a value always implies that we are using ‘=’ (called the ‘assignment operator’) to set a property.
If, for example, we wanted to
set
the background color of the first paragraph on the page, we can use the assignment operator to
either store the value directly, e.g.:
document.getElementsByTagName(
'p'
)[0].style.backgroundColor =
'red'
;
or we can optionally create a variable that references the first paragraph and use a combination of
getting
and
setting
to set the
property on our variable, e.g.:
// Using document.getElementsByTagName() to get a reference
// to the HTML element and storing it in a variable
var
firstParagraph = document.getElementsByTagName(
'p'
)[0];
// We can now use firstParagraph to set properties on our element,
// rather than having to repeatedly write document.getElementsByTagName('p')[0]
// Setting the backgroundColor property of our variable,
// (a reference to the element on the page) to red
firstParagraph.style.backgroundColor =
'red'
;
13
We can also use a combination of getting and setting in one line if we do not need to create variables for use later in the script. To
You've reached the end of your free preview.
Want to read all 17 pages?
- Winter '16
- Jason Harrison
- DOCTYPE html, meta charset=
