Old Man Joe's Javascript Fundamentals Course

An attempt to teach the fundamentals of scripting along with the tools of JavaScript

 

 

 

Prologue

Introduction to JavaScript

 

How to Maximize the Benefit of Using these Lessons

 

The lessons below are actually the projected "final products" (or a close approximation thereof) of students who would ordinarilly take these lessons as an "Instructor Led" course. This course assumes that the student has a basic understanding and "working knowledge" of HTML. For those of you who wish to evaluate the effectiveness of this course -- or actually learn the basics of Javascript -- I would recommend that you do the following:

  1. Print both the webpage and HTML/JavaScript code for each lesson.
  2. Open Notepad or any HTML editor of your choice.
  3. Glancing at the code that you have printed, attempt to accomplish what you have seen rendered on the webpage using the particular declaration manner, control structure and/or data structure suggested in the code.
  4. Save your work as you go along into a file with an extension of "htm" or "html."
  5. Test each idea learned immediately after you have keyed in the code -- debugging any errors as you go along.
  6. Add an idea or two of your own using these same declaration manners, control structures and/or data structures as you go along. Your finished products should thus be somewhat larger (vertically longer) than the originally (rendered) lesson webpages.
  7. Read the comments in the code as you go along. Without a live instructor, they are the best "live" assistance that is possible in lessons of this type.
  8. Be patient and don't expect the snazziest, most animated pages on the web from these lessons. They are provided as a means to understand the basics of JavaScript so that when you develop your own (presumably snazzy) pages, you will understand what you are doing.

     

 

 

 


 

Lesson One

Introduction to JavaScript

 

Basics (Part 1)

 

 

This lesson prepares the student for the lessons that follow. A brief explanation of what scripting is (in general) together with the place that JavaScript has taken in the world of Web Development is discussed. The concept of developing simple expressions composed of scalars, constant strings, variables and arrays is practiced on a single HTML document (webpage). Operators, Boolean constants and variables are introduced in a natural and comfortable manner.

Simply go to:

Lesson One

and follow what is rendered by the browser, line by line, while periodically viewing the source to see how each segment was developed.

When completed with the lesson (with understanding!), simply click on "BACK" button on toolbar to return to this page.

 


 

Lesson Two

Introduction to JavaScript

 

Basics (Part 2)

 

 

This lesson continues the students’ introductory experiences with JavaScript. It expands the use of scalars, variables and basic operators to the capability to build and use arrays and more complex expressions. A number of different kinds of expressions are examined; i.e., string, numeric and Boolean. A variety of new operators are introduced along with the precedence rules which govern the evaluation of expressions.

Note: The precedence of operators in JavaScript is as follows:

Highest

  1. Parentheses
  2. Unary operators ( ++, --, -, !)
  3. High Precedence Arithmetic Operators (* , /, %)
  4. Low Precedence Arithmetic Operators ( +, - )
  5. Comparison Operators ( = =, <, >, < =, > = )
  6. Binary Logical Operators ( &&, || )
  7. Conditional Operators ( ?, : )
  8. Assignment Operator ( = )
  9. Left-to-right for operators of same precedence

Lowest

Simply go to:

Lesson Two

and follow what is rendered by the browser, line by line, while periodically viewing the source to see how each segment was developed.

When completed with the lesson (with understanding!), simply click on "BACK" button on toolbar to return to this page.

 

 


 

Lesson Three

Introduction to JavaScript

 

Control Structures and General Flow of Control (Part 1)

 

This lesson deals with the flow of control in a JavaScript script during client-side execution. Basic loops and alternation will be covered. Means for breaking out of a loop or stopping execution within a loop, then continuing, are presented. Both alternation and looping may be nested in JavaScript, but special care must be taken while developing the syntax of the code in the script.

Simply go to:

Lesson Three

and follow what is rendered by the browser, line by line, while periodically viewing the source to see how each segment was developed.

When completed with the lesson (with understanding!), simply click on "BACK" button on toolbar to return to this page.

 


 

Lesson Four

Introduction to JavaScript

 

Control Structures and General Flow of Control (Part 2)

 

Additional control structures are presented in this lesson together with some means for bringing the viewer into action as the script is being executed. Although Objects, per se, are not formally introduced in this lesson, they are used to demonstrate some additional power available in JavaScript’s control structures. The power of combining such control structures as the "switch statement" and the "prompt" function (a JavaScript "built-in function) is demonstrated.

Simply go to:

Lesson Four

and follow what is rendered by the browser, line by line, while periodically viewing the source to see how each segment was developed.

When completed with the lesson (with understanding!), simply click on "BACK" button on toolbar to return to this page.

 

 


 

Lesson Five

Introduction to JavaScript

 

Understanding Functions

 

This lesson introduces the student to Functions as they are used in JavaScript. Functions are perhaps the most essential control structure utilized in JavaScript, yet they are also probably the least understood. The student will learn how to properly declare and call functions, whether the functions are to be coded by the author of the webpage or not. In learning how to pass variables or scalars through argument lists to a function’s parameter list, the student will learn to distinguish between local and global variables. The "passing of parameters," as it is called, is the key to understanding functions.

Simply go to:

Lesson Five

and follow what is rendered by the browser, line by line, while periodically viewing the source to see how each segment was developed.

When completed with the lesson (with understanding!), simply click on "BACK" button on toolbar to return to this page.

 

 

 


 

 

 

Lesson Six

Introduction to JavaScript

 

Understanding Events and Event Handlers

Also an Introduction to Simple Form Objects

 

 

This lesson introduces the student to Events as they are dealt with in Javascript. Events can either be physical actions taken on the part of the viewer of a webpage (clicking or double-clicking a mouse "on" a given Object, passing the Mouse Pointer over an Object, depressing a specific key on the keyboard, etc.) or may be simply the occurrence of very specific actions during the viewer’s "session" with your webpage (the loading or unloading of the page itself or when a given Object either gets or loses the focus – seen as highlighting to the viewer – as a couple of examples.

Some of the events are actually combinations of other events; for example, the "Click" event is a combination of a "Mousedown" and a "Mouseup" event and separate event handlers are sometimes helpful for all of the events in such a "family" of events. This will be seen as you (the class) develop the page for this lesson step by step.

Of course, you should fully understand Functions (Lesson 5) before trying to exersise the events and event handlers demonstrated on the webpage for this lesson.

Simply go to:

Lesson Six

and follow what is rendered by the browser, line by line, while periodically viewing the source to see how each segment was developed.

When completed with the lesson (with understanding!), simply click on "BACK" button on toolbar to return to this page.

 

 


 

 

 

 

Lesson Seven

Introduction to JavaScript

 

Using Events with Various Kinds of Forms to Make Multiple Path Decisions

 

This lesson continues our examination of Forms and Events. A wide variety of types of Forms is included, but this lesson should be a nice respite before looking at Objects in more detail. And since the new learning is largely syntax (easy stuff!), a few of the earlier control structures and data structures (Arrays) are included to keep the students on their toes.

 

Simply go to:

Lesson Seven

and follow what is rendered by the browser, line by line, while periodically viewing the source to see how each segment was developed.

When completed with the lesson (with understanding!), simply click on "BACK" button on toolbar to return to this page.

 

 


 

 

 

 

Lesson Eight

Introduction to JavaScript

 

Using and Creating More Built-in Objects, Using Generic Functions and Setting/Clearing Timed Intervals

 

This lesson introduces in a slightly more formal manner the subject of Objects in Javascript. In so doing, it covers Link Objects, Anchor Objects, Image Objects and others. In all of these, there is additional material relating to the Array Object. Also, "timing," as a subject of its own, is introduced by showing how to use methods that allow the Javascript author to set and clear Timers. It prepares the student to handle the concepts and tools to build his or her own "tailored" Objects in the next lesson.

 

Simply go to:

Lesson Eight

and follow what is rendered by the browser, line by line, while periodically viewing the source to see how each segment was developed.

When completed with the lesson (with understanding!), simply click on "BACK" button on toolbar to return to this page.

 

 

 

 


 

 

 

 

Lesson Nine

Introduction to JavaScript

 

Creating and Using Your Own Objects -- Using Object Functions, Object Constructors, Object Initializers, . . .

Objects, objects, and even more about objects!

 

Inasmuch as the heart and soul of Javascript is embodied in its object orientation (although there will be some who would disagree with that categorization), it seems appropriate to devote an entire lesson to this important subject. Whereas classes and class modules provide the structure for inheritance, polymorphism and encapsulation in C+, Visual Basic and other Object Oriented languages, Javascript's functions provide these capabilities with ease. Careful attention is given to the development of Objects using Constructor Functions so as to provide full Object Orientation as well as the shortcuts necessary to easily provide basic Object functionality without all of the niceties of Object Orientation when not required. Where necessary, examples are shown that demonstrate some of the idiosyncrasies or "Objects in Javascript."

 

Simply go to:

Lesson Nine

and follow what is rendered by the browser, line by line, while periodically viewing the source to see how each segment was developed.

When completed with the lesson (with understanding!), simply click on "BACK" button on toolbar to return to this page.

 

\

 


 

 

And One Last Little Lesson

Introduction to JavaScript

 

Well, Who Said We Couldn't Have a Little Fun Anyway?

 

This last little lesson does nothing more than introduce a tiny bit of the "fun" that awaits the student as he or she moves quickly towards using various combinations of the tools under study. A well-written function and the right event-handlers work together like a horse and carriage, but it will take constant practice to coordinate the various "horses" and the "carriages" so as to provide a means to get to where we all want to go.

At the same time, this lesson is also presented for those students who are the type of learners who learn a great deal by watching others. Two websites, in particular:

http://www.javascripts.com/

and

http://javascript.internet.com/

are two of many websites on the World Wide Web that contain an enormous number of working scripts. Many, like the first "earthquake" shown in this lesson, are free for the taking; many others are not free, but can be used to gather ideas -- and with a little tweak here and a little tweak there . . . voila! You have a Picasso.

Of course, one of the principal reasons for this introductory course in Javascript is to insure that web site developers and content coordinators who use Javascript -- and who take this course -- whether they are established programmers or not, become disciplined Javascript scripters/programmers and not simply Javascript hackers. Most great musicians do indeed know basic music theory just as most great scientists understand basic physics, chemistry and mathematics. We believe that good Javascript scripters/programmers should know the fundamentals of the language.

But even so, this course would not have been truly "complete" without at least a taste of what is available on the World Wide Web for helping you to solve a particularly sticky problem . . . or in some instances, to get started with a new script. It would be time well spent to look at the code behind many of the webpages displayed at the first of the above-referenced websites -- either one of which is sometimes referred to as the "Javascript Public Library." And there are more . . .

Hopefully, with this course behind you and having learned both the fundamentals of Javascript as well as where to find that elusive answer to the Javascript problem of the moment, you will be able to use Javascript to add both utility and dynamics to the websites that you build in the future.

 

Simply go to:

Last Little Lesson

and follow what is rendered by the browser, line by line, while periodically viewing the source to see how each segment was developed.

When completed with the lesson (with understanding!), simply click on "BACK" button on toolbar to return to this page.

 

 

 

 

 


 

 

Nedstat Counter