Java Script Basics

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>
• 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. 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'">
• 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

Java Script Basics

Încărcat de

Informații document

Descriere originală:

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Java Script Basics

Încărcat de

Drepturi de autor:

Formate disponibile

JavaScript Basics

<p>When you move your mouse over this picture,

<img border="1" src="../images/Locke3.gif" width="108"

S-ar putea să vă placă și