Scribd
Upload
93 views

Cnit 133 Interactive Web Pags - Javascript and Ajax

This document provides an overview of JavaScript including: - What JavaScript is and its history as a scripting language created by Netscape in 1995 and standardized by ECMA. - How JavaScript is an interpreted, object-based language that is loosely typed and case sensitive. - The different ways to integrate JavaScript into web documents including using <script> tags in the <head> and <body>, inline with HTML, in external .js files, and with the javascript: pseudo-protocol. - Core JavaScript concepts like objects, properties, methods, literals, and identifiers. - Examples of using JavaScript methods like write() to output content to a web page.

Uploaded by

Tuğrul Sarıkaya
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
93 views

Cnit 133 Interactive Web Pags - Javascript and Ajax

This document provides an overview of JavaScript including: - What JavaScript is and its history as a scripting language created by Netscape in 1995 and standardized by ECMA. - How JavaScript is an interpreted, object-based language that is loosely typed and case sensitive. - The different ways to integrate JavaScript into web documents including using <script> tags in the <head> and <body>, inline with HTML, in external .js files, and with the javascript: pseudo-protocol. - Core JavaScript concepts like objects, properties, methods, literals, and identifiers. - Examples of using JavaScript methods like write() to output content to a web page.

Uploaded by

Tuğrul Sarıkaya
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 23

CNIT 133 Interactive Web

Pags
JavaScript and AJAX
Introduction to JavaScript

Agenda
My Web Site: http://fog.ccsf.edu/~hyip
(download syllabus, class notes).
What is JavaScript?
JavaScript History
JavaScript characteristics
Integrating JavaScript into your web
documents
Objects, Properties, and Methods

What is JavaScript?
JavaScript is an interpreted, object-based scripting
language modeled after C++.
Interpreted languages: an interpreter is needed to
translate a programs statement into machine code.
JavaScript Interpreter is built into Web browsers.
Object-based language: most of client-side
JavaScripts objects come from Web pages such as
images, forms, and form elements.
Scripting languages: are easy to learn, easy to use,
excellent for small routines and applications, and
developed to serve a particular purpose such as
PERL, PHP.
JavaScript is loosely typed language, which means
that variables do not need to have a type specified.

JavaScript History

Created by Brendan Eich of Netscape Communications in 1995 as part of


Netscape Navigator 2.0.
Originally called LiveScript.
There are three flavors of JavaScript:
Core JavaScript is the basic JS language include the operators, control
structures, built-in functions, and objects that make JS a programming
language.
Client-side JavaScript (CSJS): extends the Core JavaScript to provide access to
browser and Web document objects via the Document Object Model (DOM).
Server-side JavaScript (SSJS): A Netscape server-side technology. SSJS is
embedded directly within HTML documents. HTML documents that contains
SSJS must be precompiled into JavaScript byte code. When a Web page that
contains SSJS is requested, the server retrieves the document, execute the
appropriate byte code on the server, accesses databases and other
resources as necessary, and serve up the results as plain vanilla HTML to the
browser. (http://www.devarticles.com/c/a/JavaScript/Client-side-and-Serverside-JavaScript/1/)
JavaScript was stabilized and standardized by the European Computer
Manufacturers Association (ECMA) (http://www.ecma-international.org )
The official name of the language, according to the ECMA-262 standard, is
ECMAScript. In practice everyone calls the language JavaScript.

Client-Side JavaScript
sample
<html>
<head><title>JavaScript sample</title>
</head>
<body>
<h1>Client-side JavaScript sample</h1>
<script language="javaScript" type="text/javascript">
document.write("Hello World! ");
</script>
</body>
</html>

Lexical Structure/Character
Set
The Lexical Structure of a programming language is the set of
elementary rules that specifies how you were program in that
language.
JavaScript programs are written using the Unicode character set.
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.
The 16-bit Unicode encoding can represent virtually every
written language in common use of the planet.
The ECMAScript v3 standard allows Unicode characters anywhere
in a JavaScript program, version 1 and 2 of the standard allow
Unicode characters only in comments and quoted string literals;
all elements are restricted to the ASCII character set.

JavaScript is Case Sensitive

JavaScript is a case-sensitive language:


Document.Write("Hello!");
// NOT OK
document.write("Hello!");
// OK
JavaScript ignores Whitespaces (spaces, tabs, and newlines) that
appear between token in programs.
JavaScript automatically inserts semicolons before a line break.
var mytext = "abc";
// OK
var mytext = "abcd
efgh "; //NOT OK a line break inserted into a string
JavaScript statements are end with semicolon (;). (optional)
Omitting semicolon is not a good programming practice.
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/Identifiers

A literal is a data value that appears directly in a program.


12
//the number twelve (number literal)
1.2
//the number one point two (number literal)
"hello world"
//a string of text (string literal)
'Hi' //another string (string literal)
true
//a Boolean value (Boolean literal)
null
//absence of an object (special value)
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 (_).
Subsequent characters can be a letter, a digit, an
underscore.

The <script> tag

When Netscape introduced JavaScript in Netscape 2, it included support


for a new tag: the <script> tag.
<script language="JavaScript" type="text/javascript">
</script>
The <script> 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 <script> tag or the file referenced by the <script> 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
<script> 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

In the <head> of an HTML document


In the <body> of an HTML document
Inline with HTML as an event handler
In an external JavaScript file
Inline using the javaScript pseudoprotocol

Placing JS statements in the


HTML <head> section
Is the perfect place for any statements that
need to be read and executed before the
contents of your Web document (in the
<body> tag) load.
Good place to declare user-defined
functions (then call it from the <body>
area)
Good place to declare global variables
Should never place statements that write
Web page content in here.

Placing JS statements in the


<body> section
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
<head>

Custom Greeting
<html>
<head><title>Custom Greeting</title>
<script language="JavaScript" type="text/javascript">
/* Global variable */
var visitor = prompt("What is your name?", "");
</script>
</head>
<body>
<h1>Custom Greeting</h1>
<script language="JavaScript" type="text/javascript">
document.write("<h1>Welcome, ", visitor, "</h1>");
</script>
</body>
</html>

Writing JS statements inline


as event handlers
An event handler is one or more JS statements
called in response to a particular event.
<html>
<head><title>JS inline as event handler</title>
</head>
<body onload="alert('Welcome!');">
<h1>JS inline with event handler</h1>
</body>
</html>

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

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
<a> 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.
<a href="javascript: void(0)" onClick="alert('hi');">
Click me to say HI </a>
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();
document.write("<h1>the time is: </h1>" + now);

Object Oriented Concepts


Object: is an item, thing. It has attributes/properties that
describe it. It also has methods which are actions that you can
perform with the object or on the object
JavaScript uses dot notation to refer to an object and its
associated properties and methods.
For example, pen is an object
To reference ink color property we use the name of the object
followed by a dot (period) and the name of the property.
pen.inkColor
To change the value of an objects property.
Pen.inkColor = "blue";
To reference the objects method, we reference the name of the
object first, followed by a dot and the method name, we end
with a set of parentheses. The parentheses are meant to hold
any arguments or parameters that provide data to or modify the
performance of a method.
pen.write("Hello");

Using the write method


<html>
<head><title>Using the write method</title>
</head>
<body>
<h1>Using the write method</h1>
<script language="JavaScript"
type="text/javascript">
document.write("Hello World!!");
</script>
</body>
</html>

Using the write method to


write HTML data
<html>
<head><title>Using the write method</title>
</head>
<body>
<h1>Using the write method to write HTML data</h1>
<script language="JavaScript" type="text/javascript">
document.write("<h1 style='text-align: center;'>Hello
World!!</h1>");
</script>
</body>
</html>

Changing the background


and foreground colors
<html>
<head><title>change the background and foreground
colors</title>
</head>
<body>
<h1>Changing the background and foreground colors</h1>
<script language="JavaScript" type="text/javascript">
document.write("<h1 style='text-align: center;'>Hello World!!
</h1>");
document.bgColor = "blue";
document.fgColor = "white";
</script>
</body>
</html>

The document.write method


The documents write method can accept
multiple string parameters separated with
commas
document.write(string1, string2, )

The following statement would cause an error.


You have two choices to fix it: keep the text
all on one line or break the string into two
strings
document.write("long text long text long
text long text long text");

Summary of Object Oriented


Concepts
Description

Real-world
example

JavaScript
example

Object

An item or
thing

pen

document

Properties

An attribute
that describes
an object

pen.inkColor

document.bgC
olor

Method

An action that
can be
performed with
or on an object

pen.write()

document.write
()

Where does JS Objects come


from
Built into the language, like Math,
String, Date and Array (Core JS)
Come from Web documents and are
made available to Client-Side JS via the
Document Object Model (DOM)
Come from the browser, such as
navigator, location, and history objects
also made available to Client-Side
JavaScript by the DOM
Programmers create our own custom
objects

You might also like