|
| 1 | +# Intro to Frontend, Week 1 |
| 2 | + |
| 3 | +## Learning goals |
| 4 | + |
| 5 | +Browser environment |
| 6 | + |
| 7 | +- [ ] HTML vs CSS vs JS |
| 8 | +- [ ] Client vs server |
| 9 | +- [ ] Where is the script tag being loaded |
| 10 | + |
| 11 | +DOM |
| 12 | + |
| 13 | +- [ ] What is it and what do developers use the DOM for? |
| 14 | +- [ ] DOM manipulation |
| 15 | + - [ ] Get elements |
| 16 | + - [ ] Insert elements |
| 17 | + - [ ] Element manipulation (style, innerHTML, text) |
| 18 | + - [ ] Window object |
| 19 | + - [ ] Document object |
| 20 | + |
| 21 | +Event listeners |
| 22 | + |
| 23 | +- [ ] Document onload |
| 24 | +- [ ] Click, submit, change, input - Focus on usage |
| 25 | + |
| 26 | +Making requests |
| 27 | + |
| 28 | +- [ ] Fetch (No promise explanation! Focus on usage) |
| 29 | + |
| 30 | +## Relevant links |
| 31 | + |
| 32 | +- [Preparation](preparation.md) |
| 33 | +- [Assignment](../../assignment-projects/) |
| 34 | +- [Lesson plan](lesson-plan.md) |
| 35 | + |
| 36 | +## HTML interaction |
| 37 | + |
| 38 | +Interacting with the HTML DOM is done through the document object in the browser. With the document object we can get html elements and change them. |
| 39 | + |
| 40 | +For the next js part we use this html. |
| 41 | + |
| 42 | +```html |
| 43 | +<html> |
| 44 | + <body> |
| 45 | + <h1>Javascript week 3</h1> |
| 46 | + <div class="queue"></div> |
| 47 | + <div id="test-id"></div> |
| 48 | + <script src="js/review.js"></script> |
| 49 | + </body> |
| 50 | +</html> |
| 51 | +``` |
| 52 | + |
| 53 | +```js |
| 54 | +// use the querySelector to select elements just like in css |
| 55 | +const testIdElement = document.querySelector("#test-id"); |
| 56 | +console.log(testIdElement); // logs the html element with id "test-id" |
| 57 | + |
| 58 | +// Change the inner html of the test-id element |
| 59 | +testIdElement.innerHTML = "test"; |
| 60 | +// Change the background-color of the test-id element. Inline css changes is done via the style attribute on the element |
| 61 | +testIdElement.style.backgroundColor = "blue"; |
| 62 | + |
| 63 | +// It is also possible to create html elements |
| 64 | +// Create a div element |
| 65 | +const div = document.createElement("div"); |
| 66 | +// Change its inner html |
| 67 | +div.innerHTML = "We created this div!!!"; |
| 68 | + |
| 69 | +// Lest append it to the div with the class queue |
| 70 | +const queueDiv = document.querySelector(".queue"); |
| 71 | +queueDiv.appendChild(div); |
| 72 | +``` |
| 73 | + |
| 74 | +## Code Commenting |
| 75 | + |
| 76 | +First the straightforward part: how do we place comments in our code? |
| 77 | + |
| 78 | +### HTML |
| 79 | + |
| 80 | +[W3Schools](https://www.w3schools.com/html/html_comments.asp) |
| 81 | +Comments |
| 82 | + |
| 83 | +```html |
| 84 | +<!-- Write |
| 85 | +your comments here --> |
| 86 | + |
| 87 | +<!-- Write your comments here --> |
| 88 | +``` |
| 89 | + |
| 90 | +### CSS |
| 91 | + |
| 92 | +[MDN on CSS comments](https://developer.mozilla.org/en-US/docs/Web/CSS/Comments) |
| 93 | + |
| 94 | +```css |
| 95 | +/* Comment */ |
| 96 | + |
| 97 | +/* |
| 98 | +A comment |
| 99 | +which stretches |
| 100 | +over several |
| 101 | +lines |
| 102 | +*/ |
| 103 | +``` |
| 104 | + |
| 105 | +### JavaScript |
| 106 | + |
| 107 | +Single line comments |
| 108 | + |
| 109 | +```js |
| 110 | +// Change heading: |
| 111 | +document.getElementById("myH").innerHTML = "My First Page"; |
| 112 | +``` |
| 113 | + |
| 114 | +Single line comments at end of the line: |
| 115 | + |
| 116 | +```js |
| 117 | +const x = 5; // Declare x, give it the value of 5 |
| 118 | +``` |
| 119 | + |
| 120 | +Writing js documentation: [JSDoc](https://usejsdoc.org/) <!-- http-trash --> |
| 121 | + |
| 122 | +### When to comment? |
| 123 | + |
| 124 | +Now for the hard part: when to comment? When you work for different companies, you will see different styles. Embrace something you like, and then learn to let go. Google on "when to comment code?" and you'll find a big bunch of different opinions. |
| 125 | + |
| 126 | +The general concept is, however, that it is there to help make the code more easy to understand. Note, however, that comments can also make code more difficult to understand when not applied properly. |
| 127 | + |
| 128 | +## Events |
| 129 | + |
| 130 | +Events in JavaScript are things like: |
| 131 | +A timer has just finished, a user clicked a button, our page has loaded, |
| 132 | +someone types into an input element or we have just gotten some data from a server. |
| 133 | +When these events happen, we usually want to add some functionality. |
| 134 | +For example, when a user clicks the like button (event), we want to increment the like counter and color the like button blue. |
| 135 | +Or when someone clicks "Close cookies" (event) we want to remove the cookie div. |
| 136 | + |
| 137 | +Lets first try to create some js that waits for 2 seconds and the console.logs out "2 seconds has elapsed!" |
| 138 | + |
| 139 | +In JavaScript we use an _event listener_ to listen: |
| 140 | + |
| 141 | +```javascript |
| 142 | +setTimeout(function () { |
| 143 | + console.log("2 seconds has elapsed!"); |
| 144 | +}, 2000); |
| 145 | + |
| 146 | +// Cool, now lets make a function as a variable: |
| 147 | +const fourSecondLog = function () { |
| 148 | + console.log("4 seconds has elapsed!"); |
| 149 | +}; |
| 150 | + |
| 151 | +setTimeout(fourSecondLog, 4000); |
| 152 | +``` |
| 153 | + |
| 154 | +Now lets try and log out "button clicked!" when a button is clicked. |
| 155 | + |
| 156 | +To check if a button gets clicked we use a what is called an _event listener_. |
| 157 | + |
| 158 | +Imagine a person listening to the click of a button and every time he hears a click he yells out "CLICKED". |
| 159 | + |
| 160 | +```javascript |
| 161 | +const buttonElement = document.querySelector("button"); |
| 162 | +buttonElement.addEventListener("click", function () { |
| 163 | + console.log("Button clicked!"); |
| 164 | +}); |
| 165 | + |
| 166 | +const buttonClicked = function () { |
| 167 | + console.log("Button clicked as a variable!"); |
| 168 | +}; |
| 169 | +// Cool man! Lets try and add that function as a variable. |
| 170 | +buttonElement.addEventListener("click", buttonClicked); |
| 171 | +``` |
0 commit comments