Ajax, JavaScript and PHP
Chapter 4 – JavaScript
Tools for Scripting
• Basic JavaScript programmer’s toolkit contains
only two things
A text editor for writing programs (notepad)
A Web browser in which to run and test programs
(IE, Netscape, Firefox, Safari)
Lexical Structure
• The Lexical Structure of a programming
language is the set of elementary rules that
specifies how you were programs in that
language.
Character Set
• JavaScript programs are written using the
Unicode character set
• The 16-bit Unicode encoding can represent
virtually every written language in common
use on the planet (The 7-bit ASCII encoding is
useful only for English; The 8-bit ISO Latin-1
encoding is useful only for English and major
Western European languages)
Case Sensitivity
• JavaScript is a case-sensitive language
• HTML is not case-sensitive (although XHTML
is)
• Many JavaScript objects and properties have
the same name as the HTML tags and
attributes they represent
• While these tags and attribute names can be
typed in any case in HTML, in JavaScript they
typically must be all lowercase (e.g. onclick)
Case Sensitivity (continue…)
• JavaScript is a case sensitive language.
Document.Write(“Hello”); // Not OK
document.write(“hello”); // OK
• JavaScript ignores spaces, tabs, and newlines that appear
between token in programs
• JavaScript automatically inserts semicolons before a line break
var myvar = “abc”; // OK
var myvar =
“abc”; // Not OK
• JavaScript statements are end with semicolon (;)
• You may omit the semicolon if each of your statements is
placed on a separate line (with line break)
• Omitting semicolon is not a good programming practice
Comments
• Single line comment: Any text between a //
and the end of a line is treated as a comment
and is ignored by JavaScript
• Multiple lines comment: Any text between the
characters /* and */ is also treated as a
comment
Literals
• A literal is a data value that appears directly in
a program
12 // the number twelve
1.2 // the number one point two
“hello world” // a string of text
‘Hi’ // another string
true // a Boolean value
null // absence of an object
Identifiers
• An identifier is simply a name
• Identifiers are used to name variables and
functions, and to provide labels for certain
loops in JavaScript code
• Identifier rules
The first character must be a letter, an underscore
(_), or a dollar sign ($).
Subsequent characters can be a letter, a digit, an
underscore, or a dollar sign
Reserved Words
• JavaScript has a number of reserved keywords
• These are words that you cannot use as
identifiers (variable names, function names,
and loop labels) in your JavaScript programs
The tag
• When Netscape introduced JavaScript in Netscape 2, it included support
for a new tag: the tag.
• The tag has several attributes, two of which you should always
set: language and type.
• The language attribute specifies which scripting language you are using.
language=“JavaScript/JavaScript1.1/…”
• The type attribute specifies the MIME type of the text contained within
the tag or the file referenced by the tag.
type=“text/javascript”
• The src attribute: you only need to set this attribute when you attach an
external JavaScript file.
– An external JS file is just a simple text document with a .js extension.
– Only contain JS statements
– tags are unnecessary
– You may use either a relative or an absolute path to indicate the
location of your external JS file
Integrating JS into your web
documents
• A tag in the of an HTML
document
• A tag in the of an HTML
document
• Inline with HTML as an event handler
• In an external JavaScript file
• Inline using the javascript pseudo-protocol
Placing JS statements in a
tag within the
• Is the perfect place for any statements that
need to be read and executed before the
contents of your Web document (in the
tag) load.
• Good place to declare user-defined functions
(then call it from the area)
• Good place to declare global variables
• Should never place statements that “write”
Web page content in here.
Placing JS statements in a
tag within the
• This is the best, and only, place to write
statements that actually produce content for
the inclusion in an HTML document.
• Calls to functions that declared in the
Custom greeting
sample javascript
/* Global variable */
var visitor = prompt("What is your name?", "");
document.write("Welcome, ", visitor, "");
Writing JS statements inline as
event handlers
• An event handler is one or more JS statements
called in response to a particular event.
JS inline as event handler
JS inline with event handler
Placing JS Statements in an
external JS file
• An external JS file is a simple text file containing only JS
statements whose name has a .js extension.
• Excellent place to declare functions, especially functions you
plan to use again and again with a variety of HTML
documents.
• By using an external JS file, you can reduce the overall loading
time of your Web site. The external JS file will have to transfer
only once, the first time the visitor requests a page that uses
it. Any future pages that use that file can access it from the
cache, eliminating the need to transfer it again.
• External JS files also help to hide your code from pilferers.
• Using an external JS file, you can begin building a library of
frequently used functions and routines. Such as
formValidation.js
To view an external JavaScript file
• View the HTML document’s source
• Note the path to the external JS file in the src
attribute of the tag usually found in
the of the document.
• Modify the current URL in your location bar to
point to the path and file you noted from the
src attribute.
• Open the file with Notepad/WordPad/HTML
editor…
• You can also get the file from your cache. Look
for a new file with a .js extension.
Writing JS statements Inline using
the JS Pseudo-Protocol
• You can write JS statements using the javascript: pseudo-
protocol in the href attribute of an anchor tag. Instead of
going right to a document or resource, the JavaScript pseudo-
protocol will execute one or more JS statements, which may
or may not return a URL for the anchor to follow.
Click me
to say HI
• In the Netscape Navigator browser, typing javascript: into the
location bar will cause JS Console to pop up. JS Console
displays the latest error messages the browser encountered
while executing the scripts. It can be used for light debugging.
javascript: var now=new Date(); "the time is: " +
now;
Hiding scripts from old browsers
• Use HTML comment to hide the contents of a
tag from old browsers that don’t recognize
it.
• Today, most browsers support JavaScript. But it is not
much extra work to make sure that your Web page is
accessible to everyone, regardless of what browser
they are using.