diff --git a/Notes/20190609.txt b/Notes/20190609.txt new file mode 100644 index 000000000..ab32fc731 --- /dev/null +++ b/Notes/20190609.txt @@ -0,0 +1 @@ +document.xxxx : document is what tells the javascript to alter the html document that it's attached to \ No newline at end of file diff --git a/Notes/DOMtree.gif b/Notes/DOMtree.gif new file mode 100644 index 000000000..e7f30dd77 Binary files /dev/null and b/Notes/DOMtree.gif differ diff --git a/Notes/JSpractice.js b/Notes/JSpractice.js new file mode 100644 index 000000000..76f7ce639 --- /dev/null +++ b/Notes/JSpractice.js @@ -0,0 +1,25 @@ +let letters = [ + { name: 'a', type: 'vowel' }, + { name: 'b', type: 'consonant' }, + { name: 'c', type: 'consonant' }, + { name: 'd', type: 'consonant' }, + { name: 'e', type: 'vowel' } +] + +let vowels = letters.filter(function (letter) { + return letter.type === 'vowel'; +}) + +console.log(vowels); + +let allLetters = letters.filter(function (letter) { + return letter.type === 'vowel' || letter.type === 'consonant'; +}) + +console.log(allLetters); + +let noCons = letters.filter(function (letter) { + return letter.type !== 'consonant'; +}) + +console.log(noCons); \ No newline at end of file diff --git a/Notes/fromReading.md b/Notes/fromReading.md new file mode 100644 index 000000000..83509eff4 --- /dev/null +++ b/Notes/fromReading.md @@ -0,0 +1,238 @@ +ES6 arrow function... => - look this up, allows anonymous function as variable (syntax: const variable = () => {...}) + +#Fun Fun Function Videos: +-functions in JS are just values, same as numbers, strings, etc +-a higher order function is a function that uses another function +-anonymous function syntax example: + var tripler = function(x) { + return X * 3; + } + let waffle = tripler; + waffle(15) //will return 45 +-filter + -works on arrays + const var = thingToFilter.filter(function(itemToFilterWith) { + return itemToFilterWith.valueOfItem === 'whateverFilterYouWant'; + }); + -thingToFilter = the array that the filter function is being used on + -filter = filter (the function we're using - will always be filter if we're filtering) + -function = function (an anonymous function, so this will always be function) + -itemToFilterWith = one item in the array; if the array contains 'letters', this would be 'letter', e.g. + -valueOfItem = assuming an array of objects, this will be some quality of the item (perhaps 'vowel') + -whateverFilterYouWant = what you're screening for; + -note the odd parens replacement - won't work without them that whateverFilterYouWant (Because it's closing the function call) + -if you want to filter on multiple criteria, can use && or || (see JSpractice.js) + -find does the same as filter, but only returns the first item (will make a new array with one element) + -can also use filter to kick things out of an array (see JSpractic.js) +-map + -similar to filter (works on arrays, similar syntax) + -instead of selecting/picking out items, it transforms them + const var = arrayToMap.map(function(itemInArray) { + return itemInArray.valueWanted; + -this variation of map will take the value and list all of those in the new array + }) +-reduce + -very versatile tool + -syntax: + const var = arrayName.reduce(function(sum, iteratedObject) { + return sum + iteratedObject.propertyToTotal; + }, 0) + -slightly different from other higher functions so far + -takes 2 parameters: first is the sum or whatever, second is what will be whatever is iterated + -needs a value directly after the function to start sum at (often 0, but can be object, number, whatever) + +#JavaScript and DOM + +-document.write() can be used to write directly to the HTML output stream + -example syntax (as it would appear in an HTML doc): + + -note that if you do this after the page has loaded, it will overwrite the content of the page +-to alter HTML, use .innerHTML + -example syntax: + document.getElementById(id).innerHTML = new HTML + -note that var element = document.getElementById(id) can be used to replace that text (see examples) +-to change the value of an HTML attribute, <...>.attribute = new value + -example syntax: + document.getElementById(id).attribute = new value + -note that this isn't literally 'attribute' - the name of the attribute goes there + + +-to change an element using tag instead of ID: + -example syntax: + document.getElementsByTagName('p')[0].innerHTML = 'New Text'; + -the number in brackets tells it *which* of those tags to change... so [0] will change the first, and so on... + -without brackets, will apply to all instances of that element +-to change an element using class instead of tag or ID: + -example syntax: + document.getElementsByClassName('class')[0].innerHTML = <...>; + -number in brackets tells it which of the class instances to change +-to change a style element, use <...>.style.attributename = <...> + -example syntax: + document.getElementById("demo").style.color = "red"; + + +-to find an element within an element, use variables + -example syntax (finds id main, then all p elements within main): + var x = document.getElementById("main"); + var y = x.getElementsByTagName("p"); +-to find an element by a particular CSS selector: + -example syntax: + var x = document.querySelectorAll("p.intro"); +-to find an element by object collection: + -example syntax (finds all forms with frm1 id (should only be one)): + var x = document.forms["frm1"]; + var text = ""; + var i; + for (i = 0; i < x.length; i++) { + text += x.elements[i].value + "
"; + } + document.getElementById("demo").innerHTML = text; + -for a list of the objects that can be found this way, see above link (toward bottom) + + +-overview of DOM reference + + +-great overview of javascript DOM syntax + + +-to add an event, add an Event Listener + -syntax example (changes style on click)(goes in HTML): +

+ +-use event attributes to assign to elements + -syntax example (assigning onclick to button): + +-assign events to HTML elements via DOM + -syntax example (onclick event to button): + +-onload and onunload events are triggered when user loads or unloads the page, respectively + -example: + +-onchange event often used to validate input fields + -example: + + -upperCase() function will happen when user changes the content of an input field +-onmouseover and onmouseout are events that will change something when the user mouses over content +-see more events in link above + + +-adding an event listener + -syntax example (fires when user clicks a button): + document.getElementById("myBtn").addEventListener("click", displayDate); +-addEventListener() attaches to an element and does not overwrite existing event handlers (the limitation to not using addEventListener) +-you can add multiple event listeners to one element - even the same type of event listener +-event listeners can be added to any DOM element, not just HTML objects +-remove event listeners with removeEventListener() +-addEventListener syntax decoded: + -addEventListener(EventInQuestion(e.g.click), FunctionCalledWhenEventHappens, OptionalBooleanForCapturing/Bubbling) + -note that you don't use 'on' in front of the event - just put 'click', not 'onclick' + -example: + element.addEventListener("click", function(){ alert("Hello World!"); }); + -to pass parameters within the called function, use an anonymous function: + element.addEventListener("click", function(){ myFunction(p1, p2); }); +-bubbling and capturing are used to determine the priority of events when two elements both have events that will trigger + -in bubbling, inner element is first; in capturing, outer element is first + -bubbling is the default and is equal to boolean 'false' +-lots more at the link above + + +-within HTML, you can navigate using DOM nodes +-everything in an HTML doc is a node: the document, the elements, the text within elements, and all comments(!) +