COMM 1213 H1
COMP 4923 X1
JavaScript 1
(Readings: Ch. 10, 11 Knuckles)
1
Outline
• Intro to JavaScript
• Fitting JavaScript into HTML
• Variables and Operators
• Prompting for Input and other Functions
• Programming Errors
• Making Decisions with Boolean Logic
2
JavaScript
• JavaScript – Runs within a browser, can
manipulate most aspects of HTML
webpage.html
Browser
JavaScript Interpreter
Operating System
Computer Hardware
3
JavaScript
• Originally “LiveScape”, developed independent of
•
•
•
•
Java at NetScape by Brendan Eich
A small “scripting” language designed to
enhance webpages by manipulating webpage
objects
Code is embedded in HTML, and called by HTML
Can manipulated most aspects of a webpage
For generation of dynamic content but less
complex computation and data manipulation
4
JavaScript
• Examples:
– Movement of browser windows
– Validation of entered FORM data
– Event handling
5
Why learn JavaScript?
• A good first step to learning programming
– All fundamental concepts are used
– Object-Oriented Programming (OOP)
• Allows you to quickly build dynamic
content for webpages
• JavaScript code can be saved and reused
• Use existing libraries of JavaScript code
6
To Eliminate the Annoying Security
Message …
• Open IE
• Click Tools, Internet options, Advanced
• Scroll down to Security
• Enable “Allow active content to run files
on My Computer”
7
JavaScript Placement in HTML
• Can be placed in the BODY or HEAD of an HTML
document (most typically in the HEAD .. Why?)
<HTML>
<HEAD>
<SCRIPT LANGUAGE=JavaScript><!-document.write("<B>I'm first, man!</B>");
//-->
</SCRIPT>
</HEAD>
<BODY>
<P>OK, buddy. That's fine.<BR>
<SCRIPT LANGUAGE=JavaScript><!-document.write("Last but not least.");
//--></SCRIPT>
</BODY>
</HTML>
Hides JavaScript
from browers that
cannot interpret it.
JavaScript statements
end with a “;”
object - document,
method - write()
… also know as a
function
8
Variables: Types and Names
• Variable is a named location in memory
• Variables must first be declared:
var x; var name,z;
• Variables can be assigned values:
Note the
difference
x = 10; name = “Bubba”; z = x+1; x = x+1;
• Can be initialized: var x = 10;
• Can be of different types of values:
– Numeric values such as 3.14159 or 2006
– Character string values as “Please enter ID#” and “2006”
• Variable names can be composed of:
– letters, numeric digits (except first char), underscore “_”
9
Prompting / Storing User Input
Declare variable
<HTML>
<HEAD>
<script LANGUAGE="Javascript"><!-var x;
x=prompt("Please enter your name.","");
document.write(x);
//--></script>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<P>
</BODY>
</HTML>
Assign variable a
value, default =“”
Use variable in
calling of method
10
Math Operators on Variables
<HTML>
<HEAD>
<SCRIPT LANGUAGE=JavaScript><!-Math Operators:
var age;
+ addition
age=prompt("Please enter your age.","");
- subtraction
var dogage;
* multiplication
dogage=age*7;
/ division
document.write("You may be ");
document.write(age);
document.write(" years old but, if you were a dog, you would be ");
document.write(dogage);
document.write(" years old!");
//--></SCRIPT>
</HEAD>
<BODY>
<P>
</BODY>
</HTML>
11
Character Operators on Variables
• Concatenation of strings:
<HTML>
<HEAD>
<SCRIPT LANGUAGE=JavaScript><!-var dog;
dog="Scooby"+" "+"Doo";
document.write(dog);
//--></SCRIPT>
</HEAD>
<BODY>
<P>
</BODY>
</HTML>
12
Beware of Mixing Data Types and
Operators
<HTML>
<HEAD>
Now try changing
<SCRIPT LANGUAGE=JavaScript><!-the * to a +
var age,multiplier,dogyears;
age = "2";
multiplier = "7";
dogyears=age * multiplier;
document.write("The dog's age in dog-years is ",dogyears,".");
//--></SCRIPT>
</HEAD>
<BODY>
<P>
</BODY>
</HTML>
13
Converting Strings to Numbers
Converts string to
<HTML>
floating point
<HEAD>
<SCRIPT LANGUAGE=JavaScript><!-number (3.14159)
var age,multiplier,dogyears;
age = "2";
age = parseFloat(age);
Converts string to
multiplier = "7";
an integer (22, 107)
multiplier = parseInt(multiplier);
dogyears=age + multiplier;
document.write("The dog's age in dog-years is ",dogyears,".");
//--></SCRIPT>
</HEAD>
If strings and
<BODY>
numbers are mixed
<P>
</BODY>
then a NaN value can
</HTML>
be generated
14
Functions
• Procedural functions:
– document.write(“hello”);
– Returns no value
• Value functions:
– parseFloat(“3.14159”)
– Returns a numeric value of 3.14159
– What other value functions have we used?
15
Program Errors
• Programs almost always have “bugs”
• “Debugging” programs is a skill
• Types:
– Syntax Errors:
• document.write(“Hello there”)
• age=prompt(“Enter your age.”);
– Logic Errors:
• Avg=50+100/2;
– User Errors:
• age=prompt(“Enter your age.”);
and user enters “twenty one”
16
Avoiding Program Errors
• Design logic of code prior to sitting at the
keyboard - draw/write it down in English
• Have a friend look at the logic
• Walk through code pretending to be the
computer
• Have a friend look at the code
• Verify input data types .. later
17
Making Decisions – Boolean Variables
(Ch.11)
• Boolean variables or a Boolean expression can
have one of two literal values:
– true or false
• var x; x = false; x=(a>c);
• True or False ?:
x=(1<2);
y=(3.14>3.14);
z=(3.14>=3.14);
X1=((12-3)>((17+3)/2));
check=(1==2);
fin=(2!=1);
!= is not equal
18
Making Decisions –
Boolean Truth Tables
X
F
F
T
T
Y
F
T
F
T
&&=AND
F
F
F
T
||=OR
F
T
T
T
19
Making Decisions - Checking Strings
<HTML>
<HEAD>
<script LANGUAGE="Javascript"><!-var num,empty;
num=prompt("Please enter your name.","");
empty=(num=="");
if (empty) {
num=prompt("Please, last chance to enter your name.","");
empty=(num=="");
}
document.write(num," , empty is ",empty);
//--></script>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<P>
</BODY>
</HTML>
20
If .. Then .. Else
<HTML>
<HEAD>
<script LANGUAGE="Javascript"><!-var num,empty;
num=prompt("Please enter your name.","");
empty=(num=="");
if (empty) {
num=prompt("Please, last chance to enter your name.","");
empty=(num=="");
} else {
document.write("Great .. you got it the first time!! <br>");
}
document.write(num," , empty is ",empty);
//--></script>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<P>
</BODY>
</HTML>
21
Further Examples:
• An Interactive Pizza Order Program
http://www.cknuckles.com/intro/lessons/source/L11/f11.5.html
• Basic Input Verification
– Procedure function alert(x)
• Displays a small window with message X
– Value function isNan(x)
• Returns “TRUE” if x is not a number (NaN)
http://www.cknuckles.com/intro/lessons/source/L11/f11.6.html
22
Resources
•
•
•
•
http://www.w3schools.com/js/js_examples.asp
http://www.tizag.com/javascriptT/index.php
http://www.js-examples.com/page/javascripts.html
http://javascript.internet.com/
23
THE END
[email protected]
24
© Copyright 2026 Paperzz