From b7d9e3dcd0b272de904b53306f2c5b6e2042af48 Mon Sep 17 00:00:00 2001 From: jshortz Date: Sat, 8 Jun 2019 17:52:20 +0200 Subject: [PATCH 01/12] 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/12] 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/12] 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/12] 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/12] 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/12] 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/12] 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 cb66bc70df79e2e83cace5b0ca9e2732fce323f0 Mon Sep 17 00:00:00 2001 From: jshortz Date: Sun, 7 Jul 2019 12:37:47 +0200 Subject: [PATCH 08/12] Removing Notes.... again --- 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 22d1034bd024c0c8d912c1b0315b96c5702cf3a5 Mon Sep 17 00:00:00 2001 From: jshortz Date: Sun, 7 Jul 2019 14:39:42 +0200 Subject: [PATCH 09/12] Squirtle Parade Displayed --- Week2/homework/squirtle-sprites.js | 19 +++++++++++++++++++ Week2/homework/squirtleparade.html | 15 +++++++++++++++ 2 files changed, 34 insertions(+) create mode 100644 Week2/homework/squirtleparade.html diff --git a/Week2/homework/squirtle-sprites.js b/Week2/homework/squirtle-sprites.js index b6b6e2920..74da354df 100644 --- a/Week2/homework/squirtle-sprites.js +++ b/Week2/homework/squirtle-sprites.js @@ -9,3 +9,22 @@ function fetchPokemonData() { } /* Code goes below */ + +const data = fetchPokemonData(); + +function sprites() { + const myObj = JSON.parse(data); + const spritesObj = myObj.sprites; + for (const key in spritesObj) { + if (spritesObj[key] !== null) { + const image = document.createElement('img'); + image.src = spritesObj[key]; + document.querySelector('p').appendChild(image); + // console.log(typeof (spritesObj)); + // console.log(spritesObj[key]); + // document.querySelector('p').innerHTML += spritesObj[key]; + } + } +} + +sprites(); \ No newline at end of file diff --git a/Week2/homework/squirtleparade.html b/Week2/homework/squirtleparade.html new file mode 100644 index 000000000..93c5e39dc --- /dev/null +++ b/Week2/homework/squirtleparade.html @@ -0,0 +1,15 @@ + + + + + Codestin Search App + + + + +

+ + + + \ No newline at end of file From 9d0f81195674864a099c387e25813453899ad540 Mon Sep 17 00:00:00 2001 From: jshortz Date: Sun, 7 Jul 2019 15:01:32 +0200 Subject: [PATCH 10/12] Removed some comments --- Week2/homework/squirtle-sprites.js | 3 --- 1 file changed, 3 deletions(-) diff --git a/Week2/homework/squirtle-sprites.js b/Week2/homework/squirtle-sprites.js index 74da354df..456de5307 100644 --- a/Week2/homework/squirtle-sprites.js +++ b/Week2/homework/squirtle-sprites.js @@ -20,9 +20,6 @@ function sprites() { const image = document.createElement('img'); image.src = spritesObj[key]; document.querySelector('p').appendChild(image); - // console.log(typeof (spritesObj)); - // console.log(spritesObj[key]); - // document.querySelector('p').innerHTML += spritesObj[key]; } } } From fb164d91b3e585027907780d92a8aeef151a6033 Mon Sep 17 00:00:00 2001 From: jshortz Date: Sun, 7 Jul 2019 21:55:29 +0200 Subject: [PATCH 11/12] Fixing master homework on Squirtle --- Week1/homework/app.js | 11 +++++++++++ Week1/homework/index.html | 1 + Week1/homework/style.css | 1 + 3 files changed, 13 insertions(+) diff --git a/Week1/homework/app.js b/Week1/homework/app.js index e69de29bb..4813923e3 100644 --- a/Week1/homework/app.js +++ b/Week1/homework/app.js @@ -0,0 +1,11 @@ +'use strict'; + +{ + const bookTitles = [ + // Replace with your own book titles + 'harry_potter_chamber_secrets', + ]; + + // Replace with your own code + console.log(bookTitles); +} \ No newline at end of file diff --git a/Week1/homework/index.html b/Week1/homework/index.html index e69de29bb..b22147cd1 100644 --- a/Week1/homework/index.html +++ b/Week1/homework/index.html @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/Week1/homework/style.css b/Week1/homework/style.css index e69de29bb..bab13ec23 100644 --- a/Week1/homework/style.css +++ b/Week1/homework/style.css @@ -0,0 +1 @@ +/* add your styling here */ \ No newline at end of file From 8ee9f2356b4db746adb45952d3fb4ea50f9b1aa4 Mon Sep 17 00:00:00 2001 From: jshortz Date: Sun, 7 Jul 2019 21:56:33 +0200 Subject: [PATCH 12/12] Fixed newline --- Week1/homework/app.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Week1/homework/app.js b/Week1/homework/app.js index 4813923e3..a9b5f75d8 100644 --- a/Week1/homework/app.js +++ b/Week1/homework/app.js @@ -8,4 +8,4 @@ // Replace with your own code console.log(bookTitles); -} \ No newline at end of file +}