7/9/02

COSC 330 WEB DEVELOPMENT

STUDY GUIDE FOR LM VII
INTRODUCTION TO JAVASCRIPT
Under construction! 

1. INTRODUCTION
2. STUDY GUIDE FOR LM VII AS A WHOLE
3. STUDY GUIDES SPECIFIC SECTIONS OF LM VII
4. GLOSSARY

STUDY GUIDE FOR LM VII AS A WHOLE:

1. JavaScript, in LMVII, is covered by parelling the presentation in Moncur..
1. ASSUMPTIONS; I wrote LMVII and its appendices assuming that you:
1. first read the chapter (called an "Hour") in Moncur and run the examples (If you don't want to type the examples, copy them from the examples page on text Web site. I have included this link on the Navigation Panel.)  I suggest that you use, at least, Dreamweaver and FrontPage to edit the JavaScript scripts, but you might want to use Netscape 6; all of these have their advantages, but I prefer Dreamweaver. (Its highlighting makes it easier to view the scripts.)
2. then read the corresponding section in LMVII, and
3. refer to the supplemental material in appendices A and B to try to integrate the new material into a overall view of the JavaScript language itself.  (Remember to use the Find... facility of your browser to "look up" words or phrases in LMVII or the Appendices.
Note: you will be working through Moncur, at a rate of 4 "Hours" per week, instead of doing a lab each week.  (See the Schedule from week 9 on.)  Actually I don't think Moncurs "Hours" really take that long so the "4 hours" should be equivalent to the 3 hours normally reserved for doing one week's lab.
2. In order to present a complement to the text, Moncur, the basic features of JavaScript (as a programming language) are presented in appendices A and B of LMVII,  rather than in LM VII itself.   This is done so that the concepts introduced in the tutorial-like presentation of the Moncur can be parallelled in the sections in the LM.  The language reference is presented in two appendices so that
1. Appendix A, the primary reference, can be made concice and thus simpler to understand;
2. Appendix B contain the details necessary for completeness but which are intuitive and thus unnecessary to Appendix A.
3. It is recommended that everyone, at least skim Appendix A before starting the text and the LM .  It should help students, with programming experience in C, C++, or  Java, gain an overview of  JavaScript and recognize its similarities with and, more importantly, its differences from these other languages.  Even students with no programming experience should benefit by skimming this appendix, for it will give a preview of JavaScript  as a whole which should give a global perspective while reading the text and LM.
4. {EXPAND}The most difficult aspect of developing the JavaScript part of this course is that I am addressing several audiences ... C.S majors or minors with COSC 201 and even 310 ...students taking 200 or 201 ... students with no programming experience.   Basically two categories
1. Student who are CS majors or minors should focus on the appendies, i.e. JavaScript as an example of a programming language -- relating languages
2. Students who are NOT software developers should focus on LM VII, i.e. JavaScript as a tool for augmenting Web pages.
2. I think that JavaScript is a great language for an introduction to programming. (I prefer the more modern term, "software development".)   This is especially true for students who are NOT computer scientists but who want to learn what programming is all about.  The reasons Javascript is a great language for all types of beginers are:
1. First (and probably, most importantly) JavaScript is FUN!!  It is usually difficult, in typical programming languages, to do interesting tasks, especially while learning the basics, but JavaScript, being integrated with the Web, has many interesting, easy to understand applications.
1. Since client-side JavaScript is designed to be embedded within HTML documents, these can be used to enliven Web pages, something of interest to everyone.  Student Web sites can be "shown off" to family, friends, prospective employers, or the whole online world!
2. You can do all kinds of interesting things (easily understood and visualized tasks) with JavaScript in an HTML page, even if you are not on the Internet.
2. JavaScript is "OBJECT BASED" so the novice will acquire a solid foundation for object oriented software development without having to deal with the complexities of languages like C++ or Java.  This foundation can be used to later upgrade their skills to object oriented software development.  This has three big advantages:
1. JavaScript is much simpler than fully featured object oriented languages.  This simplicity allows the beginner to easily "master" all of JavaScript without having to deal with advanced features of object oriented programming like class definitions, inheritance, and polymorphism.
2. The student can begin by "using" objects without having to deal with the creation of abstract constructs like classes. JavaScript's DOM (Document Object Model) is small, intuitive "class library" that effectively illustrate what objects are and how they can be used - all using the intuitive, easily visualized concepts associated with Web pages.  Although abstract objects (equivalent to classes) can be created in JavaScript, this can be omitted or defered until the student has a firm idea of what objects are.
3. The novice learner is seldom in danger of acquiring bad habits that are fostered in "hybrid" languages OOP languages like C++ and Visual Basic where, OO features with non-OO features, easily confusing novice OO software developers!  ( However, JavaScript does have characteristics that can be misleading when trying to relate it to OOPL, e.g.
1. JavaScript uses (misuses?) the fundamental word "object" differently than most OOPL do.  See terminology inconsistencies, below.
2. JavaScript utilizes stand-alone functions, like C++, that are not part of a class, so it must be emphasized that this (using stand-alone functions) is a "no-no" in object oriented programming!)
3. JavaScript makes it easy to practice programming.
1. Since it is interpreted you can execute single instructions instead of having to write complete programs (as in compiler based languages like C++).  This makes it easy to experiment with expressions, functions, objects, etc.
2. JavaScript input/output is simple, intuitive, and memorable.  The very useful input/output methods, alert(), confirm(), and prompt(),  when combined with the document.write() method, can handle most simple I/O tasks which are displayed, via platform independent HTML, in any browser.  In full featured programming languages the I/O features can have a significant learning curve that distracts from the generic features of programming languages.
4. JavaScript scripts are very useful, because they augment Web sites.  Therefore, the learner will be inclined to actually use scripts they develop in personal Web pages or Web sites they develop for organizations to which they belong.  This should provide more motivation for using and extending what they learn in class and, consequently, increasing their software development skills.
5. JavaScript is easy to execute.  You just put JavaScript code in an HTML document, using any HTML editor (like Netscape Composer) and open that document!  You don't have to learn complex development environment or I/O interface to see the results of script execution.  It should also be noted that you don't have to be connected to the Internet to do this; just open an HTML page in Netscape (or I.E.) and the JavaScript starts to work!   Couldn't be easier or more convenient!  (Just getting programs to run in other languages can be a hassle!)  The wide applicability of Visual Basic is often used as a reason to teach that language, but VB only works in Windows environments whereas JavaScript is truly platform independent because to runs within platform independent Web broswers.
6. JavaScript is easy to debug.  When an error occurs, the JavaScript Console pops up (or you can open it) and you can "experiment" with alternatives in the interpreter-linked convenient code entry box at the bottom of the console.  (On the downside, there is no sophisticated debugging tools built into JavaScript development tools -- of which I know.  See item 10, below.)
7. JavaScript is based a GUI (the browser), so
1. it introduces event-driven programming (a key modern application) that is relatively simple and
2. developing the GUI itself is unnecessary.  (This is an arduous and tedious task in most languages!)
8. Basic JavaScript syntax virtually identical to that of C, C++, and Java  (especially where control structures are concerned) so as you learn it you are learning all those languages.
9. JavaScript learning material is readily available (and free!) online, so you don't really have to buy textbooks; even if a primary text is required, the student has tremendous range of extra references online that are current and downloadable.
10. JavaScript examples are available everywhere, especially online.  The beginner can copy, paste, and customize countless  public domain scripts.  (You can copy them directly out of ANY Web page by downloading it and opening it in a text editor or an HTML editor like FrontPage or Dreamweaver.)  Many of these are ready made to be customized. This facilitates experimentation, even with large scripts (which is discouraged, in other languages, by having to type numerous lines of code without "typos").
11. JavaScript is FREE with every browser.  Therefore, each students can have their own copy without having to purchase and learn a new software development system.  (However, there is a downside; there is no sophisticated JavaScript development environment, of which I am aware, with visual development tools, built-in debugging tools, etc.  (If anyone knows of one, please let me know.) On the other hand,  this has the advantage that the student does not have to learn how to use a complicated integrated development environment (IDE) just to experiment with the language.)
12. JavaScript is very user friendly because it is relatively simple, built into browsers, and comparatively tolerant of mistakes.  However, the last feature ("tolerance") can be the proverbial "two edged sword"; see the comment at the end of this section.
13. JavaScript programming  integrates naturally with HTML authoring, because client-side JavaScript is designed to be embedded within HTML documents.   WYSIWYG HTML editors like Netscape 6, Dreamweaver, or FrontPage have simple JavaScript authoring environments.
1. Since HTML documents can be published on the Web, student Web sites can be used to submit homework assignments as well as advertise their expertise to family, friends, prospective employers, or the whole online world.
2. You can move logically from HTML authoring  to learning JavaScript.
However it should be noted JavaScript is very lenient about syntax, compared to many languages.  While this may make it more USER FRIENDLY (especially for beginners), it can foster BAD HABITS, so be careful.  In particular, in most languages (C, C++, and Java, in particular) you must end every statement (complete instruction) with a semicolon.  However, JavaScript is unusual in that it will accept a carriage return as an end of statement alternative to the semicolon;  the only time you must include a semicolon is when you have more than one statement on a single line.  Anyway, USING SEMICOLONS TO END EVERY LINE IS A GOOD HABIT, especially for beginners who may sometime use other, stricter languages, so add semicolons to all examples that (carelessly) don't use them.  Unfortunately, there are many of these in textbooks.  (I have placed this warning in LM VII itself, but it so important that it is worth repeating here.)
 
3. Unfortunately JavaScript uses some terms for object oriented features that differs from standard OO terminology.
1. This can be
1. confusing to learners who have previous experience with Java or C++ and
2. misleading to learners who are new to object oriented programming.
So, WHO ARE YOU? If you simply want to learn to use JavaScript to enhance your Web pages, you can ignore this incosistency of JavaScripts's terminology and learn the "language" JavaScript.  However, if you are computer science student (or use or plan to learn other OOPL) be VERY careful when relating JavaScript to those languages.  Most importantly, be careful when you encounter the JavaScript term "object".
2. JavaScript features which differ from standard OO features (If you are a beginner, you can skip this section; come back to it later.  If you have already learned an OOPL like C++, Visual Basic, Java, etc., read on.):
1. JavaScript does not have the "class" construct that is fundamental to all OO software development.  Instead, JavaScript uses the object (actually a constructor) construct to encapsulate its "properties" (also an inconsistent term) and "methods".  This can be very confusing since OOPL (object oriented programming languages) also have constructors which are special methods, within a class, for creating instances of classes.  JavaScript constructors are used for the same purpose, so this can be doubly confusing.
1. JavaScript uses the word "object" in lieu of the word "class".  This is not really incorrect in "TracySpeak" or Smalltalk terminology where "object" is a very general term that extends to concepts outside computer science; however, those who are used to thinking of an "object" as an instance of a class (as in C++ or Java), this can be confusing.  However in TracySpeak, since I always use the word "instance" rather than "object" in C++ or Java, there will be no inconsistencies in my learning material on those languages.  For more discussion of this topic (not essential, unless you are confused), see LM VII, section 1.B.a. and Appendix A, section 5.
2. Use the following table to determine the associations of various terms in different languages:

INCONSTANCIES IN OBJECT TERMINOLOGY AMONG LANGUAGES

CONCEPT	UML	C++	JAVA	JAVASCRIPT
class	class	class	class	object (constructor)
state	attribute	member data*	field* or attribute	property
behavior	operation or method	member function*	method	method
instance (or object)	instance or object	object	instance or object	instance

*These items specify commonly used names, not "TracySpeak".  I will use the UML terms (in bold in the table) in all languages, reserving "object" as the most general possible word (even outside computer science), i.e. everything is an object!  (However, in the LMs of this course I will use the traditional JavaScript term and add the UML term in parentheses, e.g.  property (attribute).)
1. The bottom line is, when you encounter the JavaScript word
1. "object", think of a class in UML, C++, and Java..
2. "property", think of an attribute in UML, C++, and Java.
2. JavaScript does NOT facilitate visibility, one of the essential features of OOPL.  Visibility is a way of allowing the developer to control the access to a class's members (attributes and methods).   ("Visibility" is a UML term; I think "access control" is a more descritptive term, so that is another example of "TracySpeak".)  For example, declaring attributes or operations "private" means that they can not be used anywhere except within the class where they are declared; declaring them "public" means they can be used anywhere.  The properties of JavaScript objects are "global" i.e. "public" by default.  (There are other access control modifiers, e.g. Java has "protected" and "package" access, but these are beyond the scope of this course.) (NOTE: "Visibility" is sometimes misleadingly called "information hiding" or "data hiding", which are subtly different, but, again, this distinction is also beyond the scope of this introductory presentation.)
3. JavaScript does not provide full featured inheritance (called "generalization" in the UML) which is an essential feature of OOPL; therefore, many call JavaScript an "object based" programming language rather than an "object oriented" programming language.  This is true, but JavaScript does provide a form of inheritance with it's prototype feature which can add members to previously defined objects.
The concepts in all these languages are similar, so stop and think carefully about each term used.  If you have C++ or Java experience, identify the differences between these and JavaScript.  If you are new to OO software development, just be careful when you try to generalize JavaScript features to standard OO features and be on the lookout for differences when you learn C++, Java, etc.
4. JavaScript is fundamentally different that traditional programming languages like C++, Java, etc, so students should be careful when drawing parallels with those other languages.  JavaScript is a scripting language which means that, unlike typical programming languages,  JavaScript code (a "script") is, in client side JavaScript (CSJS), embedded within the HTML of a Web page. These scripts are executed when a browser displays the HTML document.  (One could say that a script is program embedded within an HTML document, but this might be misleading.  Programs stand alone; scripts are embedded within HTML documents.)  Therefore,
1. Computer science students should clearly distinguish between a JavaScript script and a C++ program or Java application/applet.  If they don't, the similarities between JavaScript syntax and C++ syntax can hide the fundamental difference between programming and scripting.
2. Students who have no programming experience should reallize that scripting is a very specific type of writing software code.  They should be careful to distinguish the between programming and scripting, if and when they learn other programming languages.
See Appendix A, section 1.C, for a comparison of the input/output environments of different kinds of programming languages.
5. {WRITE THIS!} Distinguish OM, and DOM...(mention 's BOM?)
6. Unfortunately most JavaScript texts (that I know) are written by "JavaScript experts" -- not "OOPL experts"!  Consequently they do not try to relate JavaScript to other OOPL languages, and, consequently, do not warn you of inconsistencies between JavaScript and OOPLs.  (It's like an expert in the French language writing an insightful tutorial on "creative cooking", i.e. develop new recipies!  French, like JavaScript, is just a language, used, in this case, to provide a set of instructions to be followed in order to complete a specific task.) Such texts can, therefore, be misleading to students who want to relate JavaScript to other languages, especially OOPLs. Moncur is not as bad as most, but it is far from clear.  The best reference (that I have found) is:
Beginning JavaScript by Paul Wilton (See the syllabus for details.)  Especially worth while is Chapter 4, JavaScript - An object-Based Language.  Unfortunately this excellent text is over 1000 pages and far too detailed (and too expensive -- for a supplemental reference) for a course like COSC 330.  However,if you want to become a JavaScript expert, this is the text I would recommend.  It has the best reviews I've found are for any JavaScript text.
7. I recommend that you can code and test Moncur's examples as you encounter them.  The easiest way to do this is, while reading the chapters of  Moncur :
1. create a blank HTML document using an HTML editor in which you can create scripts (Netscape 6 Composer, Dreamweaver, Microsoft FrontPage, etc.),
2. enter the scripts in the document body, and
3. preview your document in the editor.
8. Use the JavaScript console to practice using single JavaScript statements and functions; the scripts themselves can be written directly into HTML documents; the best way to do this is to use Dreamweaver or FrontPage to code JavaScript, but a text processor will do as long as you save the files with a .htm or .html extension.  (Note that you can not use Composer to write scripts because text enclosed within <script> and </script> tags do not display in composer.)
9. Be sure to use the Web site, http://www.jsworkshop.com , provided with Moncur, when you study ; it has many of the examples which can be easily demonstrated by clicking live HTML links.
10. The second reference for online examples is W3School tutorial: http://www.w3Schools.com/js/.  This is a concise tutorial that looks very useful, but I have not worked through much of it.
11. Any of Netscape 6, Dreamweaver, or FrontPage can be used to create/edit JavaScript scripts, depending on your preference.  Simply edit the HTML source to gain access to the scripts, which may be edited directly.  It is not possible to edit scripts using Netscape Composer.
12. Other JavaScript Refs:
1. Webcoder: http://www.WebCoder.com/index_real.html is the Web site of text author.
2. JavaScript World
3. JavaScript Links
4. ECMAScript-262 standard
5. (8/8/01)Language Essentials for Experienced Programmers, by Danny Goodman
    http://softwaredev.earthweb.com/script/sdsljs/article/0,,12313_762031,00.html
1. Web Developer Hub: http://wdvl.com/Authoring/JavaScript/
2. JavaScripting Netscape 6: No More Sloppy Code: http://www.webreference.com/programming/javascript/netscape6/
3. JavaScript Foundations: http://developer.netscape.com/viewsource/husted_js/husted_js.html
4. Articles at Webreview.com: http://www.webreview.com/wr/pub/JavaScript
5. JavaScript Guide, http://developer.netscape.com/docs/manuals/communicator/jsguide4/index.htm, from netscape (1997).
6. Links to Java/JavaScript/DHTML resources, http://developer.netscape.com/viewsource/archive/archivelist.html#javascript
7. JavaScript.com http://www.javascript.com/ should have good tutorial refs, but ??
8. JavaScript Source: http://javascript.internet.com/
9. Developer.com: http://www.developer.com/directories/pages/dir.javascript.howto.html has ...
10. JavaScript Scripts:
11.     TechTV Web Workshop (Hub of WebWorkshop)
12.         Page Fade-in (TechTV Web Workshop): http://www.techtv.com/news/story/0,24195,3338994,00.html
13. I need to know your genuine opinion of our text, SAMS Teach Yourself JavaScript in 24 Hours, by Michael Moncur.  As you know, I believe that JavaScript is the "best" language for a beginning software developer to take, for the reasons delineated above.  I had offered to teach a couple of sections of COSC 130 -- IF I could use JavaScript instead of Visual Basic; however, that is not currently possible.   Then it occured to me that I could simply recommend, to current, COSC 130 students to learn JavaScript over the summer.  However, I don't know a textbook that I can recommend.  I really can't tell what any textbook is like from a "beginners viewpoin"t, but; I am not satisfied with Moncur --I didn't like its "ad hoc" presentation.  However, I chose it based on the reviews of the previous version of the text (for JavaScript 1.3)so I wrote LM VII to make up for my perceived problems with Moncur, but I still can't recommend Moncur on its own!   So, I am still seeking a "good" introductory JavaScript text.   I need your help and recommendations.

STUDY GUIDES SPECIFIC SECTIONS OF LM VII:

• A word about the organization of and notations used in LM VII:
• The LM is organized as a numbered list of  "supplements" to the "Hours" of Moncur which make up the chapters of that text.
• In the LM supplements, I have tried to relate my information with the sections of Moncur that it is presented.  I have done this by reproducing Moncur's section heading in bold orange text (e.g. the first section of Hour 1 is Learning Web Scripting Basics) and presenting associated information there.  Sections of the LM that are not categorized under these orange headings are information that is not in the current Hour, although they may be presened elsewhere in Moncur, especially Appendix D, JavaScript Quick Reference.
• It is very important for computer science students to understand the distinction between functions (non-OOP operations in JavaScript) and "functional methods" (Tony's term) which, being necessarily associated with objects are OOP operations.  (See section 1.C.c.iii and 1.E.
• Hour 8: This hour introduces two of JavaScripts "constructs", arrays and strings, for organizing and manipulating data.  Actually the Array and String are "objects" which are part of the the core object model that is not introduced until Hour 9.  However, it is advisable to preview the "COM" (a nonstandard term) in Appendix A.
• Hour 7: This hour introduces structured control structures with the selection construct. Along with Hour 8, on repetition control structures, this hour is straightforward because control structures are not directly associated with objects and therefore, have no inconsistencies in terminology that we've had to deal with previously.  In fact for those who have experience with C, C++, or Java, already know everything in this chapter because JavaScript, like those languages, uses ANSI standard C syntax.
• Hour 8:
• Hour 9: here is where we encounter JavaScript's misuse of object oriented terminology and JavaScripts built-in objects (equivalent to OOPL class libraries.) which qualify it as an "object based" language (but NOT an "object oriented" language).
1. In this hour (and in all the "Hours" of Moncur's Part III, i.e. hours 9, 10, 11, and 12), it is important to be wary of the misuse of the work "object" and the use of "property" instead of the standard UML term "attribute".
1. JavaScript uses the word "object" in two contexts:
1. as an "abstract" object equivalent to an OOPL (UML) "class"
2. as a "real" object equivalent to a C++ or Java "object" which is an instance of a OOPL (UML) class.
I will always try to use the modifiers "abstract" or "real" to distinguish these two uses.
2. A JavaScript "property" is equivalent to an OOPL/UML attribute.
2. What is worse, is Moncur's statement that, "Methods are functions that are stored as properties of an object." This is WRONG!!     Properties specify the state of an object, i.e. the values that characterize the object. For example, if the object is a square, its properties would be the length of its sides, it's area, etc.; its methods could be findArea(), move(), etc.  On the other hand, methods specify the behavior of an object.  If Moncur used the phrase "Methods are functions that are encapsulated within an object.", this would be correct.
3. Hour 9 introduces the core object model (COM, Tony's term) via its Math and Date objects; however, Moncur does not distinguish this "object model", i.e. he does not identify a platform independent OM.  I have taken the term "core object model" from Beginning JavaScript, by Paul Wilton, but, unfortunately "core object model" and "COM" are not standard terms - except in this course.  Also Moncur does not cover, in Hour 9, the rest of the other objects,recognized by ECMA, in COM, i.e.Array, Boolean, Function, Number, Object,andString. Arrays and Strings were introduced in Hour 6 and, along with Math and Date are covered in Appendix D of Moncur.
• Hour 10, Working with the DOM: Under construction! 
1. Although, Moncur, covered only a very limited subset of JavaScripts core objects, his simplified presentation moves on, in this hour, to the document object models (DOMs) that allow Web developers to manipulate the browser and Web pages with JavaScript.
• Hour 11, Creating Custom Objects: Under construction! 
1. Although, Moncur, covered only a very limited subset of JavaScripts core objects and DOMs in the previous two hours, his simplified presentation moves on, in this hour, to JavaScript's feature of creating abstract objects (a severly limited form of OOPL's class definition facility).  Note that, although JavaScript's abstract object creation implements the OO feature encapsulation, it does NOT allow other OOPL features of access control, inheritance, and polymorphism.  (These limitations make JavaScript an object based language instead of an object oriented language.
• Hour 12, Responding to Events: Under construction! 
1. Although, Moncur, covered only a very limited subset of JavaScripts core objects and DOMs in the previous three hours, his simplified presentation moves on, in this hour, to the JavaScript Event Model which allows the Web surfer to interact with the JavaScript embedded within an HTML document.
• Hour 13, Moncur: Under construction! 
• This hour introduces JavaScripts facilities for manipulating Web page elements that are covered throughout in Part IV;
• Hour 13 focuses on Windows and Frames.
• The very useful input/output methods, alert(), confirm(), and prompt(), are introduced. These easy-to-understand features, when combined with the document.write() method, make input/output in JavaScript simple, intuitive, and memorable.  Since input/output is often tedious and time consuming in other languages, JavaScripts user-friendly I/O makes it a good beginner's language.

GLOSSARY (terms that differ from or are not provided for in the FOLDOCand other Course References)

• For a definition of Tony's terms used in all online courses see the General Study Guide:
• TracySpeak is a term that refers to the terminology I use when communicating.  I try to use standard terminology where possible, but when where there are inconsistencies in common uses or where I use a term in a nonstandard or nontraditional way, I refer to this as "TracySpeak".
• object:
• COM
• DOM