Introduction to JavaScript Programming

Download Report

Transcript Introduction to JavaScript Programming 

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


Sun Microsystems



LiveScript
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
Tag
Attributes
<BODY TEXT = “00008B” BACKGROUND = “image.gif”>
Tag
Attributes
<INPUT Type = “text” Name = “PhoneNumber” Value = “
“ Size = 17>
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
Tag
Attributes
<SCRIPT LANGUAGE = “JavaScript”>
<!– Hide from old browsers
Place your JS code in this area
//-->
</SCRIPT>
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 width = 3
String literal:
var browserType = “Netscape”
Special characters (table I-2):
var Test = “\”Hey there!\” she said.”
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/Count
var 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
Conditionals
var 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 needed
function Greetings() {
alert(“Hello, this is a friendly message.”)
}
All-purpose
message:
messageStr = “This is a customized message.”
function Greetings(messageStr) {
alert(messageStr)
}
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 object
var 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