Introduction to JavaScript Edwards, Chapter 1 (p. 1-14, 23) and ...

tacitmarigoldInternet και Εφαρμογές Web

25 Ιαν 2014 (πριν από 3 χρόνια και 8 μήνες)

199 εμφανίσεις

Introductions


Carrie Puterbaugh

Thrivent Financial for Lutherans


Katie Ware

MRM Worldwide

McCracken Chapter 6


Navigation


Edwards: Chapter 1 & 2


Intro to
JavaScript & the Math Object


Lab 3

What is JavaScript?

Why use it?

Elements of an HTML File: content,
style, dynamic elements


JavaScript Constructs

-

Event Handling

-

Writing Functions

Chapter 1


Getting Started with
Java Script

What is JavaScript?

JavaScript is a scripting language


--

adds dynamic behavior to web pages

--

changes pages in real
-
time

--

responds to user events

--

created by Netscape in 1995, evolved from Netscape’s
LiveScript

--

works in both Netscape & Internet Explorer

--

most commonly used as a client
-
side language

--

good for small amounts of processing

What JavaScript is NOT

JavaScript is
-



--

NOT Java

--

NOT typically used for server
-
side processing, like
PHP (
P
HP
H
ypertext
P
reprocessor ) or ASP (Active
Server Pages)

--

NOT good for data
-
processing

--

NOT as difficult to master as programming
languages like C# or Java

JavaScript vs. ActiveX

They are fundamentally different.


JavaScript was developed by Netscape to
be used in client and
server

Web programming.

(e.g. browser text scrolling,
server side
database

lookup).

The LiveWire product by Netscape is
essentially JavaScript.


Active X, by
Microsoft
, is a general purpose Windows technology to provide
distributed processing (e.g. Word document requires Spreadsheet feeding
information to it).

Active X is not specific specific to the Web, but can be
used for that purpose.



A more direct comparison to Active X would be
Sun's

Java/JavaBeans
component model.



JavaScript vs. VBScript

for Client
-
Side Programming

Why Use JavaScript?

“Three Legged Stool”

--

JavaScript works with HTML & CSS
(Cascading Style Sheets)

--

Content is
separated

from Presentation &
Behavior


HTML


Content


CSS

(Cascading Style
Sheets)


Presentation


JavaScript


Behavior

Definitions & Examples

--

HTML
: hyper
-
text markup language for
static

web pages




CSS (Cascading Style Sheets):

a simple
mechanism for adding style (e.g. fonts, colors,
spacing) to Web documents.

JavaScript


combine with CSS to modify
Content Presentation

Makes it easier to change Presentation

Elements of an HTML File

DOCTYPE:


Each HTML document must begin with a
document type declaration

that declares
which version of HTML the document adheres to. We’re using “HTML 4 Transitional”


<!DOCTYPE html PUBLIC "
-
//W3C//DTD XHTML 1.0 Transitional//EN"


"http://www.w3.org/TR/xhtml1/DTD/xhtml1
-
transitional.dtd">



NAMESPACE:


The

xmlns attribute is also not optional, according to
XHTML 1.0 sec. 3.1.1

criteria 3.
The root element of the document must designate the XHTML namespace using the
xmlns attribute. The namespace for XHTML is defined to be
http://www.w3.org/1999/xhtml.

Thus a valid XHTML document
must

have the xmlns attribute with abovementioned
value on the root element.



<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">



Elements of an HTML File

HEADER


<head>

<title>JavaScript Example #1</title>

<style type="text/css">


body { font
-
family: Arial; font
-
size: medium; color: blue;}


h1 { font
-
family: Arial; font
-
size: medium; color: yellow; }

</style>

<meta http
-
equiv="Content
-
Type" content="text/html; charset=iso
-
8859
-
1" />

</head>


Elements of an HTML File with JavaScript


BODY


Includes the JavaScript


<body>

<h1>JavaScript Writes Text</h1>

<script type="text/javascript">

{


document.write ('Hello World!');

}

</script>

</body>


Example 1
-
> Event Handling



-

Handle “events” on page components


<a href="#"
onclick="window.open('otherpage.htm');
return false;">



File: example1.html


Example 2
-
> Use Functions with JavaScript


Declare JavaScript Function in the <head>


--

not required, but GOOD PRACTICE


<head>

<title>JavaScript Example #1</title>

<style type="text/css">


body { font
-
family: Arial; font
-
size: medium; color: blue;}


h1 { font
-
family: Arial; font
-
size: medium; color: yellow; }

</style>


<script type="text/javascript">


function saySomething (message)

{


document.write (message);

}

</script>

<meta http
-
equiv="Content
-
Type" content="text/html; charset=iso
-
8859
-
1" />

</head>


Example 2
-
> Use Functions with JavaScript


Body


Call JavaScript Function


<body>

<h1>JavaScript Calls Function</h1>

<p>

This is your second JavaScript example. An alert box should be displayed with
a message in it.</p>


<script type="text/javascript">


saySomething ('Hello World!' );

</script>


</body>



File: example2.html


Example 3
-
> Display an ALERT box



…. Code in <head> ….

<script type="text/javascript">

function saySomething (message)

{


alert (message);

}

</script>



… Code in <body> ….

<script type="text/javascript">

saySomething ('There is an elephant in the room' );

</script>




File: example3.html



Example 4
-
> Using Functions to Handle
Events


… Code in <head> …

<script type="text/javascript">

function mouseOver()

{

window.status='Pink';

document.b1.src ="b_change.gif";

return true;


}


function mouseOut()

{

window.status='Blue';

document.b1.src ="b_blue.gif";

return true;

}

</script>

</head>


<body>

<a href=“soccer" target="_blank"

onmouseover="mouseOver(); return true;"

onmouseout="mouseOut(); return true;">

<img border="0" alt=“Soccer Rules!"
src="b_blue.gif" name="b1" width="26"
height="26" /></a>

</body>

</html>




Example 4
-
> Using Functions to Handle Events

Example 4
-
> Using Functions to Handle
Events




Files:



example4.html


b_blue.gif


b_change.GIF


Menu Example
-
> Handling more Complex
“onmouseover” & “onmouseout” event


Best Practice
-
> put JavaScript code in an
external file to separate HTML from code


<script type="text/javascript" src="javaScriptFile.js">

function saySomething (message)

{


alert (message);

}




javaScriptFile.js

5 arithmetic operators:


multiplication (*)

division (/)

addition (+)

subtraction (
-
)

modulus (%)

Chapter 2


Working With Numbers


Methods are built
-
in to JavaScript

Functions are user
-
defined


JavaScript Math Methods:

Math.ceil

Math.floor

Math.round

Math.pow

Math.sqrt

Math.random

Methods vs. Functions


Methods are built
-
in to JavaScript

Functions are user
-
defined


JavaScript Math Methods:

Math.ceil

Math.floor

Math.round

Math.pow

Math.sqrt

Math.random

Methods vs. Functions



String() or toString()


var myNum =25;


myNum = String(myNum);

alert(typeof myNum +”=“+ myNum);


Use string concatenation


Files: example5.html


Converting a Number to a String



Number ()


var myString =’25’;


myString = String(myString );

alert(typeof myString+”=“+myString);


Use string concatenation


Files: example6.html


Converting a String to a Number




Lab 3

In this lab, you will:


--

use css & a table to create a menu bar


--

handle “onmouseover” events


--

display information in an alert


--

update the window.status


--

create & call 2 functions


--

work with several Math Methods