JavaScript Lecture 1 (JS Intro)

1
JavaScript Lecture 1 (JS Intro)

• What is a script
• How does a script work?
• Capturing and editing (hacking) useful scripts
• Common scripts
• Rollover scripts
• Event scripts
• Status bar scripts

2
Server-Side and Client-Side Programming
This figure shows the issues like those
previously mentioned that led to the development
of programs, or scripts, that could be run from
the Web browser (the client).
3
What is a script

• A program embedded in an HTML document
• Script can be found multiple places in a document
• There are multiple scripting languages
• VBScript (Microsoft proprietary) interpreted only
  in IE unless a plugin is installed
• JavaScript far more common and universally
  interpreted in all browsers
• Scripts make HTML into DHTML (dynamic HTML)

4
How does a script work?

• A browser is a very complex, multi-function
  program
• Using HTML syntax, the browser locates script
  statements inside the document
• It hands the statements (in an order well
  discuss later) to a script interpreter that
  causes the browser to do what the statements
  (commands) tell it to do.

5
What is JavaScript
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 of many programming
languages executed (possibly simultaneously) in
the browser!
Browser
VBScript Interpreter (compiler)
Control / HTML
Java Virtual Machine (JVM)
applet
HTML Interpreter (display formatting)
script
script
Control / HTML
HTML page
6
Applets and Java Interpreters
This figure shows a web browser that has a Java
interpreter runs the program locally on the
users computer, freeing up the Web server for
other purposes.
7
Identifying JavaScript in an HTML page

• In the ltHEADgt of the document in the ltSCRIPTgt
  lt/SCRIPTgt container (MEH 13.1)
• Anyplace in the document in a script container
  (MEH 13.1)
• In-line code in various tags throughout the
  document (MEH 14.11)
• Usually associated with tags that support events
  such as ltIMGgt and form elements
• The code describes what to do for a given event
• Line(s) of script in quotes following the event
  name as an attribute of the tag

8
Variables

• A variable is a place in the computers memory
  where information (values) are stored.
• In programming languages, the storage places have
  names.
• You access the value in the storage place by its
  name.

9
Javascript Variables

• Javascript variable names must begin with a
  letter and cant contain unusual characters such
  as or
• Javascript variables are polymorphic HUH?
  that is, they can contain any type of information
• Numbers (MEH 13.6) Strings (MEH 13.18) Object
  references (such as images!) (MEH 14.8)
• Variables in most other languages are more
  strictly typed

10
Variable Naming Conventions

• In your projects and labs you will be determining
  variable names for
• JavaScript code you will write
• Access database field and table names
• Use the naming convention
• Begin with a small letter
• Use NO spaces compress multi-word names and
  capitalize the beginning of the new word
• Examples myNewArray
• invoiceAge
• This is the most common programming convention
  and does not require variable names to be encoded

11
Javascript Variables (2)

• Use to place a value into a variable
  (assignment)
• When assigning a literal string value to a
  variable
• Enclose text in quotation marks
• When assigning a numeric value to a variable
• Do not enclose value in quotation marks
• You can declare multiple variables in the
  statement using a single var keyword followed by
  a series of variable names and assigned values
  separated by commas

12
Data Types

• Data types that can be assigned only a single
  value are called primitive types
• JavaScript supports six primitive data types

13
Data Types (Cont.)

• The null value
• data type/value that can be assigned to a
  variable
• Indicates the variable does not contain a usable
  value
• A variable with a value of null has a value
  assigned to it (Null is really no value)
• You assign the null value to a variable when
  you want to ensure that the variable does not
  contain any data
• Use If x null or x null

14
Operators

• JavaScript operators combine data
• JavaScript has all the familiar operators (, -,
  /, , ) and

15
Logical Operators

• Logical operators are used for comparing two
  Boolean operands for equality

16
Comparison and Conditional Operators (Cont.)
17
Comparison vs. Assignment

• Equality (!!!NOTE!!!) JavaScript like C, C
  and Java to name only a few uses double
  equals to check for equality
• A single equal sign is the assignment operator

18
Working With Strings

• A text string contains zero or more characters
  surrounded by double or single quotation marks
• Literal strings can be also be assigned a
  zero-length string value called an empty string
• Strings can be combined (concatenated) using the
  operator
• Advanced string operators can search a string for
  text and replace segments of text just like VB

19
Escape Characters and Sequences (for formatting
string text)

• the combination of the escape character with
  other characters is called an escape sequence

20
JavaScript Commands

• A command in any computer language is a
  reserved word such as write
• that tells the computer to do something
• Change variable values (MEH 13.6)
• Manipulate I/O (MEH 13.6)
• Manipulate the O/S (MEH 13.18)

21
JavaScript statements and code sequences

• A statement is a syntactically correct command
• A line is series of syntactically correct
  statements separated by semicolons ltgt and ending
  in a line-feed/carriage return
• A code sequence (or program) is a series of lines
  which are executed left to right, top to bottom
  (MEH 13.1)
• Code inside ltscriptgtlt/scriptgt containers in the
  ltHEADgt of a document is NOT executed when first
  encountered. It is stored and remembered and
  executed only when called outside the ltHEADgt

22
Selection (choosing alternatives) (JSv4 8.2, 8.3)

• 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 of else is strictly
  optional.

23
Selection roll your own (JSV4 8.3class)

• A simple program specification calling for
  conditionals and Boolean logic. A job interview
  expert system
• Were going to input a salary figure
• If less than 40K/yr the write Yo! I sweated
  bullets learning JavaScript. You think it was
  easy!
• If exactly equal 40K/yr write Congratulations
  youre now last on my list
• If greater than 40K and less than or equal to 80K
  then write Let me think about it.
• If greater than 80K/yr then write Who do I have
  to kill?

24
Logical (Boolean) Operators

• To do the complex comparison
• If gt 40K and lt 80K then write Let me think
  about it.
• Logical operators are required
• AND (i.e. if A is true AND B is true)
• OR (i.e. if A is true OR B is true)

25
Logical (Boolean) Operators (2)

• The last logical operator is NOT ? !
• i.e. if salary plus bennies is not gt 80K then I
  dont care.
• If !((salary bennies) gt 80000) then . . .
• Notice the ! comes first and applies to the
  entire expression in parentheses read it as
  if NOT salary plus bennies greater than . . .
• Now, back to the example (JSV48.3classRaw)

26
Creating a JavaScript Source File copyCenter.html
copies.js

• You can also save JavaScript code in an external
  file called a JavaScript source file
• You can then write a statement in the document
  that executes (or calls) the code saved in the
  source file
• When a browser encounters a line calling a
  JavaScript source file
• It looks in the JavaScript source file and
  executes it (actually the browser loads the
  code when first parsing the page)

27
JavaScript Source Files (Cont.)

• Is usually designated by the file extension .js
  and contains only JavaScript statements
• It does not contain a ltscriptgt element
• To access JavaScript code that is saved in an
  external file, you use the src attribute of the
  ltscriptgt element
• ltscript srccopies.jsgtlt/scriptgt

28
JavaScript Source Files (Cont.)

• The browser ignores any other JavaScript code
  located within the ltscriptgt element
• There are several reasons to use a .js source
  file instead of adding the code directly to a
  document
• The document will be neater
• The JavaScript code can be shared among multiple
  Web pages
• JavaScript source files hide JavaScript code from
  incompatible browsers

29
Preparation for the Javascript Labs

• The JavaScript labs will consist of
• Finding effects on a page that you want to
  duplicate
• Locating the code that performs the effect
• Cutting the code from the original page and
  embedding it in your page
• Getting it to work in the new environment
• The time honored name for that process is HACKING

30
Six JS Lectures, Six Labs

• The first lab will have a demonstration/lecture
  component on debugging based on Chapter 8 of your
  text. You must display mastery of the debugger
  for the 2nd exam. The lab itself will execute
  simple modifications to existing code date and
  time and last changed routines that are largely
  self contained. You are strongly advised to use
  debugging techniques in the labs.
• JSV4 3.2 MEH 14.8 MEH 14.9

31
JavaScript Lab 2

• 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
JavaScript Labs 3 4

• The third JavaScript lab will be concerned with
  reading and writing cookies and coding of DHTML
  menus.
• The fourth lab will use advanced JavaScript to
  animate a web page. The lab will require all the
  JavaScript knowledge you have acquired in all
  lectures.
• The results of both the cookie and advanced DHTML
  labs can be incorporated directly into your
  projects.

33
JavaScript Labs 5 6

• JavaScript lab 5 uses Access wizards to write ASP
  that allows database interrogation from a web
  page
• JavaScript lab 6 is a brief introduction to AJAX
  a contemporary web interaction technique

34
My First JavaScript Script

• JSV4 2.14
• My First Hack
• Add a button for Clinton I feel your pain . .
  .
• Add a button for Bush, Sr. Read my lips . . .
• Add a button for Obama I believe we can ltfill
  in the blankgt together.
• Add a button for Billary Ive found my voice.
• Add a button for McCain Bomb, bomb, bomb
  bomb, bomb Iran

35
A More Complex Example

• Gosselin MovingExtimator.html from Chapter 8
• Change the cost per mile to 1.50 (a typical
  program maintenance example)
• Add the ability to calculate the cost of moving
  flutes. A flute is 1/25th as expensive as a
  piano. (Discuss first, code second!)