From b7d9e3dcd0b272de904b53306f2c5b6e2042af48 Mon Sep 17 00:00:00 2001 From: jshortz Date: Sat, 8 Jun 2019 17:52:20 +0200 Subject: [PATCH 1/5] Testing --- package-lock.json | 28 +++++++++++++++++++++------- test.txt | 1 + 2 files changed, 22 insertions(+), 7 deletions(-) create mode 100644 test.txt diff --git a/package-lock.json b/package-lock.json index e89e9916d..2b047f93a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2221,12 +2221,14 @@ "balanced-match": { "version": "1.0.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, "dev": true, + "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -2241,17 +2243,20 @@ "code-point-at": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "concat-map": { "version": "0.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "console-control-strings": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "core-util-is": { "version": "1.0.2", @@ -2368,7 +2373,8 @@ "inherits": { "version": "2.0.3", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "ini": { "version": "1.3.5", @@ -2380,6 +2386,7 @@ "version": "1.0.0", "bundled": true, "dev": true, + "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -2394,6 +2401,7 @@ "version": "3.0.4", "bundled": true, "dev": true, + "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -2401,12 +2409,14 @@ "minimist": { "version": "0.0.8", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "minipass": { "version": "2.2.4", "bundled": true, "dev": true, + "optional": true, "requires": { "safe-buffer": "^5.1.1", "yallist": "^3.0.0" @@ -2425,6 +2435,7 @@ "version": "0.5.1", "bundled": true, "dev": true, + "optional": true, "requires": { "minimist": "0.0.8" } @@ -2505,7 +2516,8 @@ "number-is-nan": { "version": "1.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "object-assign": { "version": "4.1.1", @@ -2517,6 +2529,7 @@ "version": "1.4.0", "bundled": true, "dev": true, + "optional": true, "requires": { "wrappy": "1" } @@ -2638,6 +2651,7 @@ "version": "1.0.2", "bundled": true, "dev": true, + "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", diff --git a/test.txt b/test.txt new file mode 100644 index 000000000..5b3b4a79f --- /dev/null +++ b/test.txt @@ -0,0 +1 @@ +testtest From d645b0e896d16782ebbab63378ccdcecf5dc9523 Mon Sep 17 00:00:00 2001 From: jshortz Date: Sat, 8 Jun 2019 17:54:55 +0200 Subject: [PATCH 2/5] Removing test.txt --- test.txt | 1 - 1 file changed, 1 deletion(-) delete mode 100644 test.txt diff --git a/test.txt b/test.txt deleted file mode 100644 index 5b3b4a79f..000000000 --- a/test.txt +++ /dev/null @@ -1 +0,0 @@ -testtest From 79955f320ce55c4f0c698db98165e3ca7a1ab62f Mon Sep 17 00:00:00 2001 From: jshortz Date: Sun, 9 Jun 2019 15:29:28 +0200 Subject: [PATCH 3/5] JS lists working (but ugly) --- Notes/fromReading.txt | 1 + Week1/homework/app.js | 96 ++++++++++++++++++++++++++++++++++++++- Week1/homework/index.html | 10 +++- 3 files changed, 104 insertions(+), 3 deletions(-) create mode 100644 Notes/fromReading.txt diff --git a/Notes/fromReading.txt b/Notes/fromReading.txt new file mode 100644 index 000000000..70145b729 --- /dev/null +++ b/Notes/fromReading.txt @@ -0,0 +1 @@ +ES6 arrow function... => - look this up, allows anonymous function as variable (syntax: const variable = () => {...}) \ No newline at end of file diff --git a/Week1/homework/app.js b/Week1/homework/app.js index a9b5f75d8..5d2fc1a6b 100644 --- a/Week1/homework/app.js +++ b/Week1/homework/app.js @@ -3,9 +3,101 @@ { const bookTitles = [ // Replace with your own book titles - 'harry_potter_chamber_secrets', + 'kushiels_avatar', + 'dragons_of_autumn_twilight', + 'a_song_of_ice_and_fire', + 'it', + 'and_then_there_were_none', + 'popco', + 'kushiels_scion', + 'neverwhere', + 'the_sandman', + 'the_coldfire_trilogy', ]; + const favoriteBooks = { + popco: { + title: 'Popco', + language: 'English', + author: 'Scarlett Thomas', + }, + kushiels_avatar: { + title: "Kushiel's Avatar", + language: 'English', + author: 'Jacqueline Carey', + }, + kushiels_scion: { + title: "Kushiel's Scion", + language: 'English', + author: 'Jacqueline Carey', + }, + neverwhere: { + title: 'Neverwhere', + language: 'English', + author: 'Neil Gaiman', + }, + it: { + title: 'It', + language: 'English', + author: 'Stephen King', + }, + and_then_there_were_none: { + title: 'And Then There Were None', + language: 'English', + author: 'Agatha Christie', + }, + dragons_of_autumn_twilight: { + title: 'Dragons of Autumn Twilight', + language: 'English', + author: 'Margaret Weis and Tracy Hickman', + }, + a_song_of_ice_and_fire: { + title: 'A Song of Ice and Fire', + language: 'English', + author: 'George R.R. Martin', + }, + the_coldfire_trilogy: { + title: 'The Coldfire Trilogy', + language: 'English', + author: 'C.S. Friedman', + }, + the_sandman: { + title: 'The Sandman', + language: 'English', + author: 'Neil Gaiman', + }, + }; + // Replace with your own code - console.log(bookTitles); + // console.log(bookTitles); + + function displayList(titles) { + const list = document.createElement('ul'); // creates list + list.setAttribute('id', 'books'); // adding id of books + + document.body.appendChild(list); + + for (let i = 0; i < titles.length; i++) { + const titleList = document.createElement('li'); // creates each item + titleList.setAttribute('id', titles[i]); + console.log(titleList.id); // confirming that adding id worked (it did!) + list.appendChild(titleList); // adds item to list(ul) + const titleKey = titles[i]; // trying to get id for object call + titleList.innerHTML += favoriteBooks[titleKey].title; // adds title of each to list + const bookFacts = document.createElement('ul'); // creating a new list for each title + bookFacts.setAttribute('id', favoriteBooks[titleKey].title); // attempting to add id for each list (this may not work) + document.getElementById(titleKey).appendChild(bookFacts); // adding bookFacts list as child of each list item (li) + const authAndLang = document.createElement('li'); // creating variable for other info + bookFacts.appendChild(authAndLang); // adds authAndLang item to bookFacts list + bookFacts.innerHTML += + 'Author: ' + + favoriteBooks[titleKey].author + + ' Language: ' + + favoriteBooks[titleKey].language; + + // or title.textContent = i; + } + } + + displayList(bookTitles); } diff --git a/Week1/homework/index.html b/Week1/homework/index.html index b22147cd1..23d44834f 100644 --- a/Week1/homework/index.html +++ b/Week1/homework/index.html @@ -1 +1,9 @@ - \ No newline at end of file + + + + + + + + + From 9c081d85d1b58380c3f69a65ae3d00a03609bd11 Mon Sep 17 00:00:00 2001 From: jshortz Date: Tue, 11 Jun 2019 18:18:31 +0200 Subject: [PATCH 4/5] Homework sort of finished. Can't get images to display. Looks horrible. Trying to finish it is making me hate learning this at all, so I'm just going to give up on finishing. --- Week1/homework/app.js | 82 ++++++++++++++++++++++++++------------- Week1/homework/index.html | 6 ++- Week1/homework/style.css | 5 ++- 3 files changed, 65 insertions(+), 28 deletions(-) diff --git a/Week1/homework/app.js b/Week1/homework/app.js index 5d2fc1a6b..16b0bb512 100644 --- a/Week1/homework/app.js +++ b/Week1/homework/app.js @@ -5,9 +5,9 @@ // Replace with your own book titles 'kushiels_avatar', 'dragons_of_autumn_twilight', - 'a_song_of_ice_and_fire', - 'it', - 'and_then_there_were_none', + 'basho_the_complete_haiku', + 'the_wit_and_wisdom_of_mark_twain', + 'the_waste_land_and_other_poems', 'popco', 'kushiels_scion', 'neverwhere', @@ -20,51 +20,61 @@ title: 'Popco', language: 'English', author: 'Scarlett Thomas', + cover: 'https://images.gr-assets.com/books/1347962344l/4285468.jpg', }, kushiels_avatar: { title: "Kushiel's Avatar", language: 'English', author: 'Jacqueline Carey', + cover: 'https://images.gr-assets.com/books/1233366080l/40223.jpg', }, kushiels_scion: { title: "Kushiel's Scion", language: 'English', author: 'Jacqueline Carey', + cover: 'https://images.gr-assets.com/books/1344265086l/153007.jpg', }, neverwhere: { title: 'Neverwhere', language: 'English', author: 'Neil Gaiman', + cover: 'https://images.gr-assets.com/books/1523573978l/39821861.jpg', }, - it: { - title: 'It', + the_wit_and_wisdom_of_mark_twain: { + title: 'The Wit And Wisdom Of Mark Twain', language: 'English', - author: 'Stephen King', + author: 'Mark Twain', + cover: 'https://images.gr-assets.com/books/1388209857l/2965.jpg', }, - and_then_there_were_none: { - title: 'And Then There Were None', + the_waste_land_and_other_poems: { + title: 'The Waste Land and Other Poems', language: 'English', - author: 'Agatha Christie', + author: 'T.S. Eliot', + cover: 'https://images.gr-assets.com/books/1372992691l/400412.jpg', }, dragons_of_autumn_twilight: { title: 'Dragons of Autumn Twilight', language: 'English', author: 'Margaret Weis and Tracy Hickman', + cover: 'https://images.gr-assets.com/books/1220752967l/1082252.jpg', }, - a_song_of_ice_and_fire: { - title: 'A Song of Ice and Fire', - language: 'English', - author: 'George R.R. Martin', + basho_the_complete_haiku: { + title: 'Basho: The Complete Haiku', + language: 'English, Japanese', + author: 'Matsuo Basho', + cover: 'https://images.gr-assets.com/books/1371446834l/2183600.jpg', }, the_coldfire_trilogy: { title: 'The Coldfire Trilogy', language: 'English', author: 'C.S. Friedman', + cover: 'https://images.gr-assets.com/books/1437435124l/36159.jpg', }, the_sandman: { title: 'The Sandman', language: 'English', author: 'Neil Gaiman', + cover: 'https://images.gr-assets.com/books/1352657721l/16142737.jpg', }, }; @@ -74,28 +84,48 @@ function displayList(titles) { const list = document.createElement('ul'); // creates list list.setAttribute('id', 'books'); // adding id of books - document.body.appendChild(list); + // list.innerHTML = 'My favorite books, with authors and languages.'; for (let i = 0; i < titles.length; i++) { - const titleList = document.createElement('li'); // creates each item - titleList.setAttribute('id', titles[i]); - console.log(titleList.id); // confirming that adding id worked (it did!) - list.appendChild(titleList); // adds item to list(ul) - const titleKey = titles[i]; // trying to get id for object call + const titleList = document.createElement('li'); // creates each title item (li) + titleList.setAttribute('id', titles[i]); // sets id of each item of the list + list.appendChild(titleList); // adds item (li) to list(ul) + const titleKey = titles[i]; // id for object call titleList.innerHTML += favoriteBooks[titleKey].title; // adds title of each to list - const bookFacts = document.createElement('ul'); // creating a new list for each title - bookFacts.setAttribute('id', favoriteBooks[titleKey].title); // attempting to add id for each list (this may not work) + document.write('
'); + // const imageLink = '' + favoriteBooks[titleKey].cover + ''; + // titleList.appendChild(imageLink); + const myNewImage = document.createElement('img'); + myNewImage.src = '' + favoriteBooks[titleKey].cover + ''; + myNewImage.id = '' + titleKey + 'cover'; + + document.body.appendChild(myNewImage); + /* document.getElementById(titleKey).style.backgroundRepeat = 'no-repeat'; + document.getElementById(titleKey).style.backgroundImage = 'width: 20%'; + document.getElementById(titleKey).style.backgroundImage = 'height: auto'; + document.getElementById(titleKey).style.padding = '380px 250px 250px 50px'; */ + // document.getElementById(titleKey).style.listStyleImage = imageLink; // attempts to add covers as list bullets + /* const bookFacts = document.createElement('ul'); // creating a new list for each title to hold author and language + bookFacts.setAttribute('id', 'aandllist'); document.getElementById(titleKey).appendChild(bookFacts); // adding bookFacts list as child of each list item (li) + document.getElementById('aandllist').style.listStyle = 'none'; const authAndLang = document.createElement('li'); // creating variable for other info bookFacts.appendChild(authAndLang); // adds authAndLang item to bookFacts list - bookFacts.innerHTML += + authAndLang.innerHTML += 'Author: ' + favoriteBooks[titleKey].author + - ' Language: ' + - favoriteBooks[titleKey].language; - - // or title.textContent = i; + '; ' + + 'Language: ' + + favoriteBooks[titleKey].language; */ + titleList.innerHTML += + '

The author of ' + + favoriteBooks[titleKey].title + + ' is ' + + favoriteBooks[titleKey].author + + ', and the book is in ' + + favoriteBooks[titleKey].language + + '.'; } } diff --git a/Week1/homework/index.html b/Week1/homework/index.html index 23d44834f..425b830e9 100644 --- a/Week1/homework/index.html +++ b/Week1/homework/index.html @@ -2,8 +2,12 @@ + - +
+

My Favorite Books, with Authors and Language

+ +
diff --git a/Week1/homework/style.css b/Week1/homework/style.css index bab13ec23..d4d4f4eca 100644 --- a/Week1/homework/style.css +++ b/Week1/homework/style.css @@ -1 +1,4 @@ -/* add your styling here */ \ No newline at end of file +img { + width: 1px; + height: 3px; +} From 6756a96a0ff070cae7ad0595558a8fc89d3c44f1 Mon Sep 17 00:00:00 2001 From: jshortz Date: Sat, 29 Jun 2019 14:52:31 +0200 Subject: [PATCH 5/5] Notes Update, JavaScript practice --- Notes/20190609.txt | 1 + Notes/DOMtree.gif | Bin 0 -> 2801 bytes Notes/JSpractice.js | 25 ++++ Notes/fromReading.md | 238 +++++++++++++++++++++++++++++++++++++++ Notes/fromReading.txt | 142 ++++++++++++++++++++++- Notes/jsDOMpractice.html | 28 +++++ 6 files changed, 433 insertions(+), 1 deletion(-) create mode 100644 Notes/20190609.txt create mode 100644 Notes/DOMtree.gif create mode 100644 Notes/JSpractice.js create mode 100644 Notes/fromReading.md create mode 100644 Notes/jsDOMpractice.html 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 0000000000000000000000000000000000000000..e7f30dd77b3667516be44ae15c429b7f9f6c530b GIT binary patch literal 2801 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 DL)~&U literal 0 HcmV?d00001 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): +

My Heading 1

+ + -another example: +

Click on this text!

+ + +-resource for how to create a basic webpage animation with javascript + + +-syntax example (calling a function via an event handler): +

Click on this text!

+ +-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(!) + +-image above (saved in Notes folder and available on link) shows the parent relationships for each node +-note that elements don't innately have text.. but they may have children text nodes that can be accessed with innerHTML +-innerHTML accesses the nodeValue of the first child +-can also access the first child with the following syntax: + var myTitle = document.getElementById("demo").childNodes[0].nodeValue; +-nodeName specifies the name of a node and: + -is read-only + -nodeName of an element node is the same as the tag name + -nodeName of an attribute is the attribute name + -nodeName of a text node is #text + -nodeName of the document as a whole is #document +-nodeValue can also be used to access a node and: + -nodeValue of an element is null + -nodeValue of a text node is the text itself + -nodeValue for attribute nodes is the attribute itself +-nodeType is read-only and returns the type of the node + -the type will be a numerical value - see a list of some at the link above + + +-all about creating and removing nodes (elements) +-to add a new element to the DOM, create the element node first, then append it to an existing element + -syntax example: +
+

This is a paragraph.

+

This is another paragraph.

+
+ + -this syntax will append the new paragraph after the two existing paragraphs + -if you want to insert something before an existing element, use insertBefore(): +
+

This is a paragraph.

+

This is another paragraph.

+
+ + -with insertBefore(), the first parameter is the node to be inserted; the second is the element that it will be inserted before +-to remove an HTML element, you need to know the parent of the element + -syntax example: +
+

This is a paragraph.

+

This is another paragraph.

+
+ + -if you're not sure what the parent is, can use: + var child = document.getElementById("p1"); + child.parentNode.removeChild(child); +-to replace a DOM element, syntax example: +
+

This is a paragraph.

+

This is another paragraph.

+
+ + + + diff --git a/Notes/fromReading.txt b/Notes/fromReading.txt index 70145b729..9c98a2d4c 100644 --- a/Notes/fromReading.txt +++ b/Notes/fromReading.txt @@ -1 +1,141 @@ -ES6 arrow function... => - look this up, allows anonymous function as variable (syntax: const variable = () => {...}) \ No newline at end of file +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 +-filter + -works on arrays + - const var = thingToFilter.filter(function(itemToFilterWith) { + return itemToFilterWith.valueOfItem === 'whateverFilterYouWant'; + }); + -note the odd parens replacement - won't work without them that whateverFilterYouWant + -find does the same as filter, but only returns the first item (will make a new array with one element) +-reject + -same syntax as filter, but it finds elements to kick out of the list +-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): + .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): +

My Heading 1

+ + -another example: +

Click on this text!

+ +-resource for how to create a basic webpage animation with javascript + +-syntax example (calling a function via an event handler): +

Click on this text!

+ +-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 + + + + diff --git a/Notes/jsDOMpractice.html b/Notes/jsDOMpractice.html new file mode 100644 index 000000000..d0f9c1f0b --- /dev/null +++ b/Notes/jsDOMpractice.html @@ -0,0 +1,28 @@ + + + + + + + +

Hello World!

+ + + +

Old Heading

+ + + + + + +