Introduction
In the last part I showed you how to display alert boxes and how to get information from the user. I also explained how variables work.
document.writeln
This command is very useful as it will output information to a web page. I will start with a basic example of how to use it:
document.writeln('Hello there!');
This basically tells the JavaScript to write to the document (web page) on a new line the text Hello there!. The really useful bit of this is that you can tell the JavaScript to output text, HTML and variables. First of all I will show you how to output HTML:
document.writeln('<font face="Arial" size="5" color="red">Hello Friends!</font>');
This will display the following on the page:
Hello Friends!
As you can see, this allows you to just put standard HTML code into a web page using JavaScript. If you can't see a good reason for this it is not surprising at the moment but next I will introduce variables to the script.
Outputting Variables in JavaScript
If you look at the final example I did in the last part, where I took information from the user and added it to some other text before displaying the output in an alert box. This can also be displayed in the page. Before doing this, though, I will explain a little more about where you can put your JavaScript code.
Up until now all the JavaScrit code has been contained inside the <head> and </head> tags of the HTML document. The reason for this is that the JavaScript will be loaded and executed before the rest of the document. This works fine for most scripts but, as the scripts become more advanced, you may need to have them both in the document and the head. I will use this script to demonstrate.
To put JavaScript in the <body></body> section of the page is exactly the same as putting it in the <head></head> section of the page. I would suggest that you adopt the following way of creating scripts:
Put all your initialization code in the head of the page (like setting variables, prompts, alerts etc.) and then all display code (document.writeln etc.) in the body of the page. This is the code for the new improved version of the example which uses document.writeln:
<html>
<head>
<title>Variable Example</title>
<script>
<!-- Start Hide
// Set Variables
var welcome_text = 'Hello there ';
var closing_text = '! How are you?';
// Display prompt
var your_name = prompt('Please enter your name', 'Your name');
// Create Output Variable
var output_text = welcome_text + your_name + closing_text;
// End Hide-->
</script>
</head>
<body>
<script>
<!-- Start Hide
// Display Text
document.writeln('<font face="Arial" size="4">' + output_text + '</font><Br><Br>');
// End Hide-->
</script>
<a href="index3.htm#variables"><font face="Arial">Back</font></a>
</body>
</html>
You can see this code in action, Copy the above code to notepad. Save as FileName.html (All files).. Open in your browser
As you can see from the above code, variables are added into document.writeln by using the + signs. There are no quotes round the variable names.
Remote JavaScript
Now you have learnt how to use the document.writeln command you can now start using one of the most useful applications of JavaScript, remote scripting. This allows you to write a JavaScript in a file which can then be 'called' from any other page on the web.
This can be used for things on your own site which you may like to update site-wide (like a footer on the bottom of every page) or something used on remote sites (for e
xample newsfeed or some counters).
To insert a remote JavaScript you do the following:
<script language="JavaScript" src="http://www.yourdomain.com/javascript.js">
</script>
Which will then run the JavaScript stored at http://www.yourdomain.com/javascript.js. The .js file is also very simple to make, all you have to do is write your JavaScript (omitting the <script>, </script>, <!--Start Hide and // End Hide--> tags into a simple text file and save it as something.js.
If you want to include information for browsers which do not support JavaScript you will need to put the <noscript></noscript> tags in the HTML, not the JavaScript file.
There is one problem with using remote JavaScript which is that only the recent browsers support it. Some browsers which support JavaScript do not support Remote JavaScript. This makes it advisable not to use this for navigation bars and important parts of your site.
What Now?
In the next part I will show you how to open and manipulate browser windows.
In the last part I showed you how to display alert boxes and how to get information from the user. I also explained how variables work.
document.writeln
This command is very useful as it will output information to a web page. I will start with a basic example of how to use it:
document.writeln('Hello there!');
This basically tells the JavaScript to write to the document (web page) on a new line the text Hello there!. The really useful bit of this is that you can tell the JavaScript to output text, HTML and variables. First of all I will show you how to output HTML:
document.writeln('<font face="Arial" size="5" color="red">Hello Friends!</font>');
This will display the following on the page:
Hello Friends!
As you can see, this allows you to just put standard HTML code into a web page using JavaScript. If you can't see a good reason for this it is not surprising at the moment but next I will introduce variables to the script.
Outputting Variables in JavaScript
If you look at the final example I did in the last part, where I took information from the user and added it to some other text before displaying the output in an alert box. This can also be displayed in the page. Before doing this, though, I will explain a little more about where you can put your JavaScript code.
Up until now all the JavaScrit code has been contained inside the <head> and </head> tags of the HTML document. The reason for this is that the JavaScript will be loaded and executed before the rest of the document. This works fine for most scripts but, as the scripts become more advanced, you may need to have them both in the document and the head. I will use this script to demonstrate.
To put JavaScript in the <body></body> section of the page is exactly the same as putting it in the <head></head> section of the page. I would suggest that you adopt the following way of creating scripts:
Put all your initialization code in the head of the page (like setting variables, prompts, alerts etc.) and then all display code (document.writeln etc.) in the body of the page. This is the code for the new improved version of the example which uses document.writeln:
<html>
<head>
<title>Variable Example</title>
<script>
<!-- Start Hide
// Set Variables
var welcome_text = 'Hello there ';
var closing_text = '! How are you?';
// Display prompt
var your_name = prompt('Please enter your name', 'Your name');
// Create Output Variable
var output_text = welcome_text + your_name + closing_text;
// End Hide-->
</script>
</head>
<body>
<script>
<!-- Start Hide
// Display Text
document.writeln('<font face="Arial" size="4">' + output_text + '</font><Br><Br>');
// End Hide-->
</script>
<a href="index3.htm#variables"><font face="Arial">Back</font></a>
</body>
</html>
You can see this code in action, Copy the above code to notepad. Save as FileName.html (All files).. Open in your browser
As you can see from the above code, variables are added into document.writeln by using the + signs. There are no quotes round the variable names.
Remote JavaScript
Now you have learnt how to use the document.writeln command you can now start using one of the most useful applications of JavaScript, remote scripting. This allows you to write a JavaScript in a file which can then be 'called' from any other page on the web.
This can be used for things on your own site which you may like to update site-wide (like a footer on the bottom of every page) or something used on remote sites (for e
xample newsfeed or some counters).
To insert a remote JavaScript you do the following:
<script language="JavaScript" src="http://www.yourdomain.com/javascript.js">
</script>
Which will then run the JavaScript stored at http://www.yourdomain.com/javascript.js. The .js file is also very simple to make, all you have to do is write your JavaScript (omitting the <script>, </script>, <!--Start Hide and // End Hide--> tags into a simple text file and save it as something.js.
If you want to include information for browsers which do not support JavaScript you will need to put the <noscript></noscript> tags in the HTML, not the JavaScript file.
There is one problem with using remote JavaScript which is that only the recent browsers support it. Some browsers which support JavaScript do not support Remote JavaScript. This makes it advisable not to use this for navigation bars and important parts of your site.
What Now?
In the next part I will show you how to open and manipulate browser windows.
No comments:
Post a Comment