Post on 24-Feb-2016
description
CMPT 100 : INTRODUCTION TO COMPUTING
TUTORIAL #4 : JAVASCRIPT
By Wendy Sharpe1
BEFORE WE GET STARTED . . . If you have not been to a tutorial at all
then you must catch up on your own time
Log onto the lab computer (in Windows) Create a folder for this tutorial on H:// drive Log onto Moodle and open tutorial 4 notes
Click on oldmac.html link and save as to your newly created folder
Open Notepad++ Start – All Programs – Course Specific
Applications – Notepad++ We won’t be using Kompozer but you can use it
in conjunction with Notepad++2
TUTORIAL 4 OVERVIEW Start with an algorithm JavaScript variables Using the document.prompt() function Using the document.write() function String concatenation Background colour Debugging JavaScript
3
THE OLD MAC ALGORITHM4
WHAT CHANGES IN THE SONG? Write the title Write the first line Write second line
Write “animal” Write second line pt 2
Repeat 3 with “sound” x 2 Write last line
But where do the animals and sounds come from? 5
REFINING OUR ALGORITHM Write the title
Prompt for animal Get animal Prompt for sound Get sound Prompt for colour Get colour
Write the first line Write second line
Write “animal” Write second line pt 2
Repeat 3 with “sound” x 2 Write last line 6
WHERE DO YOU PUT THE SCRIPT? If you want the JavaScript to load before the
rest of the page is needs to be in the <head></head> section But a script will work in either head or body
section of your page Try both to see how they work
If you want the JavaScript to load before the rest of the page is needs to be in the <head></head> section
We’re going to move our Old MacDonald script template from the body section to the head section
7
JAVASCRIPT VARIABLES8
NAMING JAVASCRIPT VARIABLES JavaScript variables are used to hold values
or expressions var animal
Rules for variable names: Case sensitive Variables must begin with a letter or the
underscore _ character Our variables in this script will be initialized
to an empty string “” You will get an error if you don’t initialize the
variable to the empty string, and then attempt to concatenate another string 9
DOCUMENT PROMPT() FUNCTION
10
DOCUMENT PROMPT() FUNCTION A command that’s already been programmed
into JavaScript You need to tell the computer that you want to
use it
General structure:prompt(“this is your physical prompt text”,
“default”);
Good programming practice is to always leave a default value in your prompt
Use = to assign the value of the prompt to the variable that you are prompting the user for E.g., animal = prompt("Enter a kind of animal","duck");
11
NOW UPDATE YOUR OLDMAC SCRIPT
Create the three variables
Write the three prompts for the variables
12
DOCUMENT WRITE() FUNCTION
13
DOCUMENT WRITE() FUNCTION Most basic JavaScript function
Prints specified text to the screen
If you want to combine commands, use the . E.g., document.write(“The stuff in here is called
an argument or arguments”); Arguments can be html tags
Now, put a header of size one inside a write() function
For additional reading: http://www.mediacollege.com/internet/javascript/basic/document-write.html 14
STRING CONCATENATION USING DOCUMENT.WRITE();
15
USING VARIABLES, CONCATENATING STRINGS, AND WRITING TO THE SCREEN use + to put two strings together, or a string
and a variable do not put “” around a variable Watch where you put spaces between strings
and variables E.g., var adjective = “fantastical”;document.write(“My string is ”+adjective+“ and
formatted beautifully <br />”);
Now, update the rest of the Old MacDonald song
If you think you’ve got this, open your html document in a web browser
16
CHANGING THE BACKGROUND COLOUR . . . OR COLOR
17
USING BGCOLOR() FUNCTION Use with the .
E.g., document.bgColor() = color; Note the American English spelling of colour, and
it will not work if you spell its name incorrectly
Now, change the bgColor = myVariable in your Old Mac script
18
DEBUGGING JAVASCRIPT19
SCRIPT NOT WORKING? Common places to look for errors
Did you spell variables correctly? American English spelling of words like color Are all semi-colons where they need to be? Use syntax highlighting to find errors Did you concatenate your strings properly?
+ in the right places Proper use of double quotation marks
Using the error console in Firefox to find problems with your script Tools – Error Console
Tip: clear the error console, then force refresh Errors option will give you information about
what line of code has the problem 20
FINISHING THE TUTORIAL EXERCISE
21
TUTORIAL EXERCISE Add a second verse to the song, with a new
set of animals from the user. Create new prompts for the second set of animals and use document.write to display the second verse.
Create a new document. Create three prompts to request some information from the user: Their name Their favorite color A number between 1 and 10
Use the information from the user to create a story. Use document.write to display the story.
22
POINT TO PONDER FOR NEXT WEEK’S TUTORIAL
23
A QUESTION TO PONDER FOR NEXT WEEK’S TUTORIAL . . .
What happens to the Old Mac song if there’s an elephant? Or an aardvark?
24
AN ALGORITHM FOR AN ELEPHANT OR AN AARDVARK
If first character of variable name is = “a” || “e” || “i” || “u”Write “an”
elsewrite “a”
25
QUESTIONS?26