By the end of this tutorial, you will be able to:
explain what JavaScript events are
use mouse events to change web page display
Explain the difference between a variable and an identifier
create and use JavaScript variables
call JavaScript methods
create and use JavaScript functions
explain what an API is, what HTML 5 Canvas is and what SVG graphics are
We will be looking at how to add JavaScript to your existing HTML tags, how to create variables to store data, how to retrieve the data from forms and how to process data using functions. We are going to keep the information simple, so you get an idea of what you can do with the language. For a more in-depth study of JavaScript, you would need to take CIT190 our JavaScript programming course.
The videos supplement what is in the lecture (they are not designed to replace the lecture)
JavaScript (or JS) is a lightweight, interpreted, object-oriented language. It is the most well-known scripting language for Web pages, it is relatively easy to learn and it is very powerful.
JavaScript runs on the client side of the web which means it is downloaded to the user's computer along with the web page itself. It is typically used to validate information, provide interactivity, and control how pages respond to various events.
JavaScript is NOT the same thing as Java and they don't serve the same purpose. JavaScript is used by web developers. Java can create web-based apps, but it is typically used in more traditional programming (similar to how C# is used).
JavaScript is one of the 3 languages all web developers must learn and it is part of progressive enhancement (we discussed this concept at the beginning of the semester).
Progressive enhancement consists of 3 parts:
1. HTML which is used to define the content and structure of web pages
2. CSS which is used to specify the layout and formatting of web pages
3. JavaScript which is used to program the behavior of web pages
We have thoroughly covered HTML 5 and CSS. Now, you are going to get a taste of JavaScript so you can get the full picture of how this works :)
JavaScript identifiers (variables) are typically used in JavaScript functions. We will be looking at how to create variables and use them in simple functions.
JavaScript variables are containers for storing data. All JavaScript variables must be identified with unique names. These unique names are called identifiers.
An identifier is a name you give a variable
Identifiers can be short names (like x and y) or more descriptive names (age, sum, totalVolume).
The general rules for constructing names for variables (unique identifiers) are:
To place data into a JavaScript identifier, you must use the assignment operator (the = sign)
Example:
var age = 29;
var favFood = "pizza";
var renewal='y';
JavaScript is a loosely typed language which means, a variable can store numbers, text or single characters. To store text, you need to put it in double quotes as shown in the example above (that is how JavaScript knows it is text) To store numbers, you just enter the plain number. To store a single character, you need to use single quotes as shown in the renewal example above.
Creating a variable in JavaScript IS declaring the variable.
When you declare the variable, you can put information into it while declaring it, or you can have information placed into the variable later on in the program script
Syntax for declaring variables: var variableName = value or expression;
var - keyword that indicates you are creating a variable.
variable_name - variable name you create which is referred to as an identifier. Identifiers should be self-explanatory. They should indicate how the data will be used or what will be stored in it.
value or expression - data that you are placing in the variable. Data can be generated by the user, it can be calculated by the program and placed in a variable, or it can be hardcoded into the program like the example above etc.
Placing information into the variable when you create it is called initializing
Examples:
var favHoliday; /* only declaring favHoliday, not
initializing */
var favFood="pizza" /* declaring and initializing
favFood
*/
So, as you can see from the example, both favHoliday and favFood are declared, but only favFood is initialized (it has a starting value of pizza)
At any point in the JavaScript program, you can put values into variables. If a variable is initially used for text, you can reuse it for numbers later in the program (that is what loosely typed is referring to, the ability to put different data types into the same variable).
Example:
var age=29;
age="twenty";
Because JavaScript is loosely typed, you aren't limited to one type of data within a variable. Just because age starts out with a number in it, doesn't mean we cannot place text into the variable.
Example with numbers and arithmetic:
var number1
= 100;
var number2 = 200;
var divide = 200/100;
var multiply = 200 * 100;
You may have noticed that in multi-word identifiers, the first letter in the second word is capitalized. This is called Camel Case and it is a common practice in programming to use it for multi-word variables.
Examples: firstName, lastName, masterCard, innerCity.
It is good practice to name variables using camel case, so that is the method we will use in the short scripts we will be creating.JavaScript recognizes both integer (whole numbers) and floating point decimal values. If the number contains a decimal place, it is a floating point value. If there isn't a decimal place, it is an integer.
Example:
var num1=123.22 // floating point
var num2=100 // integer
You can directly assign numbers to variables as the example above does, or you can place the results of a numeric calculation into a variable.
Boolean variables are used in logical comparisons because they have a true (1) or false (0) status.
To create a boolean variable, set it to true or false
Example: var check=true;
Arrays let you store multiple pieces of data under a single name. An array is similar in concept to a table.
Example #1:
| 95 |
| pizza |
| Y |
| cake |
| 45 |
In JavaScript arrays are created as objects.
1. Creating & initializing (populating) arrays
Arrays are built-in objects which means they are part of the JavaScript language. There are a couple different ways to create an array, the easiest technique is to use the array literal method.
Syntax: var arrayName = [ item1, item2, item3, ... itemN];
Example: var numbers=["ten", 20, 30.5,"Fifty-five",'6'];
Items are placed into the array based upon the order they are included in the initialization list. Items are placed into arrays beginning at element zero
numbers[0] = "ten"
numbers[1] = 20
numbers[2]=30.5
numbers[3]="Fifty-five"
numbers[4]='6'
The array literal method works well if you know what you want to put in the array. Because JavaScript is loosely typed, you can mix text and numbers within an array. You can also add to the array or remove from the array without any problems.
2. Changing values in an array
Each piece of data in the array is called an element. Elements are numbered beginning at zero
Example: var testScores = [95, 98, 65, 66, 45];
To access data within a element in the array, you need to use the array name followed by the element# (this is called a subscript)
Example:
| How you would code it in JavaScript | Value stored in array |
| testScores[0] | 95 |
| testScores[1] | 98 |
| testScores[2] | 65 |
| testScores[3] | 66 |
| testScores[4] | 45 |
If you want to change values inside the array, you can subscript into the array name using the element# you want to change.
Example: testScores[0] = 90;
3. Entering different data types into arrays and writing beyond the end of the array
In the example above, the array stored values that were of the same data type. Since JavaScript is a loosely typed language, you can store a different data type in each element of the array
Revised Example:
| How you would code it in JavaScript | Value stored in array |
| testScores[0] | 95 |
| testScores[1] | "No Score" |
| testScores[2] | 55.5 |
| testScores[3] | true |
| testScores[4] | 45 |
Another unique feature in JavaScript arrays, is the ability to dynamically increase the size. In most languages, if you write beyond the bounds of the array, you get a run time error. In JavaScript, the array is automatically made larger to accommodate the additional data - you don't get any errors!
Example: the array was defined with 5 elements, including element #10 makes it a eleven element array because we start numbering with 0:
testScores[10]=100;
5. Length Property
Since you can dynamically add elements to the end of the array, you may not know how big it is. The length property is used to determine how many elements are in an array. To use the property, you need the arrayname followed by a period and the keyword length.
Syntax:
arrayname.length
Example:
testScores.length
Another Example:
In the example below an array named musicGenres is created with 4 elements in it. To add a fifth element, the length is retrieved and a new element is added using the length (the first element has a value of zero, so adding something to musicGenres[4] will add a new element to the end)
var musicGenres = ["R&B", "Rock", "Classical", "Pop"];
var length =
musicGenres.length;
musicGenres[length] = "Country";
If you wanted to remove an item from the array, you could place a different value into the element or set the element equal to blanks or zeros. There are also a wide range of methods (routines) created for Arrays that are part of the JavaScript language. Push and Pop are two methods used to add or remove items from an array (we cover those in the CIT190 course)
JavaScript variables are typically used in programs (also called scripts).
If you want to accomplish a task in JavaScript, you can either write a routine to complete the task or you can call a pre-programmed routine (method) designed to complete the task.
In general, when you call a routine, if you just use the name of the routine (with nothing in front of it), you are calling a function. If you call a routine that is preceeded by a variable and a dot, you are calling a method (the variable and dot represent an object).
In JavaScript, almost "everything" is an object (the window, the browser, the document you are looking at etc are all objects).
Methods are actions (routines) that can be performed on objects.
To use a method, you need to have an object invoke (or call) the method. This is done by entering the object name, a dot and the method.name
Examples:
window.alert("I want chocolate");
window.prompt("What is your favorite brand of chocolate?");
In the examples, window is the object. alert is a method that displays a pop-up window. prompt is also a method, but it displays a dialog box with an area to enter text
Live Examples:
In addition to having methods, objects also have properties that you can retrieve or change. The document you are looking at has a background color, a font color, a font size etc The features of the document ARE the document object properties.
Object properties can be changed by placing new values into these properties.
For example, to change the background color of the page, you would use:
Syntax: document.body.style.background=colorName;
Sample Code: document.body.style.background=orange;
There are a couple Window methods that are useful to beginners because they provide an easy way to make your page interactive.
Windows methods include:
Displays an alert box that can be used to display information and is also very useful when debugging JavaScript because you can see what is being stored in a variable
Syntax: window.alert("mesage"); NOTE: The browser will assume alert is a windows method, so you can also code it like this: alert("message");
Example:
alert("Hello World");
If you wanted to see what was being stored in a variable, you would use alert(variableName);
Displays a prompt window for the user to enter data into
Syntax: window.prompt("Instructions to user"); or prompt("Instructions to user");
Example:
var favColor = prompt("Enter your favorite color: ");
alert("Your favorite
color is: ",favColor);
NOTE: When using alert or any other JavaScript method, if you want to combine 2 different data types like a string and a variable, you must put a comma or a + sign between them.
Prompts the user for a yes/no answer that can be stored in a boolean variable
Syntax: window.confirm("message"); or confirm("message");
Example: confirm("Do you want to permanently delete this file?");
There are several techniques used to add JavaScript code to HTML documents:
1) You can create an external js file (simlar to external css files). If you put code into an external file, it must be linked in the same way you link in external css files.
2) You can create the code in the web page using the <script></script> tags. These tags can go between the <head></head> tags and also within the <body></body> tags. Most web developers will place the code at the bottom of the page above the </body> tag so the code is interpretted after the page renders (it won't slow down the page display).
<script>
var number1
= 100;
var number2 = 200;
var divide = 200/100;
var multiply = 200 * 100;
alert(number1 + " / " + number2 + " = " +
divide);
alert(number1 + " * " + number2 + " = " +
multiply);
</script>
3) You can place JavaScript code inside HTML elements (similar to inline styles). However, that technique is not considered best practice and should be used sparingly. IMPORTANT: If the script is writing content to the web document, it needs to be placed where the content should display, so it will be somewhere between the <body></body> tags
If you put the <script> tag into the <body> of your page, you should add a <noscript> tag that displays alternate content for users that have disabled scripts in their web browsers. <noscript> can be palced inside the <head> tag or the <body> tag. Content inside <noscript> wll ONLY display if scripts are disabled or if they aren't supported by the web browser
Modified example:
<script>
var number1
= 100;
var number2 = 200;
var divide = 200/100;
var multiply = 200 * 100;
alert(number1 + " / " + number2 + " = " +
divide);
alert(number1 + " * " + number2 + " = " +
multiply);
</script>
<noscript>Your browser doesn't support scripts and you cannot
view the content.</noscript>
When an HTML document is loaded into a web browser, it becomes a document object.
The document object is at the top of the HTML hierarchy. It is part of the Window object.
The graphic below shows the Browser Object Model which includes the Document object and it also shows the Document Object Model (DOM) which starts at the Document object and includes all your HTML tags
You can access document objects using window.document OR you can just use document (the browser assumes window)
The write() method writes HTML expressions or JavaScript code to a document.
The writeln() method does the same thing, but it adds a newline character (enter
mark) after each statement.
Syntax: document.write("text you want
written"); or document.writeln("text you want written");
The document.write() method is used by JavaScript to write HTML codes and content to the browser window. To write HTML codes, put double quotes around them. Text also requires double quotes. Variables can just be entered as is (no quotes). If you are writing data that has different data types (for example, text and a variable) make sure you put a comma between them or use the concatenation operator,+.
Example:
<script>
var quote = "It's not much of a tail, but I'm sort of attached
to it.";
document.write("<h2>Quotations from Eeyore: </h2><p>",quote,"</p>");
</script>
<noscript>Your browser does not support JavaScript</noscript>
Here's how it looks live:
Revised example (alert was changed to document.write)
<script>
var number1=prompt("Enter a number greater than zero",
"");
var number2=prompt("Enter a second number
that is larger than the first","");
var divide = number2/number1;
var multiply = number2 * number1;
document.write(number1, " x " ,
number2," = ", multiply,"<br>");
document.write(number2, " / " ,
number1," = ", divide,"<br>");
</script>
It shold be noted that when you are using document.write, the <script></script> tags are typically embedded in the html where the text should display.
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>Favorites</title>
</head>
<body>
<h1>Listing
of Favorites...</h1>
<script>
var movie = prompt("What is your favorite movie?");
var song = prompt("What is your favorite song?");
var sport = prompt("what is your favorite sport?");
document.write("<p>Your favorite move is: " , movie ," </p>");
document.write("<p>Your favorite song is: " , song , " </p>");
document.write("<p>Your favorite sport is: " , sport ," </p>");
</script>
</body>
</html>
The getElementById() method returns the element that has the ID attribute with the specified value. Anytime you want to update content in a page or retrieve data from a form field, you can use this method. NOTE: This is the most widely used JavaScript method. It requires that the IDs within a web page are unique.
The getElementByID method is widely used with forms to retrieve and validate data or to update data.
Example:
Select your favorite color and I will transform this text into your favorite color:
Here's what's in the HTML:
<p id="para1">Enter your favorite color and I will transform the text into your
favorite color: <input type="color" id="favColor" onchange="changeColor();"></p>
Here's the code that was executed when the color was changed:
var
newColor=document.getElementById("favColor").value;
document.getElementById('para1').style.color=newColor;
If you need a routine to perform tasks and you are not working with a browser object, you will need to create a function to perform the tasks.
A JavaScript function is a block of code designed to perform a particular task.
A JavaScript function is executed when "something" invokes it (calls it).
Syntax: function nameOfFunction(parameter1,
parameter2, parameter3) {
code to be executed
}
Where
Example (there are no parameters in this example):
function applyChanges(){
document.body.style.background =
document.getElementById('backgroundColor').value;
document.body.style.color = document.getElementById('textColor').value;
document.body.style.fontFamily = document.getElementById('fontStyle').value;
document.body.style.fontSize=document.getElementById('fontSize').value;
}
When you invoke a function, you are calling the function by using the function name and passing it the parameters (data) it needs to run. If you don't have any data to pass the function, just leave the parenthesis empty.
Example of a function call
<button onclick="applyChanges()">Change</button>
Here's how it works: When the user clicks the Change button, the applyChanges() function is called. Control goes to the function itself and statements are executed from top to bottom.
There are 2 types of errors you could run into when programming javaScript: syntax errors and/or logic errors.
All programming languages have a set of rules you must follow when writing the code. These rules are called syntax. If you don't follow the syntax rules, your program will not run properly and your web page won't display correctly. Syntax errors are one of the most common problems for new programmers.
Programming logic deals with how you organize the program and how the commands flow together to produce the desired results.
The best way to avoid logic errors is to write down (in English) what you want to accomplish and how you are going to accomplish it BEFORE you try to write the programming code. This technique is known as algorithm & pseudocode development. Algorithms are used to specify order and actions. Pseudocode puts the order/action into words Once the problem has been written out, you can convert the pseudocode into programming (or JavaScript) code.
If you have an error in your JavaScript code, you will have to find and fix the problem. This process is called debugging. Most browsers make this pretty easy for you - just press the F12 key and a window will display. Select the Console or Error tab and you will see the line with the error in it.
Anytime, you have coded a page and it doesn't do what you intended, you probably have a sytax error. Logic errors may be harder to detect. To catch logic errors, you must test your web page. If the page requires the user to enter data, you need to enter correct & incorrect data. The best way to debug a page is to try to create an error when you are testing the page offline (if the user is supposed to enter numeric data, enter text and see what happens). NOTE: We are not getting into validating numbers and verifying content (that is something we do in the CIT190 course). In this class, we are introducing you to JavaScript.
An event occurs when the user interacts with the page. They move the mouse over something, click on something etc.
Event handling is programming that is triggered when an event occurs. Basically, the page is programmed to respond to events in a specific manner that has been programmed or scripted.
There are 2 types of events in JavaScript:
Most events occur when the user initiates an action.
To see how this works, move the mouse over the image below, the colors and text should change when you point at different regions.
When you are using JavaScript, events trigger JavaScript event handlers. Event handlers are JavaSccript functions that you create to perform actions when events occur.
The table below lists some of the more popular event handlers:
| Attribute | The event occurs when... |
|---|---|
| onabort | Loading of an image is interrupted |
| onblur | An element loses focus |
| onchange | The user changes the content of a field |
| onclick | Mouse clicks an object |
| ondblclick | Mouse double-clicks an object |
| onerror | An error occurs when loading a document or an image |
| onfocus | An element gets focus |
| onkeydown | A keyboard key is pressed |
| onkeypress | A keyboard key is pressed or held down |
| onkeyup | A keyboard key is released |
| onload | A page or an image is finished loading |
| onmousedown | A mouse button is pressed |
| onmousemove | The mouse is moved |
| onmouseout | The mouse is moved off an element |
| onmouseover | The mouse is moved over an element |
| onmouseup | A mouse button is released |
| onreset | The reset button is clicked |
| onresize | A window or frame is resized |
| onselect | Text is selected |
| onsubmit | The submit button is clicked |
| onunload | The user exits the page |
There are two techniques used to handle events:
1. add event listeners to your HTML tags (similar to inline styles) that call event handler functions
or
2. use code to create an "event listener" that executes an event handler function
Best practice involves using code to create an "event listener". It is still acceptable to add event listeners to HTML buttons, but adding them to other elements is frowned upon. In this course, we cover how to add event listeners to HTML buttons. In the CIT190 course we cover how to code an event listener and handler
To add an event to a button, use the following syntax:
<button onclick="functionName()">My Button</button>
or
<input type="button" value="My Button" onclick="functionName()">
Clicking the button will "call" a function. You can name functions whatever you want, keep in mind the function name is case sensitive, so the name used in the button needs to match the name used in JavaScript.
Example:
When the buttons below are clicked, this paragraph will change to blue or green!
Here's the code used to color the paragraphs, you will notice that the HTML 5 <button> element is used for one button and the older <input type="button> is used for the second button. Both buttons have unique IDs that are targeted and modified when the button is clicked.
<p id="changeColor" >When the buttons below are clicked, this paragraph will
change to blue or green!</p>
<button onclick="greenPara()">Color Me
Green</button>
<input type="button" value="Color Me Blue"
onclick="bluePara()">
<script>
function
greenPara(){
document.getElementById("changeColor").style.color="green";
}
function bluePara(){
document.getElementById("changeColor").style.color="blue";
}
</script>
A few important things to note:
1. The ID in the paragraph is being used to identify what needs to change. The functions are using document.getElementById("changeColor") to target that paragraph
2. When coding function calls, you must include the () after the name even if they are empty
3. When coding actual functions in the <script> you must use the keyword function before the name and you must include () after the function name. Functions begin with an opening brace { and they end with a closing brace }
NOTE: JavaScript doesn't let you nest double quote marks. If you need two sets of double quote marks, the inner set should be single quotes and the outer set should be double quotes.
The example above is changing the CSS style for the paragraph that was targeted.
A lot of CSS styling can be modified using JavaScript events.
Syntax: document.getElementById("elementsID").style.styleProperty=styleValue;"
Where elementsID is the unique ID you entered into the HTML tag, styleProperty is the CSS property you want to change and styleValue is the new value you want it changed to
IMPORTANT: When you are changing css styles using JavaScript commands, multiple word styles that normally have a dash between then, like font-size, have a different style property. The dash is removed and the first letter of the second word is capitalized. So, font-size becomes fontSize
The table below shows some examples of how the css property is modified when used in a JavaScript event:
| CSS Property | DOM style Property (aka JavaScript property) |
| border-top | this.style.borderTop |
| text-align | this.style.textAlign |
| box-shadow | this.style.boxShadow |
Onclick is the most widely used event handler. You can use it to display or hide menus and other content. You can also use it to execute scripts.
The example below shows how to use onclick to display the answer to a question (this involves changing a css property from hidden to visible)
Question: How many programmers does it take to change a light bulb?
None, it's a hardware problem.
Here's the CSS used in the example:
#answer{
visibility:hidden;
}
Here's the HTML code and JavaScript event handlers used in the
example
<p>Question: How many programmers does it take to change a light bulb?</p>
<p id="answer"> None, it's a hardware problem.</p>
<button
onclick="document.getElementById('answer').style.visibility='visible'">Click to
see the answer</button>
<button
onclick="document.getElementById('answer').style.visibility='hidden'">Click to
hide the answer</button>
You will notice that the modification to display or hide the answer is made
inside the <button> element (the code isn't calling a function).
You can use events to change image src attributes (or any other attribute you would like to modify)
Syntax: eventHandler ="document.getElementById('elementID').attribute='newValue';"
Where attribute is the HTML attribute you want to modify (such as src in the example below).
Example using onclick to modify the image:
Here's the HTML used to create the example:
<p ><img id="rose" alt="rose" src="media/rose.png" style="width: 236px; height:
335px"></p>
<button
onclick="document.getElementById('rose').src='media/rose-in-bloom.png'"
>Click to see the rose bloom</button>
<button
onclick="document.getElementById('rose').src='media/rose.png'"
>Click to see the rose unbloom</button>
There are many ways, HTML, XML or JSON and JavaScript are combined to create or display content in a page. XML and JSON are used to store data. JavaScript is used to process data and HTML displays the data on the page.
Three integrated features you should be aware of include: APIs, HTML 5 Canvas and SVG Graphics.
An API (application program interface) gives developers access to information they can display in their own web pages. Most large companies with web-sites have APIs. These companies provide a great deal of data that you can incorporate into your pages.
To access data, web developers have to read the API documentation, get an access key (which is usually free), and they have to use a combination of JavaScript and AJAX to retrieve the data and display it on the page. Data is typically stored in an XML or JSON file. The only exception to that is google fonts - it is an API that doesn't require a key or JavaScript.
Examples of pages using APIs that require access keys, JavaScript and AJAX to update the page with the data retrieved:
While coding for API's is beyond the scope of this course, you should have a general idea of what APIs do (you will learn how to use them in CIT190)
The HTML <canvas> element is used to draw graphics, on the fly, via scripting (usually JavaScript). The <canvas> element serves as a container for the graphics. Actually drawing the graphics requires using JavaScript. Canvas itself is considered to be an object. As an object it has properties (features) and methods (routines). Canvas methods are typically designed to draw shapes, add images, apply color etc. Because HTML Canvas is interactive and can be animated, it is often used in games. The CIT190 course covers how to create games using Canvas
SVG stands for Scalar Vector Graphics. It is a type of graphic format that is vector (or line) based. So, the graphics can enlarge or shrink without losing quality. SVG graphics are stored as XML data, so in order to create them, you need to know both HTML and XML. The neat thing about SVG graphics is that every attribute can be animated!
XML is similar to HTML because it uses tags that surround data. Where it differs is that XML is used for data storage and HTML is used to structure a page and display content. When you use XML, you are actually making up the tags that are being used - it is a completely flexible language that can be used to store just about anything.
SVG graphics use XML to store vector information, but it's use extends far beyond SVG graphics.
XML is something we cover in-depth in the CIT190 course.