Advancing your Web Site: Tackling the Joys and Jitters of JavaScript

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

4 Νοε 2013 (πριν από 3 χρόνια και 5 μήνες)

70 εμφανίσεις

Advancing your Web Site:
Tackling the Joys and
Jitters of JavaScript

Daniel B. Smith

dsmith77@gmail.com

http://dsmith77.wordpress.com/

Part I

Introductions

Who I am


I graduated in 1999 from
Gardner
-
Webb University

with a Bachelor's
Degree in Computer Science.


I have been teaching Computer
Programming, Computer Applications,
and e
-
Commerce at
McDowell High
School

since January of 2000.


In January 2004, I became the web site
administrator for my school’s web site.


In 2005, I started a business creating
web sites for small businesses called
DanielSmithDesigns.com
.

What

you teach

Where

you teach

Your

experience

with web

technologies

Why you

took this

workshop

Your

Name

Who are you?

Part II

Clearing up the Name Confusion

What do these have in common?

QtScript

Mocha

LiveScript

JScript

InScript

haXe

ECMAScript

DMDScript

CriScript

ActionScript

?

They are all different
names or dialects of
the language most
commonly known as
JavaScript.


Confused yet?

Browser Wars


The web caught the public’s attention after the Netscape Navigator
browser became available and made the web visual instead of purely
text
-
based.


Microsoft noticed the trend and its potential and created Internet
Explorer to compete. After including IE with their operating
system, Microsoft gained a dominant market share.


In competing, both attempted to best the other by including new,
exclusive features. Thus, Netscape created JavaScript. Microsoft
countered with JScript.


Later, when Netscape submitted the language to ECMA
International for standardization, it became officially known as
ECMAScript.


References:


http://en.wikipedia.org/wiki/Browser_wars


http://en.wikipedia.org/wiki/ECMAScript


http://en.wikipedia.org/wiki/JavaScript

Java versus JavaScript


Java is not JavaScript!


Java is a high
-
level, cross
-
platform, compiled
language developed by Sun
Microsystems.


JavaScript is a scripting
language developed by
Netscape Communications.

So, what are Java Applets anyway?


An ‘applet’ is any software program that is run inside (or
within the context of) another program such as a browser.


The term arose during the 1990s in reference to
AppleScript programs used in this way.


Now, it is overwhelmingly used in reference to embedded
Java programs in web pages.


Thus, Java Applets are small Java programs embedded in a
web page that run in a browser.


Reference:


http://en.wikipedia.org/wiki/Applet

Part III

Scripting Languages

The Four Branches of Computers


Applications

(Basic Computer Skills and

Office Software Training)


Programming

(Software Creation)


Networking

(Server Maintenance and

Network Management)


Engineering

(Hardware Fabrication)

Programming Language Categories


Array


Aspect
-
oriented


Assembly


Authoring


Command line interface


Compiled


Concurrent


Curly
-
bracket


Dataflow


Data
-
oriented


Data
-
structured


Declarative


Esoteric


Extension


Fourth
-
generation


Functional


Interactive mode


Interpreted


Iterative


List
-
based


Little


Logic
-
based


Machine


Macro


Metaprogramming


Multiparadigm


Numerical analysis


Non
-
English
-
based


Object
-
oriented class
-
based


Multiple dispatch


Single dispatch


Object
-
oriented
prototype
-
based


Off
-
side rule


Procedural


Reflective


Rule
-
based


Scripting


Stack
-
based


Synchronous


Syntax handling


Visual


Wirth


XML
-
based

Scripting Languages


Scripting Languages were originally created for network
engineers who needed to automate routine tasks. They were
used to solve or simplify very small, very specific problems
that didn’t require a formal program to be written.


With the advent of the web, they have grown in popularity
and scope such that they are now used routinely to enhance
web pages with new (and sometimes trivial) functionality.


Scripting languages differ most notably from their bigger
cousins (like C, C++, C#, Java, and Visual Basic) in that
those are written more formally and are compiled prior to
execution.


Script code is generally written in an informal manner when
needed. Also, it remains human
-
readable and is not
compiled to machine code.

The Future of Web Programming


The web seems to be moving away from Scripting Languages to
more formal Programming Languages.


In particular, languages and frameworks used for database access
within a web page (ASP, PHP, Ruby on Rails) are becoming
increasingly common.


Scripting Languages allow for the creation of largely static,
informational web pages with dynamic parts.


Programming Languages allow for the creation and management
of dynamic, transactional services.


Only time will tell where the future of the web lies, but there will
likely be room for both.


Reference:


http://en.wikipedia.org/wiki/LAMP_(software_bundle)

Part IV

Reading JavaScript Code

My Copyright JavaScript Code

JavaScript Code
: (Displays an always up
-
to
-
date copyright ready for a page footer.)

// Year in 4
-
digit format

var modified = new Date(document.lastModified);

var m_year = modified.getYear();

if (m_year<1000) m_year = m_year + 1900;


var pre = "
daniel.smith
";

var pst = "
mcdowell.k12.nc.us
";

var all = pre + "@" + pst;


document.writeln("Copyright &copy; " + m_year + " <a href=
\
"mailto:" + all +
"
\
">
Daniel Smith
</a>. All Rights Reserved.");


The Code Result
: (Modify the colored portions to customize the code.)


Copyright &copy; 2008 <a href="mailto:daniel.smith@mcdowell.k12.nc.us">Daniel
Smith</a>. All Rights Reserved.


The Page Result
:

Copyright © 2008
Daniel Smith
. All Rights Reserved.

XHTML Vocabulary Check


Different people and textbooks use different terms to refer
to the various parts of typical XHTML. The following is a
correctly coded XHTML tag (flag).


<hr width=“60%” color=“red” />



hr

is the tag name.


width=“60%”

and
color=“red”

are tag attributes.


width
and
color

are attribute names while
60%

and
red

are
attribute values. (The quotes were optional under the rules
of HTML but are now required under XHTML.)


Under XHTML, all attributes come in
name=“value”

pairs.

The <script> Tag

JavaScript code typically begins with


<script language="JavaScript" type="text/javascript">

<!
--



and ends with


//
--
>

</script>


Whenever possible put your JavaScript code in the <head> section of a web page to
ensure the script is loaded into memory before actual use in the web page, thus preventing
a runtime error. Also, always include both the language and type attributes or your script
may not execute in older or newer browsers.


Also, JavaScript code (without the script tags) can be saved to an external text file and be
linked to with the src attribute.


<script language="JavaScript" type="text/javascript" src="hello.js"></script>

How to read JavaScript Code


Read the code like the browser would:


From the top down


Left to right


One line at a time


Reading JavaScript code (like all programming code) is like reading an
Algebra equation!


X=4


Y=5


X+Y=Z


So, how much is Z?


There’s just one catch. In programming code, the result of a
calculation or assignment goes on the left. Using the example above:


X+Y=Z would be written as Z=X+Y in JavaScript code.

9

JavaScript Conventions


A double
-
slash at the start of a line marks a comment.


// This is a JavaScript comment.


All JavaScript lines should end with a semicolon


document.write(“Hello”);


document.writeln(“Hello”);


JavaScript is case
-
sensitive. Since XHTML is case
-
sensitive too
and must be written all in lowercase, I recommend that your
JavaScript code be written all in lowercase too. Being consistent
so your code matches is the rule! (Just so it’s clear, you CAN use
CamelCase, snake_case, and MiXeDcAsE with JavaScript
variable names. Just be careful if you do.)


JavaScript code is often triggered using one of the many
XHTML Event Handler. Remember, these event handlers are
actually part of XHTML (since HTML 4) not JavaScript.

Document String Writing Tips


You can use
HTML Escape Characters
:


Characters: &copy; &quot; &lt; &gt;


Result: © “ < >


You can also “escape” characters used with JavaScript code
so that they can appear in the web page source code.


In <a href=
\
"http://www.google.com/
\
"> the quotes
are escaped with a slash in front of them. This tells the
JavaScript to include literal quotes at those places.


Result: <a href="http://www.google.com/">


What’s the difference between Document.Write and
Document.Writeln? The latter includes a line break after
writing the code to the document making it easier to read.

onAbort

The loading of an image has been canceled

onBlur

A page element loses focus

onChange

The user changes the content of a form field

onClick

The user uses the mouse to click on a page element

onDblClick

The user uses the mouse to double
-
click on a page element

onError

An error occurs when loading a page or an image

onFocus

A page element gets focus (selected)

onKeyDown

The user presses a keyboard key

onKeyPress

The user presses or holds down a keyboard key

onKeyUp

The user releases a previously pressed keyboard key

onLoad

A page or an image finishes loading

onMouseDown

The user presses a mouse button

onMouseMove

The mouse cursor moves

onMouseOut

The mouse cursor moves off of a page element

onMouseOver

The mouse cursor moves over a page element

onMouseUp

The user releases a previously pressed mouse button

onReset

The form is reset; the reset button is clicked

onResize

A window or frame is resized

onSelect

The user selects some text on the page

onSubmit

The form is submitted; the submit button is clicked or the enter key is pressed

onUnload

The user leaves the current page

XHTML Event Handlers

Object
-
Oriented Programming (OOP)


OOP is a programming paradigm or style of programming
that closely resembles real life and how the human brain
understands and processes information.


The use of Dot
-
Notation in programming code indicates
object
-
oriented programming. In short, the keyword before
the dot refers to the “object” and the keyword after the dot
refers to either the “method” (action) being applied to the
object or the attribute of the object being read.


today.getYear() means return the year (an attribute) of
the date.


document.writeln() means write (a method) to the
document. Specifically, write whatever is inside the
parentheses.


The Document Object Model (DOM)


The Document Object Model is built
-
in to all the popular browsers.


In the words of the W3C located at
http://www.w3.org/DOM/
,
“The Document Object Model is a platform
-

and language
-
neutral
interface that will allow programs and scripts to dynamically access
and update the content, structure and style of documents.”


The DOM provides “hooks” for code running in web pages to
make the pages more dynamic, responsive, and interactive.


It’s most closely associated with JavaScript which accesses the
DOM extensively. “document.writeln();” is JavaScript code that
interacts with the DOM. In this case, it displays whatever is found
between the parentheses in the current browser window.


References:


http://www.javascriptkit.com/domref/


http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(
DOM)


window

history

navi
-

gator

loca
-

tion

event

screen

docu
-

ment

anchors

frames

applets

classes

embeds

ids

images

layers

links

plugins

tags

areas

mime
-

types

plugins

forms

button

file
-

upload

check
-

box

text

text
-

area

pass
-

word

radio

reset

submit

hidden

select

options

The Document Object
Model (DOM)

My Copyright JavaScript Code

JavaScript Code
: (Displays an always up
-
to
-
date copyright ready for a page footer.)

// Year in 4
-
digit format

var modified = new Date(document.lastModified);

var m_year = modified.getYear();

if (m_year<1000) m_year = m_year + 1900;


var pre = "
daniel.smith
";

var pst = "
mcdowell.k12.nc.us
";

var all = pre + "@" + pst;


document.writeln("Copyright &copy; " + m_year + " <a href=
\
"mailto:" + all +
"
\
">
Daniel Smith
</a>. All Rights Reserved.");


The Code Result
: (Modify the colored portions to customize the code.)


Copyright &copy; 2008 <a href="mailto:daniel.smith@mcdowell.k12.nc.us">Daniel
Smith</a>. All Rights Reserved.


The Page Result
:

Copyright © 2008
Daniel Smith
. All Rights Reserved.

Part V

Implementation Issues

Common Uses


Data Accuracy: Validate the input from web forms
before they are submitted.


Data Security: Protect personal data like email
addresses from automatic data harvesting bots.


Navigation: Open new windows (popups).


Presentation: Change images as the mouse pointer
moves over them.



In general, perform any and all small, routine tasks.
(JavaScript is a scripting language, after all.)

Compatibility Considerations


One should never, ever use JavaScript to implement any part of a
web site that is critical to its function. JavaScript code should be
used only to apply cosmetic effects or provide enhancements to
basic functionality.


When JavaScript doesn’t work or is disabled, web sites should
degrade gracefully. They should still be accessible and fully
functional without the JavaScript.


Site visitors can:


Turn off JavaScript support in their browsers


Use a browser with incomplete or unusual support for JavaScript


Access your site with an electronic device without support for JavaScript


Be disabled in some way such that the use of JavaScript inhibits their
access to your site

Expectations

Don’t expect to create a master e
-
Commerce site in a semester. It’s
just not practical. Students, even advanced ones, have a hard time
grasping the full concept of what a web site is, what it can be, and
how it all fits together.


What you can reasonably expect from…


All Students:


Basic XHTML Coding


Copy and Paste JavaScript


Only The Rare Highly Advanced Students:


Custom Programming; Custom JavaScript


Most students will fall somewhere between these two extremes.

Further Study


Online Courses


Introduction to JavaScript from IWA
-
HWG


$120 for Members + $49 Annual Member Fee


Online Tutorials


JavaScript Primers

from HTML Goodies


JavaScript Tutorial

from JavaScript Kit


JavaScript Tutorial

from W3Schools