8 javascript 1 basics

8/8/2019 8 Javascript 1 Basics

1/35

JavaScript Lecture 1 (JS Intro)

1

y What is a script

y How does a script work?

y Capturing and editing (hacking) useful scripts

y

Common scriptsy Rollover scripts

y Event scripts

y Status bar scripts


2/35

Server-Side and Client-Side

Programming

2

This figure shows the issues like those previously mentioned that led to the development ofprograms, or scripts, that could be run from the Web browser (the client).


3/35

What is a script

3

y A program embedded in an HTML document

y Script can be found multiple places in a document

y There are multiple scripting languages

y VBScript (Microsoft proprietary) interpreted only in IE unless aplugin is installed

yJavaScript far more common and universally interpreted in allbrowsers

y

Scripts make HTML into DHTML (dynamic HTML)


4/35

How does a script work?

4

y A browser is a very complex, multi-function program

y Using HTML syntax, the browser locates script statementsinside the document

y It hands the statements (in an order well discuss later) to ascript interpreter that causes the browser to do what thestatements (commands) tell it to do.


5/35

What is JavaScript

5

HTML Interpreter

(display formatting)

VBScript

Interpreter

(compiler)

Java Virtual

Machine (JVM)

Communications

facilities

JavaScript

Interpreter

script

HTML

page

Browser

script

Control /

HTML

applet

Control /

HTML

It is NOT Java or a dialect. It is a completely different, interpreted language intended to

control the browser, typically to add dynamics and animation to HTML.

One ofmanyprogramming languages executed (possibly simultaneously) in the browser!


6/35

Applets and Java Interpreters

6

This figure shows a web browser that has a Java interpreter runs the program locallyon the users computer, freeing up the Web server for other purposes.


7/35

Identifying JavaScript in an HTML page

7

y In the of the document in the container (MEH 13.1)

y Anyplace in the document in a script container (MEH 13.1)

y

In-line code in various tags throughout the document(MEH 14.11)y Usually associated with tags that support events such as

and form elements

y The code describes what to do for a given event

y

Line(s) of script in quotes following the event name as anattribute of the tag


8/35

Variables

8

y A variable is a place in the computers memory whereinformation (values) are stored.

y In programming languages, the storage places have names.

yYou access the value in the storage place by its name.


9/35

Javascript Variables

9

y Javascript variable names must begin with a letter andcant contain unusual characters such as & or #

y

Javascript variables are polymorphic HUH? that is,they can contain any type of information

y Numbers (MEH 13.6); Strings (MEH 13.18); Object references (such asimages!) (MEH 14.8)

y Variables in most other languages are more strictly typed


10/35

Variable Naming Conventions

10

y In your projects and labs you will be determiningvariable names for:yJavaScript code you will write

y Access database field and table names

y Use the naming convention:y Begin with a small letter

y Use NOspaces compress multi-word names and capitalizethe beginning of the new word

y

Examples: myN

ewA

rrayinvoiceAge

This is the most common programming convention and does not requirevariable names to be encoded


11/35

Javascript Variables (2)

11

y Use = to place a value into a variable (assignment)y When assigning a literal string value to a variable:

y Enclose text in quotation marks

y When assigning a numeric value to a variable:

y Do not enclose value in quotation marks

y You can declare multiple variables in the statement using

a single var keyword followed by a series of variablenames and assigned values separated by commas


12/35

Data Types

12

Data types that can be assigned only a single value

are called primitive types

JavaScript supports six primitive data types


13/35

Data Types (Cont.)

13

y The null valuey data type/value that can be assigned to a variabley Indicates the variable does not contain a usable value

y A variable with a value of null has a value assigned to it(Null is really no value)

y You assign the null value to a variable when you want toensure that the variable does not contain any data

y Use: If x == nullor x = null


14/35

Operators

14

y JavaScript operators combine data

y JavaScript has all the familiar operators (+, -, /, *, %) and:


15/35

Logical Operatorsy Logical operators are used for comparing two

Boolean operands for equality

15


16/35

Comparison and Conditional Operators

(Cont.)

16


17/35

Comparison vs. Assignment

17

y Equality (!!!NOTE!!!) JavaScript like C, C++ and Java to name only a few uses double equals to check forequality:

==A single equal sign is the assignment operator


18/35

WorkingWith Strings

18

y A text string contains zero or more characterssurrounded by double or single quotation marks

y Literal strings can be also be assigned a zero-lengthstringvalue:called an emptystring

y Strings can be combined (concatenated) using the +operator

y Advanced string operators can search a string for text andreplace segments of text just like VB


19/35

Escape Characters and Sequences (for

formatting string text)

y the combination of the escape character with othercharacters is called an escape sequence

19


20/35

JavaScript Commands

20

y A command in any computer language is a reserved word such as write

y that tells the computer to do something

y

Change variable values(MEH 13.6)

y Manipulate I/O (MEH 13.6)

y Manipulate the O/S (MEH 13.18)


21/35

JavaScript statements and code

sequences

21

y A statement is a syntactically correct command

y A line is series of syntactically correct statements separatedby semicolons and ending in a line-feed/carriage return

y A code sequence (or program) is a series of lines which areexecuted left to right, top to bottom (MEH 13.1)

y Code inside containers in the of a document is NOT executed when first encountered. It isstored and remembered and executed only when called

outside the


22/35

Selection (choosing alternatives)(JSv4 8.2, 8.3)

22

if(statement in brackets is true){Do stuff in curly braces}

else if (statement in brackets is true){Do stuff in curly braces}else if . . .else

{Do stuff in curly braces}

Note that the first if has no else and the last else has no if!Use ofelse is strictly optional.


23/35

Selection roll your own (JSV4 8.3class)

23

y A simple program specification calling for conditionalsand Boolean logic.A job interview expert system:

y Were going to input a salary figurey

Iflessthan 40K/yr the write Yo! I sweated bullets learningJavaScript. You think it was easy!

y Ifexactlyequal 40K/yr write Congratulations; youre nowlast on my list

y

Ifgreaterthan40K

and lessthanorequalto 80K

thenwrite Let me think about it.

y Ifgreaterthan 80K/yr then write Who do I have to kill?


24/35

Logical (Boolean) Operators

24

y To do the complex comparisony If > 40K and


25/35

Logical (Boolean) Operators (2)

25

y The last logical operator is NOT !y i.e. if salaryplus bennies is not > 80Kthen I dont care.

y If !((salary + bennies) > 80000) then . . .

y Notice the ! comes first and applies to the entire expression inparentheses read it as: if NOT salaryplus bennies greaterthan...

y Now, back to the example (JSV48.3classRaw)


26/35

Creating a JavaScript Source FilecopyCenter.html & copies.js

26

y You can also save JavaScript code in an external filecalled a JavaScript source file

y

You can then write a statement in the document thatexecutes (or calls) the code saved in the source file

y When a browser encounters a line calling a JavaScriptsource file

y It looks in the JavaScript source file and executes it(actually the browser loads the code when first parsing thepage)


27/35

JavaScript Source Files (Cont.)

27

y Is usually designated by the file extension .js andcontains only JavaScript statements

y It does not contain a element

y To access JavaScript code that is saved in an external file,

you use the src attribute of the element

y


28/35

JavaScript Source Files (Cont.)

28

y The browser ignores any other JavaScript codelocated within the element

y There are several reasons to use a .js source file insteadof adding the code directly to a document:1.The document will be neater2.The JavaScript code can be shared among multiple Web

pages3.JavaScript source files hide JavaScript code from

incompatible browsers


29/35

Preparation for the Javascript Labs

29

y The JavaScript labs will consist of:y Finding effects on a page that you want to duplicate

y Locating the code that performs the effect

y Cutting the code from the original page and embedding it inyour page

y Getting it to work in the new environment

y The time honored name for that process is HACKING


30/35

Six JS Lectures, Six Labs

30

y The first lab will have a demonstration/lecturecomponent on debugging based on Chapter 8 of yourtext. You must display mastery of the debugger for the2nd exam. The lab itself will execute simple modificationsto existing code date and time and last changedroutines that are largely self contained. You are stronglyadvised to use debugging techniques in the labs.

y JSV4 3.2; MEH 14.8; MEH 14.9


31/35

JavaScript Lab 2

31

y The second lab will execute more complex functions rollovers and event codes that will require changing images,using more or fewer of them, re-dimensioning arrays, etc.


32/35

JavaScript Labs 3 & 4

32

y The third JavaScript lab will be concerned with readingand writing cookies and coding of DHTML menus.

y The fourth lab will use advanced JavaScript to animate aweb page. The lab will require all the JavaScriptknowledge you have acquired in all lectures.

y The results of both the cookie and advanced DHTMLlabs can be incorporated directly into your projects.


33/35

JavaScript Labs 5 & 6

33

y JavaScript lab 5 usesAccess wizards to writeASP that allowsdatabase interrogation from a web page

y JavaScript lab 6 is a brief introduction toAJAX acontemporary web interaction technique


34/35

My First JavaScript Script

34

y JSV4 2.14

y My First Hack

y Add a button for Clinton I feel your pain . . .

y Add a button for Bush, Sr. Read my lips . . .

y Add a button for Obama: I believe we can together.

y A

dd a button for Billary: Ive found my voice.y Add a button for McCain: Bomb, bomb, bomb bomb, bomb

Iran


35/35

AMore Complex Example

35

y Gosselin MovingExtimator.html from Chapter 8

y Change the cost per mile to 1.50 (a typical programmaintenance example)

y A

dd the ability to calculate the cost of moving flutes.A

fluteis 1/25th as expensive as a piano. (Discuss first, code second!)

8 javascript 1 basics

Documents