javascript todd schacherl. what is javascript? scripting vs programming advantages disadvantages...
TRANSCRIPT
JavaScript
Todd Schacherl
What is JavaScript?
• Scripting vs Programming
• Advantages
• Disadvantages
• Integrating into HTML
Scripting vs Programming
• Not Compiled
• Higher Level Language
Advantages
• Quick Development
• Easy to Learn
• Platform Independence
• Small Overhead
Disadvantages
• No Code Hiding
• Lack of Debugging and Development Tools
• Not Fully Extensible (limited base of objects, properties, methods, and data types)
Integrating into HTML
• <script> and <noscript> Tags
• Where to Put JavaScript Code
• Command Block Structure
• Output Functions
<script> and <noscript> Tags
<script src=“url” language=“javascript”>
Commands...
</script>
<noscript>
HTML...
</noscript>
Where to Put JavaScript Code
• Between <head></head> tags
• Anywhere in between the <body>...</body> tags
Command Block Structure
• Multiple commands combined into command blocks with curly braces ({ and })
{ document.writeln(“Hello World”); document.writeln(“This is neat<br>”);}
• Embedded blocks{ JavaScript Code { More code }}
Output Functions
• document.write()– Writes text and HTML to document
• document.writeln()– Writes text and HTML followed by a newline character to document
document.write(“Hello World\n”);document.writeln(“Hello World”);
The JavaScript Object Model
• Object Methods
• Object Properties
• Navigator Objects
• Internal or Built-in Objects
• HTML-Reflected Objects
Object Methods
• Objects have methods associated with them that allow objects to be manipulated and interrogated and in some cases, allow object values to be changed.
• document.write(“Hello World”);
Object Properties
• Another term used in context to an object-driven environment is a property. A property is a value that belongs to an object. All of the standard JavaScript objects have such properties.
• object-name.property-name
document.urldocument.body.bgcolor
Navigator Objects
• window -- Top-level object in JavaScript object hierarchy.
• document -- Contains properties that relate to the current HTML document.
• location -- Contains properties relating to the current document’s location
• navigator -- Details about the current version of Navigator
• history -- Contains details of all URLs the user has visited in the current Navigator session
Internal or Built-in Objects
• Array -- Array structure
• Date -- Internal date and time manipulation
• Math -- Mathematical object and properties
• Object -- Generic object type
• String -- Text string object
HTML-Reflected Objects
• anchor (anchors array) -- Array of <a name> tags in current document• button -- A hypertext button created with <input type=button>• checkbox -- A checkbox created with <input type=checkbox>• elements -- All of the elements within a <form> container• form (forms array) -- An array of HTML <form> container objects• frames (frames array) -- A frameset-docuement object (window)• hidden -- A hidden text field created with <input type=hidden>• images (images array) -- an array of images, that is, <img> tags in the current
document• link -- An array of hyperlinks in the current document• navigator -- Version and client information object• password -- An <input type=password> field• radio -- A radio box created with <input type=radio>
HTML-Reflected Objects (cont.)
• reset -- A reset button created with <input type=reset>
• select (options array) -- A <select> objects <option> elements
• submit -- A submit button created with <input type=submit>
• text -- A text-field created with <input type=text>
• textarea -- A textarea field created with a <textarea> container
Working with Data and Information
• Data Types
• Using Variables
• Assignment Expressions
• Operators
Data Types
• Numbers -- Any number, such as 1, 23, 34.5, or 34e9
• Strings -- “Hello!” or ‘Goodbye’
• Boolean -- Either true or false
• Null -- a special keyword for exactly that - the null value (that is, nothing)
Using Variables
• Creating Variables
• Using Variables
Creating Variables
• var variableName– var answer;
• Use in a “variable” context– answer=100;
Using Variables
• Use by name
var message=“Hello World!”;document.write(message);
Assignment Expressions
• = Assigns value of right operand to the left operand
• += Adds the left and right operands and assigns the result to the left operand
• -= Subtracts the right operand from the left operand and assigns the result to the left operand
• *= Multiplies the two operands and assigns the result to the left operand
• /= Divides the left operand by the right operand and assigns the value to the left operand
• %= Divides the left operand by the right operand and assigns the remainder to the left operand
Operators
• Arithmetic Operators
• Logical Operators
• Comparison Operators
Arithmetic Operators
• + Addition -- 3 + 8;• - Subtraction -- 31.5 - 12.8;• * Multiplication -- 34 * 12;• / Division -- 45 / 5• % Modulus 12 % 5• ++ Increment -- var++ or ++var• -- Decrement -- var-- or --var• - Unary negation -- x = -x;
Logical Operators
• && Logical “and” -- returns true when both operands are true; otherwise it returns false
• || Logical “or” -- returns true if either operand is true. It only returns false when both operands are false
• ! Logical “not” -- returns true if the operand is false and fase if the operand is true. This is a unary operator and precedes the operand
Comparison Operator
• == Returns true if the operands are equal
• != Returns true if the operands are not equal
• > Returns true if the left operand is greater than the right operand
• < Returns true if the left operand is less than the right operand
• >= Returns true if the left operand is greater than or equal to the right operand
• <= Returns true if the left operand is less than or equal to the right operand
Functions and Objects
• Defining Functions
• Creating New Objects,
• Defining Properties
• Adding Methods
• Passing Parameters
• Variable Scope
• Returning Results
Defining Functions
• Function command
function dosomething(parameters, values){
commands;}
Creating New Objects
Function item(price, partNumber, description){
this.price = price;this.partNumber = partNumber;this.description = description;
}item1 = new item(“2.95”, “100134-001”, “Widget”);
Adding Methods
function methodName(){
some code;}
Function item(price, partNumber, description){
this.price = price;this.partNumber = partNumber;this.description = description;this.methodName = methodName;
}
Passing Parameters
function printName(name){
document.write(name);}printName(“Bob”);var userName=“John”;printName(userName);
Variable Scope
• Variables Come Into Existance Within a Function
• Variables Cease to Exist When Function Ends
Returning Results
function cube(number){
var cube= number * number * number;return cube;
}
Using JavaScript Events
• Document Events
• Form Events
• Image Events
• Mouse Events
Document Events
• Document Loading and Unloading– onLoad
• When a document is loaded
– onUnLoad• Allows an event to be associated with the unloading of a document or frameset-document.
<body onLoad=“expr | function()”>…</body>
Form Events
• Click Events: buttons, radio buttons, checkboxes, submit, and reset buttons
• Focus, Blur, and Change Events: text-areas, and selection-lists;
• Select Events: text-fields, and text areas.
Form Elements
• onBlur– removes input focus from form element
• onChange– Changes value of text, textarea, or select
element
• onFocus– Gives a form element input focus
Form Elements
• onSelect– Selects form element’s input field
• onSubmit– Submits a form
Image Events
• Image Loading– onLoad - The image is loaded onto the page. Animated DIG images will
throw an onLoad event every time the image repeats from the first animation-frame
• Image Loading Error– onError - An error occurs when loading the image, that is, the image des
not exist, or the image is corrupted, or the server providing the image hanges, i.e., crashes or dies, etc.
• Image Load Abort– onAbort -The user clicks on a link or presses Stop or ESC when the
current image is being loaded
Mouse Events
• mouseOver– Mouse pointer moves onto a hyperlink
• mouseOut– Mouse pointer moves away from a hyperlink
• onClick– Clicks on form element or link
Creating Interactive Forms
• The Form Object
• Working with Form Elements
The Form Object
• The form object reflects an HTML form in JavaScript. Each HTML form in a document is reflected by a distinct instance of the from object.
Working with Form Elements
• Properties– Action -- A string value specifying the URL to which the form
data is submitted.
– Elements -- Array of objects for each form element n the order in which they appear in the form.
– Encoding -- String containing the MIME encoding of the form as specified in the ENCTYPE attribute.
– Method -- A string value containing the method of submission of form data to the server.
– Target -- A string value containing the name of the window that responses to formsubmissions are directed to.
Working with Form Elements
• Methods– Submit() -- Submits the form.
• Event Handlers– onSubmit -- specifies JavaScript code to
execute when the form is submitted. The code should return a true value to allow the form to be submitted. A false value prevents for form from being submitted.
onSubmit
• Use to validate forms prior to submission• Don’t use the submit button type
<input type=button onSubmit=“doSomething(this);”>
Loops
• For
• For in
• While
• Break and Continue
For
• The condition is evaluated at the start of each pass through the loop
for(i=8; i<5; i++){
some commands;}
For In
• Used to step through all the properties in an object
for (k in testObject){
commands}
While
• Proccess commands until a condition no longer exists (becomes false)
while (condition){
some commands;}
Break and Continue
• Break is used to break out of a loop, such as a for or while loop, terminating it at the point the statement is reached and then passing control to the next statement immediately after the loop.
• Continue is used to terminate the executoin of a block of statements that exist within a for, for…in, or while loop, continuing execution of the loop at the next iteration.
Conditional Statements
• if…else
• The ? Statement
if…else
• Conditional statement that allows one or more JavaScript statements to be executed, depending on a user-defined condition.
If (some condition) {then some commands;
} else {Some other commands;
}
The ? Statement
• (condition) ? val1: val2
(day == “Saturday”) ? “Weekend!” : “Not Saturday!”;
Frames, Documents, and Windows
• The Document Object
• The Window Object
• Opening and Closing Windows
• Cross-Frame Communication
The Document Object
• Provides properties and methods to work with the numerous aspects of the current document– Anchors, forms, links, the title, current location
and URL, and current colors
The Window Object
• Parent object of each loaded document
Opening and Closing Windows
• var newWindow = window.open(“URL”, “windowName”, [“windowFeatures, …”]);
• winName.close();
Window Features
Attribute Values Description
copyhistory [=yes|no] | [=1|0] Copy the history? (yes/no)directories [=yes|no] | [=1|0] Directory buttons (on/off)height = pixelheight Window height (pixels)location [=yes|no] | [=1|0] Location bar (on/off)menubar [=yes|no] | [=1|0] Menu-bar (on/off)resizable [=yes|no] | [=1|0] Resizable window? (yes/no)scrollbars [=yes|no] | [=1|0] Scroll-bars? (yes/no)toolbar [=yes|no] | [=1|0] Toolbar mode (on/off)width = pixelwidth Window width (pixels)
Cross-Frame Communication
• _blank– Always load this link into a new, unnamed window. A new
window is actually treated as a single frame.• _self
– Always load this link over the current frame• _parent
– Always load this link over the parent frame. This becomes _self if not parent exists.
• _top– Always load this link at the top level. If you are already at
the top level, this becomes _self.
Cookies
• Cookies & CGI– Processed by Server
• Cookies in JavaScript– Processed by Client (Browser)
Cookies in JavaScript
• name=NAME– The name of the cookie
• value=VALUE– The value(s) being stored by the cookie
• expires=DATE– The expiry date of a cookie. After this date the cookie will no longer be
stored by the client or sent to the server (DATE takes the form Wdy, DD-Mon-YY HH:MM:SS GMT -- dates are only stored in Greenwich Mean Time). By default, the value of expires is set to the end of the current Navigator session. A negative date or date prior to current date effectively “deletes” the cookie.
Cookies in JavaScript
• path=PATH– Specifies the path portion of URLs for which the cookie is valid. If the URL
matches both the path and domain, then the cookie is sent to the server in the request header. (If left unset, the value of path is the same as the document that set the cookie.)
• domain=DOMAIN– Specifies the domain portion of URLs for which the cookie is valid. The
default value for this attribute is the domain of the current document setting the cookie.
• secure– Specifies that the cookie should only be transmitted over a secure link (i.e.
To HTTP servers using the SSL protocol--known as HTTPS servers).
String Manipulation
• Manipulate Appearance
• Find Substrings, Characters, etc.
Manipulate Appearance
• big() -- Returns string object surrounded by BIG container tag
• italics() -- Returns string object surrounded by I container tag
• sub() -- Returns string object surrounded by SUB tag
• fontSize(size) -- Returns string object surrounded by FONTSIZE tag
Find Substrings, Characters, etc.
• lastIndexOf(findString, startingIndex) -- Returns index of the last occurrence of findString
• indexOf(findString, startingIndex) -- Returns the index of the first occurrence of findString
• charAt(index) -- Returns the character at the location specified by index
Netscape vs. Explorer
• Case Sensitivity
• Form Values and String Conversion
• Object Model Differences
• Security
• Communication with Java
• Supported but Nonfunctional Properties
• Miscellaneous Differences
Case Sensitivity
• One major difference between Navigator and Internet Explorer is that the "object model" (as Microsoft calls it) in Internet Explorer is not case-sensitive. Because IE can also be scripted with the non-case-sensitive VBScript language, all the HTML and browser objects such as Window, Document and Form are not case sensitive. Thus, in IE, you could write code that invoked DOCUMENT.WRITE() instead of document.write(). Don't expect code like this to work in navigator, however!
Form Values and String Conversion
• The JavaScript interpreter in Internet Explorer 3.0 does not always convert objects to strings when they are used in a "string context". This happens most notably when objects are assigned to the value field of form elements. To make this work correctly, you have to explicitly convert the object to a string, either by invoking its toString() method or by adding the empty string to it. To display the date and time in a form, for example, you'd have to use code like this:
• today = new Date();
• document.forms[0].dateandtime.value = today.toString()
• or like this:
• today = new Date();
• document.forms[0].dateandtime.value = today + "";
• If you encounter this conversion problem in other contexts, the workaround is the same.
Object Model Differences
• There are a few other differences in support for HTML and browser objects in Navigator and Internet Explorer 3.0:
• The Window.open() method does not correctly load the argument specified in the first argument in IE 3.0. This same bug exists for some platforms in Navigator 2.0. The workaround is to first open a new window and then load the desired document by setting the location property. Also, the Window.name property is read-only in IE 3.0.
• The Document.open() method in IE 3.0 ignores the MIME type argument, if any is passed. It assumes that all documents are of type "text/html".
• IE 3.0 records cookies only when the document is loaded via the http: protocol. Documents loaded from the local disk (as they commonly are when being developed or tested) cannot use cookies.
• The blur() method of form elements behaves differently (and probably more sensibly) in IE 3.0 that it does in Navigator. The difference is detailed in the "Element.blur()" reference entry.
• The History.go() method can only move backward or forward a single step at a time in IE 3.0, and the History.length property always returns 0.
Security
• Navigator 2.0.2 and Navigator 3.0 implement a very restrictive "hobble" in the interests of security: a script running in one window cannot read the properties of another window unless the contents of that window were loaded from the same server as the script. Internet Explorer 3.0 implements security measures, but this is not one of them. This means that users of IE 3.0 may be vulnerable to malicious scripts that steal information.
Communication with Java
• In Navigator 3.0, JavaScript can communicate with Java in a very full-featured way through LiveConnect. Internet Explorer 3.0 does not support LiveConnect, and future versions of this browser probably won't either. Instead, IE 3.0 allows JavaScript programs to treat applets as ActiveX objects, and read and write fields and invoke methods of those applets. Note however that IE 3.0 does not suport the applets[] array of the Document object--applets must be referred to by name. Also, note that IE 3.0 mechanism for communication with Java is not nearly so full-featured as LiveConnect.
Supported but Nonfunctional Properties
• In Internet Explorer 3.0, a number of the properties supported by Navigator 2.0 and 3.0 are "supported" only in the sense that they can be used without causing errors. These properties may not return meaningful values when read and/or do not cause any changes when set. Some properties, like Document.alinkColor are non-functional simply because the browser as a whole does not support the feature (special colors for activated links, in this case). Others are simply not supported presumably because the engineers at Microsoft did not have the time to implement them. These include the action, encoding, method and target properties of the Form object and the length property of the History object.
• The isNaN() function also falls into the category of "supported but nonfunctional." Because IE 3.0 does not support NaN values, the isNaN() function always returns false.
Miscellaneous Differences
• Other differences between Navigator and Internet Explorer 3.0 are small details about the way values are computed and printed:
• The for/in statement in IE 3.0 does not always enumerate the same object properties that Navigator does. It does enumerate all user-defined properties, which is its primary function. But predefined properties of built-in objects are not always listed.
• The && and || operators behave somewhat differently in Navigator and Internet Explorer, although, since JavaScript is an untyped langauge, the difference is usually irrelevant. When the first operand of the && operator evaluates to true, then the operator returns the value of the second operand in Navigator. In Internet Explorer, this second operand is first converted to a Boolean value, and that value is returned. Thus the expression true && 10 evaluates to 10 in Navigator but to true in Internet Explorer. This may seem like a major difference, but because JavaScript is an untyped langauge, it rarely matters. The && operator is almost always used in a Boolean context, such as the expression of an if statement, so even when Navigator returns a value like 10, that value will be immediately converted to the Boolean value true within that context. The same evaluation difference occurs when the first operand of the || operator evaluates to false.
Miscellaneous Differences
• In Internet Explorer 3.0, Boolean values implicitly are converted to strings differently than they are in Navigator. The value true is converted to the string -1, and the value false is converted to the string 0. If you actually want them to be converted to the strings "true" and "false", you must convert them explicitly by adding them to the empty string.
• User-defined function values are also converted to strings differently in IE 3.0. In Navigator, functions are converted to a string that includes the complete body of the function. In fact, you can even use eval() function to define the function in some other window. This does not work in Internet Explorer, which omits the function body from its string representation of functions.