CIS166AA - JavaScript

illinoiseggoΛογισμικό & κατασκευή λογ/κού

28 Οκτ 2013 (πριν από 3 χρόνια και 5 μήνες)

55 εμφανίσεις


CIS166AA
-

JavaScript

Week

Two

Lesson

Gary Marrer

The Weeks Objective…

This week we will start
our

JavaScri
pt programming in earnest. For

the
next

15 weeks
,

we will
be
us
ing

our textbook to drive our instruction of JavaScript. Each week, we will address roughly address

a
tutorial

section at a time. Each tutorial section includes

multiple
chapters/
sessions. Each session
addresses an aspect of JavaScript. My goal is to have

a lesson for every week

and to also include other
learning assets like videos to assist you in learning material covered in that tutorial
.
My goal is also not
to repeat
what has already been
written

in

the textbook but to add clarity to the sections whic
h are
more complicated
.

This week with tutorial one we will address JavaScript fundamentals.

Note:

Just a note on terminology. Technically, JavaScript is a scripting language which has traditionally
meant that language statements need to be processed by an

interpreter. Because of the functionality
that exists in JavaScript, it is not uncommon to

hear JavaScript s
cripts also called applications or
programs. Many scripts created
with

JavaScript are as complicated as any you’ll find in a traditional
programm
ing language. Use all of these terms

(script, application and program)
synonymously in this
class


O
h
,

that Darn
Typo…!

Much of the lessons for this class had to be rewritten to accommodate the
change in books. I do not have a proof reader or editor so i
f you find an error or don’t understand a
section, let me know and I will repair it. Thanks.



Fundamentals

JavaScript has historically been considered a client side programming language. This class will also
focus on JavaScript as it relates to client side programming but will
also
be
using DOM and

A
JAX

programming
that does
call se
rver code to execute
.

For r
obust web applications
, the program
will

usually employ a combination of both client side and server side scripts

and also HTML and CSS
. A
t

GCC, we use JavaScript for client side programming
instruction
and
A
SP.
N
et for serv
er side

programming.

Other serv
er side programming languages are JSP (Java Server Pages) and PHP to name
a few.



JavaScript Editors

It doesn’t take a lot of sophisticated software to create HTML pages with JavaScript embedded in them.
You could start with something as easy as
MS
-
Notepad and go to a more functional text editor like
Text
P
ad

(
www.textpad.com
)

or NotePad++ (
http://notepad
-
plus
-
plus.org/
)
. If you go to any one of the
free software
sites you will find it probably
has
a couple of dozen applications which advertise
themse
lves as HTML/JavaScript editors.

After text editors, the next step up in JavaScript editors would be editors which could be classified as
IDE’s (integrated development

environment). A modern IDE has not only a text editor but also some
sort of Intell
-
a
-
sense (a feature which assists with

language syntax), the ability to run the script from the
editor (not having to go and load it in the browser)
and other features such

as a built in debuggers and
code

formatters to make the code look

pretty.


I have been using the product called
Aptana

Studio 2

(see video on how to use)
(
http://www.aptana.com/products/studio2
)
as my JavaScript editor for my last two sections of
C
IS166AA
. Aptana

is based on the popular IDE called Eclipse (
J
ava programmers will be familiar with this

IDE
) and supports Intell
-
a
-
sense for HTML, CSS and JavaScript.
It also has a tab
s
o you can quickly render
your HTML/CSS/JavaScript with an Aptana built

in browser window. Aptana will also do HTML and CSS
code validation.

To complete my development environment for JavaScript,
I use Aptana with a debugger
called
FireBug
. FireBug is a FireFox plug
-
in so therefore
it

is required that you use FireFox to use
FireBug.

The best news is Aptana and FireBug are free.

Data types

Even though JavaScript
is
a weakly typed language and does not support a large number of different
data types like other languages (i.e. Java, C#, C++, etc.), it does support data types. I

mention this
because not keeping track of that data type in your JavaScript scripts can lead to some unusu
al errors.
T
hey can be difficult to debug or logic problems th
at

can be difficult to locate. Program comments are
a good way of identify
ing

the inte
nded data type of a variable and a real benefit to another programmer
who may be looking at your code

.

Functions

You’ll want to pay special attention to
the section of the textbook
on functions. Functions are used to
implement procedural programming and

are used extensively by all programming languages to divide
application logic into smaller more manageable pieces. Better to have a script that calls multiple
functions than one script with no functions
and
a lot of lines of programming instructions

not
grouped
logically.

This may not make a lot of sense
at
this point but as you start coding your applications you
will find that by separating the code out into sub tasks of the entire application and then calling the sub
tasks, it will be much easier to de
bug the appli
cation
.

Function syntax can be difficult to understand. It’s important to realize that
when
a function is called
,

the statements in the
body of the
function are executed. At the end of the function
,

control is turned
back
to
the li
ne

below the original function call. Spend some time walking through the examples of the
book
and watch my videos
.

If you are still having problems with functions

after reading the book and
watching the videos
, make sure you ask questions so I can help you

through this.

I have placed a couple of videos and a sample script that demonstrates functions. The video is from

a
previous semester so the assignment
I am

referring to is not an assignment for this class. Just
listen to the walk
-
through and then take

a peek at the program and from your browser, view
the page

source (there is a video for th
at also).


Program comments and debugging

Program comments are always an afterthought for new programmers. Program comments provide a
way for another programmer to

look at your code and through its comments get

a
more English like
explanation of what the program will do. This also comes in handy if you h
ave to return to the
program after a

period of time

(memories fade and rereading your code to figure out what is
going on is
not as easy as reading the comments)
.

For this class, I am requiring that all JavaScript comm
ands have a corresponding comment

on the line
before or next to the
line

explaining what that JavaScript Command is doing. For those of you who
have

done programming before
,
this will seem somewhat extreme.
I
t is my experience that if you can
explain what the program does
via English
program
comments,

you will truly have a better
underst
anding of how the command works and therefore a better understan
ding of JavaScript.

Debugging
an appl
ication whether it be JavaScript or any
programming language is an activity w
h
ere you
walk through the program line by line evaluating the values of ex
pressions or

variables to determine

if
what you are expecting is ac
tually what the programming is returning. Debugging could be as simple as
including JavaScript Alert functions to display key program information at key points in the script or
sophisticated debugger applications like FireBug.

Debuggers are typically applications which help you move through your code a line at a time.
The
debugger application allows you to set a breakpoint that stops the application

at the point where you
would suspect the contents of its variables or
analyze wh
at is

being processed in a control structure.
Debuggers work best in finding logic errors
(great for analyzing control structures like
if and

while blocks
that are covered later)
and can save a tremendous amount of time in finding logic errors.


Book N
otes:

Make sure you read the “InSight” blocks identified in the sections. These are small callouts which a lot
of
the
time give important details about JavaScript. They are shaded light blue and are labeled
“InSight.”

Any Questions....

If you have questi
ons send me an email
. I want to help you succeed

in this class.