6.3 Introducing JavaScript

Search in book...
Toggle Font Controls
Create new playlist

Name your new playlist

Playlist description (optional)
Sign In

Email address

Password

Forgot Password?

or

Continue with Facebook

Continue with Google
Sign Up

Full Name

Email address

Confirm Email Address

Password

or

Continue with Facebook

Continue with Google

AddHandler server-parsed .html

Options Indexes FollowSymLinks Includes

Now y ou create a ﬁle containing HTML code for a men u, or a header, or w hatever it is

that you want to include in y our pages. Note that this ﬁle must only contain the code

that you want to include in your pages. It is only a fragment of a w eb page that does

not contain any DOCTYPE declaration or elements like <html> or <body>, which

are already part of the main, container page. An includ ed ﬁle is therefore not a valid

HTML document. For example, you may create a ﬁle named

my_header.html and put

the following HTML into it:

<h1>This is my Header</h1>

</header>

You can now include this ﬁle to whatever page you wish using the virtual argument

of the include SSI directive. The directive looks like an HTML comment so as not

to intrude upon your HTML code if SSI doesn’t work for some reason. The eﬀec t

of including the ﬁle will be the same as if you copied and pasted the content of the

included ﬁle to the exact location of the include directive. For example, you can

include the above

my_header.html ﬁle like this:

<!DOCTYPE html>

<head>

<title>Including External HTML</title>

</head>

<body>

...

</body>

</html>

Notice that you can use the same root-re la tive convention for acc essing the ﬁles with

the include SSI directive as you would fo r a ccessing external resources with HTML

or CSS. The ﬁle

my_header.html is placed in th e includes subdirectory of the website

root.

6.3 Introducing JavaScript

Professor: And now f or someth ing completely diﬀerent.

HTML and CSS are only meant to show your visitor static material to read. While

HTML organizes c ontent and gives it a structure , CSS makes things look attractive

by taking care of presentation. We even saw an example of how CSS is able to make

things happen by using :hover pseudo-class, but this has quite a limited application.

6.3. Introducing JavaScript 105

Regardless of how charming and elegant it may look when just a silent p ass of a mouse

pointer turns up a sub-menu , there is a danger in doing that. Consider, for example,

that you hide some vital co ntent and make it accessible to your visitor only th rough

hovering—if the visitor uses a touch screen, he/she will not be able to access it.

Fortunately, there’s a third language called JavaScript, which is responsible for mak-

ing things happen . This makes it a real program ming language as opposed to HTML

and CSS, which are formatting and style-sheet languages, r espectively. We say that

JavaScript deﬁn es the b ehavior of a web page. Pages equipped with appropriate

JavaScript code can become responsive and intelligent. They can, for example, check

if someone has ﬁlled out a f orm correctly and let visitors know if they left out neces-

sary information or if they provided information in the wrong form. For example, if

they entered a no n-numeric character for the day of the month, or a date in the future

or too-distant past for the date of birth, which obviou sly cannot pass as a birth day of

a living person.

Although JavaScript is a full-ﬂedged programming lang uage and you will have no

choice but to learn some basic programming skills, that doesn’t mean it is impossible

to use. All in all, progr ams written in JavaScript are usually much shorter than many

application s you are using in your everyday work, such as text processors or digital

photo-processing software.

By th e way, do you know how to put a chicken in a fridge in three steps?

Mike: First, open the fridge, second, put the chicken inside, and third, close the fridge.

Professor: Right. What about a ﬁsh in fo ur steps? How do you do that?

Mike: Open the fridge, take the chicken out, put the ﬁsh in, close the fridge.

Professor: Brilliant! That’s a joke, all right, but it conveys an extremely importan t

concept. Let me write the instructions down for you:

Open fridge.

Take chicken out.

Put ﬁsh in.

Close fr idge.

In computer science, such a list of instructions that need to be followed in or der to

carry out a job is called an algorithm. An algorithm is usually written eith er in plain

English or in a so- called pseudo la nguage, which a computer does not understand. If

you want a computer to understand and execute your instructions, you must code these

instructions in a spec iﬁc computer lan guage. Such a set of executable instructions is

called a computer program.

Although the computer will always obey the order in which your instructions are

listed, the order itself is not always important. If only the ﬁna l state is important, you

may want, for example, to ﬁrst put the ﬁsh in the fridge (if the fridge is big enough to

hold both animals for some time) and only then ta ke the chicken out. But you cannot,

by any means, take the chicken out of the fridge before op ening the frid ge doors. That

is physically impossible.

106 Meeting 6. Behavior

One thing yo u should understand about programming languages is that they are lan-

guages. Just as you would explain to somebody how to get somewhere or cook some

favorite dish of yours in plain English, you also explain to a computer how to do some-

thing in a spec iﬁc programming language. You must never forget that most things we

are going to do in our course you already know how to do. All you’ll have to learn is

to tell a computer how to do it, so th e computer will understand you and do exactly

what you want it to do.

For example, if you want a computer to add 19 and 2 3 and display the result in the

browser window, then you write the following program:

var sum;

sum = 19 + 23;

document.write(sum);

Maria: Looks weird.

Professor: But you understand some of the code, don’t you?

Maria: Yes I do. The sum of the numbers 19 and 23 is written in the same way as we

people write it. The last line pro bably writes the sum to the window, I guess.

Professor: Correct. It’s a simple program, but it is impor ta nt that you under stand

everyth ing in it. Th e ﬁrst line of the above program is a variable declaration. A dec -

laration always starts with the v ar keyword, which is short for a variable. The word

sum that follows is a user-deﬁned variable na m e . Variables are central to any com-

puter program as they allow the computer to remember things that happened in the

past. Although you may not always be speciﬁcally aware of it, humans also need to

remembe r certain information in order to complete even the simplest tasks. For exam-

ple, when you count you need to remember the new number each time you increment

it. Most of the time you do that unco nsciously and only become aware of it when

something disturbs you. If you’re not concentrating you quickly lose count.

You can think of a variable as a box for storing informa tion that is written on a piece

of paper. Once you’ve put a paper in a box, it is there for you to read any time you

want. If you have more boxes, then you need to name them in order to know later on

which box to look in fo r a speciﬁc piece of informatio n. That’s why you give names

to variables.

For example, in the second line of the above program, a value of 42 is ﬁrst obtained as

a sum of 19 and 23 and then stored into a variable named sum. This is accomplished

using the equals sign. The ﬁnal state after these operations can be de picted as a number

42 stored in a box named sum.

sum

Mike: That’s like folders in my computer.

6.3. Introducing JavaScript 107

Professor: Not quite. The primitive variables, which we are going to meet ﬁrst, can

store only a single value and that’s an important diﬀerence. For example , consider the

following two lines:

x = 10;

x = 20;

Eventually, x ends up holding only the value 20. The value 10 is simply d eleted from

memory in the second line to give room to 20.

Maria: How do we choose a name of a variable?

Professor: A name can be chosen arbitrarily subject to certain rules. Note that the

oﬃcial recommendation provides wider allowances, but I think you will be better oﬀ

by sticking to the following rules when selecting a variable name:

• JavaScript variable names can contain (upper-case or lower-case) letters of the

English alphabet. For example, you can name your variable x or give it a more

descriptive n ame like counter.

• Names can c ontain numbers and underscores (_) as well. For example , your

variable can be named B42s. If a variable name is composed of more than

one word, you can use under scores to separate the words. You must do that

because spaces are not allowed. For example, number_of_lives is a valid

variable name. Many programmers—includin g me—use a so -called camelCase

form of writin g variable names that consist o f more than one word. camelCase

is a practice where each new word begins with a ca pital letter. For example ,

numberOfLives is a camelCase variable name.

• Names cannot start with a number. You cannot use 42 as a variable name while

_42 is a perfectly legal name.

• Names can start with a do llar sign ($) as, for examp le , $awesome. Personally,

I don’t see any ne ed for using a dollar sign. You will, however, ﬁnd it used in

the popular jQuery library, about which y ou can read in sectio n B.4 a t the end

of this book.

• JavaScript is case sensitive, which m eans that counter is c onsidered a diﬀe rent

name from Counter.

• Reserved words must not be used as variable names. Reserved words are the

keywords that have a special me aning in the language. For example, var is a

reserved word that helps you declare a variable and cannot be used as a variable

name. This is a list of the words that JavaScript reserves:

arguments break case catch class

const continue debugger default delete

do else enum eval export

extends false f inally for function

if implements import in instanceof

interface let new null package

108 Meeting 6. Behavior

private protected public return static

super switch this throw true

try typeof var void var

with yield

Mike: You mentioned the jQuery library. What’s a library?

Professor: In a nutshell, a library is a collection of diﬀerent solutions that y ou can

readily use in your own code. Libraries exist to spare you the tediou s work of wr iting

and testing code for c ommon tasks that have alread y bee n written a nd tested by oth ers.

Back to our program. As we’ve alre ady ﬁgured out, the sum of two numbers is cal-

culated in the second line. Th e line wouldn’t have had any eﬀect were it not f or th e

assignment operator (=), which sto res the calculated sum in the variable named sum.

In general, the assignment o perator always takes whatever value is produced on its

right-ha nd side and stores it to the variable on its left-hand side. Because a variable

can be placed to the left side of the assignment operator to receive the new value, we

sometimes call it lvalue, which is short f or a left value. Note that a constant number

cannot be lvalue. You cannot w rite 42 = x because a value cannot be stored in to a

constant number.

Obviously, the last line of the program is used to display the sum to the screen. Don’t

worry about the whole syntax, just remember for now that a value of anything you p ut

inside the parentheses of the do cument.write() function will be displayed in the

browser window. In our case the func tion will display the value sto red in sum.

Let me mention that the documen t.write() function is actually almost never used

in tod ay’s JavaScript programming. In the old days of JavaScript, though, it used to be

the only way to display text in a document dynamically and you are likely to see it in

existing code. Before we learn other methods, we are going to use it anyway because

it is simple and useful for quick experimen ting with code.

Maria: And how do we run the code?

Professor: There are many ways to do it. As for now, we ’ll just be happy with putting

the code inside the <script> HTML element, inside the body of the document:

...

<body>

var sum;

sum = 19 + 23;

document.write(sum);

</script>

</body>

</html>

Now all you have to do is load the ﬁle into the browser and you shall see the 42 in the

browser’s window.

In the last example, there’s one mor e detail that I want you to pay attention to. You

6.3. Introducing JavaScript 109

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.

Table of Contents for 6.3 Introducing JavaScript

Create new playlist

Sign In

Sign Up

Table of Contents for
6.3 Introducing JavaScript