til34 [TIL] 20201210 The Missing Piece: DOM Events Events User inputs and actions Inline Events Not recommended (Can't reuse the code, making it hard to modify) Example : click Click onclick Property Function runs when the element is clicked Syntax const el = document.querySelector('element'); el.onclick = function() { //code } onmouseenter Property Function runs when mouse cursor enters into the element. addEventListener Specify the event type .. 2020. 12. 10. [TIL] 20201209 Introducing The World of DOM DOM Document Object Model JavaScript representation of a webpage. It's a 'window/portal' into the contents of a webpage Document Object Web Browsers take incoming HTML & CSS and create corresponding JavaScript Objects. Entry point into the world of the DOM Contains representations of all the contentson a page, and other useful methods and properties. How to Select the Object getElementById Singl.. 2020. 12. 9. [TIL] 20201207 Newer JavaScript Features Default Parameters The Old Way To set a default parameter, the developer had to check if the parameter is set by the user, and then set a parameter when it isn't Example function rollDie(numSides) { if(numSides === NaN){ numSides = 6; } return Math.floor(Math.random * numSides) +1; } The New Way Set the default parameter in the parentheses Example function rollDie(numSides=6){ return Math.floor(.. 2020. 12. 8. [TIL] 20201205 Callbacks & Array Methods Callback A callback is a function that is passed as an argument to another function forEach Method An array method Accepts a callback function Calls the function once per element in the array. (Very similar to for...of) Syntax arr.forEach(func) map Method An array method Creates a new array with the results of calling a callback on every element in the array. Syntax arr.map(function (el) { //cod.. 2020. 12. 5. [TIL] 20201204 Leveling Up Our Functions Scope Variable 'visibility' Impact of the variable The location where a variable is defined dictates where we have access to that variable Function Scope Defined inside of a function Visible only inside of the function Block Scope Defined inside of a block (i.e. conditionals, loops...) Visible only inside of the block If var is used to make variables, they are visible outside of the block, which.. 2020. 12. 5. [TIL] 20201203 Introducing Functions Function Reusable procedures Allows us to write reusable, modular code We define a "chunk" of code that we can then excute at a later point. How to define a function function functionName() { //code } Argument Inputs that functions accept Syntax //argument === parameter function functionName(parameter){ //code } Functions with multiple arguments function functionName(param1, paramN){ //code } //.. 2020. 12. 3. [TIL] 20201202 Repeating Stuff with Loops Loops Allows to repeat code There are multiple types for loop while loop for ... of loop for ... in loop for Loop Syntax for ([initialExpression]; [condition]; [incrementExpression]){ //code } Example for (let i=1; i 2020. 12. 2. [TIL] 20201201 JavaScript Object Literals Objects Collections of properties Property is a key-value pair Rather than accessing data using an index, we use custom keys. Creating Object Literals Syntax const obj = {key : value} Example const human = { firstName : 'Jiwan', lastName : 'Kim' } Accessing Data Out of Objects Syntax obj["key"] obj.key Examples human["firstName"] //Jiwan human.lastName //Kim Keys All keys are converted to string.. 2020. 12. 1. [TIL] 20201130 JavaScript Arrays Data Structure A collection of data Arrays Ordered collections of values. Examples List of comments on IG post Collection of levels in a game Songs in a playlist Ways to Create Arrays const arr = []; const strArray = ["orange", "red"]; const numArray = [1, 2, 3]; const mixedArray = [true, "orange", 32]; Array Random Access Array Index Each element has a corresponding index, counting starts at 0... 2020. 12. 1. [TIL] 20201127 JavaScript Decision making Decision Making with Code Boolean Logic : Having different outcomes depending on different criteria. Comparison Operators Has true or false output. > : greater than = : greater than or equal to 2020. 11. 27. [TIL] 20201126 JavaScript Strings and More String Represents text Must be wrapped in quotes, either double or single. Warning : 23 ≠ '23' let username = "Jiwan"; let username = 'Jiwan'; let username = 'Jiwan"; //error String Index Strings are indexed. Each character has a corresponding index (positional number) Index starts at 0. String Length Length of index. (Index of last letter) + 1 = Length String Concatenation Put multiple strings .. 2020. 11. 27. [TIL] 20201125 JavaScript Basics Primitive Types Number String Boolean Null Undefined Symbol BigInt JavaScript Numbers JavaScript has ONE number type Math operations add : + subtraction : - multiplication : * division : / modulo(remainder operator) : % exponentiation : ** NaN "Not a Number" NaN is a numeric value that represents something that is not a number. ex) 0/0, 1+NaN Variables Labels for values Basic Syntax let x = valu.. 2020. 11. 25. 이전 1 2 3 다음
