JavaScript Basics

English 3368

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

JavaScript Basics
• What JavaScript is:
– Extension of HTML – An object-based scripting language

• What JavaScript isn’t:
– Java – A full object-oriented prog. environment

• What JavaScript enables:
– Interactivity

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 doesn’t do much

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 user’s disk

Putting JavaScript into Pages
• Direct Insertion
– Inside <head> tags (deferred script) – Within <body> (immediate script)

• Embedded inline
– Inside other HTML tags (as attribute values)

• External references
– In external .js files (as deferred functions)

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

JavaScript Language
• Objects
• Img, form, checkbox, button, textarea

• Attributes
• Height, width, src, href, bgcolor, name

• Methods
• Onclick, focus, alert, getDate(), scroll

• Statements
• Document.myimage.src=“somepic.jpg”

• Functions
• • • • Function doSomething() { …… statements ….. }

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

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.value=“Click me”

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

Programming JavaScript
• Variables
– Howdy, numberRight, score, Ralph

• Data types
– 12, 987.654, true/false, “Texas Tech”

• Operators
– >=, ==, +=, ||, <, >, etc.

• Control statements
– If, if….else, for, etc.

• Keywords
– Var, true, false, int, const, new, return

Programming Rules
• • • • Case matters Quotes (or not) matter Matching braces matter Use indenting and semicolons

<script language=“javascript”> Function msgBox(boxText) { Alert(boxText); } </script>

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

Example 1 Code
<h2>Example 1: Time-Sensitive Welcome</h2> <p>In 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. </p> <h3> <script language="javascript"> var d = new Date(); var h = d.getHours(); if (h < 12) document.write("Good Morning."); else if (h < 17) document.write("Good Afternoon."); else document.write("Good Evening."); </script>

JavaScript Example 2
• Mouseover picture change
– – – – Event handlers JavaScript as attribute values The “this” object Embedded quotes

Example 2 Code
<h2>Example 2: Mouseover Picture Change</h2>

<p>When 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.</p>

<img border="1" src="../images/Locke3.gif" width="108" height="151" OnMouseOver="this.src='../images/Locke1.gif'" ONMouseOut="this.src='../images/Locke3.gif'">

JavaScript Example 3
• Smooth Scrolling Button
– – – – Event handler JavaScript as attribute value External .js function call Loop

• Resize Window Button
– Randomization – arithmetic

Example 3 Code (html doc)
<html><head><title>3368 JavaScript Examples</title> <link REL="stylesheet" HREF="3368style.css" TYPE="text/css"> <Script Language="Javascript" SRC="JavaEx.js"></Script> </head> . . . . . <h2>Example 3: Manipulating the window through JavaScript</h2> <p>When you click on this button, the window will resize to a random size. </p> <FORM> <input type=button value="Smooth Scroll" OnClick="SmoothScroll()"> <input type=button value="Resize Window" OnClick="RandomWindow()">

</FORM>

Example 3 Code (.js file)
rnd.today=new Date(); rnd.seed=rnd.today.getTime();

function rnd() { rnd.seed = (rnd.seed*9301+49297) % 233280; return rnd.seed/(233280.0); };

function rand(number) { return Math.ceil(rnd()*number); };

Example 3 Code (.js file cont’d)
function SmoothScroll() { for (I=1; I<=500; I++) { window.scroll(0, 500-I); } };

function RandomWindow() { window.resizeTo(rand(900)+200, rand(400)+200); window.scroll(1000, 1000); };

Conclusion
• Where do you get help?
– Ask.com, google.com, etc.
• “free javascript code”, “javascript window”,“javascript help”, etc.

– Books
• Idiot’s Guide, Bible of JavaScript