8 Javascript 1 Basics

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
1
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).
2
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)
3
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 we’ll discuss later)
to a script interpreter that causes the browser to do
what the statements (commands) tell it to do.
4
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 Control /
HTML Java Virtual
Interpreter Machine (JVM)
(compiler)
applet
HTML Interpreter
script (display formatting)
script
Communications Control /
JavaScript
facilities HTML Interpreter
HTML
page
5
Applets and Java Interpreters
This figure shows a web browser that has a Java interpreter runs the program locally
on the user’s computer, freeing up the Web server for other purposes.
6
Identifying JavaScript in an HTML page
In the <HEAD> of the document in the <SCRIPT>
</SCRIPT> 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
<IMG> 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
7
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.
8
Javascript Variables
Javascript variable names must begin with a letter
and can’t 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’
9
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
10
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
11
Data Types
• Data types that can be assigned only a single value
are called primitive types
• JavaScript supports six primitive data types
12
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
13
Operators
JavaScript operators combine data
JavaScript has all the familiar operators (+, -, /, *, %)
and:
14
Logical Operators
Logical operators are used for comparing two
Boolean operands for equality
15
Comparison and Conditional Operators
(Cont.)
16
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
17
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
18
Escape Characters and Sequences (for
formatting string text)
the combination of the escape character with
other characters is called an escape sequence
19
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)
20
JavaScript statements and code
sequences
A statement is a syntactically correct command
A line is series of syntactically correct statements
separated by semicolons <;> 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 <script></script> containers in the
<HEAD> of a document is NOT executed when first
encountered. It is “stored and remembered” and
executed only when called outside the <HEAD>
21
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)
else if . . .
else
Note that the first ‘if’ has no ‘else’ and the last ‘else’ has
no ‘if’! Use of else is strictly optional.
22
Selection – roll your own (JSV4 8.3class)
A simple program specification calling for
conditionals and Boolean logic. A ‘job interview
expert system’:
We’re 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; you’re
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?”
23
Logical (Boolean) Operators
To do the complex comparison
If > 40K and <= 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)
||
24
Logical (Boolean) Operators (2)
The last logical operator is NOT  !
i.e. if salary plus bennies is not > 80K then I don’t care.
If !((salary + bennies) > 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)
25
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)
26
JavaScript Source Files (Cont.)
Is usually designated by the file extension .js

and contains only JavaScript statements
It does not contain a <script> element
To access JavaScript code that is saved in an external

file, you use the src attribute of the <script> element
<script src=“copies.js”></script>
27
JavaScript Source Files (Cont.)
The browser ignores any other JavaScript code
located within the <script> element
There are several reasons to use a .js source file
instead of adding the code directly to a document:
1. The document will be neater
2. The JavaScript code can be shared among multiple
Web pages
3. JavaScript source files hide JavaScript code from
incompatible browsers
28
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
29
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
30
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.
31
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.
32
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
33
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 <fill in the
blank> together.”
Add a button for Billary: “I’ve found my voice.”
Add a button for McCain: “Bomb, bomb, bomb – bomb,
bomb Iran”
34
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!)
35

8 Javascript 1 Basics

Încărcat de

Informații document

Descriere originală:

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

8 Javascript 1 Basics

Încărcat de

Drepturi de autor:

Formate disponibile

JavaScript Lecture 1 (JS Intro)

When assigning a numeric value to a variable:

You can declare multiple variables in the

Advanced string operators can search a string for text

Manipulate I/O (MEH 13.6)

if (statement in brackets is true)

You can also save JavaScript code in an external file

Is usually designated by the file extension .js

To access JavaScript code that is saved in an external

The JavaScript labs will consist of:

My First Hack

S-ar putea să vă placă și