5 HTML, CSS and JavaScript

5.1 HTML

https://www.w3schools.com/tags/ref_byfunc.asp

Tag Description
!DOCTYPE Defines the document type
html Defines an HTML document
head Contains information for the document
title Defines a title
body Defines the documents body
h1 to h6 Defines headings
p Defines a paragraph
br Inserts a single break
hr Defines a thematic change in the content
span and div A div is a block-level element and a span is an inline element. Div should be used to wrap sections of a document, while span to wrap small portions of text, imgages etc.

HTML is made up of a structure of elements which acts like a set of instructions for a web browser.

5.3 JavaScript

Sublime can be used as a starting IDE.

Link scripts to page. Write the script in a separate file and save with a .js filename. The script is then lnked to a page using the src attribute of the script element.

https://www.fincher.org/tips/Languages/javascript.shtml

5.3.1 Operators

Operator Description Example
?? Returns true if both operands evaluate to true true && false (false)
|| Returns true if either operand evaluates to true, otherwise false if (x == y || y > z)
! Inverts the boolean value of the operand !true (false)

5.3.2 Keywords

JavaScript defines a set of keywords known as reserved words, these include: break, case, catch, continue, default, delete, do, else, false, finally, for, function, if, in, instanceof, new, null, return, switch, this, throw, true, try, typeof, var, void, while, with.

Keyword Description Example
var The “var” keyword tells the browser to create variables. var x,y;
this The “this” keyword refers to the object it belongs to. fullName : function() { return this.firstName + " " + this.lastName; }
const For varibles that don´t change, we use const. const taxRate = 0.3050

5.3.3 Anatomy

All JavaScript instructions are contained within statements. Related statements can be grouped together into a block by wrapping the statement in braces.

5.3.4 Functions and classes

5.3.4.1 Named and anonymous functions

Using anonymous functions we use a variable name instead of a function name.

Anonymous function

´´´html <!DOCTYPE html> A Simple Quiz 
<script type="text/javascript">
                    var anonbutton = document.getElementById("anonbutton");
                anonbutton.onclick = function() {
                alert("anonymous function called.");
                }
            </script>

´´´

5.3.5 Misc

When JavaScript is referenced from a separate file, the use of async makes the page load ahead of the script.

Variables defines outsisde of a function are global variables, which can be accessed from any function. Local variables only live inside a function. If you forgets to preface with var, the variable becomes global.

Associating functions with objects

Prototypes. Objects can have prototypes from which they may inherit fields and functions.

Error handling

To execute a method repeatedly

To close a window

Link

5.3.6 Working with HTML Elements

Buttons

Onclick

Radio button

Accessing Elements

5.3.7 DOM and events of JS

5.3.7.1 DOM programming

Document Object Model programming allows JavaScript to make changes to a page after it has been loaded.



//We've updated substantially the renderQuestion method. Now, rather than
//relying on document.write, which only works when the page is being loaded,
//we're now using DOM programming techniques to create HTML elements 
//on-the-fly from within JavaScript.

com.flametreepublishing.QuizQuestion.prototype.renderQuestion = function() {

    //First we create a <div> element in which to store the question's
    //content. This <div> is created but does not yet exist on the page
    
    var questionDiv = document.createElement("div");
    
    //We'll set an id attribute on the <div> - later, this will help us to
    //identify which question a user clicks on. We'll give the id a leading
    //'q' because it is bad practice to start an id value with a number.
    
    questionDiv.id = "q" + this.questionNum;
    
    //Now we create an <h2> element for the question's title
    
    var questionHeading = document.createElement("h2");
    
    //An element's innerHtml property allows us to write HTML that will be
    //rendered within that element...
    
    questionHeading.innerHTML = "QUESTION " + this.questionNum;
    
    //Now we add the <h2> to the <div>
    
    questionDiv.appendChild(questionHeading);
    
    //Next, we create a <p> to hold the question text itself, and add
    //this to the <div> too.
    
    var questionTextPara = document.createElement("p");
    
    questionTextPara.innerHTML = this.questionText;
    
    questionDiv.appendChild(questionTextPara);

    //Now we'll loop through the QuizQuestion object's 'answers'
    //array, creating a <p> for each and and adding them 
    //to our <div> element

    for(var i = 0; i < this.answers.length; i++) {
        var answerPara = document.createElement("p");
        answerPara.innerHTML = this.answers[i];
        answerPara.id = "a" + i;
        questionDiv.appendChild(answerPara);        
    }
    
//Finally, we add the <div> to the body of the page

    document.body.appendChild(questionDiv); 
}

5.3.7.2 Events

Event Handler

W3C event model


//Create a method for handling user 'click' events

com.flametreepublishing.SimpleQuiz.prototype.clickHandler = function(e) {

    //The handler will always be passed an objec that contains data
    //about the event that triggered the handler. We're using an identifier
    //of 'e' for this. With a 'click' event, 'e.target' will always refer to 
    //the HTML element on which the click event occurred.
    //First we'll get the id attribute of the clicked answer
    
    var clickedAnswerId = e.target.id;
    
    //Now we need to extract the answer index, a Number, from the id value,
    //which is a string. We do this by extracting the second character of the
    //id using the 'substr' method of the String class, and then casting this to
    //a number. Notice that we can do this all within one compound expression.
    
    var clickedAnswerIndex = Number(clickedAnswerId.substr(1, 1));
    
    //Next we need to know which question has been answered. Recall that we added
    //an id attribute to the <div> that contains the question - this <div> is the
    //parent of the answer <p> that was clicked, so we can access it using
    //'e.target.parentNode'.
    //Once we have a reference to the <div> we can extract the question index in
    //much the same way as we did the answer index
    
    var clickedQuestionId = e.target.parentNode.id;
    var clickedQuestionNum = Number(clickedQuestionId.substr(1, 1));
    
    //The question number stored in the containg <div> id attribute is one-based, but
    //we need a zero-based number when accessing the questions array - for this reason
    //we subtract '1' from the clickedQuestionNum when retrieving the QuizQuestion object
    
    var clickedQuestion = com.flametreepublishing.simpleQuiz.questions[clickedQuestionNum -1];
    
    //Now that we have the correct QuizQuestion object we can call its 'checkUserAnswer'
    //method to see if the user was correct. Recall that 'checkUserAnswer' returns
    //'true' or 'false' - all we need do, then, is call the method as the conditional 
    //expression of an 'if' statement.
    
    if(clickedQuestion.checkUserAnswer(clickedAnswerIndex)) {
    
        alert("Correct! Well done.");
        
    } else {
    
        alert("No - that's not correct. Try again.");
        
    }   
}

Event Listener