From b7d9e3dcd0b272de904b53306f2c5b6e2042af48 Mon Sep 17 00:00:00 2001 From: jshortz Date: Sat, 8 Jun 2019 17:52:20 +0200 Subject: [PATCH 01/18] 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 02/18] 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 03/18] 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 04/18] 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 05/18] 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

+ + + + + + + From 5542b97c4ccae6217c1f28abb1489fc28c3aaa9e Mon Sep 17 00:00:00 2001 From: jshortz Date: Sat, 29 Jun 2019 15:21:28 +0200 Subject: [PATCH 06/18] Redoing Homework --- Week1/homework/app.js | 133 -------------------------------------- Week1/homework/index.html | 13 ---- Week1/homework/style.css | 4 -- 3 files changed, 150 deletions(-) delete mode 100644 Week1/homework/app.js delete mode 100644 Week1/homework/index.html delete mode 100644 Week1/homework/style.css diff --git a/Week1/homework/app.js b/Week1/homework/app.js deleted file mode 100644 index 16b0bb512..000000000 --- a/Week1/homework/app.js +++ /dev/null @@ -1,133 +0,0 @@ -'use strict'; - -{ - const bookTitles = [ - // Replace with your own book titles - 'kushiels_avatar', - 'dragons_of_autumn_twilight', - 'basho_the_complete_haiku', - 'the_wit_and_wisdom_of_mark_twain', - 'the_waste_land_and_other_poems', - 'popco', - 'kushiels_scion', - 'neverwhere', - 'the_sandman', - 'the_coldfire_trilogy', - ]; - - const favoriteBooks = { - popco: { - 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', - }, - the_wit_and_wisdom_of_mark_twain: { - title: 'The Wit And Wisdom Of Mark Twain', - language: 'English', - author: 'Mark Twain', - cover: 'https://images.gr-assets.com/books/1388209857l/2965.jpg', - }, - the_waste_land_and_other_poems: { - title: 'The Waste Land and Other Poems', - language: 'English', - 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', - }, - 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', - }, - }; - - // Replace with your own code - // 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); - // list.innerHTML = 'My favorite books, with authors and languages.'; - - for (let i = 0; i < titles.length; i++) { - 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 - 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 - authAndLang.innerHTML += - 'Author: ' + - favoriteBooks[titleKey].author + - '; ' + - 'Language: ' + - favoriteBooks[titleKey].language; */ - titleList.innerHTML += - '

The author of ' + - favoriteBooks[titleKey].title + - ' is ' + - favoriteBooks[titleKey].author + - ', and the book is in ' + - favoriteBooks[titleKey].language + - '.'; - } - } - - displayList(bookTitles); -} diff --git a/Week1/homework/index.html b/Week1/homework/index.html deleted file mode 100644 index 425b830e9..000000000 --- a/Week1/homework/index.html +++ /dev/null @@ -1,13 +0,0 @@ - - - - - - - -
-

My Favorite Books, with Authors and Language

- -
- - diff --git a/Week1/homework/style.css b/Week1/homework/style.css deleted file mode 100644 index d4d4f4eca..000000000 --- a/Week1/homework/style.css +++ /dev/null @@ -1,4 +0,0 @@ -img { - width: 1px; - height: 3px; -} From 66c1b938a5544798a7e71aa20fd9245fd7f395b1 Mon Sep 17 00:00:00 2001 From: jshortz Date: Sat, 29 Jun 2019 16:12:28 +0200 Subject: [PATCH 07/18] Recreating homework --- Week1/homework/app.js | 0 Week1/homework/index.html | 0 Week1/homework/style.css | 0 3 files changed, 0 insertions(+), 0 deletions(-) create mode 100644 Week1/homework/app.js create mode 100644 Week1/homework/index.html create mode 100644 Week1/homework/style.css diff --git a/Week1/homework/app.js b/Week1/homework/app.js new file mode 100644 index 000000000..e69de29bb diff --git a/Week1/homework/index.html b/Week1/homework/index.html new file mode 100644 index 000000000..e69de29bb diff --git a/Week1/homework/style.css b/Week1/homework/style.css new file mode 100644 index 000000000..e69de29bb From cae0024a6415d0cc5beed40f3549c3b6a6536a0b Mon Sep 17 00:00:00 2001 From: jshortz Date: Sat, 13 Jul 2019 21:48:39 +0200 Subject: [PATCH 08/18] finished 2.1 and 2.1 --- Week3/homework/step2-1.js | 4 +--- Week3/homework/step2-2.js | 19 +++++++++++++++---- 2 files changed, 16 insertions(+), 7 deletions(-) diff --git a/Week3/homework/step2-1.js b/Week3/homework/step2-1.js index d5699882c..28fa47a4b 100644 --- a/Week3/homework/step2-1.js +++ b/Week3/homework/step2-1.js @@ -1,9 +1,7 @@ 'use strict'; function foo(func) { - // What to do here? - // Replace this comment and the next line with your code - console.log(func); + func(); } function bar() { diff --git a/Week3/homework/step2-2.js b/Week3/homework/step2-2.js index dcd135040..b1a3d37ec 100644 --- a/Week3/homework/step2-2.js +++ b/Week3/homework/step2-2.js @@ -2,18 +2,29 @@ function threeFive(startIndex, stopIndex, threeCallback, fiveCallback) { const numbers = []; - - // Replace this comment and the next line with your code + let numbersStart = startIndex; + let numbersEnd = stopIndex; + while (numbersStart <= numbersEnd) { + numbers.push(numbersStart); + numbersStart++; + } + console.log(numbers); + for (let i = 0; i < numbers.length; i++) { + let number = numbers[i]; + if (number % 3 === 0) { + threeCallback = sayThree(number); + } if (number % 5 === 0) { + fiveCallback = sayFive(number); + } + } console.log(startIndex, stopIndex, threeCallback, fiveCallback, numbers); } function sayThree(number) { - // Replace this comment and the next line with your code console.log(number); } function sayFive(number) { - // Replace this comment and the next line with your code console.log(number); } From d67d07e6a4aea271383af65a579dd1c089ccb1a6 Mon Sep 17 00:00:00 2001 From: jshortz Date: Sat, 13 Jul 2019 21:55:32 +0200 Subject: [PATCH 09/18] finished 2.3 --- Week3/homework/step2-3.js | 25 +++++++++++++------------ 1 file changed, 13 insertions(+), 12 deletions(-) diff --git a/Week3/homework/step2-3.js b/Week3/homework/step2-3.js index 00845c5eb..45083b3a1 100644 --- a/Week3/homework/step2-3.js +++ b/Week3/homework/step2-3.js @@ -4,10 +4,9 @@ function repeatStringNumTimesWithFor(str, num) { // eslint-disable-next-line prefer-const let result = ''; - - // Replace this comment and the next line with your code - console.log(str, num, result); - + for (let i = 0; i < num; i++) { + result += str; + } return result; } @@ -17,10 +16,11 @@ console.log('for', repeatStringNumTimesWithFor('abc', 3)); function repeatStringNumTimesWithWhile(str, num) { // eslint-disable-next-line prefer-const let result = ''; - - // Replace this comment and the next line with your code - console.log(str, num, result); - + let counter = 0; + while (counter < num) { + result += str; + counter++; + } return result; } @@ -30,10 +30,11 @@ console.log('while', repeatStringNumTimesWithWhile('abc', 3)); function repeatStringNumTimesWithDoWhile(str, num) { // eslint-disable-next-line prefer-const let result = ''; - - // Replace this comment and the next line with your code - console.log(str, num, result); - + let i = 0; + do { + result += str; + i++; + } while (i < num); return result; } From 8098ebc1a2625d41c19d57ecb80ab7f773600ee2 Mon Sep 17 00:00:00 2001 From: jshortz Date: Sat, 13 Jul 2019 22:08:09 +0200 Subject: [PATCH 10/18] finished 2.4 and 2.5 --- Week3/homework/step2-4.js | 4 +++- Week3/homework/step2-5.js | 7 +++++-- 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/Week3/homework/step2-4.js b/Week3/homework/step2-4.js index b11b1dcb6..84dba14ec 100644 --- a/Week3/homework/step2-4.js +++ b/Week3/homework/step2-4.js @@ -1,7 +1,9 @@ 'use strict'; function Dog() { - // add your code here + this.name = 'Fido'; + this.color = 'white and brown'; + this.numLegs = 4; } const hound = new Dog(); diff --git a/Week3/homework/step2-5.js b/Week3/homework/step2-5.js index cbb54fa1d..36e926c99 100644 --- a/Week3/homework/step2-5.js +++ b/Week3/homework/step2-5.js @@ -4,8 +4,11 @@ function multiplyAll(arr) { // eslint-disable-next-line let product = 1; - // Replace this comment and the next line with your code - console.log(arr, product); + for (let i = 0; i < arr.length; i++) { + for (let j = 0; j < arr[i].length; j++) { + product = product * arr[i][j]; + } + } return product; } From 9e8430236e7fca0425c797928dc2eb404cb729d3 Mon Sep 17 00:00:00 2001 From: jshortz Date: Sat, 13 Jul 2019 22:43:16 +0200 Subject: [PATCH 11/18] finished 2.6 --- Week3/homework/step2-6.js | 22 +++++++++++++++++----- 1 file changed, 17 insertions(+), 5 deletions(-) diff --git a/Week3/homework/step2-6.js b/Week3/homework/step2-6.js index ffe95b9f7..67963a1fe 100644 --- a/Week3/homework/step2-6.js +++ b/Week3/homework/step2-6.js @@ -1,16 +1,28 @@ 'use strict'; const arr2d = [[1, 2], [3, 4], [5, 6]]; -const arr3d = [[[1, 2], [3, 4]], [[5, 6], [7, 8]]]; +const arr3d = [ [ [1, 2], [3, 4] ], [ [5, 6], [7, 8] ] ]; function flattenArray2d(arr) { - // Replace this comment and the next line with your code - console.log(arr); + let newArray = []; + for (let i = 0; i < arr.length; i++) { + for (let j = 0; j < arr[i].length; j++) { + newArray.push(arr[i][j]); + } + } + return newArray.sort(); } function flattenArray3d(arr) { - // Replace this comment and the next line with your code - console.log(arr); + let arr3d = []; + for (let i = 0; i < arr.length; i++) { + for (let j = 0; j < arr[i].length; j++) { + for (let k = 0; k < arr[i][j].length; k++) { + arr3d.push(arr[i][j][k]); + } + } + } + return arr3d; } console.log(flattenArray2d(arr2d)); // -> [1, 2, 3, 4, 5, 6] From cc6b2f9456687c571649dd7e65f66f729e27ad3c Mon Sep 17 00:00:00 2001 From: jshortz Date: Sat, 13 Jul 2019 22:56:41 +0200 Subject: [PATCH 12/18] finished 2.7 --- Week3/homework/step2-7.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/Week3/homework/step2-7.js b/Week3/homework/step2-7.js index 3e72e8551..c18ceaedf 100644 --- a/Week3/homework/step2-7.js +++ b/Week3/homework/step2-7.js @@ -20,4 +20,8 @@ f2(y); console.log(y); -// Add your explanation as a comment here +/* In the x-code, we are logging the value of x, which has not changed. If we want this code to return 10, +we need to console.log(f1(x)). In the y-code, y is an object. The properties of an object can be altered this way, +so the function changes the value of x to 10. No alteration has been done to the variable reference itself. If f2 +attempted to change the *value* of y (rather than an attribute of its object), it would yield results like the x-code. +For example, if the function is altered, val = { x: 10 }; return val;, it will return { x: 9 } */ From 8673c7b456483fc7afa43c033d09a06240ee6b4f Mon Sep 17 00:00:00 2001 From: jshortz Date: Sat, 13 Jul 2019 23:05:45 +0200 Subject: [PATCH 13/18] finished 3 (no bonus) --- Week3/homework/step3.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/Week3/homework/step3.js b/Week3/homework/step3.js index 292724bf4..13ef7ff05 100644 --- a/Week3/homework/step3.js +++ b/Week3/homework/step3.js @@ -1,14 +1,17 @@ 'use strict'; function createBase(base) { - // Replace this comment and the next line with your code - console.log(base); + return function (number) { + return number + base; + } } const addSix = createBase(6); +const addSeven = createBase(7); console.log(addSix(10)); // returns 16 console.log(addSix(21)); // returns 27 +console.log(addSeven(21)); // returns 28 // Do not change or remove anything below this line module.exports = createBase; From a180a5126df219367e7b8575a61b76ecffb723bc Mon Sep 17 00:00:00 2001 From: jshortz Date: Sun, 14 Jul 2019 00:31:11 +0200 Subject: [PATCH 14/18] bonus homework finished --- Week3/homework/step3-bonus.js | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/Week3/homework/step3-bonus.js b/Week3/homework/step3-bonus.js index 917091d61..417e68717 100644 --- a/Week3/homework/step3-bonus.js +++ b/Week3/homework/step3-bonus.js @@ -3,9 +3,11 @@ const values = ['a', 'b', 'c', 'd', 'a', 'e', 'f', 'c']; function makeUnique(arr) { - // Replace this comment and the next line with your code - console.log(arr); -} + let newArray = arr.filter(function (index, current) { + return arr.indexOf(index) === current; + }); + return newArray;} + const uniqueValues = makeUnique(values); console.log(uniqueValues); From c2ad5fafc9550552adcdbb13f7db0af604781d5c Mon Sep 17 00:00:00 2001 From: jshortz Date: Sun, 14 Jul 2019 01:05:50 +0200 Subject: [PATCH 15/18] fixed issues from unit tests (still failing 2-2) --- Week3/homework/step2-2.js | 30 +++++++++++++++--------------- Week3/homework/step2-3.js | 12 +++++++----- Week3/homework/step2-6.js | 10 +++++----- Week3/homework/step3-bonus.js | 6 +++--- Week3/homework/step3.js | 4 ++-- 5 files changed, 32 insertions(+), 30 deletions(-) diff --git a/Week3/homework/step2-2.js b/Week3/homework/step2-2.js index b1a3d37ec..692b62f4e 100644 --- a/Week3/homework/step2-2.js +++ b/Week3/homework/step2-2.js @@ -1,33 +1,33 @@ 'use strict'; +function sayThree(number) { + console.log(number); +} + +function sayFive(number) { + console.log(number); +} + function threeFive(startIndex, stopIndex, threeCallback, fiveCallback) { const numbers = []; let numbersStart = startIndex; - let numbersEnd = stopIndex; + const numbersEnd = stopIndex; while (numbersStart <= numbersEnd) { numbers.push(numbersStart); numbersStart++; } - console.log(numbers); for (let i = 0; i < numbers.length; i++) { - let number = numbers[i]; - if (number % 3 === 0) { - threeCallback = sayThree(number); - } if (number % 5 === 0) { - fiveCallback = sayFive(number); + const number = numbers[i]; + if (number % 3 === 0) { + threeCallback = sayThree(number); + } + if (number % 5 === 0) { + fiveCallback = sayFive(number); } } console.log(startIndex, stopIndex, threeCallback, fiveCallback, numbers); } -function sayThree(number) { - console.log(number); -} - -function sayFive(number) { - console.log(number); -} - threeFive(10, 15, sayThree, sayFive); // Do not change or remove anything below this line diff --git a/Week3/homework/step2-3.js b/Week3/homework/step2-3.js index 45083b3a1..5d1b4c946 100644 --- a/Week3/homework/step2-3.js +++ b/Week3/homework/step2-3.js @@ -31,14 +31,16 @@ function repeatStringNumTimesWithDoWhile(str, num) { // eslint-disable-next-line prefer-const let result = ''; let i = 0; - do { - result += str; - i++; - } while (i < num); + if (num > 0) { + do { + result += str; + i++; + } while (i < num); + } return result; } -console.log('do-while', repeatStringNumTimesWithDoWhile('abc', 3)); +console.log('do-while', repeatStringNumTimesWithDoWhile('abc', 0)); // Do not change or remove anything below this line module.exports = { diff --git a/Week3/homework/step2-6.js b/Week3/homework/step2-6.js index 67963a1fe..758c0ad5b 100644 --- a/Week3/homework/step2-6.js +++ b/Week3/homework/step2-6.js @@ -1,10 +1,10 @@ 'use strict'; const arr2d = [[1, 2], [3, 4], [5, 6]]; -const arr3d = [ [ [1, 2], [3, 4] ], [ [5, 6], [7, 8] ] ]; +const arr3d = [[[1, 2], [3, 4]], [[5, 6], [7, 8]]]; function flattenArray2d(arr) { - let newArray = []; + const newArray = []; for (let i = 0; i < arr.length; i++) { for (let j = 0; j < arr[i].length; j++) { newArray.push(arr[i][j]); @@ -14,15 +14,15 @@ function flattenArray2d(arr) { } function flattenArray3d(arr) { - let arr3d = []; + const arr3dim = []; for (let i = 0; i < arr.length; i++) { for (let j = 0; j < arr[i].length; j++) { for (let k = 0; k < arr[i][j].length; k++) { - arr3d.push(arr[i][j][k]); + arr3dim.push(arr[i][j][k]); } } } - return arr3d; + return arr3dim; } console.log(flattenArray2d(arr2d)); // -> [1, 2, 3, 4, 5, 6] diff --git a/Week3/homework/step3-bonus.js b/Week3/homework/step3-bonus.js index 417e68717..11d80a606 100644 --- a/Week3/homework/step3-bonus.js +++ b/Week3/homework/step3-bonus.js @@ -3,11 +3,11 @@ const values = ['a', 'b', 'c', 'd', 'a', 'e', 'f', 'c']; function makeUnique(arr) { - let newArray = arr.filter(function (index, current) { + const newArray = arr.filter(function(index, current) { return arr.indexOf(index) === current; }); - return newArray;} - + return newArray; +} const uniqueValues = makeUnique(values); console.log(uniqueValues); diff --git a/Week3/homework/step3.js b/Week3/homework/step3.js index 13ef7ff05..a9f30e4de 100644 --- a/Week3/homework/step3.js +++ b/Week3/homework/step3.js @@ -1,9 +1,9 @@ 'use strict'; function createBase(base) { - return function (number) { + return function(number) { return number + base; - } + }; } const addSix = createBase(6); From 327c20390eb8c8c1b49d5eeeaf84432518043d35 Mon Sep 17 00:00:00 2001 From: jshortz Date: Sun, 14 Jul 2019 11:54:56 +0200 Subject: [PATCH 16/18] fixed function call in 2.2, all unit tests pass --- Week3/homework/step2-2.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/Week3/homework/step2-2.js b/Week3/homework/step2-2.js index 692b62f4e..0187578f6 100644 --- a/Week3/homework/step2-2.js +++ b/Week3/homework/step2-2.js @@ -19,10 +19,10 @@ function threeFive(startIndex, stopIndex, threeCallback, fiveCallback) { for (let i = 0; i < numbers.length; i++) { const number = numbers[i]; if (number % 3 === 0) { - threeCallback = sayThree(number); + threeCallback(number); } if (number % 5 === 0) { - fiveCallback = sayFive(number); + fiveCallback(number); } } console.log(startIndex, stopIndex, threeCallback, fiveCallback, numbers); From b03dfbbc38ba3193d6c37a83957b45b6c48351f9 Mon Sep 17 00:00:00 2001 From: jshortz Date: Sun, 14 Jul 2019 12:06:06 +0200 Subject: [PATCH 17/18] Removing Notes. Again. Always. --- Notes/20190609.txt | 1 - Notes/DOMtree.gif | Bin 2801 -> 0 bytes Notes/JSpractice.js | 25 ---- Notes/fromReading.md | 238 --------------------------------------- Notes/fromReading.txt | 141 ----------------------- Notes/jsDOMpractice.html | 28 ----- 6 files changed, 433 deletions(-) delete mode 100644 Notes/20190609.txt delete mode 100644 Notes/DOMtree.gif delete mode 100644 Notes/JSpractice.js delete mode 100644 Notes/fromReading.md delete mode 100644 Notes/fromReading.txt delete mode 100644 Notes/jsDOMpractice.html diff --git a/Notes/20190609.txt b/Notes/20190609.txt deleted file mode 100644 index ab32fc731..000000000 --- a/Notes/20190609.txt +++ /dev/null @@ -1 +0,0 @@ -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 deleted file mode 100644 index e7f30dd77b3667516be44ae15c429b7f9f6c530b..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 2801 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 DL)~&U diff --git a/Notes/JSpractice.js b/Notes/JSpractice.js deleted file mode 100644 index 76f7ce639..000000000 --- a/Notes/JSpractice.js +++ /dev/null @@ -1,25 +0,0 @@ -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 deleted file mode 100644 index 83509eff4..000000000 --- a/Notes/fromReading.md +++ /dev/null @@ -1,238 +0,0 @@ -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 deleted file mode 100644 index 9c98a2d4c..000000000 --- a/Notes/fromReading.txt +++ /dev/null @@ -1,141 +0,0 @@ -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 deleted file mode 100644 index d0f9c1f0b..000000000 --- a/Notes/jsDOMpractice.html +++ /dev/null @@ -1,28 +0,0 @@ - - - - - - - -

Hello World!

- - - -

Old Heading

- - - - - - - From 3a47521eed31e92bc7cba920a81c42d5e8a7f2f3 Mon Sep 17 00:00:00 2001 From: jshortz Date: Sun, 28 Jul 2019 19:37:45 +0200 Subject: [PATCH 18/18] Update Week3/homework/step2-2.js Removed console.log statement Co-Authored-By: Gabe Rodriguez --- Week3/homework/step2-2.js | 1 - 1 file changed, 1 deletion(-) diff --git a/Week3/homework/step2-2.js b/Week3/homework/step2-2.js index 0187578f6..e17f1cbcc 100644 --- a/Week3/homework/step2-2.js +++ b/Week3/homework/step2-2.js @@ -25,7 +25,6 @@ function threeFive(startIndex, stopIndex, threeCallback, fiveCallback) { fiveCallback(number); } } - console.log(startIndex, stopIndex, threeCallback, fiveCallback, numbers); } threeFive(10, 15, sayThree, sayFive); pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy