[PDF] Introduction to JavaScript - University of Pittsburgh School



Previous PDF Next PDF


















[PDF] les evenements en javascript

[PDF] javascript pour les nuls pdf gratuit

[PDF] boucle for liste python

[PDF] openclassroom python

[PDF] liste append

[PDF] append python

[PDF] parcourir une liste python

[PDF] tuple python

[PDF] liste de liste python

[PDF] instruction python

[PDF] album anglais maternelle

[PDF] découvrir l'anglais avec des albums de jeunesse cy

[PDF] album anglais cycle 3

[PDF] liste album anglais cycle 3

[PDF] album anglais ce2

Introduction to JavaScript - University of Pittsburgh School

1Introduction to JavaScript

Michael B. Spring

Department of Information Science and Telecommunications

University of Pittsburgh

spring@imap.pitt.edu http://www.sis.pitt.edu/~springSeptember 28, 2001Introduction to Javascript2Overview •Javascript in a nutshell •Javascriptconceptually •What it is and isn't •Basics •Data types •Expressions and operators •Control structures •Client side program structure •Javascript objects and events •Javascript and forms •Form Validation •Dynamic menus

2September 28, 2001Introduction to Javascript3JavaScript in a NutshellSeptember 28, 2001Introduction to Javascript4JavascriptConceptuallyHTML Document

Header with

JavascriptcodeBody with

ElementsText BoxCode is written as a function

which may in turn act on elementDocument element requests function activation for a given action -onclick

3September 28, 2001Introduction to Javascript5What JavascriptIs and Is Not

•JavaScript is •an interpreted loosely-typed object-based language •event driven, embedded into HTML, and dependent upon a simplified DOM •still evolving and is far from platform independent •JavaScript is not •simplified Java --the two languages have disjoint sets of capabilities

•simple --mastery of JavaScript requires advanced programming skillsSeptember 28, 2001Introduction to Javascript6What JavaScript Can and Can't Do

•JavaScript can: •Control document appearance and content •Control the browser •Interact with the user •Read and write client state with cookies •Interact with applets •Manipulate embedded images •JavaScript can't: •Directly produce graphicaldispplays •Read or write files •Establish network connections •Support any kind of multithreading

4September 28, 2001Introduction to Javascript7JavaScript BasicsSeptember 28, 2001Introduction to Javascript8Syntax Basics

•JavaScript is case-sensitive •JavaScript ignoreswhitespacebetween "tokens" •Semi-colons are "optional" •Comments •C++ style (i.e. //) •C -style(i.e. /* */) •Identifiers, or "A name used to refer to something else" •First character must be a letter or an underscore (_) •Variables are names associated with a data value. •JavaScript is anuntypedlanguage (i = 2, sum = ++i) •Variable declaration is only required for "local" variables inside a function when variable is also used as a "global" variable (vari;varsum;vari, sum;)

5September 28, 2001Introduction to Javascript9Data Types and Data Type

Wrappers•Primitive Data Types

•Booleanare true / false values only •Functions are code that may be executed multiple times •Objects are named pieces of data has a collection of properties •Arrays are indexed collection of data values •Null indicates "no value" •Undefined returned when an variable doesn't exist •Data Type Wrappers •Each primitivedatatype(number, string, etc.) has a corresponding object type defined for it. •Object Wrappers contain the same data value but also define properties and methods to manipulate the data values.

•Wrappers are created as transient objectsSeptember 28, 2001Introduction to Javascript10Expressions and Operators

•An expression is a phrase that the JavaScript interpreter can evaluate to produce a value. •There are (generally) three types of operators •binary (+, -, *, /, etc.) •unary(-3, +62, etc.) •ternary (?:) •A couple useful operators •The Conditional (?:) greeting = "hello" + ((name != null) ? name : "there"); •typeof(i) (typeofvalue == "string") ? "'" + value + "'" : value •Object Creation Operator (new) o = new Object; c = new rectangle(3,5,2,1); •The delete operator (sets object value to null)

Delete o;

6September 28, 2001Introduction to Javascript11Strings

•A series of characters enclosed in double quotes. •JavaScript has many built-in string operations. •concatenationmsg= "Hello, " + "world"; •length last_char= s.char(s.length -1); •substring sub = s.substring(0,4) •indexOf i = s.indexOf('a');

•charAti = s.charAt(s.length-1);September 28, 2001Introduction to Javascript12Conditional Statements

if(name == null) name = "John Doe" if((address == null) || (address == "")) address = "undefined"; alert("Please provide a mailing address"); if(name == null) name="John Doe" elsedocument.write(name)

7September 28, 2001Introduction to Javascript13Loop Statements

while(count < 10){ document.write(count); count++; } for (count=0; count<10; count++) document.write(count); for (prop inMyObject) document.write("name: " + prop "; value: " + MyObject[prop], "
");September 28, 2001Introduction to Javascript14Client-Side Program Structure

8September 28, 2001Introduction to Javascript15Client-Side Program Structure

•Techniques for embedding JavaScript code in HTML: •code between tags. •

This parawas written by html normally

9

Today's Date
The date and time are:
September 28, 2001Introduction to Javascript18Execution of JavaScript Programs •Scripts •in order of appearance as part of the browsers HTML parsing process. •Functions •execute when called •Are frequently used as event handlers which allow for asynchronous execution •can be defined to manipulate elements that are not yet defined

10September 28, 2001Introduction to Javascript19Client-Side JavaScript Objects

and EventsSeptember 28, 2001Introduction to Javascript20JavaScript and Events •Events occur when a user interacts with the HTML file (which defines the "user-interface") •JavaScript extends HTML with the events: •Event Handlers are normally written as functions Value ="" onChange="validate(this)"> •They can be written as direct attribute changes Value = "" onChange="this.value='not so fast'">

11September 28, 2001Introduction to Javascript21Basic Objects

The browser object hierarchy (for Navigator)

•window •history •location •document •anchor('s) •link('s and 's --imagemaps) •image •formquotesdbs_dbs2.pdfusesText_2