introduction to javascript programming
DESCRIPTION
Introduction to JavaScript Programming. World Wide Web. Original purpose was locating and displaying information Small academic and scientific community Commercial applications Static HTML Need for more interactive and appealing. JavaScript. Joint venture – Sun & Netscape - PowerPoint PPT PresentationTRANSCRIPT
Introduction to JavaScript Programming
World Wide Web Original purpose was locating and
displaying information Small academic and scientific community
Commercial applications Static HTML Need for more interactive and appealing
JavaScript Joint venture – Sun & Netscape Netscape Communications
LiveScript Sun Microsystems
Simplify its Java language Open language – anyone can use Embedded in the HTML document
JavaScript vs. Java Java is full-fledged, object-oriented
language Can be used to create applets Applets – small programs designed
to execute within another application Must use some type compiler, such
as Sun’s JDK
JavaScript Statements/variables are case sensitive Interpreted language – code runs only on
a JS interpreter built into browser Version of JS depends on browser version IE supports additional features –
Microsoft calls its version Jscript Older browsers may not handle newer JS
codes
JavaScript and HTML Tags HTML (hypertext markup language)
Microsoft FrontPage Macromedia Dreamweaver Microsoft Word Netscape Composer Text editor, such as Notepad
Tag – instruction surrounded by ‘<‘ and ‘>’ symbols
The instructions are call attributes and have values assigned to them
JavaScript and HTML Tags
<BODY TEXT = “00008B” BACKGROUND = “image.gif”>
Tag Attributes
<INPUT Type = “text” Name = “PhoneNumber” Value = “ “ Size = 17>
Tag Attributes
SCRIPT Tags Four attributes
LANGUAGE – identifies version of JavaScript
SRC – text string for URL/filename of JS source file
TYPE – specify the scripting language DEFER – beyond the scope
SCRIPT Tags
<SCRIPT LANGUAGE = “JavaScript”><!– Hide from old browsersPlace your JS code in this area//--></SCRIPT>
Tag Attributes
HTML Comments Embedded JS code needs to be
hidden from incompatible browsers
<!-- beginning comment block --> ending comment block
JavaScript Comments Line Comments
// This is a line comment
Block Comments /* Beginning line Still a comment Ending line */
JavaScript Benefits Web Standard
Alternative – Microsoft VBScript Follows Visual Basic syntax
VBScript not supported in Netscape Navigator
Provide instant feedback without CGI (Common Gateway Interface) scripts
JavaScript Cookies Cookies – data sent and stored in
files on user’s computer Navigator – cookies.txt IE – Cookies folder
Track user’s preferences JavaScript code limits access to
user’s hard drive – browser controls cookie location
JavaScript Basics Common types of variables
Numeric - numbers Strings - letters Boolean – true/false or yes/no
JavaScript Basics Variables – Naming Conventions
Name must begin with letter or underscore Rest of name – letters, numbers, or
underscores Avoid reserved words (appendix A) No spaces or punctuation Variables are case sensitive Defined by keyword var
JavaScript Basics Literal – actual number or char
text, rather than a calculated result or value input from a keyboard
var browserType = “Netscape”
var width = 3
var Test = “\”Hey there!\” she said.”Special characters (table I-2):
String literal:
JavaScript Basics write() – method used to write text
to the Web page alert() – method used to display
messages in a dialog box
Discussed in more detail in Project 1
JavaScript Basics Expression – formula to assign
values to variables
average = totalValue/Countvar Count = 0
JavaScript Basics Arithmetic operators – Table I-3
Increment/decrement – Table I-4
Arithmetic expressions – Table I-5
Mathematical order – Table I-6
Concatenation
Conditionals Allow comparisons of values
See Table I-7
If and While statements
Conditionalsvar todaysDate = new Date()var numHours = todaysDate.getHours()if(numHours >= 12) { document.write(“Good Afternoon”) }else { document.write(“Good Morning”) }the rest of your code…
Conditionals
while (condition) { the JavaScript code to be executed while the condition is True }the JavaScript code to be executed when the loop is finished
Functions Way to write several lines of script
and use them repeatedly as neededfunction Greetings() { alert(“Hello, this is a friendly message.”) }messageStr = “This is a customized message.”function Greetings(messageStr) { alert(messageStr) }
All-purposemessage:
Objects, Properties, and Methods Object – real-world entity (book, car) JS is object oriented (OO) Object-Oriented Programming (OOP) Object is described by its properties Properties are attributes that help
differentiate one object from another Separate object and property with a
period Ex. car.color = “red”
Objects, Properties, and Methods Method – function or action you
want the object to perform (behavior) Ex. car.drive()
Some methods require an argument Argument is a value passed to the
method
Objects, Properties, and Methods JS uses many objects, but not a
complete OOP language JS provides many built-in objects
Ex. Date, Arrays, windows, and forms JS allows you to define and create
your own When defining objects, assign unique
and meaningful names (not form1)
Events Action that occurs, such as a user
clicking a link or button, or user entering data in a form textbox
JS reacts to events by Event Handlers Table I-8 JavaScript Quick Reference (page J A.5)
Events are “triggered” Ex. onMouseOver
Events:Forms Many event handlers work with
forms Ex. onFocus, onBlur, onChange,
onSubmit, and onReset<INPUT TYPE = “Button” Value = “White” onclick = “document.bgColor = ‘White’”><BODY bgColor = “White” onload = “timeLine()”><INPUT TYPE = “Button” Name = “SubmitText” Value = “Submit” onclick = “Transmit()”>
Frames Frame is a feature that allows a
browser window to be split into smaller units.
http://home.mcom.com/assist/net_sites/frames.html<FRAMESET COLS = “25%,75%”> <FRAME SRC = “TOC.HTML”> <FRAME SRC = “MAINPAGE.HTML”></FRAMESET>
Arrays Collection of data items identified
by a singular name Defined by using built-in Array
objectvar currMonth = new Array(13)currMonth[1] = “January”currMonth[2] = “February”…currMonth[12] = “December”
Length
Arrays Thirteen (13) elements defined
because JS first array element is [0] Older browsers use [0] to hold the
length Good practice to leave element [0]
empty and start with element [1] Creating arrays discussed in Project
3