After the page is finished all deferred external JavaScripts will execute in

After the page is finished all deferred external

This preview shows page 11 - 15 out of 17 pages.

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
Image of page 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
Image of page 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
Image of page 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
Image of page 14
Image of page 15

You've reached the end of your free preview.

Want to read all 17 pages?

  • Winter '16
  • Jason Harrison
  • DOCTYPE html, meta charset=

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture