Changing HTML style

In HTML you can change the colour and style of font, the background colour of a
section of text, and so on. These are all different properties of the elements. You
can change these in JavaScript by using the document.getElementById
command.
After the name of your element, put the command .style and then the name of
the style you are trying to change, for example, .color, or .fontSize. After the
equal sign is the value you want to assign to this style

Variables and operators

A variable is a space in memory that is given a name (an identifier), where you
can store data that can change while the program is running.
For example, you could create a space in memory called name and you could
store the name Luca in there. You could later change it and store Katerina. You
can check what is stored there by asking what is stored in name. The computer
would tell you Katerina.
The identifier must be one word (that is, no spaces) and start with a letter. It
must not be any word that is used by JavaScript (these are known as reserved
words). For example, var is invalid because it is used by JavaScript.
Declaration
A variable declaration tells the program that you need a space in memory and
what its identifier will be. An example variable declaration in JavaScript is:
var name;
var tells JavaScript that you are creating a variable.
name is the name of this variable
Assignment
Assignment means adding a value to that variable.
For example:
name = "Luca";
The name of the variable comes first and = can be read as the word ‘becomes’.
This is the assignment operator. Luca is what is being stored. Luca is in speech
marks (" ") because it is a string (see Table 20.2). For example:
This time the variable is called age, and 18 has been put into it.
You can change the value in the variable. For example:
name = "Katerina";
These values have overwritten the previous data.
Arithmetic operators
An operator is a symbol, or set of symbols, that perform an action. There are a
number of these used in JavaScript. These are categorised as arithmetic,
comparison and logical.
Example:
<SCRIPT>
var firstNumber = 99;
var secondNumber = 10;
var total = firstNumber + secondNumber;
document.write(total);
document.write(" ");
total = firstNumber - secondNumber;
document.write(total);
document.write(" ");
</SCRIPT>

Form elements
You need to tell HTML that you are creating a form using the <form></form>
tag. All the code to display buttons, drop-down boxes, and so on then comes
within these tags.
An event can occur within the HTML code that can be acted upon by JavaScript,
for example when a button is clicked. Within the HTML code for these objects, a
JavaScript function can be called to perform an action.
button
When the user clicks on an element, for example, an HTML button, it can be
programmed to call a JavaScript function. For example, every time you click a
button, the function calculate() is called and it performs a calculation and
outputs a result. This HTML code will create a button that says "Click me":
<button onclick="outputMessage()">Click me</button>
The code states that when the button is clicked (onclick), the JavaScript function
outputMessage() will be called. This function is then written in JavaScript:
function outputMessage()
{ document.write("Hello World"); }
Every time the button is clicked, the message "Hello World" will be displayed on
the page.
Drop-down box
A drop-down box gives the user options to choose from. This HTML code will
create a drop-down box called colours. It will create three options: purple, orange
and blue. Each <options> will be a new choice in the drop-down box:
<select id = "colours">
<option>purple</option>
<option>orange</option>
<option>blue</option>
</select>
The item selected is accessed using:
document.getElementById("colours").
options[document.getElementById("colours"). selectedIndex].text;
This is a long piece of code, but there is a way to shorten it.
document.getElementById("colours") appears twice in the same line. Instead of
writing it twice, you can store this in a variable, for example:
var coloursID = document.
getElementById("colours");
Then use this variable instead, giving the code:
coloursID.options[coloursID.selectedIndex]. text;
This will need to go within a function that is called, for example, from a button.
This function will access the chosen option and output it in an alert.
function displayChoice(){var coloursID =
document.getElementById(“colours”);
alert(coloursID.options[coloursID. selectedIndex].text); }
Radio button
You can give the user a range of options that they can see, but can only select
one of. This is done with a radio button.
This HTML code will create a radio button for Purple, Orange and Blue:
<form>
<input type="radio" name="colours" value="purple">Purple<br>
<input type="radio" name="colours" value="orange">Orange<br>
<input type="radio" name="colours" value="blue">Blue<br>
</form>
Bottom of Form
The radio buttons must be within a form so they are grouped together, otherwise
you may be able to select several. In the JavaScript, you need to check which
one has been selected using a for loop and an if statement (you will learn more
about these in Section 20.12 Selection and Section 20.14 Loops). This function
needs to check each of the radio buttons you have created, in turn, to find out
which one has been checked.

<html>
<title>Web Programming 2</title>
<body>
<h1>Web Programming 2</h1>
<p id="p1">There was no possibility of taking a walk that day. We had been
wandering,
indeed, in the leafless shrubbery an hour in the morning; but since dinner
(Mrs. Reed,
when there was no company, dined early) the cold winter wind had brought
with it clouds
so sombre, and a rain so penetrating, that further out-door exercise was not
out of the
question.</p>
<script>
document.getElementById("p1").style.color ='white';
document.getElementById("p1").style.fontSize= "xx-large";
document.getElementById("p1").style.fontFamily = "Arial";
document.getElementById("p1").style.backgroundColor = 'blue';
</script>
<script>
var firstName = "Marieta";
var lastName = "Tukan";
alert(firstName);
alert(lastName);
</script>
<SCRIPT>
 var firstNumber = 9;
var secondNumber = 10;
var total = firstNumber + secondNumber;
document.write(total);
document.write(" ");
total = firstNumber - secondNumber;
document.write(total);
document.write(" ");
</SCRIPT>
<button onclick="outputMessage()">Click me</button>
<script>
function outputMessage()
{document.write("Hello World");}
</script>
<select id = "colour">
<option>purple</option>
<option>orange</option>
<option>blue</option>
</select>
<script>
function displayChoice(){
var coloursID =
document.getElementById("colour");
alert(coloursID.options[coloursID. selectedIndex].text); }
</script>
<form id = "animals">
<input type = "radio" name = "animals" value = "elephant">Elephant <br>
<input type = "radio" name = "animals" value = "tortoise">Tortoise <br>
<input type = "radio" name = "animals" value = "dolphin">Dolphin <br>
<input type = "radio" name = "animals" value = "kangaroo">Kangaroo <br>
</form>
</body>
</html>