Created
July 11, 2017 15:16
-
-
Save HassanAlgoz/e84567e47ad00b73341c145b272616b5 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Callback Functions: passing functions to functions | |
function processArray(array, func) { | |
let resultArray = [] | |
for(let i = 0; i < array.length; i++) { | |
resultArray[i] = func(array[i]) | |
} | |
return resultArray | |
} | |
let numbersList = [4, 9, 13, 16, 25] | |
console.log( processArray(numbersList, Math.sqrt) ) | |
console.log( processArray(numbersList, cubeFunction) ) | |
console.log( processArray(numbersList, function(x) { | |
return x * 100 | |
}) | |
) | |
function cubeFunction(x) { | |
return (x * x * x) | |
} | |
// In previous lessons, when we did | |
window.addEventListener('load', function() { | |
// our code | |
}) | |
// addEventListener is a function that takes two arguments | |
// the first argument is the event you wish to listen to | |
// the second argument is the function to call when this | |
// event happens. That function gets passed an argument 'event' | |
// when we don't use the argument we can simply ignore it | |
// in HTML | |
<button id="myButton">Send</button> | |
let myButton = document.querySelector('#myButton') | |
myButton.addEventListener('click', function(event) { | |
console.log('button clicked!') | |
console.log('event type is', event.type) | |
}) | |
// or | |
myButton.addEventListener('click', sayHello) | |
function sayHello(event) { | |
console.log('hello ' + event.type) | |
} | |
// DOM Events | |
console.log('script-Events.js') | |
window.addEventListener('resize', function() { | |
document.querySelector("#demo").innerHTML = window.innerWidth + 'x' + window.innerHeight; | |
}); | |
let myButton = document.querySelector("div.user-panel.main button"); | |
// Event Listeners | |
myButton.addEventListener('click', function (event) { | |
console.log(event.type) | |
}) | |
myButton.addEventListener('click', eventHandler) | |
function eventHandler(event) { | |
console.log(event.type) | |
} | |
// Also Event Listener (listen for double click event) | |
myButton.ondblclick = function(event) { | |
console.log(event.type) | |
// event.target is the element you double clicked on | |
if (event.ctrlKey) { | |
event.target.remove() | |
} | |
} | |
// The above way is another way of adding an event listener | |
// You may use whichever you find cleaner | |
// Select by ClassName using querySelector | |
let todoList = document.querySelectorAll('.todo-item') | |
let groceryList = document.querySelectorAll(".grocery-item") | |
// Let's make them all listen for mouseover | |
for(let i=0; i < todoList.length; i++) { | |
todoList[i].onclick = function(event) { | |
console.log(event.target.innerHTML) | |
} | |
} | |
// Using forEach rather than a for-loop | |
groceryList.forEach(function(li) { | |
let originalBackgroundColor = li.style.backgroundColor; | |
let originalColor = li.style.color; | |
li.addEventListener('mouseenter', function(event) { | |
li.style.backgroundColor = "red" | |
li.style.color = "white" | |
}) | |
li.addEventListener('mouseleave', function(event) { | |
li.style.backgroundColor = originalBackgroundColor | |
li.style.color = originalColor | |
}) | |
li.ondblclick = function(event) { | |
event.target.remove() | |
} | |
}) | |
// Listening for any change | |
let dropDownMenu = document.querySelector('select[name="ice-cream"]').onchange = changeEventHandler | |
function changeEventHandler(event) { | |
let flavor = event.target.value; | |
// console.log(typeof falvor) | |
// console.log(flavor.length) | |
if (flavor) { | |
alert('You like ' + flavor + ' ice cream.'); | |
} else { | |
alert('Please Select One'); | |
} | |
} | |
// https://www.w3schools.com/charsets/ref_html_utf8.asp | |
document.querySelector('#input-box').addEventListener('keypress', (event) => { | |
document.querySelector('#output-charCode').innerHTML = event.charCode | |
let char = String.fromCharCode(event.charCode) | |
document.querySelector('#output-char').innerHTML = char | |
if (char === 'H') { | |
console.log('H pressed inside input-box') | |
} | |
if (event.charCode >= 65 && event.charCode <= 90) { | |
console.log('Capital Letter: ' + char) | |
} else if (event.charCode >= 97 && event.charCode <= 122) { | |
console.log('small letter: ' + char) | |
} else { | |
console.log('symbol: ' + char) | |
} | |
}) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment