Javascript

waisttherapeuticSoftware and s/w Development

Nov 4, 2013 (4 years and 1 month ago)

58 views

Javascript

It

s not JAVA

What do these all have in
common?

Take a deep breath …

Enjoy the ride

Learned?


Sysadmin
?


html?


CSS?

Learned how to learn?

Now a new language …


Hold your hands in the air and scream?

Javascript

Program dynamic web interactions

Scripting language


Interpreted at runtime

by the browser


Can change on the fly

Resources


Ch

6
-
11, and 13 of
Deitel

and
Deitel


Website w3schools.com


Why?

html = content

CSS = appearance

Scripting = behavior


R
eact to events


Manipulate and validate data


Add dynamic functionality


R
ead and write HTML

Depth?

Issues of style

This class is just syntax

Teach yourself

Do and learn

Open Linux/
gedit

or Win/Notepad++


Create a dummy header


Save as

test.html



Open

test.html


in your favorite browser


Refresh as necessary (Ctrl
-
R)


Alt: Open a console in Firefox Firebug or Chrome Inspector to try out
the examples as they are presented.


Examples

<html>

<body>


<
h1>Playing

with JavaScript
</
h1>


<script type="text/
javascript
">

document.write
("<p>" + Date() + "</p>");

</script>


</body>

</html>

Demos available at
jsDemos

Sample

Scripts are created by


<script type=

text/javascript

>


<!
--


--
>


</script>

Certain attributes expect javascript as value


<a href="http://www.myHome.net"
onmouseover="window.status='Go
back to the Homepage';

return true">Home</a>



JavaScript embedded in html

User interaction

Alerts

What &
nbsp
<button
onClick
="alert('The time
is ' + Date()); return
false;">Time</button> is it?

Forms


Parameter

Checking (though
increasingly this is being pushed to
HTML in HTML5)


Syntax

Similar to JAVA


Statements end with ;


/* comment */


Object.property


Escape character is
\


Example:
\



Etc.

No variable types


just declare them like

var age = 18;

var introText = "A long, long time
ago...";



JavaScript as embedded code

Can be a lengthy program



<script type = "text/javascript">


<!
--


var name; // string entered by the user



// read the name from the prompt box as a string


name = window.prompt( "Please enter your name", "
Type name here" );



document.writeln( "<h1>Hello " + name +


", welcome to JavaScript programming!</h1>" );


//
--
>


</script>




JavaScript is a complete
programming language

Arithmetic (D&D
ch

6)

Decisions/Control (D&D ch7, 8, 13)

Functions (D&D
ch

9)

Arrays, Libraries & Objects (D&D
ch

10
-
11)

Input/Output


Mathematical Operators

JavaScript

operation

Arithmetic

operator

Algebraic

expression

JavaScript

expression

Addition

+

f
+ 7

f + 7

Subtraction

-

p



c

p
-
c

Multiplication

*

bm

b * m

Division

/

x
/
y

or or

x

y

x / y

Remainder

%

r
mod
s

r % s

Fig. 7.12

Arithmetic
operators.


Operator(s)

Operation(s)

Order of evaluation (precedence)

*
,
/
or
%

Multiplication

Division

Modulus

Evaluated second. If there are several such
operations, they are evaluated from left to right.

+
or
-

Addition

Subtraction

Evaluated last. If there are several such op
erations,
they are evaluated from left to right.

Fig. 7.13

Precedence of arithmetic operators.


Relational Operators

Standard algebraic
equality operator or
relational operator

JavaScript equality
or relational
operator

Sample
JavaScript
condition

Meaning of
JavaScript
condition

Equality operators




=

==

x == y

x
is equal to
y

?

!=

x != y

x
is not equal to
y

Relati
onal operators




>

>

x > y

x
is greater than
y

<

<

x < y

x
is less than
y


>=

x >= y

x
is greater than or
equal to
y


<=

x <= y

x
is less than or
equal to
y

Fig. 7.15

Equality and relational operators.



Language flow

Selection structure


if


if

else


switch

Repetition structure


while


do

while


for


for

in


Keywords

JavaScript
Keywords





break

case

catch

continue

default

delete

do

else

finally

for

function

if

in

instanceof

new

return

switch

this

throw

try

typeof

var

void

while

with

Keywords that
are reserved but
not currently
used by
JavaScript





abstract

b
oolean

byte

char

class

const

debugger

double

enum

export

extends

final

float

goto

implements

import

int

interface

long

native

package

private

protected

public

short

static

super

synchronized

throws

transient

volatile





Fig. 8.2

JavaScript keywords
.


Functions

Format of a function definition


function

function
-
name
(
parameter
-
list

)

{


declarations and statements



return

expression
;


}



Function name any valid identifier


Parameter list names of variables that will receive
arguments


Must have same number as function call


May be empty


Declarations and statements


Function body (

block


of code)


Function example


<script type = "text/
javascript
">


document.writeln
(


"<h1>Square the numbers from 1 to 10</h1>" );




// square the numbers from 1 to 10


for (
var

x = 1; x <= 10; ++x )
//
loop


document.writeln
( "The square of " + x + " is " +


square( x )
+ "<
br

/>"
); //
function call




// The following square function's body is executed


// only when the function is explicitly called.




function
square( y ) //
square function
definition



{


return y * y
;




// could also use
Math.pow
(y, 2.0); for floats


}


</
script>

Software Design Issues

Design
before

code


UML etc.

Style


Whitespace, Indenting, Commenting etc.

See D&D
ch

6 for recommendations

Much, much more

A complete language

See refs for more


Textbook, D&D
ch

6
-
13


w3schools.coms