Introduction to JavaScript Programming
description
Transcript of Introduction to JavaScript Programming
![Page 1: Introduction to JavaScript Programming](https://reader036.fdocuments.net/reader036/viewer/2022081505/56815b11550346895dc8bb78/html5/thumbnails/1.jpg)
Introduction to JavaScript Programming
![Page 2: Introduction to JavaScript Programming](https://reader036.fdocuments.net/reader036/viewer/2022081505/56815b11550346895dc8bb78/html5/thumbnails/2.jpg)
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
![Page 3: Introduction to JavaScript Programming](https://reader036.fdocuments.net/reader036/viewer/2022081505/56815b11550346895dc8bb78/html5/thumbnails/3.jpg)
JavaScript Joint venture – Sun & Netscape Netscape Communications
LiveScript Sun Microsystems
Simplify its Java language Open language – anyone can use Embedded in the HTML document
![Page 4: Introduction to JavaScript Programming](https://reader036.fdocuments.net/reader036/viewer/2022081505/56815b11550346895dc8bb78/html5/thumbnails/4.jpg)
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
![Page 5: Introduction to JavaScript Programming](https://reader036.fdocuments.net/reader036/viewer/2022081505/56815b11550346895dc8bb78/html5/thumbnails/5.jpg)
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
![Page 6: Introduction to JavaScript Programming](https://reader036.fdocuments.net/reader036/viewer/2022081505/56815b11550346895dc8bb78/html5/thumbnails/6.jpg)
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
![Page 7: Introduction to JavaScript Programming](https://reader036.fdocuments.net/reader036/viewer/2022081505/56815b11550346895dc8bb78/html5/thumbnails/7.jpg)
JavaScript and HTML Tags
<BODY TEXT = “00008B” BACKGROUND = “image.gif”>
Tag Attributes
<INPUT Type = “text” Name = “PhoneNumber” Value = “ “ Size = 17>
Tag Attributes
![Page 8: Introduction to JavaScript Programming](https://reader036.fdocuments.net/reader036/viewer/2022081505/56815b11550346895dc8bb78/html5/thumbnails/8.jpg)
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
![Page 9: Introduction to JavaScript Programming](https://reader036.fdocuments.net/reader036/viewer/2022081505/56815b11550346895dc8bb78/html5/thumbnails/9.jpg)
SCRIPT Tags
<SCRIPT LANGUAGE = “JavaScript”><!– Hide from old browsersPlace your JS code in this area//--></SCRIPT>
Tag Attributes
![Page 10: Introduction to JavaScript Programming](https://reader036.fdocuments.net/reader036/viewer/2022081505/56815b11550346895dc8bb78/html5/thumbnails/10.jpg)
HTML Comments Embedded JS code needs to be
hidden from incompatible browsers
<!-- beginning comment block --> ending comment block
![Page 11: Introduction to JavaScript Programming](https://reader036.fdocuments.net/reader036/viewer/2022081505/56815b11550346895dc8bb78/html5/thumbnails/11.jpg)
JavaScript Comments Line Comments
// This is a line comment
Block Comments /* Beginning line Still a comment Ending line */
![Page 12: Introduction to JavaScript Programming](https://reader036.fdocuments.net/reader036/viewer/2022081505/56815b11550346895dc8bb78/html5/thumbnails/12.jpg)
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
![Page 13: Introduction to JavaScript Programming](https://reader036.fdocuments.net/reader036/viewer/2022081505/56815b11550346895dc8bb78/html5/thumbnails/13.jpg)
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
![Page 14: Introduction to JavaScript Programming](https://reader036.fdocuments.net/reader036/viewer/2022081505/56815b11550346895dc8bb78/html5/thumbnails/14.jpg)
JavaScript Basics Common types of variables
Numeric - numbers Strings - letters Boolean – true/false or yes/no
![Page 15: Introduction to JavaScript Programming](https://reader036.fdocuments.net/reader036/viewer/2022081505/56815b11550346895dc8bb78/html5/thumbnails/15.jpg)
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
![Page 16: Introduction to JavaScript Programming](https://reader036.fdocuments.net/reader036/viewer/2022081505/56815b11550346895dc8bb78/html5/thumbnails/16.jpg)
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:
![Page 17: Introduction to JavaScript Programming](https://reader036.fdocuments.net/reader036/viewer/2022081505/56815b11550346895dc8bb78/html5/thumbnails/17.jpg)
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
![Page 18: Introduction to JavaScript Programming](https://reader036.fdocuments.net/reader036/viewer/2022081505/56815b11550346895dc8bb78/html5/thumbnails/18.jpg)
JavaScript Basics Expression – formula to assign
values to variables
average = totalValue/Countvar Count = 0
![Page 19: Introduction to JavaScript Programming](https://reader036.fdocuments.net/reader036/viewer/2022081505/56815b11550346895dc8bb78/html5/thumbnails/19.jpg)
JavaScript Basics Arithmetic operators – Table I-3
Increment/decrement – Table I-4
Arithmetic expressions – Table I-5
Mathematical order – Table I-6
Concatenation
![Page 20: Introduction to JavaScript Programming](https://reader036.fdocuments.net/reader036/viewer/2022081505/56815b11550346895dc8bb78/html5/thumbnails/20.jpg)
Conditionals Allow comparisons of values
See Table I-7
If and While statements
![Page 21: Introduction to JavaScript Programming](https://reader036.fdocuments.net/reader036/viewer/2022081505/56815b11550346895dc8bb78/html5/thumbnails/21.jpg)
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…
![Page 22: Introduction to JavaScript Programming](https://reader036.fdocuments.net/reader036/viewer/2022081505/56815b11550346895dc8bb78/html5/thumbnails/22.jpg)
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
![Page 23: Introduction to JavaScript Programming](https://reader036.fdocuments.net/reader036/viewer/2022081505/56815b11550346895dc8bb78/html5/thumbnails/23.jpg)
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:
![Page 24: Introduction to JavaScript Programming](https://reader036.fdocuments.net/reader036/viewer/2022081505/56815b11550346895dc8bb78/html5/thumbnails/24.jpg)
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”
![Page 25: Introduction to JavaScript Programming](https://reader036.fdocuments.net/reader036/viewer/2022081505/56815b11550346895dc8bb78/html5/thumbnails/25.jpg)
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
![Page 26: Introduction to JavaScript Programming](https://reader036.fdocuments.net/reader036/viewer/2022081505/56815b11550346895dc8bb78/html5/thumbnails/26.jpg)
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)
![Page 27: Introduction to JavaScript Programming](https://reader036.fdocuments.net/reader036/viewer/2022081505/56815b11550346895dc8bb78/html5/thumbnails/27.jpg)
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
![Page 28: Introduction to JavaScript Programming](https://reader036.fdocuments.net/reader036/viewer/2022081505/56815b11550346895dc8bb78/html5/thumbnails/28.jpg)
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()”>
![Page 29: Introduction to JavaScript Programming](https://reader036.fdocuments.net/reader036/viewer/2022081505/56815b11550346895dc8bb78/html5/thumbnails/29.jpg)
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>
![Page 30: Introduction to JavaScript Programming](https://reader036.fdocuments.net/reader036/viewer/2022081505/56815b11550346895dc8bb78/html5/thumbnails/30.jpg)
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
![Page 31: Introduction to JavaScript Programming](https://reader036.fdocuments.net/reader036/viewer/2022081505/56815b11550346895dc8bb78/html5/thumbnails/31.jpg)
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