Skip to content

Instantly share code, notes, and snippets.

@swapnilshrikhande

swapnilshrikhande/README.MD

Created March 6, 2019 10:17
Show Gist options
  • Save swapnilshrikhande/c43d8df3061ef51fd13ff8ff30f78754 to your computer and use it in GitHub Desktop.
Save swapnilshrikhande/c43d8df3061ef51fd13ff8ff30f78754 to your computer and use it in GitHub Desktop.
Download ZIP
Introduction To Javascript Code Snippets
Raw
README.MD

  1. Core Javascript

  2. DOM : HTML -> DOM - Tree Data Structure

    • window
      • document

  3. DOM API -> Manipulate DOM Tree Node

  • Selecting Nodes Selector Operators 1. dot 2. hash 3. Space : children 4. greater than
  • Create Node
    • Add Node to the tree
    • Event Handlers Add
    • Replace
    • innerText / innerHTML : Update Content

  1. sync / async / delayed async

    1. function call : sync
    2. async : ajax callback
    3. delayed async : events

  2. Event Handling

    • click -> callback function
    • Event bubbling
    • event object
      • preventDefault
      • stopPropagation
Raw
bubble.html
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<form>
<input id="testBtn" type="submit" >
Submit
</input>
</form>
<script>
//Step 1 : Define callback
var handler = function(event){
event.stopPropagation();
event.preventDefault();
console.log("event=",event);
};
//Step 2 : Select Target Element
var buttonEl = document.querySelectorAll("#testBtn")[0];
//Step 3 : Attach Handler
buttonEl.addEventListener('click', handler);
//Step 2 : Select Target Element
var formEl = document.querySelectorAll("form")[0];
//Step 3 : Attach Handler
formEl.addEventListener('click', handler);
</script>
</body>
</html>
Raw
snippets.js
//Selecting elements
var matches = document.querySelectorAll('div.foo');
for (i=0; i<matches.length; i++)
console.log(matches[i].innerHTML);
//Creating and appending new elements
var newElement = document.createElement('h1');
newElement.innerHTML = "Hello World"
//var matches = document.querySelectorAll('#targetElement');
$("#targetElement")[0].appendChild(newElement);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment