Introduction
In part 1 I showed you how to declare a JavaScript and make sure that non-compatible browsers can see something. In this part I will show you how to actually do something with your JavaScript.
Alerts in JavaScript
The first JavaScript command I will show you is:
alert()
This command will make a popup box appear (Find Html source code below). This can be useful for warning users about things or (in some cases) giving them instructions. It is used in the following way:
alert('Text for alert box');
In the example above I have used single quotations ' but you could use double quotations if you want to ". They work exactly the same way. The reason I use single quotes is because, later on, when you are using HTML code and JavaScript together you will need to use them and it is good to be consistent.
Here is the full JavaScript for the earlier example:
<script>
<!-- Start Hide
// Display the alert box
alert('This text is in an alert box');
// End Hide-->
</script>
This is placed between the <head> and </head> tags of the page. As you can see, I have used a comment tag as well as the alert box code. This makes your code more readable but is not essential.
Html Source Code:
In part 1 I showed you how to declare a JavaScript and make sure that non-compatible browsers can see something. In this part I will show you how to actually do something with your JavaScript.
Alerts in JavaScript
The first JavaScript command I will show you is:
alert()
This command will make a popup box appear (Find Html source code below). This can be useful for warning users about things or (in some cases) giving them instructions. It is used in the following way:
alert('Text for alert box');
In the example above I have used single quotations ' but you could use double quotations if you want to ". They work exactly the same way. The reason I use single quotes is because, later on, when you are using HTML code and JavaScript together you will need to use them and it is good to be consistent.
Here is the full JavaScript for the earlier example:
<script>
<!-- Start Hide
// Display the alert box
alert('This text is in an alert box');
// End Hide-->
</script>
This is placed between the <head> and </head> tags of the page. As you can see, I have used a comment tag as well as the alert box code. This makes your code more readable but is not essential.
Html Source Code:
| <html> | |
| <head> | |
| <title>Alert Example</title> | |
| <script> | |
| <!-- Start Hide | |
| alert('This text is in an alert box'); | |
| // End Hide--> | |
| </script> | |
| </head> | |
| <body> | |
| <br>Kannan's Tech Blog<br> | |
| <a href=" http://ckannan.blogspot.in/"><font face="Arial">Back</font></a> | |
| </body> | |
| </html> |
Variables in JavaScript
Variables in JavaScript, as in other computer languages, can be used to store information. For example I could tell the computer that the variable called:
my_number
should have the value:
3456
Variables can also contain text for example the variable:
my_name
could have the value:
David Gowans
Variables can be very useful for text or numbers that you repeat several times in a program, for doing calculations or for getting input from a user. Variables are declared as follows:
Number:
var my_number = 3456;
Strings (text):
var my_name = 'David Gowans';
As you can see a string is included in quotes (either single or double) but a number does not. If you include a number in quotes it will not be treated as a number. You may also notice that each line ends with a semicolon. This is standard JavaScript code to show the end of a line. Always remember to put it in.
When naming your strings you can use any word or combination of words as long as it is not already in use by JavaScript (so don't use alert as a variable name etc.). Do not include spaces, replace them with _.
Calculations in JavaScript
You can do calculations if you have variables containing numbers. Here is an example of some code which does a calculation:
// Set Variables
var first_number = 15;
var second_number = 5;
var third_number = 10;
var fourth_number = 25;
//Do Calculations
var new_number = first_number + second number
var answer = new_number * third_number
var answer = answer / fourth_number
This code sets four number variables. It then adds the first and second numbers together and stores the answer as a variable called new_answer. Then it multiplies new_number by the third number and stores the answer as answer. Finally, it divides the answer by the fourth_number to get a new value for the answer.
Getting Information From The User using JavaScript
Once you have started using variables you will realize that it will be quite useful to get some information from the user. You can do this by using the:
prompt()
command. Take a look at this example. I will explain how this works.
First of all, the new prompt command is used. I set the variable your_n
ame using it:
var your_name = prompt('Please enter your name', 'Your Name');
The text between the first set of quotes is what is written on the prompt box. The text between the second set of quotes is what is the default text for the input section of the box.
After this I have to create the output string. I do this by adding together the input with two strings I declared earlier (view the source on the example page for more information):
var output_text = welcome_text + your_name + closing_text;
As you can see this is much the same as adding 3 numbers together but, as these are strings they will be put one after the other (you could have also used quotes in here to add text and strings together). This added the text I had set as the welcome_text to the input I had received and then put the closing_text on the end.
Finally I displayed the output_text variable in an alert box with the following code:
alert(output_text);
which, instead of having text defined as the content for the alert box, places the string in the box.
What Now?
In part 3 I will show you how to display information in the page.
Variables in JavaScript, as in other computer languages, can be used to store information. For example I could tell the computer that the variable called:
my_number
should have the value:
3456
Variables can also contain text for example the variable:
my_name
could have the value:
David Gowans
Variables can be very useful for text or numbers that you repeat several times in a program, for doing calculations or for getting input from a user. Variables are declared as follows:
Number:
var my_number = 3456;
Strings (text):
var my_name = 'David Gowans';
As you can see a string is included in quotes (either single or double) but a number does not. If you include a number in quotes it will not be treated as a number. You may also notice that each line ends with a semicolon. This is standard JavaScript code to show the end of a line. Always remember to put it in.
When naming your strings you can use any word or combination of words as long as it is not already in use by JavaScript (so don't use alert as a variable name etc.). Do not include spaces, replace them with _.
Calculations in JavaScript
You can do calculations if you have variables containing numbers. Here is an example of some code which does a calculation:
// Set Variables
var first_number = 15;
var second_number = 5;
var third_number = 10;
var fourth_number = 25;
//Do Calculations
var new_number = first_number + second number
var answer = new_number * third_number
var answer = answer / fourth_number
This code sets four number variables. It then adds the first and second numbers together and stores the answer as a variable called new_answer. Then it multiplies new_number by the third number and stores the answer as answer. Finally, it divides the answer by the fourth_number to get a new value for the answer.
Getting Information From The User using JavaScript
Once you have started using variables you will realize that it will be quite useful to get some information from the user. You can do this by using the:
prompt()
command. Take a look at this example. I will explain how this works.
First of all, the new prompt command is used. I set the variable your_n
ame using it:
var your_name = prompt('Please enter your name', 'Your Name');
The text between the first set of quotes is what is written on the prompt box. The text between the second set of quotes is what is the default text for the input section of the box.
After this I have to create the output string. I do this by adding together the input with two strings I declared earlier (view the source on the example page for more information):
var output_text = welcome_text + your_name + closing_text;
As you can see this is much the same as adding 3 numbers together but, as these are strings they will be put one after the other (you could have also used quotes in here to add text and strings together). This added the text I had set as the welcome_text to the input I had received and then put the closing_text on the end.
Finally I displayed the output_text variable in an alert box with the following code:
alert(output_text);
which, instead of having text defined as the content for the alert box, places the string in the box.
What Now?
In part 3 I will show you how to display information in the page.
No comments:
Post a Comment