This
assignment is due by the end of class today, and uses input and output methods
in JavaScript. As you did for the exercise assignments, you will need to
create a very basic web page using Aptana, Dreamweaver, or Notepad. You
do not need to add any special features or formatting to the page, although you
may.
Once you have a functioning web page, you will add a JavaScript program in the
<body> of the page, according to the following instructions:
- Remember that you need to
begin and end your program with the <script> tags.
- Your page is going to be
called "Adding and Concatenating" For your <title>,
put "ADDCO"
- As the first line in your
program, create an alert that welcomes all visitors to your
page.
- As the second line in your
program, use document.write to generate text welcoming visitors to
Your Name's Adding and Concatenating Page, replacing Your Name's with your
own first and last name.
**Javascript makes web pages dynamic -- they change based
on interactions with the user.
In order to facilitate two-way communication (interaction – a
relationship of mutual influence analogous to a conversation), we will
need to be able to gather input from a user and to store that input in a
variable so the program can remember it. Then we can use that same
variable again in an output statement. Or we can apply processing
to the variable -- we can change it in some way. The two processing
skills we will use in this program are addition and concatenation.
- Addition is the
mathematical process you already know and love.
- Concatenation is the
process of joining up different elements -- for example, the data being
held in a variable might be one element, and a pre-defined string of text
might be the other -- so that they can appear together on the monitor in
an output statement.
- In JavaScript, these two
processes use the same operator, the plus sign +
- The program, when it runs,
will either add or concatenate depending on the type of data
presented, and in some cases, depending on where the data comes from.
- The programmer needs to know
the rules for when data will be added and when it will be concatenated, in
order to be sure the program will run correctly. If you the
programmer intend numbers to be added (say 30 + 1 = 31) and they
concatenate instead (30 + 1 = 301), your program will produce faulty
results.
- Rule One: If
both operands are in the form of numbers, the + sign works as a
mathematical operator and the data is added. Otherwise, the data is
concatenated.
- Rule Two:
Exception to Rule One. Any data that comes in from a prompt
statement, in any form, is automatically considered a text string, and
will always be concatenated.
- We'll need to remember our assignment
operator (=) to move input data into a variable, and our concatenation
operator (+) to hook up our output correctly. Follow along
with the instructions:
- Declare a variable
called first_name.
Remember the keyword you need is var.
- Write a prompt statement
that asks for the user's first or given name, and assigns the
user's answer to the variable first_name.
- Write a document.write
statement that begins with, "Your first name is " and ends
with the input value of the variable first_name.
You will need to use concatenation.
- Declare a variable called last_name.
- Write a prompt statement that
asks for the user's last or family name, and assigns the answer to the
variable last_name.
- Declare a variable
called age.
- Write a prompt statement
that asks, "How old are you, ________?", where the blank is
replaced by the name of the user (input value of the variable first_name). Assign
the response to the variable age.
- Write the following
statement: age=Number(age);
- This is done because
of the rule that data coming in from a prompt statement is always treated
as string data. We are going to add a value to this number, and we
want to be sure it doesn't concatenate. Remember that even if all
data that comes in from a prompt statement is in the form of numbers, the
program will still treat it as string data and will concatenate it unless
you convert it by using the Number function given here or some other
process.
- Write an alert that
says, "PERSON is age years old. Next year PERSON will be Y years old" where PERSON is replaced by the first
and last name of the user (concatenation of the variables first_name and last_name -- try to get a space
in between), age is replaced by the age (variable age), and is a calculated value of the variable Yage plus the number
1.
- For example, if
Derren Brown were the user, his input value for first_name would be "Derren". His
input value for last_name
would be "Brown". His input value for age would be "40".
The alert in this case would read "Derren Brown is 40 years
old. Next year Derren Brown will be 41 years old."
- Write another output
statement of your choice, thanking the user for allowing us to
enlighten him or her.
- Remember to put the </script>
tag before the </body> tag.
- Save the document as
Intro_Ex_1_yourname.html.
- When you are done call Sam or
I over so that we can check your work.