When creating and maintaining this website, we occasionally come across coding information that is either confusing or difficult to find from internet sources.
Whilst we do not profess to be coding experts, we have worked out some solutions you may find helpful.
This page includes some of these solutions for 'javascript' codes.
Javascript files are used to hold text that is common to all or many web-pages, and/or calculation code, both of which can be included in the same file.
The number of javascript files loaded by a page can affect page appearance speed, which can affect its SEO rating. It is recommended that this number is kept to 3 or less (for any given page).
js files are text files, plain and simple.
You simply create the file in Notepad and save it as a text file (using the UTF-8 formal option) and then change the extension from .txt to .js
The only two things that distinguishes it from other text files are:
Its file extension (.js)
and
Its content is in css code
You create a single js file with one complete set of code to be loaded as many times and in whichever location (on your page) as you wish.
A simple example of text written in a form that can be recovered and used in an html file is provided below:
document.write(
'<div id="header">\
<h1>Hello World</h1>\
<p class="layout">enter your text in here<br/>\
including all of your images<br/>\
and your links<br/>\
and your formatting</p>\
</div>'
)
You then add the following code within the <body></body> of your html page where you want it to appear:
<script type="text/javascript" src="/Resource/javatext.js"></script>
You create a single js file with as many sets of code you wish to be loaded as many times and in whichever locations (on your page) as you wish.
A simple example of text written in a form that can be recovered and used in an html file is provided below:
function firsttext() {
document.getElementById("textone").innerHTML =
'<div id="header">\
<h1>Hello Earth</h1>\
<p class="layout">enter your text in here<br/>\
including all of your images<br/>\
and your links<br/>\
and you formatting</p>\
</div>'
}
function secondtext() {
document.getElementById("texttwo").innerHTML =
'<div id="header">\
<h1>Hello Mars</h1>\
<p class="layout">enter your text in here<br/>\
including all of your images<br/>\
and your links<br/>\
and you formatting</p>\
</div>'
}
document.open();
firsttext();
secondtext();
document.close();
You then add the following code within the <body></body> of your html page where you want the respective texts to appear:
<div id="textone">
followed by:
<div id="texttwo">
Text names in a js file must not duplicate any such names in your .css files.
You create arrays as follows:
You must declare a variable (e.g. var x = 0 or let x = '') the first time you use it.
After which you do not have to declare it again; you can simply use it (e.g. x = 1 or x = jan).
You create arrays as follows:
Numbers: let days = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
text: let months = ['jan', 'feb', 'mar', 'apr', 'may', 'jun', 'jul', 'aug', 'sep', 'oct', 'nov', 'dec',];
And you use them as follows:
var d = 3 * days[3]; (result: d = 90)
let d = days[2] + ' and ' + days[6]; (result: d = mar and jul)
Multiple arrays look like this:
let cars = [['Jag', 'RR', 'AM', 'Lotus'],['new', 'used', 'demonstrator', 'damaged']];
And you use them as follows:
var car = cars[1][ ] + and + cars[ ][3]; (result: car = RR and damaged)
Basic version: if (x == 1) {x=x+1} else {x=x-1}
you may leave out the else statement if you don't need it.
The conditional operators may be any of the following:
equal to: ==
less than: <
less than or equal to: <=
greater than: >
greater than or equal to: >=
Or you can combine any of the above operators as follows:
and: && (e.g. if (x == 1 && y<=2) {x=x+1} else {x=x-1})
or: || (e.g. if (x == 1 || y<=2) {x=x+1} else {x=x-1})
A function is like the old subroutine. When you call it, in your code, whatever routine is in the function is performed at that time. It looks like this (the name of the function is "calQ"):
basic version:
function calQ() {
//routine
}
collecting variables from call location:
function calQ(a,b,c) {
//routine
}
returning variables to call location:
function calQ() {
//routine
return [x,y,z]
}
collecting and returning variables from and to call location:
function calQ(a,b,c) {
//routine
return [x,y,z]
}
The function is normally located at the foot of the webpage between; '<script></script>' as shown below (for the basic version):
<script>
function calQ() {
//routine
}
</script>
How to deal with Input arrays:
In the html part of the code you set the following:
<script>
array[0,1,2,3,4,5];
</script>
<form name="">
<input type="text" name="inp[]" value="1" />
<input type="text" name="inp[]" value="2" />
<input type="text" name="inp[]" value="3" />
<input type="text" name="inp[]" value="4" />
<input type="button" name="output" value=" Calculate " onClick="CalQ()"/>
</form>
You call a function from somewhere in your webpage as follows (the name of the function is "CalQ()"):
<script>
function CalQ()
{
var temp = document.getElementsByName('inp[]');
for (var i = 0; i < temp.length; i++) {array[i] = temp[i].value;}
return
}
</script>
How to display numbers in exponential format and limiting the number after the decimal point, e.g.;
display variable 'K' in an input function as a number with 6 decimal points
document.inputname.value = K.toFixed(6)
display variable 'K' in an input function in scientific notation with 4 decimal points
document.inputname.value = K.toExponential(4)