61
JavaScript Intro. CITE – IT201 Timothy Bryan Marc

Introduction to JavaScript

Embed Size (px)

Citation preview

Page 1: Introduction to JavaScript

JavaScript Intro.

CITE – IT201 Timothy Bryan Marc

Page 2: Introduction to JavaScript

Overview

■ What is the relationship between: ■ SGML ■ HTML ■ XHTML ■ CSS ■ JavaScript

Page 3: Introduction to JavaScript

Recap

■ Markup ■ Annotations instructing how the document

should appear in print ■ Word processors use different markup

schemes ■ SGML

■ IBM - Standard Generalized Markup Language ■ Markup instructions stored with ASCII file

▪ Any computer could render document ▪ Lilly Example

Page 4: Introduction to JavaScript

Recap

■ HTML ■ Tim Berners-Lee created HTML – subset of

SGML ■ Not platform or application specific ■ Only server software needed to publish file s

on the net ■ Structure versus content

■ Browser parses HTML file into a tree

Page 5: Introduction to JavaScript

Recap

■ Sample HTML File ■ <FONT SIZE=14 FACE=Swing> ■ <B>Bryan Moore</B><BR> ■ </FONT> ■ <FONT SIZE=12 FACE=Textile> ■ 1234 Sunset Ave. <BR> ■ Walla Walla, WA 12345 <BR> ■ (123)123.4567<BR> ■ </FONT>

Page 6: Introduction to JavaScript

RecapBrowser parse tree

Page 7: Introduction to JavaScript

Recap

■ Problems with extracting data ■ Need to write a computer program to extract

the names and addresses by selecting text strings following font tags

■ Content and structure of document become intertwined

■ Not the intention of SGML and original HTML ■ Cascading Style Sheets

■ Attempt to separate content and style

Page 8: Introduction to JavaScript

Recap

■ CSS ■ Can alter the look of entire file with a simple

coding change ■ Can keep styles in an external file ■ Increases the knowledge needed to code

pages ■ Initial rationale of HTML was to appeal to the

masses

Page 9: Introduction to JavaScript

Recap

Parse tree using CSS

Still need to reference

Information based on

“second string after BR”

Information is not

meaningful

Page 10: Introduction to JavaScript

Recap

■ Extensible Markup Language XML ■ Extensible- can create own tags ■ Complete separation of content and style

Page 11: Introduction to JavaScript

Recap

■ Releases ■ HTML 4.0 1997 ■ XML 1.0 1998

■ XML and HTML need to better cooperate ■ XHTML 1.0 2000

■ XHTML ■ Contains elements and attributes of HTML ■ Elements must have closing tags ■ Lowercase ■ Attributes must have values ■ Attributes in single or double quotes

■ http://www.w3schools.com/xhtml/default.asp

Page 12: Introduction to JavaScript

HTML Forms and JavaScript

■ Client Server Model ■ Client Side Processing

■ JavaScript downloaded from web page and processed by the client – typically form checking

■ JavaScript can interact directly with form data ■ Server Side processing

■ Information from a form sent to server for processing ■ PHP Perl C++ ■ Server can interact directly with the form data

Page 13: Introduction to JavaScript

HTML Forms and JavaScript

■ JavaScript ■ HTML files are text files ■ JavaScript is interpreted not compiled ■ Object oriented

■ HTML forms are objects and can be manipulated via JavaScript

■ Dynamic HTML – merger of JavaScript and HTML ■ Different implementations of DHTML by

software companies

Page 14: Introduction to JavaScript

What is JavaScript■ Scripting language (object-oriented)

■ Lightweight programming language developed by Netscape ■ Interpreted, not compiled

■ Designed to be embedded in browsers ■ Ideal for adding interactivity to HTML pages ■ Detect browser versions ■ Work with info from user via HTML forms ■ Create cookies ■ Validate form data ■ Read and write HTML elements

■ Supported by all major browsers ■ Internet Explorer has JScript (started in IE3)

■ http://www.faqts.com/knowledge_base/view.phtml/aid/1380

■ It’s free, no license required

Page 15: Introduction to JavaScript

What is JavaScript

■ Syntax is similar to Java, but it’s not Java per se

■ Usually JavaScript code is embedded within HTML code using the script tag:

■ Can have more than one pair of script tags in a page

■ Semicolons: C++ and JAVA require them but in JavaScript it’s optional

Page 16: Introduction to JavaScript

What is JavaScript

■ HelloWorld example program…

■ <html> ■ <head><title>JavaScript HelloWorld!</title></head> ■ <body> ■ <script language="JavaScript"> ■ ■ document.write('Javascript says "Hello World!"') ■ ■ </script> ■ </body>

■ </html>

■ Let’s try it in the browser

Page 17: Introduction to JavaScript

What is JavaScript

■ Javascript can be located in the head, body or external file ■ Head section

■ Ensures script is loaded before trigger event ■ Body section

■ Script executes when body loads ■ External

■ Allows scripts to run on several pages ■ Examples:

■ http://www.w3schools.com/

Page 18: Introduction to JavaScript

What is JavaScript

■ JavaScript statements in head write to the beginning of the body section but don’t violate HTML code already there.

■ JavaScript statements in body write based on their location

■ JavaScript interpreted first then HTML interpreted second ■ Document.write writes to the HTML document

not the web page

Page 19: Introduction to JavaScript

What is JavaScript■ <html> ■ <head> ■ <script language=“JavaScript”> ■ document.write (“<b> This is first </b>); ■ </script> ■ </head>

■ <body> ■ Now where does this print on the web page???? <br />

■ <script language=“JavaScript”> ■ document.write ( “This might be last?”) ■ </script>

■ </body> ■ </html> ■ Lets try.

Page 20: Introduction to JavaScript

What is JavaScript

■ Now, let JavaScript generate HTML for us…

■ <html> ■ <head><title>JavaScript HelloWorld!</title></head> ■ <body> ■ <script laguage="JavaScript"> ■ ■ document.write("<h2>Javascript-Generated output:</h2>

<p>This paragraph generated by JavaScript</p> ■ <p>It can even insert an image</p> ■ <img src='../assigns/RayWeb/images/cathedral.jpg' />") ■ ■ </script> ■ </body> ■ </html>

■ Let’s try it in the browser

Page 21: Introduction to JavaScript

Identifier Etiquette

■ Identifier– The name of a variable (or function) ■ Starts with a letter, can contains digits & underscores ■ Case Sensitive!! ■ Should be meaningful to someone reading your code

■ Good: accountBalance, amountDue

■ Bad: bal, due,

■ Just plain wrong: 2bOrNotToBe, +var, total-value

Page 22: Introduction to JavaScript

Variables

■ Must declare variables before they’re used in the program ■ Declare at the top of the program & terminate each

statement with ‘;’ ■ Intialize variables when appropriate ■ Local variables (declared within a function) destroyed

after function exit. ■ Can only be accessed within the function

■ Example – Note Assignments ■ var candyBarPrice = 2.50; ■ var taxRate = .075; ■ var candyBarsPurchased;

Page 23: Introduction to JavaScript

Assignment Operator

■ Assignment ‘looks like’ equal sign but does NOT behave like it

■ subTotal = subTotal + 1.50

■ subTotal ‘is assigned the value’ that is currently in subTotal plus the value of 1.50

Page 24: Introduction to JavaScript

Expressions

■ An expression is a statement that describes a computation

■ Usually look like algebra formulas ■ total = subTotal * taxRate

■ Operators (+, -, *, /, etc.) have different levels of precedence, similar to algebra ■ Don’t rely on it! For clarity, use parentheses

Page 25: Introduction to JavaScript

Conditional Statements--if

if (some boolean expression is true){

execute the statements within the curly braces, otherwise skip to the first statement after the closing brace

} Resume execution here in either case

Page 26: Introduction to JavaScript

Conditional Statements– if/else

if (some boolean expression is true){

execute these statements, otherwise skip to ‘else’ clause

} else { execute these statements if boolean expression is false

} Resume execution here in either case

Page 27: Introduction to JavaScript

Conditional Test Program

Diagnostic messages indicate flow of control var variable1 = 1; var variable2 = 2; if(variable1 >= 0){ document.write(“<p> 1 is greater than 0 </p>"); } document.write(“<p>Resuming execution after 'if' statement</p>");

if(variable1 > variable2){ document.write(“<p>1 is greater than 2</p>"); } else { document.write(“<p>2 is greater than 1</p>"); } document.write("Resuming execution after 'if/else‘ statement</p>");

Page 28: Introduction to JavaScript

Strings

■ Strings are sequences of keyboard characters enclosed in quotes ■ “Hello World” or ‘Hello World’

■ Variables can hold strings ■ var greeting = “Hello World”

■ String can be empty, i.e., contain no characters ■ var myAnswer = “”

■ Use ‘\’ (escape symbol) to ‘type’ prohibited characters ■ \b for backspace, \n for newline, \t for tab, \” for double

quote

Page 29: Introduction to JavaScript

JavaScript Functions – Basic Principles

■ Abstraction ■ Experience has taught us that much code is

duplicated throughout program

■ Functions let us write the functionality once, then reuse it

Page 30: Introduction to JavaScript

JavaScript Functions – Basic Principles

■ Encapsulation ■ Functions encapsulate a specific capability or feature

■ Function name allows us to access a function in our program

■ Parameterization ■ We can customize the function’s result by passing in different

values each time we use it

■ Must use functions to write serious software!

Page 31: Introduction to JavaScript

JavaScript Functions – Basic Principles

■ Reasons to use functions ■ Ease of communication ■ Problem simplification ■ Easier construction ■ Code readability ■ Reusability ■ Maintainability

■ In JS, functions are the primary encapsulation mechanism

Page 32: Introduction to JavaScript

JavaScript Functions – Syntax

■ JS function syntax

function myFunctionName (list of parameters) {

….JS code here…

}

Page 33: Introduction to JavaScript

JavaScript Functions -- Issues

■ Key issues about using functions ■ Naming functions ■ Passing in parameters ■ Using local variables within functions ■ How to call (i.e., invoke) functions ■ How to handle a function’s return value ■ Where to put JS functions in your webpage

Page 34: Introduction to JavaScript

JavaScript Functions – Naming

■ Function names ■ Name describes what function does ■ Name is an identifier, so follow JS identifier syntax rules

& course coding standards

■ Example, findMaxValue(‘put some parameters here’)

Page 35: Introduction to JavaScript

JavaScript Functions -- Parameters

■ Passing parameters to the function ■ Parameters provide functions with input ■ Implicitly declared variables that can be accessed by

code within function body ■ You provide actual input values when you call the

function ■ Parameters are named variables separated by commas

■ Example, function findMaxValue(num1, num2, num3)

Page 36: Introduction to JavaScript

JavaScript Functions – Where to put?

■ Put functions within <script>….</script> tags within the <head> section of the web page

<head> <script language=“JavaScript”>

declare functions here….

</script> </head>

Page 37: Introduction to JavaScript

JavaScript Functions – Local Variables

■ If needed, you can declare local variables within a function

■ local variable is visible only within the function body after it’s declared

■ Commonly used to store results of an intermediate calculation

Page 38: Introduction to JavaScript

JavaScript Functions – Local Variables

function findMaxValue(num1, num2,num3) { var tempMax; //local var

if (num1 >= num2) { tempMax = num1; }

else { tempMax = num2; }

if(num3 >= tempMax) { tempMax = num3; }

return tempMax;

} //end function

Page 39: Introduction to JavaScript

JavaScript Functions -- Calling

■ To call a function from your program, add a statement that contains the function name with values for the parameters the function requires

■ Example…somewhere in the <body>…., var x = 1, y = 4, z = 2;

findMaxValue(x, y, z);

■ What value does the function return? ■ What happens with the result?

Page 40: Introduction to JavaScript

JavaScript Functions -- Return

■ Return keyword tells function to return some value and exit immediately

■ Function can have multiple return statements but only 1 can be executed in any given function call

■ Normally used to return the final result of a calculation to the calling program

■ For an example, see findMaxValue function

Page 41: Introduction to JavaScript

JavaScript Functions -- Return

■ Good Example ■ Uses var maxNumber in calling program ■ Function’s return value is assigned to maxNumber ■ Display of maxNumber has correct value for inputs

■ Code snippet ■ var x = 1, y = 4, z = 2;

var maxNumber = findMaxNumber(x, y, z);

document.write(“The maximum is: “ + maxNumber);

Page 42: Introduction to JavaScript

JavaScript Functions -- Return

■ The return must be handled properly or it will be ‘lost’

■ Usually, you want to assign the result of a function to a variable

Page 43: Introduction to JavaScript

JavaScript Functions – Parameter Sequence

■ When calling functions, must enter parameters in same order as specified in function argument list.

1. function calculateDensity(height, width, depth, mass){ 2. var volume = height * width * depth; 3. var density = mass / volume; 4. return density; 5. } 6. ………………………………………………. 7. var hth = 2, wth = 3, dth = 4, mass = 10;

8. var result = calculateDensity(2, 10, 3, 4); 9. //returns .07 but correct answer is .42!!!

Page 44: Introduction to JavaScript

JavaScript Functions – Global Variables

■ Global variables are those declared outside of functions

■ Global variables are ‘visible’ from anywhere in the program, including inside functions

var globalHello = “Hello!”;

function writeHello() { document.write(globalHello); } // outputs “Hello!”

Example program

Page 45: Introduction to JavaScript

JavaScript Functions – Testing

■ Test each function thoroughly before proceeding with next programming task

■ Using multiple sets of inputs, be sure to test all possible outcomes

■ For each test, be sure calling program is properly handling return values

Page 46: Introduction to JavaScript

JavaScript Functions – Debugging

■ Use diagnostic output statements to trace program execution

■ Good places for diagnostic outputs ■ Just before entering function ■ Immediately upon entering function ■ Before/In/After complex logic or computation ■ Just before function return statement ■ Immediately after function returns to calling program

Page 47: Introduction to JavaScript

JavaScript Functions

■ Built-In Functions ■ Prompt ■ Alert ■ Confirm

Page 48: Introduction to JavaScript

JavaScript and HTML Forms

■ JavaScript Objects ■ Var truck = new Object(); ■ Expression on right is a constructor ■ Properties

■ truck.color=“white” ■ document.write(color);

■ Primitives ■ In JavaScript variable primitive types are

number, string and Boolean

Page 49: Introduction to JavaScript

JavaScript and HTML Forms

■ Object Model for the Browser Window ■ Compound object structure is created when a

web page loads into a browser ■ Hierarchy

■ Window is an object, the HTML document is an object and its elements are objects

■ These objects have primitives associated with them

Page 50: Introduction to JavaScript

JavaScript and HTML Forms

■ window [closed, location]

■ history [length]

■ document [bgColor, fgColor, URL, lastmodified,linkColor, vlinkColor] ▪ images [properties] ▪ links [properties] ▪ frames [properties] ▪ forms [properties]

Page 51: Introduction to JavaScript

JavaScript and HTML Forms

■ Window object is parent of structure ■ window.closed is primitive that is Boolean ■ window.location primitive contains string of the URL of

the HTML file ■ window.document object is primary focus

■ When web page is loaded the HTML elements assign values to most of these window.document primitives

■ Often the word window is excluded as in document.write but need it if referring to multiple open windows

■ Properties can also be objects

Page 52: Introduction to JavaScript

JavaScript and HTML Forms■ <HTML> ■ <HEAD> ■ <TITLE>Document Properties</TITLE> ■ <SCRIPT LANGUAGE=JavaScript><!-- ■ document.write(closed); ■ document.write("<BR>"+ document.bgColor); ■ document.write("<BR>"+document.fgColor); ■ document.write("<BR>"+document.lastModified); ■ //--></SCRIPT> ■ </HEAD> ■ <BODY TEXT="#0000FF" BGCOLOR="#FFFFCC"> ■ <P>Blue text on a yellow background.<BR> ■ <SCRIPT LANGUAGE=JavaScript><!-- ■ document.write("<BR>"+ document.bgColor); ■ document.write("<BR>"+document.fgColor); ■ //--></SCRIPT> ■ </BODY> ■ </HTML>

Page 53: Introduction to JavaScript

JavaScript and HTML Forms

■ false #ffffff#00000001/10/2001 17:18:30 Blue text on a yellow background.#ffffcc#0000ff

Page 54: Introduction to JavaScript

JavaScript and HTML Forms

■ Methods ■ Behavior associated with an object ■ Essentially functions that perform an action ■ Some are built in and others user made

■ Built-In Methods of the window object ■ Confirm ■ Alert ■ Prompt

Page 55: Introduction to JavaScript

JavaScript and HTML Forms

■ User Events ■ An event occurs when a user makes a change

to a form element ■ Ex. Click a button, mouseover an image

■ Detection of an event done by event handlers ■ Event handler is an attribute of the HTML

button ■ <form>

■ <input type=button value=“please click” onclick=“function name()”>

■ </form>

Page 56: Introduction to JavaScript

JavaScript and HTML Forms■ <HTML> ■ <HEAD> ■ <SCRIPT LANGUAGE=JavaScript><!-- ■ function changecolor(){ ■ document.bgColor="#ff0000"; ■ } ■ //--></SCRIPT> ■ </HEAD> ■ <BODY> ■ <P><FORM > ■ <P><INPUT TYPE=button VALUE="Click Me"

onclick="changecolor()"> ■ </FORM> ■ </BODY> ■ </HTML>

Page 57: Introduction to JavaScript

JavaScript and HTML Forms

■ Form Object ■ Window.document.form ■ A form is a property of the document but is also

an object ■ Form elements are properties of a form and are

also objects ■ Access to form’s properties is done through the

NAME attribute of the FORM tag ■ Access to the properties of the form elements

is done through the NAME attributes of the particular form element

Page 58: Introduction to JavaScript

JavaScript and HTML Forms

Page 59: Introduction to JavaScript

JavaScript and HTML Forms■ <HTML> ■ <HEAD> ■ <SCRIPT LANGUAGE=JavaScript><!-- ■ function plus(){ ■ var n1; ■ var n2; ■ n1=document.addmult.num1.value; ■ n2=document.addmult.num2.value; ■ ■ n1=parseFloat(n1); ■ n2=parseFloat(n2); ■ ■ document.addmult.result.value=n1+n2; ■ } ■ function times(){ ■ var n1; ■ var n2; ■ n1=document.addmult.num1.value; ■ n2=document.addmult.num2.value; ■ ■ n1=parseFloat(n1); ■ n2=parseFloat(n2); ■ ■ document.addmult.result.value=n1*n2; ■ }

■ //--></SCRIPT> ■ </HEAD> ■ <BODY BGCOLOR="#FFFFCC"> ■ <P><FORM name=addmult> ■ <P>Enter a number in each field: ■ <INPUT TYPE=text NAME=num1 VALUE="" SIZE=5> ■ <INPUT TYPE=text NAME=num2 VALUE=""

SIZE=5><BR> ■ <INPUT TYPE=button VALUE="+" onclick="plus()"> ■ <INPUT TYPE=button VALUE="*"

onclick="times()"><BR> ■ <INPUT TYPE=reset VALUE="Reset Form"><BR> ■ <TEXTAREA NAME=result ROWS=3 COLS=27

WRAP=virtual></TEXTAREA> ■ </FORM> ■ </BODY> ■ </HTML>

Page 60: Introduction to JavaScript

JavaScript and HTML FormsForm for submitting info for server side processing

Page 61: Introduction to JavaScript

JavaScript and HTML Forms■ <HTML> ■ <HEAD> ■ <SCRIPT LANGUAGE=JavaScript><!-- ■ function verify(){ ■ with(document.infoform){ ■ if((fullname.value=="")||(address.value=="")||

(email.value=="")){ ■ alert("You have left one or more fields blank. Please

supply the necessary information, and re-submit the form.");

■ } ■ else { ■ display.value="The following information has been

added to our guestbook:\r"+fullname.value+"\r"+ address.value +"\r" +email.value;

■ } ■ } ■ } ■ //--></SCRIPT> ■ </HEAD> ■ <BODY BGCOLOR="#FFFFCC"> ■ <P><FORM name=infoform> ■ <P><TABLE BORDER=0> ■ <TR> ■ <TD WIDTH=83> ■ <P>Name: ■ </TD> ■ <TD> ■ <P><INPUT TYPE=text NAME=fullname VALUE=""

SIZE=32> ■ </TD> ■ </TR>

■ <TR> ■ <TD WIDTH=83> ■ <P>Address: ■ </TD> ■ <TD> ■ <P><INPUT TYPE=text NAME=address VALUE=""

SIZE=32> ■ </TD> ■ </TR> ■ <TR> ■ <TD WIDTH=83> ■ <P>E-mail: ■ </TD> ■ <TD> ■ <P><INPUT TYPE=text NAME=email VALUE="" SIZE=32> ■ </TD> ■ </TR> ■ <TR> ■ <TD WIDTH=83> ■ <P><INPUT TYPE=button VALUE="Submit"

onclick="verify()"> ■ </TD> ■ <TD> ■ <P><INPUT TYPE=reset VALUE="Clear Your

Information"> ■ </TD> ■ </TR> ■ <TR> ■ <TD COLSPAN=2> ■ <P><TEXTAREA NAME=display ROWS=5 COLS=41

WRAP=virtual></TEXTAREA> ■ </TD> ■ </TR> ■ </TABLE>

■ </FORM> ■ </BODY> ■ </HTML>