JavaScript15 [TIL] 20201214 Prototypes, Classes & OOP Object Prototypes The mechanism by which JavaScript Object inherit features from one another. A template object Typically contains properties and methods. __proto__ : reference to the object prototype Obj.prototype : The real object prototype. Factory Functions A function that creates an object like a template. If the object contains all the properties that a function needs as arguments, it's be.. 2020. 12. 14. [TIL] 20201212 AJAX and API's AJAX Asynchronous Javascript And Xml Nowadays most APIs use JSON instead of XML Creates applications where we can fatch, load, and send data without refreshing the whole page. API Application Programming Interface Web API : Web-based Interfaces. HTTP based. Can retrieve the information we need. JSON JavaScript Object Notation A format for sending data Has key-value pair Can't store JavaScript va.. 2020. 12. 13. [TIL] 20201211 Async JavaScript The Call Stack Definition The mechanism the JavaScript interpreter uses to keep track of its place in a script that calls multiple functions. How JavaScript 'knows' what function is currently being run and what functions are called from within that function, etc. Some sort of "bookmark" How it works When a script calls a function, the interpreter adds it to the call stack and then starts carryin.. 2020. 12. 13. [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. 이전 1 2 다음