Introduction to JavaScript Programming - Madisonville ...

mewstennisSoftware and s/w Development

Nov 4, 2013 (4 years and 5 days ago)

76 views

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 browsers

Place 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/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.”)


}

messageStr = “This is a customized message.”

function Greetings(messageStr) {


alert(messageStr)


}

All
-
purpose

message:

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