Friday, 18 March 2016

W3S2: Class - JavaScript Lecture Notes

JavaScript - Programming language used for interactivity and dynamic elements
jQuery - A library for JavaScript (makes it easier to use)



Jargon:

The DOM = The Document Object Model - This refers to the collection of HTML, CSS, and JavaScript files that make up the website. By using JavaScript we are able to manipulate the DOM, which simply means changing the HTML and CSS.

Variables = Things that hold information - They can have different data types that describe the type of information they hold and what we can do with those variables.
String = Words/letters surrounded by quotation marks
Number = Numbers
Boolean = True OR False
Array = More than one string variable grouped together
Object = Property and value pairs together

Operators = Manipulate variables - These generally serve the same purpose as they do in mathematics e.g. = + - * /

Comparison Operators = Compare variables - e.g. == Equal to, < Less than, > Greater than, <= Less than or equal to, >= Greater than or equal to, != Not equal to

Functions = A way of grouping a set of statements together - Functions can have parameters defined in parentheses to allow a single function to be re-used in different contexts, with different values, or for different purposes. Functions that are built into an object are referred to as methods.

Control Structures and Conditionals = Statements that allow for a certain set of commands that will be executed when a specified condition is true.



Examples:

var name = “Tim”; (this is a ‘String’ variable so it needs quotation marks)
var age = 40; (numbers don’t need quotation marks)


console.log();
console.log(name); (It doesn’t say ‘name’, it says the value of name - which is ‘Tim’)
console.log(“Hello, my name is ” + name);


document.getElementById(“output”) .innerHTML = “Hello, my name is ” + name;
(“output” is an Id in the HTML)


var age = 40;

console.log(“Your starting age is: “ + age);

function happyBirthday(){
     age = age + 1;
     console.log(“New age: “ + age);
     document.getElementById(“output”).innerHTML = age;
}

happyBirthday();

(In HTML)
<body>
     <p id=“output’></p>
     <a href=“#!” onclick=“happyBirthday()”>Go</a>
</body>


function happyBirthday(how_much){
     console.log(how_much);
     age = age + how_much;
     console.log(“New age: “ + age);
     document.getElementById(“output”).innerHTML = age;
}

(In HTML)
<a href=“#!” onclick=“happyBirthday(2)”>Go</a>


function happyBirthday(how_much){
     console.log(how_much);
     age = age + how_much;
     console.log(“New age: “ + age);
     document.getElementById(“output”).innerHTML = age;

     if(age >= 100){
          console.log(“yup”);
          document.getElementById(“output”) .innerHTML = “You are old!”
     }else{
          console.log(“nope”);
     }
}

No comments:

Post a Comment