What this lesson is about?
In this lesson we will learn about using conditional expressions in if statements. To use if statements we need to learn about new (logical) operators checking equality or comparing two values, to decide how to continue our program. In this lesson we will get styling values out of CSS files the simplest possible way.
New methods in this lesson:
the_main_string.search(the string to be found) – this is a method of the string object. We use this method to find a string in another string. The result is -1 if there is no result, otherwise it is a number, showing where the searched string is found in the original string.
getComputedStyle(element) – is a property of the window object which enables us to ask for the actual CSS formatting applied to an HTML tag. Style can be applied from inside the tag, from the head part of the document and from several CSS classes or other settings, so the answer is not elementary. We get a wider scale of attribute settings, so it must be used with the getPropertyValue method to get out something we can use. It can be used with two parameters too.
getPropertyValue(the name of the property) – is a method that can be used in pair with the getComputedStyle method to select the value of a concrete property.
parseInt – is a global method to convert string to number – starts at the beginning of the text. If there are no digits at the beginning, there will be no valid number as result.
confirm(message text) – this method of the window object is used to display a message like the alert method, but there can be a feedback to the program. If the user hits Ok we get a true value and false if the Cancel is chosen.
New events in this lesson:
onmouseenter – this event is triggered if the cursor enters over an object we observe for this event.
onmouseleave – this event is triggered if the cursor leaves the object we observe.
Example on getting a CSS attribute’s value:
Until now we changed the style of elements, but we did not try to ask for any CSS values set. To access an HTML element’s attribute value, we only need to know the attribute’s name - for example, with this.src we can access the source of the img tag.
To ask for a CSS value we can use for example the getComputedStyle and getPropertyValue method combination. In the example above the change function finds the color of the clicked element and applies to the other text as background-color.
The getComputedStyle(x) – gets all the Style settings for the x object, and the getPropertyValue method asks from these for the color property’s value (given as parameter).
What is a condition?
An expression is built from variables, values and operators. A condition is an expression having a logical value as result, meaning true or false.
Operators which result in logical values: <, <=, >, >=, ==, !=.
Examples of conditions:
xx==10 – this condition is true if the value of the x variable is 10 and false for every other value.
x!=10 – this condition is true for every value except 10, and false for 10.
More conditions can be combined using the && (and), || (or).
We use && if we need both of the conditions to be true.
We use || if it is ok if only one of them is true.
Example on combined conditions:
(x>=10) && (x<=50) – this condition is true for every value of the x variable from the [10, 50] interval and false for every value outside it.
(x==10) || (x==20) – this condition is true for only two possible values, for 10 and 20. For every other value the result is false.
What is the if statement?
If we have to make a decision in a program we cannot place a condition alone as a statement in the code. It needs to be placed for example in an if statement. An if statement can take two sets of instructions and decide which of them to execute based on a condition, which can be true or false.
The general form of an if statement is:
if (condition) {
statements to be executed if the condition is true
} else {
statements to be executed if the condition is false
}
The else part can be omitted if not needed.
The brackets can omitted too, if there is only one statement in them.
Example on if statement:
In the example above the x variable contains the size of the image (the value set in the HTML tag).
If the image’s size is smaller than 300 pixels, the image gets bigger width 10 pixels by every button click. Using an if we can limit the growth.
There is no else statement – we could add other things to do if the image gets too big.
Examples on comparing strings:
On the example above we compare two strings, the content of the two paragraphs. The == operation works for texts too, not just numbers. The result is displayed in an alert box.
If we want to get the name of a picture we may face some difficulties: the result will be the whole path and the name of the picture. So the previous == operator only works if we write in the code the whole path. The code would not work if we copy the webpage to another place.
The other way to solve this is to use the search method on the x variable. The result is -1 if the small.jpg is not contained in the x variable.
Under the The most popular programming languages in 2018 title, set to every list item the events onmouseenter with a function in it, called changesize and the onmouseleave with a function in it, called changeback. Both functions should get the reference to the current object (this).
The changesize function has to increase the font size with 10 pixels and the changeback function should reset it to its initial value.
if (this.width this.style.width+=10;
this.style.height+=10;
}
<div onclick="find(this)"> And it grew both day and night. Till it bore an apple bright. </div>
<script>
function find(x){
var t=x.innerHTML.search("both");
alert(t);
}
</script>
if (confirm("What do you say?")) this.innerHTML="I do not know.";
else this.innerHTML="I do not care.";
<img onclick="change(this)" src="small.jpg" width="350">
<script>
function change(){
var x=this.width;
if (x=300) alert(x);
else alert("NO");
}
</script>
https://www.w3schools.com/jsref/jsref_if.asp;
https://www.w3schools.com/jsref/jsref_getcomputedstyle.asp;
https://www.w3schools.com/CHARSETS/default.asp;
https://www.w3schools.com/Jsref/met_win_confirm.asp.
