Mississauga Coding A meetup group

HTML/CSS/JS - Extended - Part I

08 Sep 2015

##Overview

Last week we covered some new HTML elements and started with JavaScript. For a quick recap, HTML is the static form of a webpage, the CSS is what styles our webpage, and the JavaScript is what manipulates our HTML elements, as well as its CSS.

This week we will revisit what we did in the past two weeks and list other ways of doing the same thing. Also, we will cover more CSS and JavaScript and learn about their best practices.

##Previous Code

This is all the code we covered together, for in-depth explanation of the below snippets, go through Session 2 and Session 3.

###index.html

<!doctype html>
<html>
    <head>
        <title>My Web Page</title> 
        <link rel="stylesheet" href="style.css" />  
    </head>
    <body>
    
        <!-- All elements have been given an id attribute -->
        <!-- To enable us to refer to elements from Javascript -->
        
        <p id="myText">Some text on my web page</p>
        
        <select id="selColour">
            <option value="blue">Blue</option>
            <option value="black">Black</option>
            <option value="red">Red</option>
            <option value="green">Green</option>
            <option value="yellow">Yellow</option>
        </select>
        
        <button id="btnColour">Make It So!</button>
        
        <!-- Script tag brings in Javascript into our HTML. -->
        <!-- Placed here to make sure all referenced --> 
        <!-- elements have already been defined.     -->
        <script src="script.js"></script>
        
    </body>
</html>

###style.css

p {
    color: blue;
    font-size: 1.5em; 
    font-family: Verdana;
    font-weight: bold;
    text-align: center;
    border: 2px solid silver;
    padding: 4px;
}

###script.js

// get button element 
var btn = document.getElementById('btnColour');

// set up an event listener on button element 
// this means whenever user clicks the button, 
// call the function applyColour() 
btn.addEventListener('click', applyColour);

// function to change the colour of our paragraph text
function applyColour() {
    // get the comb-box element
    var sel = document.getElementById('selColour');
    var col = sel.value; // get the selected value
    
    // get the paragraph element
    var par = document.getElementById('myText');
    par.style.color = col;   // style paragraph text colour
}

##Alternative Methods

There are few languages that restrict that way they execute. JavaScript is considered to be flexible compared to other languages. For example our function applyColour can be written in 2 other ways:

Storing the function in a variable

var btn = document.getElementById('btnColour');

var applyColour = function(){
 	// get the comb-box element
	var sel = document.getElementById('selColour');
    var col = sel.value;
    
    var par = document.getElementById('myText');
    par.style.color = col;
}

btn.addEventListener('click', applyColour);

Notice: The variable must be declared before applying it to the event listener.

Embedding the function into the event listenener

var btn = document.getElementById('btnColour');

btn.addEventListener('click', function(){
 	// get the comb-box element
	var sel = document.getElementById('selColour');
    var col = sel.value;
    
    // get the paragraph element
    var par = document.getElementById('myText');
    par.style.color = col;
});

Notice: The drawback from this method is that the function cannot be reused somewhere else. In other words, since we didn’t store our function in some variable and replaced the variable in the event listener with the function directly, it will only affect the target element.

Storing the method is useful when you are sure that it will be referenced in more than one place in your script.

##Organizing Files

It is a good habit to organize your files and name them according to their purpose. Also, creating directories to separate the files is important. Therefore, let’s keep our index.html page in our root directory (where the files are now), and let’s create a folder/directory and call it public, in that folder create another two and call them css and js, to store all our CSS and JavaScript respectively.

Your project file should look something like this now:

.
├── index.html
├── public
|   ├── css
|   	├── style.css
|   ├── js
|   	├── script.js

Now we need to edit the path to the CSS and Javascript in our index.html

<link rel="stylesheet" href="./public/css/style.css" />
<script src="./public/js/script.js"></script>

That’s about it! Now let’s dive more into JavaScript.

##Operators

We already covered the assignment operator (=) to assign values to variables, now let’s talk about arithmetic operators ( + - * / ).

var result = (5 + 6) * 10;

alert(result);

We can use these operators between variables. Let’s say we have a percentage that we need to add to our result every time:

var startValue = (5 + 6) * 10;

var rateValue = 5;
var ratePercentage = rateValue/100; // 5%  

var result = startValue + (startValue * ratePercentage);

alert(result);

Other operators:

  • =
  • += -> x += y
    • Same as x = x + y
  • -= -> x -= y
    • Same as x = x - y
  • *= -> x *= y
    • Same as x = x * y
  • /= -> x /= y
    • Same as x = x / y
  • %= -> x %= y (remainder)
    • Same as x = x % y

There is also x++ and x-- which is equivalent to x = x +1 and x = x - 1 respectively.;

Comparison and Logical Operators:

  • == equal to
  • === equal value and equal type
  • != not equal
  • !== not equal value or not equal type
  • > greater than
  • < less than
  • >= greater than or equal to
  • <= less than or equal to

##Scopes

In JavaScript, scope is the set of variables, objects, and functions you have access to.

To better explain the above statement, let’s write down some examples:

Variable defined outside the function (GLOBAL Variable):

var myName = "John";

function someFunction(){
	alert(myName); //works
}

Variable defined inside the function and referenced outside of it (LOCAL Variable):

function someFunction(){
	var myName = "John";
}

alert(myName); //won't work

Automatic Global is when the value is assigned to a variable without the var object. For example: x = 9, anywhere in the script, even inside the function (try it out).

The Lifetime of JavaScript Variables:

  • The lifetime of a JavaScript variable starts when it is declared.
  • Local variables are deleted when the function is completed.
  • Global variables are deleted when you close the page.

##JavaScript by Example

Now let’s learn more about JavaScript by doing a small exercise. Remember our fancy script that deals with percentage? Let’s create our own calculator that takes in any value and percentage, and outputs the answer for us.

Changes to index.html:

  • HTML element that takes in a number.
  • HTML element that takes in a rate value.
  • HTML element that is used to display our final result.

All the styling will go through our style.css file in our CSS folder. And all the magic will happen inside our JavaScript file script.js.

Add this in index.html inside the body tag before your script tag.

<!-- block element -->
<div id="calculator-container">
    <!-- block element -->
    <p id="calculator-heading">My Personal Calculator</p>
    <div class="calculator">
        <!-- in-line elements -->
        <input id="startingValue" placeholder="Starting Value" type="number" /> +
        <input id="rateValue" placeholder="Rate" type="number" /> %
    </div>
    <p class="result-container">
        Result is: <span id="result"></span>
    </p>
</div>

In our JS script we will have to create 2 functions; one to deal with the HTML values, their format and displaying the output, and another one to do all the math and return the result for us. Explanation will be available via the comments.

executeCalculator: Main function to be called in our event listeners.

/*	
	- This is our real time function - the only function to be called
	- Variables has to be created first!
*/
var executeCalculator =  function(){
	//declare our values, default is 0
	var startValue = document.getElementById('startingValue').value;
	var rateValue = document.getElementById('rateValue').value;

	//convert to number first
	startValue = Number(startValue);
	rateValue = Number(rateValue);

	//calculate method will ONLY deal with our arithmetic operations
	var result = calculate(startValue, rateValue);
	//show the result
	document.getElementById('result').innerHTML = result;
}

calculate: We pass the input into here, and return the result to the calling function.

//referenced in executeCalculator()
function calculate(value, rate){
	var ratePercentage = rate/100; 
	var result = value + (value * ratePercentage);

	//2 decimal places, toFixed() only works on Number type.
	result = result.toFixed(2); //override variable

	return result;
}

Now we simply attach executeCalculator as our event listener. We want to find the answer in real time, meaning as soon as a change occurs to any of our HTML input elements. The change event is the right choice for this job.

//Event Listener: Change
document.getElementById('startingValue')
		.addEventListener('change', executeCalculator);

document.getElementById('rateValue')
		.addEventListener('change', executeCalculator);

For trying a list of other event listeners, visit this link to W3 Schools.

###That’s it! Now you have your first mini calculator and which addresses almost everything explained on this page!

#To be Continued - Part II: Styling using CSS

##References:

Related Posts