Unit Notes. ICAWEB411A Produce basic client-side script for dynamic web pages Topic 1 Introduction to JavaScript

Size: px

Start display at page:

Download "Unit Notes. ICAWEB411A Produce basic client-side script for dynamic web pages Topic 1 Introduction to JavaScript"

Aubrey Barton
5 years ago
Views:

1 Unit Notes ICAWEB411A Produce basic client-side script for dynamic web pages Topic 1 Introduction to JavaScript

2 Copyright, 2013 by TAFE NSW - North Coast Institute Date last saved: 18 September 2013 by Stephen Hillenbrand Version: 2.0 # of Pages = 14 Copyright of this material is reserved to the Crown in the right of the State of New South Wales. Reproduction or transmittal in whole, or in part, other than in accordance with the provisions of the Copyright Act, is prohibited without written authority of TAFE NSW - North Coast Institute. Disclaimer: In compiling the information contained within, and accessed through, this document ("Information") DET has used its best endeavours to ensure that the Information is correct and current at the time of publication but takes no responsibility for any error, omission or defect therein. To the extent permitted by law, DET and its employees, agents and consultants exclude all liability for any loss or damage (including indirect, special or consequential loss or damage) arising from the use of, or reliance on, the Information whether or not caused by any negligent act or omission. If any law prohibits the exclusion of such liability, DET limits its liability to the extent permitted by law, to the re-supply of the Information. Third party sites/links disclaimer: This document may contain website links to third party sites. DET is not responsible for the condition or the content of those sites as they are not under DET's control. The link(s) are provided solely for your convenience and do not indicate, expressly or impliedly, any endorsement of the site(s) or the products or services provided there. You access those sites and use their products and services solely at your own risk. Page 2 of 14

3 Table of Contents Getting Started... 4 Topic 1 - Introduction to JavaScript My first JavaScript program Variables Input forms Functions Objects and Dot Notation Page 3 of 14

This unit introduces client-side scripting with JavaScript to add dynamic functionality to web pages.

4 Getting Started Plain HTML web pages are not very interactive: they merely present information to the user. JavaScript can be added to web pages to allow users to interact with pages, for example, the calculator at This unit introduces client-side scripting with JavaScript to add dynamic functionality to web pages. It is advisable that you have completed "Create Markup Document" or are knowledgeable in HTML before attempting this unit. NOTE: These unit notes should not constitute your only learning resource. Make sure that you make use of other resources to assist in your learning. is one such resource. Search for others on the Internet or visit the library. Using the Unit Notes Icons and symbols are used throughout the guide to provide quick visual references. They indicate the following: Icon Meaning Icon Meaning ACTIVITY: An activity is listed to be completed ACTIVITY: A Learning activity requiring some physical action WWW: A web link is listed IMPORTANT: A pivotal point is detailed REFLECTION: A point is to be considered and thought about more deeply SEARCH: A particular item / book etc needs to be found and applied Page 4 of 14

5 Topic 1 - Introduction to JavaScript My first JavaScript program 1. Create a new web page document using notepad or a web authoring tool such as Dreamweaver. Make sure that the document contains the HTML skeleton code. Dreamweaver creates this automatically. 2. Add the opening and closing script tag shown on lines 8 and 14 respectfully in Script 1 below. In this case, make sure that it goes in the body section of the web document. Content within these tags will be interpreted by the browser as JavaScript. [NOTE: Magnify Word if you have trouble reading the script] 3. Add the  on lines 9 and 13 respectfully. These are HTML comments. They hide the JavaScript code from the browsers that do not support JavaScript otherwise the code will be printed out. 4. Between those comment tags, add the JavaScript on line Save the document as a web page. 6. Locate the file and double click on it 7. You should see the words "Hello World" printed to the screen. 8. Congratulations - you have written you first JavaScript web page. Script 1 - My first JavaScript script <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>my First Java Script Page</title> </head> <body> <script type="text/javascript"> document.write("hello World"); </script> </body> </html> Code comments document.write("hello World") is an instruction. It instructs the browser to print out what's in the brackets, that being, "Hello World". The ";" means end of instruction. A JavaScript program usually comprises of many instructions each ending with a ";". Page 5 of 14

6 1.2 - Variables In Script 1 the "Hello World" is printed out as a string literal. The "Hello World" can also be stored in a variable first before being printed out. What is a variable? When we bake a cake we store the cake s ingredients in bowls, e.g., a bowl of apples, a bowl of eggs. Program variables are like these bowls. They provide a place to store data until the program needs to use the data. Creating a variable in JavaScript is easy. For example, fruit = "apple"; stores the string "apple" in the variable fruit, and number = 5; stores the number 5 in the variable number You can also write var fruit = "apple"; and var number = 5; where var stands for variable but it's optional. Page 6 of 14

7 Script 2 - using variables <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>my First Java Script Page</title> </head> <body> <script type="text/javascript"> str = "Hello World"; document.write(str); </script> </body> </html> In the code in Script 2, str is a variable. The code str = "Hello World"; stores the string Hello World in the variable str. The code document.write (str); prints what's contained in the variable str onto the webpage. Notice that str does not go in quotes as it's a variable that contains a string, not the string itself! document.write (str) is a command. It tells the browser to print out what's in the variable str to the web page. Page 7 of 14

8 Script 3 - Concatenating strings. In the code below, the strings Hello and World are stored in separate variables. Strings are always wrapped in quotes. They are then joined together (concatenated) before being printed out with the + symbol. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>variables</title> </head> <body> <script type="text/javascript"> str1 = "Hello"; str2 = "World"; document.write(str1 + " " + str2); </script> </body> </html> Script 4 - printing out a number <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>variables</title> </head> <body> <script type="text/javascript"> num = 9; document.write(num); </script> </body> </html> In the above code the number 9 is stored in the variable num and then printed out. Page 8 of 14

9 Script 5 - Printing out the sum of two numbers <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>variables</title> </head> <body> <script type="text/javascript"> num1 = 3; num2 = 6; document.write(num1 + num2); </script> </body> </html> Here, the numbers 3 and 6 are stored in the variables num1 and num2 respectfully and then their sum printed out. Numbers are not wrapped in quotes. Whether the + operator will be used to concatenate or add depends on the context. If the operands are strings, concatenation is assumed, else, if they are numbers, addition is assumed. If you wish to concatenate numbers then they must be wrapped in quotes so that they are interpreted as strings. Script 6 - Concatenating numbers and strings together <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>variables</title> </head> <body> <script type="text/javascript"> num1 = 3; num2 = 6; sum = num1 + num2; document.write(num1 + " + " + num2 + " = " + sum); </script> </body> </html> What is happening in Script 6? Try it! Page 9 of 14

10 1.3 - Input forms Up to this point, you have hardcoded the input values into the code. Generally, the input is supplied by the user via a user interface. A form is a common example of such an interface. Let s create a simple calculator to illustrate STEP 1 Create the HTML form using the HTML code shown in Script 7. Knowledge of HTML is assumed. Script 7 - HTML form <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso "> <title>add two numbers</title> </head> <body> <form id="form1" name="form1" method="post" action=""> <p> <label for="num1"></label> Number 1: <input type="text" name="num1" id="num1" /> </p> <p> <label for="num2"></label> Number 2: <input type="text" name="num2" id="num2" /> </p> <p> <label for="add"></label> <input type="button" name="add" id="add" value="add" /> </p> </form> </body> </html> The Number 1 and Number 2 input field will allow the user to supply two numbers to add up upon clicking the Add button. Page 10 of 14

11 STEP 2 Now, in the head section, add the code shown in Script 8: Script 8 - JavaScript to add two numbers together <script type="text/javascript"> function myaddfunction(num1, num2) { } </script> num1 = parseint(num1); num2 = parseint(num2); sum = num1 + num2; alert(num1 + " + " + num2 +" = " + sum); STEP 3 In the button tag add an onclick event as show in the code below. <p> <label for="add"></label> <input type="button" name="add" id="add" value="add" onclick="javascript: myaddfunction(this.form.num1.value, this.form.num2.value);"/> </p> STEP 4 Load the page and try the script. If it doesn t work, look for any coding errors. Two new constructs have been introduced in the code above: Functions and dot notation Functions Functions are simply containers containing code. When a function is called, the code in the function is run. For example: function paint_wall(room, colour) { Go to hardware store Buy paint with the colour ***specified in the brackets above*** Return back home to the room ***specified in the brackets above*** Open tin of paint Get paint brush and dip into paint Page 11 of 14

12 and so on... } Every time the function paint_garage_wall("garage", "green") is called, the garage will be painted green. What would happen if the function is called? paint_garage_wall("kitchen", "brown") Code comments On the line function myaddfunction(num1, num2) we have defined a userdefined function. It encapsulates the code between the opening and closing curly braces { }. Look at the button tag of the form. Notice the inclusion of the "onclick" event. Whenever the "Add" button is clicked, the event myaddfunction(this.form.num1.value, this.form.num2.value) is fired. This calls the function "myaddfunction(num1, num2)" passing the value "this.form.num1.value" and "this.form.num2.value" into "num1" and "num2" of the function respectfully. The code in the function is now run. "this.form.num1.value" is the value supplied in the first textbox in the form. "this.form.num2.value" is the value supplied in the second textbox in the form. We'll look at the dot notation shortly. num1 and num2 is cast as a number with the built-in function parseint(). It typecasts num1 and num2 as numbers. This is necessary as form content is always interpreted as strings. Next the two numbers are added together and stored in the variable sum The built-in "alert()" function is then called. This pops up an alert box containing the sum. Upon closing the alert box, the function exits. Page 12 of 14

13 1.5 Objects and Dot Notation JavaScript code is an object-oriented language. In JavaScript, the world is broken up into things (objects). These objects are contained in other things much like a kitchen (an object) is contained in a house, also an object. Objects comprise of two parts: properties and methods. Properties store the characteristics of an object, e.g., wall colour of the kitchen is green. Methods allow the programmer to do something to the object e.g., turn the lights in the kitchen on. Look at the following diagram. To switch on the lights in the garage use dot notation as follows: House.Garage.turnLightsOn() How would you get the wall colour of the bedroom? How would paint the kitchen blue? So, back to our calculator, the "this.form.num1.value" should now make more sense: "this" is the button object itself. "form" is a pointer to the form object that contains the button. "num1" is a pointer to the first textbox object in the form that contains the first number to be added. Page 13 of 14

14 "value" is a property of the first textbox object in the form that contains the textbox's assigned value. Other example uses: To change the web page's background colour red, type in document.body.style.background = 'red'; To change the colour of a table row blue, type in document.getelementbyid('mytable').style.backgroundcolor = 'blue'; How would you colour in the row of a table? Page 14 of 14

Unit Notes. ICAWEB501A Build a dynamic website Topic 4 Test web application

Unit Notes. ICAWEB501A Build a dynamic website Topic 4 Test web application Unit Notes ICAWEB501A Build a dynamic website Topic 4 Test web application Copyright, 2014 by TAFE NSW - North Coast Institute Date last saved: 10 March 2014 by Amanda Walker Version: 1.0 # of Pages =