JS Part 1

kojigabriel's version from 2017-05-08 13:14

Basic Terms

Question Answer
HTML DOM defines HTML elements as objects and events for elements
CSSis placed in the head of the HTML document
Event listenerAn event listener is a JavaScript function that gets automatically called when the user clicks the button.
JavaScript is an object oriented dynamic language.
HTML DOM tree is a standard for how to get, change, add, or delete HTML elements.
Variables are containers for storing data values.
JavaScript function is a block of code designed to perform a particular task. A JavaScript function is executed by calling it
If statement defines a block of code which is executed if condition is true
Else statementdefines a block of code which is executed if condition is false
Else if statement can be used to specify new condition if the first condition is false
Comparison 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
Logical operators&& and, || or, ! not
tree primitive datatypes:String (is a variable defined by text), Number and Boolean.
JavaScript haslooping mechanism For loop, While loop
Objectis a reference for multiple indexes of a variable
Value Pairare called properties. they can be accessed by name.value
Array Initialization Literal, accessed by index number["Bird", "Cat", "Dog"]
Object Literal, can be accessed by index number, or value pair{name:"Finland", population"5501043"}
This Array Initialization that includs two Object literals, can be called by index number, or value pair[{name:"Finland", population"5501043"}]
The best way to loop through arrays are using for-loops and length property
Arrays has property length which returns the number of elements in the array.
Arrays are used to store multiple values in a single variable
You refer to array elements by using the index number. Indexing of array elements starts from 0.
JavaScript methods are the actions that can be performed on objects. Methods are saved as a property containing a function definition.

Basic script

Question Answer
prints 15 to the consolevar a = 5; var b = 10; var c = a + b; console.log(c)
prints Haaga Helia to consolevar part1 = "Haaga"; var part2 = "-"; var part3 = "Helia"; var fullName = part1 + part2 + part3;console.log(fullName)
reads inputs from two fields and multiplies them<label>Rent:</label><input type="text" id="RentTotal"/> <label>Participants:</label><input type="text" id="Pax" /> <input type="button" value="Calculate rent" onclick="CalculatePricePerPerson()" />

function CalculatePricePerPerson() { var renttextbox = document.getElementById('RentTotal').value; var price = Number(renttextbox); var paxtextbox = document.getElementById('Pax').value; var price2 = Number(paxtextbox); var price1and2result = price/price2; document.getElementById('PricePerPerson').innerHTML = price1and2result.toFixed(2); }
reads input from one field and uses paremeters to calculate agent fee<label>Price:</label><input type="text" id="TotalCostofHouse" size="10px" /> <input type="button" value="Calculate Fee" onclick="CalculateAgentFee()" />

function CalculateAgentFee() { var TxtFee = document.getElementById('TotalCostofHouse').value; var FeeResult = Number(TxtFee); var result = FeeResult * .0344; document.getElementById('ShowAgentFee').innerHTML = "Real estate agent's fee is " + result.toFixed(2); if (result <= 2400) {document.getElementById('ShowAgentFee').innerHTML = "Real estate agent's fee is " + 2400;} else {document.getElementById('ShowAgentFee').innerHTML = "Real estate agent's fee is " + result.toFixed(2);}
when clicked, the loop will run until same<input id="Bet" size="3" type="text"> <input type="button" value="Play" onclick="LetsPlay()"/>
<script src="06_08.js"></script>

function LetsPlay() { var Money = document.getElementById('Bet').value; var Coins = Number(Money); var pips = Math.round((Math.random() * 6) + 1); if (pips == 1 || pips == 3 || pips == 5) {BetText = "Pips was "+pips+" - No Pay"} else if (pips == 2 || pips == 4) {BetText = "Pips was " +pips+ ". Paid Back - "+ Coins * 1.25;} else {BetText = "Pips was " +pips+ ". Paid Back -"+ Coins * 1.50;} document.getElementById('ShowBettingResult').innerHTML = BetText;
calls a function to show Hello in console<button onclick="myFunction()">Click me!</button>

function myFunction() {console.log("Hello!");}
when click calls a function to write Thanks in div<button onclick="myFunction()">CLICK ME</button>

function myFunction() {document.getElementById("feedback").innerHTML = "Thanks";}
when clicked adds picture to the html<button onclick="myFunction()">Add Image</button>

function myFunction() {var x = document.createElement("IMG") x.setAttribute("src","" ) document.body.appendChild(x)
While Loop which only prints one number when max is reachedvar n = 0; while (n < 5) { n++; } document.getElementById('divOutput').innerHTML = n;
prints all number leading up to 100 in console using while loopvar i = 0; while (i <= 99){ i = i + 1; console.log(i)}
prints all numbers leading up to 100 using for loopfor (i =0; i <= 100; i++) { console.log(i) }
prints all numbers in odd order leading using for loopfor (i =0; i <= 100; i++) { i = 1 +1; console.log(i) }
his array prints all the objects in the array with a for loop countervar names = ["Pekka", "Minna", "Heikki", "Anna", "Jukka", "Iida"]; for (var i = 0; i < names.length; i++) {console.log(names[i])}
using these two functions before the for loop counter can sort or reverse order of the objects in a array before printingword.sort(); word.reverse();
in the following array, the smallest value is assigned by printing the index from the array, and same is done for the largest var minigolf = [23, 19, 37, 20, 21, 30, 26, 24]; document.write("Smallest Winner is " +minigolf[0]+"
Biggest Result is "+minigolf[7])
in the following array, the arrays are printed from first to last, using the .length of the array as a parameter. When the numbers are printed, i+1 is added so that the arrays are readable since the index always starts from 0var temperatures = [-3.3, -4.7, -1.3, 3.9, 10.2, 14.6, 17.8, 16.3, 11.5, 6.6, 1.6, -2.0]; // For loop (repetition structure) for (var i = 0; i < temperatures.length; i++) { console.log(i+1+"."+ temperatures[i]) };
in the following array, the sum of all indexes in the array are summed together and printed using a for loopvar rainfall = [47.0, 36.6, 34.7, 37.0, 41.9, 47.5, 61.7, 74.8, 65.4, 69.7, 66.1, 54.6]; var sum = 0; for (var i = 0; i < rainfall.length; i++) { sum += rainfall[i]; }