Reacting to a Virtual World

Reacting
to a Virtual World

By Jaime Christine Perez
Introduction to Scripting Languages

December 3, 2010

presented by Jaime Christine Perez

JavaScript
• JavaScript is THE scripting language of the Web.

• JavaScript is used in millions of Web pages to add
functionality, validate forms, detect browsers, and much
more.

• JavaScript is the most popular scripting language on the
internet, and works in all major browsers, such as
Internet Explorer, Firefox, Chrome, Opera, and Safari.

What can JavaScript do?

JavaScript gives HTML designers a programming tool

JavaScript can put dynamic text into an HTML page

JavaScript can react to events

JavaScript can read and write HTML elements

JavaScript can be used to validate data

JavaScript can be used to detect the visitor's browser

JavaScript can be used to create cookies

What are functions?
Functions contains code that
will be executed by an event or
by a call to the function.

JavaScript Function
Example: <html>
<head>
<script type="text/javascript">
function displaymessage()
{
alert("Hello World!");
}
</script>
</head>

<body>
<form>
<input type="button" value="Click me!"
onclick="displaymessage()" />
</form>
</body>
</html>

Result:

An Alert Implemented
Inside a Function
<html>
Example: <head>
function show_alert()
{
alert("I only exist to annoy you");
}
</script>
</head>
<body>

<input type="button" onclick="show_alert()"
value="Show alert box" />

</body>
</html>

Result:

Several Types of JavaScript Events

onLoad onClick
onMouseOver onMouseOut

What do the events do?

This creates an event when the user
onLoad enters the page.

This creates an event when the mouse is
onMouseOver passed over active text or image.

This creates an event when the mouse is
onMouseOut taken off of an active text image.

This creates an event when active text or
onClick images are clicked on.

onLoad example
Example: This what you see at
the end of a cookie
</script>
</head>

<body onload="checkCookie()">
</body>
</html>

Result:

onMouseOver example
Example:
<html>
<head>
function writeText(txt)
{
document.getElementById("desc").innerHTML=txt;

Result:
}
</script>
</head>

<body>
<img src="planets.gif" width="145" height="126"
alt="Planets" usemap="#planetmap" />

<map name="planetmap">
<area shape ="rect" coords ="0,0,82,126"
onMouseOver="writeText('The Sun and the gas giant planets like Jupiter
are by far the largest objects in our Solar System.')"
href ="sun.htm" target ="_blank" alt="Sun" />

<area shape ="circle" coords ="90,58,3"
onMouseOver="writeText('The planet Mercury is very difficult to study
from the Earth because it is always so close to the Sun.')"
href ="mercur.htm" target ="_blank" alt="Mercury" />

onMouseOver="writeText('Until the 1960s, Venus was often considered a
twin sister to the Earth because Venus is the nearest planet to us, and
because the two planets seem to share many characteristics.')"
href ="venus.htm" target ="_blank" alt="Venus" />
</map> The Sun and the gas giant planets like Jupiter
<p id="desc"></p> are by far the largest objects in our Solar
</body>
System.
</html>

onMouseOut example
Example:
<html>
<head> Result:
function writeText(txt)
{
document.getElementById("desc").innerHTML=txt;
}
</script>
</head>

<body>
<img src="planets.gif" width="145" height="126"
alt="Planets" usemap="#planetmap" />

<map name="planetmap">
<area shape ="rect" coords ="0,0,82,126"
onMouseOver="writeText('The Sun and the gas giant planets like Jupiter
The Sun and the gas giant planets like Jupiter
are by far the largest objects in our Solar System.')" are by far the largest objects in our Solar
href ="sun.htm" target ="_blank" alt="Sun" />
System.
onMouseOver="writeText('The planet Mercury is very difficult to study
from the Earth because it is always so close to the Sun.')"
href ="mercur.htm" target ="_blank" alt="Mercury" />

onMouseOver="writeText('Until the 1960s, Venus was often considered a
twin sister to the Earth because Venus is the nearest planet to us, and
because the two planets seem to share many characteristics.')"
href ="venus.htm" target ="_blank" alt="Venus" />
</map>
The planet Mercury is very difﬁcult to study
<p id="desc"></p> from the Earth because it is always so close to
</body> the Sun.
</html>

onClick example
<html>
Example: <head>
function displaymessage()
{
alert("Hello World!");
}
</script>
</head>

<body>
<form>
<input type="button" value="Click me!" onclick="displaymessage()" />
</form>

<p>By pressing the button above, a function will be called. The function will alert a
message.</p>

</body>
</html>

Result:

How can an onLoad event be used
in Internet Marketing?
To get the customer to take action.
You might want them to buy
something,
or sign up for your newsletter!
To communicate and build a
relationship with the customer.

How can an onMouseOver event be
used in Internet Marketing?

To create tool tips, or to
add additional information
about a product or service.

How can an onMouseOut event be
used in Internet Marketing?

To bring the customer back
to the ﬁrst selection.
To create interactivity for
the user.

How can an onClick event be used
in Internet Marketing?

To send the customer an alert
message.
To let the customer know, that
they have made
a purchase, signed up, or offer
additional savings!

What is Camel Case?
Camel Case is the use of upper-case letters
for each first letter of every word within a URL.

Example (standard URL):
www.jaimechristineperez.com

Example (Camel Case):
www.JaimeChristinePerez.com

File Naming Conventions

NAME

Online Training Library® » Adobe » Dreamweaver CS4 Essential Training » File naming
• Lynda video (lynda.com »
conventions)

Are Java and JavaScript the same?

JavaScript
JScript
NO!
Java and JavaScript are two completely different languages in both concept and design!

Java (developed by Sun Microsystems) is a powerful and much more complex
programming language.

JavaScript
Jscript and ECMA Script

How does JavaScript differ
from Jscript and ECMA Script?

JavaScript
• Netscape originally developed a
scripting language for use in its
browsers, calling it LiveScript.

• Java being an internet buzzword at
that time, for marketing reasons they
renamed the scripting language to
JavaScript.

• Brendan Eich (born 1961) is the
creator of the JavaScript
programming language.

• Now he is the Chief Technology
Officer at the Mozilla Corporation.

JScript
• Microsoft
implemented its
own version of
JavaScript and
called it JScript.

ECMAScript
• Netscape, Microsoft and others started
standardizing the scripting language, using the
ECMA standardizing organization for that.

• Thus the language standard is now called ECMA
Script.

• ECMA standard is only about the core language,
with data and objects like numbers, strings,
booleans, Object, Array, Function, Date, Math, but
NOT about application specific objects like browser
specific objects (document, window, links, images
etc).

• ECMA International
(http://www.ecma-international.org/)

ECMAScript
The Real Name is ECMAScript
• JavaScript's ofﬁcial name is ECMAScript.

• ECMAScript is developed and maintained by the ECMA
organization.

• ECMA-262 is the ofﬁcial JavaScript standard.

The language was invented and has appeared in all
1996 Netscape and Microsoft browsers.

1996 The development of ECMA-262 started.

The first edition of was adopted by the ECMA General
1997 Assembly in June 1997.
The standard was approved as an international ISO
1998 (ISO/IEC 16262) standard. ECMA International
(http://www.ecma-international.org/)
The development of the standard is still in progress.

Resources
• http://getjins.wordpress.com/2008/09/15/javascript-vs-jscript-vs- ecmascript/

• http://www.pavan.org/images/javaScriptIcon.gif

• http://weblogs.java.net/blog/campbell/archive/images/orangebox.png

• http://fforw.de/ffjs/image/logo.png

• http://www.onlinereadingcorner.com/wp-content/uploads/2010/07/right-web-dev.jpg

• http://www.ecma-international.org/images/logo_printerf.jpg

• http://www.worldphoto360.com/wp-content/uploads/2010/08/web-browsers.jpg

• http://www.seedol.com/wp-content/uploads/2010/09/Internet-Marketing-Services.jpg

(continue....)

Resources
(continued....)

• http://www.bloghighlight.com/wp-content/uploads/wordpress-seo/unique-wordpress-seo.jpg

• http://www.icondrawer.com/img/PF_crittersims_icon.jpg

• http://jeffbradﬁeld.ca/images/seo-web-design-tools.jpg

• http://usabilityfriction.com/wp-content/uploads/2010/03/alertbox.png

• http://www.w3schools.com/js/js_functions.asp

• http://www.buildwebsite4u.com/advanced/javascript-examples.shtml

• http://www.htmlgoodies.com/beyond/javascript/article.php/3470771/Advanced-JavaScript-for-Web-Developers-onClick-and-
onMouseOver.htm

• (lynda.com »Online Training Library® » Adobe » Dreamweaver CS4 Essential Training » File naming conventions)

Reacting to a Virtual World

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (18)

Destacado

Destacado (6)

Similar a Reacting to a Virtual World

Similar a Reacting to a Virtual World (20)

Más de Jaime Christine Perez

Más de Jaime Christine Perez (20)

Último

Último (20)

Reacting to a Virtual World

Notas del editor