JavaScript Basics

1
JavaScript Basics

• English 3368

2
Overview

• JavaScript Concepts
• JavaScript in HTML documents
• JavaScript language
• JavaScript samples

3
JavaScript Basics

• What JavaScript is
• Extension of HTML
• An object-based scripting language
• What JavaScript isnt
• Java
• A full object-oriented prog. environment
• What JavaScript enables
• Interactivity

4
What Can JavaScript Do?

• Accept Input
• Text fields, check boxes, buttons, etc.
• Process Data
• Make decisions, manipulate variables
• Produce Output
• Messages, status lines, windows
• Why?
• HTML doesnt do much

5
What Can JavaScripts Do?

• Modify Pages on the Fly
• Change text, replace images, special effects
• Offer Selections to the User
• Drop down menus, check boxes, buttons
• Manipulate Windows
• Open windows, write to them, close them
• BUT no reading or writing to users disk

6
Putting JavaScript into Pages

• Direct Insertion
• Inside ltheadgt tags (deferred script)
• Within ltbodygt (immediate script)
• Embedded inline
• Inside other HTML tags (as attribute values)
• External references
• In external .js files (as deferred functions)

7
JavaScript Language

• Objects
• Things on a page
• Attributes
• Properties of objects
• Methods
• Actions taken by objects
• Statements
• Lines of assembled components
• Functions
• Reusable groups of statements

8
JavaScript Language

• Objects
• Img, form, checkbox, button, textarea
• Attributes
• Height, width, src, href, bgcolor, name
• Methods
• Onclick, focus, alert, getDate(), scroll
• Statements
• Document.myimage.srcsomepic.jpg
• Functions
• Function doSomething()
• statements ..

9
Event Handlers

• Special methods assoc.with certain objects.
• Called automatically when events occur
• You specify what happens
• onClick, onMouseDown, onMouseUp
• onFocus, onBlur, onKeyPress
• onLoad, onUnload, onSubmit

10
Object Hierarchy

• Fully-qualified location of an Object
• Allows multiple instances of similar objects
• Avoids duplication of object names
• Window
• Document
• Form
• Object
• Property or method
• Value or action
• Document.form1.button3.valueClick me

11
Programming JavaScript

• Variables
• Named elements that can change value
• Data types
• Integer, floating-point, boolean, string
• Operators
• Assignment, comparison, boolean, string
• Control statements
• Conditions, loops
• Keywords
• Reserved words with special meaning

12
Programming JavaScript

• Variables
• Howdy, numberRight, score, Ralph
• Data types
• 12, 987.654, true/false, Texas Tech
• Operators
• gt, , , , lt, gt, etc.
• Control statements
• If, if.else, for, etc.
• Keywords
• Var, true, false, int, const, new, return

13
Programming Rules

• Case matters
• Quotes (or not) matter
• Matching braces matter
• Use indenting and semicolons
• ltscript languagejavascriptgt
• Function msgBox(boxText)
• Alert(boxText)
• lt/scriptgt

14
JavaScript Example 1

• Time-sensitive welcome
• Direct insertion script
• Predefined Date() object
• If/Else control
• Variables
• Objects
• Methods

15
Example 1 Code
lth2gtExample 1 Time-Sensitive Welcomelt/h2gt ltpgtIn
the next line, this web page says Good Morning,
Good Afternoon, or Good Night to the user,
depending on what time the browser's machine has.
lt/pgt lth3gt ltscript language"javascript"gt var d
new Date() var h d.getHours() if (h lt
12) document.write("Good Morning.") else if
(h lt 17) document.write("Good
Afternoon.") else document.write("Good
Evening.") lt/scriptgt
16
JavaScript Example 2

• Mouseover picture change
• Event handlers
• JavaScript as attribute values
• The this object
• Embedded quotes

17
Example 2 Code
lth2gtExample 2 Mouseover Picture
Changelt/h2gt ltpgtWhen you move your mouse over
this picture, JavaScript will swap in a second
picture immediately upon the Mouseover
event.nbsp Immediately upon Mouseout,the first
picture will be immediately swapped.lt/pgt ltimg
border"1" src"../images/Locke3.gif" width"108"
height"151" OnMouseOver"this.src'../images/Lock
e1.gif'" ONMouseOut"this.src'../images/Locke3.gi
f'"gt
18
JavaScript Example 3

• Smooth Scrolling Button
• Event handler
• JavaScript as attribute value
• External .js function call
• Loop
• Resize Window Button
• Randomization
• arithmetic

19
Example 3 Code (html doc)
lthtmlgtltheadgtlttitlegt3368 JavaScript
Exampleslt/titlegt ltlink REL"stylesheet"
HREF"3368style.css" TYPE"text/css"gt ltScript
Language"Javascript" SRC"JavaEx.js"gtlt/Scriptgt
lt/headgt . . . . . lth2gtExample 3 Manipulating
the window through JavaScriptlt/h2gt ltpgtWhen you
click on this button, the window will resize to a
random size. lt/pgt ltFORMgt ltinput typebutton
value"Smooth Scroll" OnClick"SmoothScroll()"gt lti
nput typebutton value"Resize Window"
OnClick"RandomWindow()"gt lt/FORMgt
20
Example 3 Code (.js file)
rnd.todaynew Date() rnd.seedrnd.today.getTime()
function rnd() rnd.seed
(rnd.seed930149297) 233280 return
rnd.seed/(233280.0) function rand(number)
return Math.ceil(rnd()number)
21
Example 3 Code (.js file contd)
function SmoothScroll() for (I1 Ilt500
I) window.scroll(0, 500-I) function
RandomWindow() window.resizeTo(rand(900)200
, rand(400)200) window.scroll(1000,
1000)
22
Conclusion

• Where do you get help?
• Ask.com, google.com, etc.
• free javascript code, javascript
  window,javascript help, etc.
• Books
• Idiots Guide, Bible of JavaScript