Internal and external JavaScripts
What is this about?
When you need a JavaScript for a function, you can either have the script integrated in the page you are working on, or you can have it placed in a separate file that you call, when needed. This is the difference between an internal (i.e. integrated) script and an external script.
The choice is a matter of personal taste and practicality. If you only need the script on one page, it makes no real difference where you have it, but if you need it on several pages, there is an advantage, when it comes to maintenance, in having an external script, so you only need to modify the script in one place for it to work on all pages.
The choice is a matter of personal taste and practicality. If you only need the script on one page, it makes no real difference where you have it, but if you need it on several pages, there is an advantage, when it comes to maintenance, in having an external script, so you only need to modify the script in one place for it to work on all pages.
Internal scripts
Starting with the basics in internal scripts, the syntax is as follows:
Here you insert your code, and you are good to go, e.g. writing a piece of text:
On the page it looks like this:
This can be expanded to do various active things like getting data from a database or choose between messages, depending on browser type or language.
A script like this will be placed somewhere in the BODY tag, as it only needs to be executed when the page is read. Now if you need a script being executed, e.g. when clicking a button, it has to be in the HEAD tag. In principle you can also have it in the BODY tag, but it isn't a stable solution, so you risk making something that only works sometimes. In the HEAD tag you can be sure the script is read every time.
When making a script that has to be in the HEAD tag, the routine in the script must have a name. This is because when executing the script, you call the routine name. It looks like this:
Notice the two brackets, (), after RoutineName. They have to be there, they are used for specifying one or more values, used by the script.
You can easily have several routines in the same script, you just have to declare more functions, e.g.
IMPORTANT! No spaces in the names of functions!
After this, you can execute the script, e.g. using ONCLICK="RoutineName()" if it's a button or ONSUBMIT="RoutineName()" if you are filling out a form.
So, internal scripts: all your JavaScripts are placed on the page you are working on.
An important detail regarding internal scripts: Event attributes, e.g. ONMOUSEOVER or ONCLICK, can also execute JavaScripts as internal scripts. Here you don't need the SCRIPT tag, but write the commands directly, e.g. ONCLICK="window.open()", and if you need to execute more commands, these are separated by semicolon, e.g. ONCLICK="window.open(); alert()". As a matter of readability of your code, the recommendation from here is that if you have several commands that needs to be executed this way, you really need to consider using a script with a function to execute.
<SCRIPT>
</SCRIPT>
</SCRIPT>
Here you insert your code, and you are good to go, e.g. writing a piece of text:
<SCRIPT>
document.write("Here is your message");
</SCRIPT>
document.write("Here is your message");
</SCRIPT>
On the page it looks like this:
This can be expanded to do various active things like getting data from a database or choose between messages, depending on browser type or language.
A script like this will be placed somewhere in the BODY tag, as it only needs to be executed when the page is read. Now if you need a script being executed, e.g. when clicking a button, it has to be in the HEAD tag. In principle you can also have it in the BODY tag, but it isn't a stable solution, so you risk making something that only works sometimes. In the HEAD tag you can be sure the script is read every time.
When making a script that has to be in the HEAD tag, the routine in the script must have a name. This is because when executing the script, you call the routine name. It looks like this:
<SCRIPT>
function RoutineName() {
}
</SCRIPT>
function RoutineName() {
}
</SCRIPT>
Notice the two brackets, (), after RoutineName. They have to be there, they are used for specifying one or more values, used by the script.
You can easily have several routines in the same script, you just have to declare more functions, e.g.
<SCRIPT>
function Routine-1() {
}
function Routine-2() {
}
function Routine-3() {
}
</SCRIPT>
function Routine-1() {
}
function Routine-2() {
}
function Routine-3() {
}
</SCRIPT>
IMPORTANT! No spaces in the names of functions!
After this, you can execute the script, e.g. using ONCLICK="RoutineName()" if it's a button or ONSUBMIT="RoutineName()" if you are filling out a form.
So, internal scripts: all your JavaScripts are placed on the page you are working on.
An important detail regarding internal scripts: Event attributes, e.g. ONMOUSEOVER or ONCLICK, can also execute JavaScripts as internal scripts. Here you don't need the SCRIPT tag, but write the commands directly, e.g. ONCLICK="window.open()", and if you need to execute more commands, these are separated by semicolon, e.g. ONCLICK="window.open(); alert()". As a matter of readability of your code, the recommendation from here is that if you have several commands that needs to be executed this way, you really need to consider using a script with a function to execute.
External scripts
If you are using the same routine in several places, or you have a larger script, it can be an advantage to have the script externally. The way to do this, is by creating a separate file with the extension .js, i.e. a JavaScript file. I usually have my external JavaScripts in a directory named JavaScripts, so they are all found in one place.
The way to use the file, is by uploading the script in the HEAD tag. If we have the .js file MyJavaScript in the directory JavaScripts, it looks like this:
Now the file MyJavaScript.js is read along with the page being opened, and the routines are started, e.g. using ONCLICK or ONSUBMIT as if they were internally in the HEAD tag.
There is one significant difference between internal and external scripts. Internal scripts need the SCRIPT tag, while in the .js file this is left out, so the three routines from above will look like this instead in the .js file:
So, external scripts: all your JavaScripts are placed in one or more .js files that are read along with the pages on which they are used.
The way to use the file, is by uploading the script in the HEAD tag. If we have the .js file MyJavaScript in the directory JavaScripts, it looks like this:
<SCRIPT TYPE="text/javascript" SRC="JavaScripts/MyJavaScript.js"></SCRIPT>
Now the file MyJavaScript.js is read along with the page being opened, and the routines are started, e.g. using ONCLICK or ONSUBMIT as if they were internally in the HEAD tag.
There is one significant difference between internal and external scripts. Internal scripts need the SCRIPT tag, while in the .js file this is left out, so the three routines from above will look like this instead in the .js file:
function Routine-1() {
}
function Routine-2() {
}
function Routine-3() {
}
}
function Routine-2() {
}
function Routine-3() {
}
So, external scripts: all your JavaScripts are placed in one or more .js files that are read along with the pages on which they are used.