© 2007 d. j. foremanjs-1 a light introduction for non-programmers javascript for beginners

© 2007 D. J. Foreman JS-1

A Light Introduction for

Non-programmers

JavaScript for Beginners

©2007 D. J. Foreman

JS-2

JavaScript

A scripting language (provides automation)

Event driven

Object oriented

Platform Independent

Secure


JS-3

So what’s the difference?

JavaScript is NOT a true programming language

JavaScript ONLY works in WebPages

JavaScript ONLY works in a browser

JavaScript is NOT like Java


JS-4

Some Uses for JavaScript

Perform on-the-fly calculations

Create user messages (alerts or dialogs)

Read data from a table

Customize web-pages at run-time

Save time by eliminating server references

Marquees

Form manipulations


JS-5

How it works

Browser loads the page

Browser detects JavaScript

Browser passes the script to the Interpreter

Interpreter evaluates (performs) the script

Script passes HTML back to Browser

Browser displays page


JS-6

Variables, Statements &

Control Structures


JS-7

Basics

Variables: names that can hold dataX, x, myval

The var prefix is needed for objects and arraysand to "privatize" a name inside a function

Expressions: perform computationsX*Cuberoot(B)

Statements: sentences that perform workX=x*y; // x and X are DIFFERENT

document.write("aha <br>");


JS-8

Naming Conventions

Each 'word' within the name of a variable usually gets capitalized:

MySpecialName

A constant (name for something that NEVER changes) is usually all caps:

Math.PI, Math.LOG10E,MYINTRATE


JS-9

A strange statement

Normal syntax:I=I+1;

Shortened form:I++;

ONLY for adding 1


JS-10

Adding comments

Two kinds of JavaScript comments:

// ignore remainder of this line

/* ignore what's inside these markers */

VS

One kind of HTML comment

!-- ignore what's inside these markers --

Note: tag ends with 2 DASHES before the ">"

© 2007 D. J. ForemanJS-11

Control statements

Statements used to control the "flow" of execution within a JS program


JS-12

The if Statement

Must be lowercase

Tests a condition

Controls flow of program

Example:

if (a==b) // note the TWO = signs{true part}

else{false part}


JS-13

If (another example)

if (a > b)document.write("See? 'A' was bigger");

elsedocument.write('See? "A" was smaller or equal');

NOTE: single quotes inside the double-quoted stringsor vice-versa


JS-14

The for Statement

Must be lowercase

Repeats a set of instructions

Syntax: for (start ; test ; change)

Example:

for (i=1 ; i<10; i++){instructions to be repeated go here}


JS-15

A short example

X=window.prompt("number <10","0");

if (X>=10)document.write("number too big");

elsefor ( I=1 ; I<X ; I++)

document.write(I+"<br>");

© 2007 D. J. ForemanJS-16

One big problem

Some browsers may not accept JavaScript,

so we have to hide it from them...

JS-17

Hiding JavaScript (from old browsers)

<script language=“JavaScript” type="text/javascript"><!-- hiding JavaScript

These lines might confuse the browser,so the comment tags hide them.

The <script> and </script> tags will be ignored(remember the rule about unknown tags?)

//--</script>

JS-18

Example 1: writing to the page

<html><body> <script language="JavaScript"

type="text/javascript">  </script></body></html>

JS-19

Example 2: A Prompt Window

<HTML><TITLE>A PopUp Dialog</TITLE> <body><script language="JavaScript"

type="text/javascript"> </script>Display this line for every browser</body></HTML>


JS-20

Events

Connection between JS and the system

Some pre-defined events:OnLoad / OnUnload

OnClick / OnMouseOver

OnFocus / OnBlur // see Prof. Hinton's website

OnChange - lost focus and value changed

OnSelect - text, textarea, password objects

OnSubmit - with the form object


JS-21

Object Hierarchy

Browser

WindowHistory Location

Document

Links Anchor Forms


JS-22

Some Document Properties

alinkColor

vlinkColor

linkColor

bgColor

fgColor

location the URL of this document

title text that appears in title-bar

referrer URL of doc that linked to here


JS-23

Document Objects & Propertiessome examples

document.title - contains the webpage title

document.form (the form on the page)

document.form.button1 (1st button on the form)


JS-24

More Document Objects Date mydate_object=new Date();

Math x=Math.sqrt(xyz);

frames frames[0] is the first frame

strings xyz="my data"; I=xyz.length;"mydata" is a string, as is the variable xyz

objects have methods that perform work


JS-25

Examples of usage

Can 'get' and ‘set’ properties of objects

document.title="this is my webpage title";

X=document.title;


JS-26

Document Methods

clear()

close()

open()

write()


JS-27

Functions - program building blocks

Function - user-defined sequence of code

Placed between <head> </head>

Defined within <script> </script>

format:

function function_name( )

{statements of the function go between the braces, and are ended with a semi-colon;

}

JS-28

Invoking a Function – with onload

<html><head><script> </body></html>


JS-29

Window.open Syntax

ParametersURL, if any

Name for new window

Size attributes

• NOTEs:

• Quotes around WHOLE attribute string

• But no quotes around values in attributes

JS-30

Invoking a Function – from the body

<html><head><script> <!-- function MYPOP() {xx=window.open("",xx,"menubar=yes, height=400,

width=400"); xx.document.write(“Fire up the WarpDrive! <br>”); } // notice the difference from window.prompt//-- </script></head><body > <script><!--MYPOP( ); --</script></body></html>


JS-31

Objects within Forms

Text fields and areas

Password

Checkbox

Radio

Select

Button

Reset

Submit


JS-32

Limitations

Interpreter is ‘hooked-into’ browser

Cookies work differently on Mac vs Win

Can’t access files (open, read, write)

© 2007 d. j. foremanjs-1 a light introduction for non-programmers javascript for beginners

Documents