JAVA..SCRIPT?

Location:

• Internal - In your markup you can use a script tag -

  <script> *Your js here* </script>

• External - You can also use an external JS resource -

  <script src="script.js"></script>

Debugging:

• Alerts: You can use: alert("Enter your message here"); to debug/give feedback to the user
• Console: Most browsers allow you to log to console to debug: Console.log("Your stuff here");

JS - Variables and Operators

Variables

• No explicit declaration of Datatypes - JS does it for you!

  var surname = prompt('Greetings friend, may I enquire as to your surname?'); //surname is now available for use!

• Variables can store ints, strings, floats, characters, objects, and even FUNCTIONS, but must be declared and/or initialized

  <script>var addMe = function(a,b){ return (a + b); } //initialized to hold function definition </script>

  <script>var result = addMe(5,6); //function call </script>

• Good practice to make variable names sensible and convey meaning

Operators

• Assignment, Arithmetic, Bitwise, Comparison, Conditional, Logical, and many more!
• Lookup the Mozilla JS Operator Guide if hungry for more

JS programming constructs

Conditional Statements

• If(some condition){ //run your code in here } else{//your code here}

  if(10 > 5){alert('10 is greater than 5');} else {alert('JS doesn't know math');}

• If(condition){//code} else if(other condition){//code} else{//code} is also possible!

Loopy statments!

• While - While(condition){//do something till condition is false}

  while(10 > 5){alert('10 is greater than 5');}

• For - for(initializion;condition;finalExpression)

  for(var i=0; i < 10;i++){alert('10 is greater than 5');}

JS Arrays and Objects

Arrays

• Syntax -

  var emptyArray = []; //array-literal syntax for creation
           	var bestFootballClubsInOrder = ['Chelsea','Bayern Munich', 'Real Madrid', 'Barcelona'];
           	bestFootballClubInOrder[0]; //=>?  

Objects

• Syntax -

  var jedi = {
          	name: "Yoda",//property that holds a string
          	age: 899,
          	talk: function () { alert("another... Sky... walk...");//property that holds function } 
          	};

• Getting data? - Dot syntax - jedi.name or jedi.talk();
• Reassign data? - jedi.name = "Mace Windu"; Add new data? - jedi.lightsaber = "purple"
• Object can hold any type of data, including other objects!

JS DOM content manipulation

Getting stuff from the DOM - using the 'document' object

• By Id -

  var firstNameElement = document.getElementById('fName');
  var firstName = firstNameElement.value; //Getting the value of the element. Better way?

• By Tag Name or Class Name - return a list of elements(NodeList) - document.getElementByTagName('a');
• By CSS selector - modern browser WIN! - document.querySelector('#fName'); or document.querySelectorAll('.btn'); //difference?

Putting stuff into the DOM

	 var newDiv = document.createElement("div"); 
         var newContent = document.createTextNode("Hi there and greetings!"); 
         newDiv.appendChild(newContent); //add the text node to the newly created div. 
         
         // add the newly created element and its content into the DOM 
         var currentDiv = document.getElementById("div1"); 
         document.body.insertBefore(newDiv, currentDiv);