JavaScript – Scripting language that facilitates a disciplined ...

strawberriesfarctateSoftware and s/w Development

Nov 4, 2013 (3 years and 7 months ago)

70 views

Introduction to JavaScript (Part I)
Dr. Nazli Hardy
Introduction
 JavaScript

Scripting language that facilitates a disciplined approach to
designing computer programs that enhance the functionality and
appearance of web pages.

 Before you can run code examples with JavaScript on your
computer, you may need to change your browser’s security settings.
– IE7 prevents scripts on the local computer from running by
default
– FF2 enables JavaScript by default
Adapted from Internet & World Wide Web: Deitel & Deitel, 4
th
Edition
Introduction to JavaScript (Part I)
Dr. Nazli Hardy
2
Enabling JavaScript in Internet Explorer 7
Introduction to JavaScript (Part I)
Dr. Nazli Hardy
Displaying a line
of text.

1

<?xml version =
"1.0"

encoding =
"utf
-
8"
?>


2

<!DOCTYPE html PUBLIC

"
-
//W3C//DTD XHTML 1.0 Strict//EN"


3


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


4



5

<!
--

Fig.

6.2: welcome.html
--
>


6

<!
--

Displaying a line of text.
--
>


7

<htm
l xmlns =
"http://www.w3.org/1999/xhtml"
>


8


<head>


9


<title>
A First Program in JavaScript
</title>

10


<script type =
"text/javascript"
>


11


<!
--


12



document.writeln(


13


"<h1>Welcome to JavaScript Programming!</h1>"

);

14


//
--
>


15


</script>


16


</head><body></body>

17

</html>


Script begins
Specifies that we are using the
JavaScript language
Writes an h1 welcome
message in the XHTML
document
Prevents older browsers that do
not support scripting from
displaying the text of the script
XHTML comment delimiter,
commented for correct
interpretation by all browsers
Script ends
Introduction to JavaScript (Part I)
Dr. Nazli Hardy
Printing one line
with separate
statements.

1

<?xml version =
"1.0"

encoding =
"utf
-
8"
?>


2

<!DOCTYPE html PUBLIC

"
-
//W3C//DTD XHTML 1.0 Strict//EN"


3


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


4



5

<!
--

Fig.

6.3: welcome2.html
--
>


6

<!
--

Printing one line with multiple statem
ents.
--
>


7

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


8


<head>


9


<title>
Printing a Line with Multiple Statements
</title>

10


<script type =
"text/javascript"
>

11


<!
--

12


document.write(
"<h1 style =
\
"color
: magenta
\
">"

);


13


document.write(
"Welcome to JavaScript "

+


14


"Programming!</h1>"

);


15


//
--
>

16


</script>

17


</head><body></body>

18

</html>


Two write statements
create one line of XHTML
text
Concatenation operator
joins the string together, as
it is split into multiple lines
Introduction to JavaScript (Part I)
Dr. Nazli Hardy
Printing on
multiple lines
with a single
statement.

1

<?xml version =
"1.0"

encoding =
"utf
-
8"
?>


2

<!DOCTYPE html PUBLIC

"
-
//W3C//DTD XHTML 1.0 Strict//EN"


3


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


4



5

<!
--

Fig.

6.4: welcome3.html
--
>


6

<!
--

Printing on multiple lines with a sing
le statement.
--
>


7

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


8


<head>


9


<title>
Printing Multiple Lines
</title>

10


<script type =
"text/javascript"
>

11


<!
--

12


document.writeln(
"<h1>Welcome to<br />JavaScri
pt"

+


13



"<br />Programming!</h1>"

);


14


//
--
>

15


</script>

16


</head><body></body>

17

</html>


Inserts line-break
Inserts line-break
Introduction to JavaScript (Part I)
Dr. Nazli Hardy
Alert dialog
displaying
multiple lines.

1

<?xml version =
"1.0"

encoding =
"utf
-
8"
?>


2

<!DOCTYPE html PUBLIC

"
-
//W3C//DTD XHTML 1.0 Strict//EN"


3


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


4



5

<!
--

Fig.

6.5: welcome4.html
--
>


6

<!
--

Alert dialog displaying multiple lines
.
--
>


7

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


8


<head>


9


<title>
Printing Multiple Lines in a Dialog Box
</title>

10


<script type =
"text/javascript"
>

11


<!
--

12


window.alert(
"Welcome to
\
nJavaScript
\
nP
rogramming!"
);

13


//
--
>

14


</script>

15


</head>

16


<body>

17


<p>
Click Refresh (or Reload) to run this script again.
</p>

18


</body>

19

</html>


Creates a pop up box that
alerts the welcome text to
the user
Introduction to JavaScript (Part I)
Dr. Nazli Hardy
Some common escape sequences.
Escape sequence
Description
\n
New line. Position the screen cursor at the beginning of the
next line.
\t
Horizontal tab. Move the screen cursor to the next tab stop.

\r
Carriage return. Position the screen cursor to the beginning of
the current line; d
o not advance to the next line. Any characters
output after the carriage return overwrite the characters
previously output on that line.
\\
Backslash. Used to represent a backslash character in a string.
\"
Double quote. Used to represent a double-quote character in a
string contained in double quotes. For example,
window.alert( "\"in quotes\"" );
displays "in quotes" in an alert dialog.
\'
Single quote. Used to represent a single-quote character in a
string. For example,
window.alert( '\'in quotes\'' );
displays 'in quotes' in an alert dialog.

Introduction to JavaScript (Part I)
Dr. Nazli Hardy
Obtaining User Input with
prompt
Dialogs
 Scripting

Gives you the ability to generate part or all of a web page’s content at
the time it is shown to the user

– Such web pages are said to be dynamic, as opposed to static, since
their content has the ability to change
Introduction to JavaScript (Part I)
Dr. Nazli Hardy
Obtaining User Input with
prompt
Dialogs

Keywords are words with special meaning in JavaScript

 Keyword var
– Used to declare the names of variables
– A variable is a location in the computer’s memory where a value can be
stored for use by a program

All variables have a name, type and value, and should be declared with
a var statement before they are used in a program

 A variable name can be any valid identifier consisting of
letters, digits, underscores ( _ ) and dollar signs ($) that
does not begin with a digit and is not a reserved
JavaScript keyword.
Introduction to JavaScript (Part I)
Dr. Nazli Hardy
Good Programming Practice
Choosing meaningful variable names helps a script to be “self-
documenting” (i.e., easy to understand by simply reading the script,
rather than having to read manuals or extended comments).


By convention, variable-name identifiers begin with a lowercase first
letter. Each subsequent word should begin with a capital first letter. For
example, identifier itemPrice has a capital P in its second word,
Price.

Best practice: declare each variable on a separate line. This format
allows for easy insertion of a descriptive comment next to each
declaration. This is a widely followed professional coding standard.

Introduction to JavaScript (Part I)
Dr. Nazli Hardy
Prompt box used
on a welcome
screen (Part 1 of
2).
1
<?xml version =
"1.0"

encoding =
"utf
-
8"
?>

2
<!DOCTYPE html PUBLIC

"
-
//W3C//DTD XHTML 1.0 Strict//EN"

3

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

4
5
<!
--

Fig.

6.7: welcome5.html
--
>

6
<!
--

Prompt box used on a welcome screen.
-
-
>

7
<html xmlns =
"http://www.w3.org/1999/xhtml"
>

8

<head>

9

<title>
Using Prompt and Alert Boxes
</title>

10

<script type =
"text/javascript"
>

11

<!
--

12

var

name;
// string entered by the user

13
14


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

15

name = window.prompt(
"Please enter your name"

);

16
17

document.writeln(
"<h1>Hello, "

+ name +

18

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

);

19


//
--
>

20

</script>

21

</head>

22

<body>

23

<p>
Click Refresh (or Reload) to run this script again.
</p>

24

</body>

25
</html>


Declares a new variable
Sets the identifier of the
variable to name
Assigns the string entered by
the user to the variable name
Inserts the value given to
name into the XHTML text
Introduction to JavaScript (Part I)
Dr. Nazli Hardy
Prompt dialog displayed by the
window
object’s
prompt
method.
Introduction to JavaScript (Part I)
Dr. Nazli Hardy
Addition script
(Part 1 of 2).
1
<?xml version =
"1.0"

encoding =
"utf
-
8"
?>

2
<!DOCTYPE html PUBLIC

"
-
//W3C//DTD XHTML 1.0 Strict//EN"

3

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

4
5
<!
--

Fig.

6.9: addition.html
--
>

6
<!
--

Addition script.
--
>

7
<html xmlns =

"http://www.w3.org/1999/xhtml"
>

8

<head>

9

<title>
An Addition Program
</title>

10

<script type =
"text/javascript"
>

11

<!
--

12

var

firstNumber;
// first string entered by user

13

var

secondNumber;
// s
econd string entered by user

14

var

number1;
// first number to add

15

var

number2;
// second number to add

16

var

sum;
// sum of number1 and number2

17
18

// read in first number from us
er as a string

19

firstNumber = window.prompt(
"Enter first integer"

);

20
21

// read in second number from user as a string

22

secondNumber = window.prompt(
"Enter second integer"

);

23
24

// convert numbe
rs from strings to integers

25

number1 = parseInt( firstNumber );


26

number2 = parseInt( secondNumber );

27
28

sum = number1 + number2;
// add the numbers

29

Assigns the first input from
the user to the variable
firstNumber
Assigns the second input
from the user to the variable
secondNumber
Converts the strings entered
by the user into integers
 Function parseInt
– converts its string argument to an integer
Introduction to JavaScript (Part I)
Dr. Nazli Hardy
Addition script
(Part 2 of 2).
30


// display the results

31

document.writeln(
"<h1>The sum is "
+ sum +
"</h1>"
);

32


//
--
>

33

</script>

34

</head>

35

<body>

36

<p>
Click Refresh (or Reload) to run the script again
</p>

37

</
body>

38

</html>


Introduction to JavaScript (Part I)
Dr. Nazli Hardy
Memory Concepts

Variable names correspond to locations in the computer’s memory.


Every variable has a name, a type and a value.


When a value is placed in a memory location, the value replaces the previous value
in that location.

 When a value is read out of a memory location, the process is nondestructive.
Introduction to JavaScript (Part I)
Dr. Nazli Hardy
Arithmetic

Parentheses can be used to group expressions as in algebra.

 Operators in arithmetic expressions are applied in a precise
sequence determined by the rules of operator precedence:
– Multiplication, division and remainder operations are applied first.
– If an expression contains several of these operations, operators are
applied from left to right.
– Multiplication, division and remainder operations are said to have the
same level of precedence.
– Addition and subtraction operations are applied next.
– If an expression contains several of these operations, operators are
applied from left to right.

Addition and subtraction operations have the same level of precedence.

 When we say that operators are applied from left to right, we are
referring to the associativity of the operators. Some operators
associate from right to left.
Introduction to JavaScript (Part I)
Dr. Nazli Hardy
Precedence of
arithmetic
operators.
Operator(s)

Operation(s)

Order of evaluation (precedence)

*
,
/

or

%

Multiplication

Division

Remainder

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

+
or
-

Addition

Subtraction

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


Introduction to JavaScript (Part I)
Dr. Nazli Hardy
Order in which a second-degree polynomial is evaluated.