JavaScript

JavaScript Todd Schacherl

What is JavaScript? • Scripting vs Programming • Advantages • Disadvantages • Integrating into HTML

Scripting vs Programming • Not Compiled • Higher Level Language

Advantages • Quick Development • Easy to Learn • Platform Independence • Small Overhead

Disadvantages • No Code Hiding • Lack of Debugging and Development Tools • Not Fully Extensible (limited base of objects, properties, methods, and data types)

Integrating into HTML • <script> and <noscript> Tags • Where to Put JavaScript Code • Command Block Structure • Output Functions

<script> and <noscript> Tags <script src=“url” language=“javascript”> Commands... </script> <noscript> HTML... </noscript>

Where to Put JavaScript Code • Between <head></head> tags • Anywhere in between the <body>...</body> tags

Command Block Structure • Multiple commands combined into command blocks with curly braces ({ and }) • { • document.writeln(“Hello World”); • document.writeln(“This is neat<br>”); • } • Embedded blocks • { • JavaScript Code • { • More code • } • }

Output Functions • document.write() • Writes text and HTML to document • document.writeln() • Writes text and HTML followed by a newline character to document document.write(“Hello World\n”); document.writeln(“Hello World”);

The JavaScript Object Model • Object Methods • Object Properties • Navigator Objects • Internal or Built-in Objects • HTML-Reflected Objects

Object Methods • Objects have methods associated with them that allow objects to be manipulated and interrogated and in some cases, allow object values to be changed. • document.write(“Hello World”);

Object Properties • Another term used in context to an object-driven environment is a property. A property is a value that belongs to an object. All of the standard JavaScript objects have such properties. • object-name.property-name document.url document.body.bgcolor

Navigator Objects • window -- Top-level object in JavaScript object hierarchy. • document -- Contains properties that relate to the current HTML document. • location -- Contains properties relating to the current document’s location • navigator -- Details about the current version of Navigator • history -- Contains details of all URLs the user has visited in the current Navigator session

Internal or Built-in Objects • Array -- Array structure • Date -- Internal date and time manipulation • Math -- Mathematical object and properties • Object -- Generic object type • String -- Text string object

HTML-Reflected Objects • anchor (anchors array) -- Array of <a name> tags in current document • button -- A hypertext button created with <input type=button> • checkbox -- A checkbox created with <input type=checkbox> • elements -- All of the elements within a <form> container • form (forms array) -- An array of HTML <form> container objects • frames (frames array) -- A frameset-docuement object (window) • hidden -- A hidden text field created with <input type=hidden> • images (images array) -- an array of images, that is, <img> tags in the current document • link -- An array of hyperlinks in the current document • navigator -- Version and client information object • password -- An <input type=password> field • radio -- A radio box created with <input type=radio>

HTML-Reflected Objects (cont.) • reset -- A reset button created with <input type=reset> • select (options array) -- A <select> objects <option> elements • submit -- A submit button created with <input type=submit> • text -- A text-field created with <input type=text> • textarea -- A textarea field created with a <textarea> container

Working with Data and Information • Data Types • Using Variables • Assignment Expressions • Operators

Data Types • Numbers -- Any number, such as 1, 23, 34.5, or 34e9 • Strings -- “Hello!” or ‘Goodbye’ • Boolean -- Either true or false • Null -- a special keyword for exactly that - the null value (that is, nothing)

Using Variables • Creating Variables • Using Variables

Creating Variables • var variableName • var answer; • Use in a “variable” context • answer=100;

Using Variables • Use by name var message=“Hello World!”; document.write(message);

Assignment Expressions • = Assigns value of right operand to the left operand • += Adds the left and right operands and assigns the result to the left operand • -= Subtracts the right operand from the left operand and assigns the result to the left operand • *= Multiplies the two operands and assigns the result to the left operand • /= Divides the left operand by the right operand and assigns the value to the left operand • %= Divides the left operand by the right operand and assigns the remainder to the left operand

Operators • Arithmetic Operators • Logical Operators • Comparison Operators

Arithmetic Operators • + Addition -- 3 + 8; • - Subtraction -- 31.5 - 12.8; • * Multiplication -- 34 * 12; • / Division -- 45 / 5 • % Modulus 12 % 5 • ++ Increment -- var++ or ++var • -- Decrement -- var-- or --var • - Unary negation -- x = -x;

Logical Operators • && Logical “and” -- returns true when both operands are true; otherwise it returns false • || Logical “or” -- returns true if either operand is true. It only returns false when both operands are false • ! Logical “not” -- returns true if the operand is false and fase if the operand is true. This is a unary operator and precedes the operand

Comparison Operator • == Returns true if the operands are equal • != Returns true if the operands are not equal • > Returns true if the left operand is greater than the right operand • < Returns true if the left operand is less than the right operand • >= Returns true if the left operand is greater than or equal to the right operand • <= Returns true if the left operand is less than or equal to the right operand

Functions and Objects • Defining Functions • Creating New Objects, • Defining Properties • Adding Methods • Passing Parameters • Variable Scope • Returning Results

Defining Functions • Function command function dosomething(parameters, values) { commands; }

Creating New Objects Function item(price, partNumber, description) { this.price = price; this.partNumber = partNumber; this.description = description; } item1 = new item(“2.95”, “100134-001”, “Widget”);

Adding Methods function methodName() { some code; } Function item(price, partNumber, description) { this.price = price; this.partNumber = partNumber; this.description = description; this.methodName = methodName; }

Passing Parameters function printName(name) { document.write(name); } printName(“Bob”); var userName=“John”; printName(userName);

Variable Scope • Variables Come Into Existance Within a Function • Variables Cease to Exist When Function Ends

Returning Results function cube(number) { var cube= number * number * number; return cube; }

Using JavaScript Events • Document Events • Form Events • Image Events • Mouse Events

Document Events • Document Loading and Unloading • onLoad • When a document is loaded • onUnLoad • Allows an event to be associated with the unloading of a document or frameset-document. <body onLoad=“expr | function()”>…</body>

Form Events • Click Events: buttons, radio buttons, checkboxes, submit, and reset buttons • Focus, Blur, and Change Events: text-areas, and selection-lists; • Select Events: text-fields, and text areas.

Form Elements • onBlur • removes input focus from form element • onChange • Changes value of text, textarea, or select element • onFocus • Gives a form element input focus

Form Elements • onSelect • Selects form element’s input field • onSubmit • Submits a form

Image Events • Image Loading • onLoad - The image is loaded onto the page. Animated DIG images will throw an onLoad event every time the image repeats from the first animation-frame • Image Loading Error • onError - An error occurs when loading the image, that is, the image des not exist, or the image is corrupted, or the server providing the image hanges, i.e., crashes or dies, etc. • Image Load Abort • onAbort -The user clicks on a link or presses Stop or ESC when the current image is being loaded

Mouse Events • mouseOver • Mouse pointer moves onto a hyperlink • mouseOut • Mouse pointer moves away from a hyperlink • onClick • Clicks on form element or link

Creating Interactive Forms • The Form Object • Working with Form Elements

The Form Object • The form object reflects an HTML form in JavaScript. Each HTML form in a document is reflected by a distinct instance of the from object.

Working with Form Elements • Properties • Action -- A string value specifying the URL to which the form data is submitted. • Elements -- Array of objects for each form element n the order in which they appear in the form. • Encoding -- String containing the MIME encoding of the form as specified in the ENCTYPE attribute. • Method -- A string value containing the method of submission of form data to the server. • Target -- A string value containing the name of the window that responses to formsubmissions are directed to.

Working with Form Elements • Methods • Submit() -- Submits the form. • Event Handlers • onSubmit -- specifies JavaScript code to execute when the form is submitted. The code should return a true value to allow the form to be submitted. A false value prevents for form from being submitted.

onSubmit • Use to validate forms prior to submission • Don’t use the submit button type <input type=button onSubmit=“doSomething(this);”>

Loops • For • For in • While • Break and Continue

For • The condition is evaluated at the start of each pass through the loop for(i=8; i<5; i++) { some commands; }

For In • Used to step through all the properties in an object for (k in testObject) { commands }

While • Proccess commands until a condition no longer exists (becomes false) while (condition) { some commands; }

JavaScript

JavaScript

Presentation Transcript

JavaScript

JavaScript

JavaScript

JavaScript

JavaScript

Javascript

Javascript

JavaScript

JAVASCRIPT

JavaScript

JavaScript

JavaScript

Javascript

JavaScript

JAVASCRIPT

JAVASCRIPT

JavaScript