Hello~
"); + ``` + +- insertAdjacentText() + +- remove() + + +- requestFullScreen() +- scroll() +- scrollBy() +- scrollIntoView() +- scrollTo() + +## 클래스 + +```javascript +let classes = document.querySelector('div').classList; +classes.add("myclass", "myclass-2"); +classes.remove("myclass-2"); +classes.replace("myclass", "myclass-1"); +classes.toggle("hidden"); +``` + +## 스타일 + +```javascript +let el = document.querySelector('p'); +el.style.color = "red"; +``` + +## 속성 + +```javascript +let el = document.querySelector('a'); +el.getAttribute("href"); +el.setAttribute("href", "..."); +el.removeAttribute("href"); +``` + +## 자식 요소 추가 + +```javascript +let el = document.querySelector('div'); + +let p = document.createElement("p"); +let text = document.createTextNode("Hello"); +p.appendChild(text); + +el.appendChild(p); +``` + +```javascript +el.innerHTML = "Hello~
"; +el.insertAdjacentHTML("beforeend", "Hello~
"); +``` \ No newline at end of file diff --git a/Writerside/topics/Flow-Control.md b/Writerside/topics/Flow-Control.md new file mode 100644 index 0000000..114338e --- /dev/null +++ b/Writerside/topics/Flow-Control.md @@ -0,0 +1,134 @@ +# 흐름 제어 + +## 조건문 + +자바스크립트의 조건문은 자바나 C의 조건문과 같습니다. + +```javascript +if (조건식) { ... } +``` + +```javascript +if (조건식) { ... } else { ... } +``` + +```javascript +if (조건식) { ... } else if (조건식) { ... } else { ... } +``` + +자바스크립트에서는 다음의 값은 거짓으로 평가되며 그 외에는 참으로 평가됩니다. + +- false + +- undefined + +- null + +- 0 + +- NaN + +- "" + + 빈 문자열. + + +Boolean 객체의 값이 false인 경우라도, 조건식에서는 true로 평가됩니다. 주의하세요. + +```javascript +let a = new Boolean(false); + +if (a) { + console.log("yes"); // 여기가 실행됩니다. +} else { + console.log("no"); +} +``` + +```javascript +switch (표현식) { case: ... break; default: ... break; } +``` + +## 반복문 + +기본적인 반복문은 C 스타일의 반복문과 같습니다. + +```javascript +for (초기식;조건식;증감식) { ... } +``` + +```javascript +while (조건식) { ... } +``` + +```javascript +do { ... } while (조건식); +``` + +```javascript +break; +``` + +```javascript +continue; +``` + +### for … in + +객체의 속성을 통해서 반복합니다. + +```javascript +let charlie = { + age: 14, + name: "Charlie" +}; +for (let prop in charlie) { + console.log(prop + " = " + charlie[prop]); +} +``` + +### for … of + +배열 등 반복 가능한 객체를 반복합니다. + +```javascript +let array = [1, 2, 3, 4, 5]; +for (let item of array) { + console.log(item); +} +``` + +## 예외 처리 + +예외 처리 구문은 자바의 예외 처리 구문과 비슷합니다. + +```javascript +try { ... } catch(e) { ... } +try { ... } catch(e) { ... } finally { ... } +``` + +try 블록을 실행하는 도중 예외가 발생하면, catch 블록으로 넘어갑니다. + +catch문에서는 throw 구문에서 던진 객체를 받을 수 있습니다. + +try 블록이 성공하든 실패하든 finally 블록은 무조건 실행됩니다. 만일, finally 블록에서 return으로 값을 반환하는 경우에, try 블록이나 catch 블록의 return 값은 무시됩니다. + +```javascript +throw 표현식; +``` + +예외를 발생시킬 때 사용합니다. 객체, 숫자, 문자열 등 무엇이든 던질 수 있습니다. + +```javascript +function fun1() { + throw { code: 1, message: "Error" }; +} + +try { + fun1(); +} catch (e) { + console.warn(e.message); +} finally { + console.log("The End"); +} +``` \ No newline at end of file diff --git a/Writerside/topics/Function.md b/Writerside/topics/Function.md new file mode 100644 index 0000000..5ecb542 --- /dev/null +++ b/Writerside/topics/Function.md @@ -0,0 +1,235 @@ +# 함수 + +자바스크립트의 함수 정의는 C 스타일의 함수 정의와 유사합니다. 반환 자료형이 없으며, function이라는 키워드를 사용합니다. + +매개 변수가 기본자료형인 경우에는 값이 전달됩니다. 그러나, 매개 변수가 배열이나 객체인 경우에는 그 속성의 변화가 함수 외부에서도 유효합니다. + +모든 자바스크립트 함수는 값을 반환합니다. return 문을 통해 명시적으로 값을 반환하지 않는 함수는 undefined를 반환합니다. + +```javascript +function myFunction(param) { + return param * 2; +} +``` + +## 함수 표현식 + +자바스크립트에서는 함수 또한 객체이기 때문에 다음과 같은 표현도 가능합니다. + +```javascript +let myFunction = function (param) { + return param * 2; +}; +``` + +함수 표현식을 사용하면 함수를 동적으로 만들 수 있습니다. + +```javascript +let myFunction; +if (a > 0) { + myFunction = function (param) { + return param * 2; + }; +} else { + myFunction = function (param) { + return param * 4; + }; +} +``` + +## 중첩된 함수 + +함수 안에서 또 다른 함수를 정의하는 것도 가능합니다. 내부 함수는 외부 함수 안에서만 접근할 수 있습니다. 내부 함수에서는 외부 함수의 변수와 매개 변수에 접근할 수 있습니다. + +```javascript +function addSquare(a, b) { + function square(x) { + return x * x; + } + return square(a) + square(b); +} +console.log(addSquare(2, 3)); // 13 +``` + +```javascript +function outside(x) { + function inside(y) { + return x + y; + } + return inside; +} + +let fnInside = outside(3); +console.log(fnInside(5)); // 8 + +console.log(outside(3)(5)); // 8 +``` + +위와 같이 난해한 문법도 가능합니다. + +## 클로져 + +자바스크립트의 함수는 중첩될 수 있다는 위의 특징을 활용하면, 다음과 같은 코드도 만들어 집니다. + +```javascript +let Person = function (name) { + let age; + + return { + getAge: function () { + return age; + }, + setAge: function (newAge) { + age = newAge; + }, + getName: function () { + return name; + }, + setName: function (newName) { + name = newName; + } + } +}; + +let charlie = Person("charlie"); +charlie.setAge(14); +charlie.setName("Charlie"); + +console.log(charlie.getName()); +``` + +## 매개변수 + +함수에 전달되는 매개 변수는 매개 변수 이름을 직접 참조할 수도 있지만, ```arguments```를 통해서 배열과 같은 방식으로도 처리할 수 있습니다. + +```javascript +function func1(param1, param2) { + for (let i = 0; i < arguments.length; i++) { + console.log(arguments[i]); + } +} + +func1("A", "B"); +``` + +이러한 특징을 활용하면, 임의 길이 매개 변수를 처리할 수 있습니다. + +```javascript +function add() { // 함수 정의 부분의 매개 변수 항복은 별 의미가 없어집니다. + let sum = 0; + for (let i of arguments) { + sum += i; + } + return sum; +} + +console.log(add(1, 2, 3, 4, 5)); +``` + +### 매개 변수의 기본값 + +함수 호출시에 생략된 매개 변수는 기본값인 undefined를 갖습니다. + +```javascript +function myFunction(a, b) { + console.log("a = " + a); + console.log("b = " + b); +} + +myFunction(1); +/* + a = 1 + b = undefined +*/ +``` + +ECMAScript 2015에서는 매개 변수의 기본값을 지정할 수 있습니다. + +```javascript +function myFunction(a, b = 3) { + console.log("a = " + a); + console.log("b = " + b); +} + +myFunction(1); // 생략된 매개 변수 b는 기본값이 3이 됩니다. +``` + +### 나머지 매개 변수 + +ECMAScript 2015에서는 임의 길이 매개 변수 기능이 추가되었습니다. 매개 변수 이름 앞에 ```…```을 붙입니다. + +```javascript +function sum(...args) { + let sum = 0; + args.forEach(function (val) { + sum += val; + }); + return sum; +} + +console.log(sum(1, 2, 3, 4, 5)); +``` + +## 화살표 함수 + +위의 코드는 다음과 같이 짧게 줄일 수 있습니다. + +```javascript +function sum(...args) { + let sum = 0; + args.forEach((val) => sum += val); + return sum; +} +``` + +## 미리 정의된 전역 함수 + +```javasc +eval() +``` + +문자열로 표현된 자바스크립트 코드를 실행합니다. + +```javascript +inFinite() +``` + +매개 변수로 전달된 값이 유한한지 확인합니다. + +```javascript +isNaN() +``` + +NaN인지 확인합니다. Number.isNan() 또는 typeof를 대신 사용하는 것이 좋습니다. + +```javascript +parseFloat() +``` + +문자열을 실수로 바꿉니다. + +```javascript +parseInt() +``` + +문자열을 정수로 바꿉니다. + +```javascript +encodeURI() +encodeURIComponent() +decodeURI() +decodeURIComponent() +``` + +URI를 UTF-8 이스케잎 문자로 (또는 그 반대로) 변환합니다. + +```javascript +let uri = "https://www.elex-project.com/test?a=몰라&b=알수가없어"; +console.log(encodeURI(uri)); +console.log(encodeURIComponent(uri)); +/* +https://www.elex-project.com/test?a=%EB%AA%B0%EB%9D%BC&b=%EC%95%8C%EC%88%98%EA%B0%80%EC%97%86%EC%96%B4 + +https%3A%2F%2Fwww.elex-project.com%2Ftest%3Fa%3D%EB%AA%B0%EB%9D%BC%26b%3D%EC%95%8C%EC%88%98%EA%B0%80%EC%97%86%EC%96%B4 +*/ +``` \ No newline at end of file diff --git a/Writerside/topics/Iterator.md b/Writerside/topics/Iterator.md new file mode 100644 index 0000000..2c654f3 --- /dev/null +++ b/Writerside/topics/Iterator.md @@ -0,0 +1,23 @@ +# Iterator + +```javascript +function* myIterator(start = 0, end = Infinity, step = 1) { + let n = 0; + for (let i = start; i < end; i += step) { + n++; + yield i; + } + return n; +} + +for (let item of myIterator(0, 10)) { + console.log(item) +} + +let it = myIterator(0, 10); +let item = it.next(); +while (!item.done) { + console.log(item.value); + item = it.next(); +} +``` \ No newline at end of file diff --git a/Writerside/topics/JS-Cheet-Sheet.md b/Writerside/topics/JS-Cheet-Sheet.md new file mode 100644 index 0000000..8c85918 --- /dev/null +++ b/Writerside/topics/JS-Cheet-Sheet.md @@ -0,0 +1,555 @@ +# JavaScript Cheatsheet + +## Table of Contents + +[Basics](#basics) +[Arrays & Objects](#arrays--objects) +[Functions](#functions) +[Recursive Functions](#recursive-functions) +[Methods](#methods) +[Predefined Functions/Methods](#predefined-functionsmethods) + +- [On Strings](#on-strings) + +- [On Arrays](#on-arrays) + +- [Nodes](#nodes) + [Custom Constructors / Classes](#custom-constructors--classes) + [Math](#math) + [Loops](#loops) + [Logical Operators](#logical-operators) + +- [Conditional Operator](#conditional-operator) + [User Input](#user-input) + [JSON](#json) + [ES6](#es6) + [Tricks](#tricks) + +- [Get Password Combinations](#get-password-combinations) + + ## Basics + + `&&`: and + `||`: or + `!`: not + `1`: true + `0`: false + **increments:** + i++ , i-- , i += x , i -= x + **isNaN('berry');** –– true –– returns true when not a number + **isNaN(42);** –– false + x**.length** –– Returns the length of a string or the amount of items in a variable + **typeof** variable –– returns object, number, string + **Z < a** –– true, uppercase < lowercase + + ```javascript + // In browsers, the global scope object is stored in the window variable: + var myVar = 10; // global variable + console.log("myVar" in window); // true + console.log(window.myVar); // 10 + ``` + + ## Arrays & Objects: + + ```javascript + var newArray = []; // could do variable = [1,2,3] as well + newArray.push('hello'); + newArray[0]; // equals ‘hello; + var newObject = { + key: value, + key: value + } // object literal notation + // Each piece of information we include in an object is known as a property. Each Property has a Value + var myObj = new Object(); // object constructor + myObj["key"] = "value"; // or myObj.key = "value"; + delete newObject.key; // removes the key (very uncommon) + console.log("key" in anObject); // "in" returns a Boolean value that indicates whether that object has that property + myObj.hasOwnProperty('name') // returns true if myObj has a name property + ``` + + ## Functions: + + ```javascript + var newFunction = function(argument,argument) { }; // or function newFunction(){} = function declarations = not part of the regular top-to-bottom flow = only use this form in the outermost block of a function or program. + newFunction(x,y); + // below are 3 new things for functions in JavaScript 6 (experimental for now) + argument => argument + 1; // is equal to function(argument){ return argument + 1; }; + function(x = 7, y = 42) { } // to set default values + function(x, y, ...a) { } // ...a will store all the + var newFunction = function() { return "hi" }; + newFunction // returns the function while newFunction() would return the functions outcome. + ``` + + ## Recursive Functions + + ```javascript + // Functions calling themselves (create a kindof finite loop) + function power(base, exponent) { + if (exponent == 0) + return 1; + else + return base * power(base, exponent - 1); // don’t forget to return your recursion else, you’ll get an undefined. + } + console.log(power(2, 3)); + // → 8 + ``` + + Simplest example: + + ```javascript + (function loop(base, i){ + // do something + if(i>0) return loop(base, i-1); // loop + })(["a", "b"], length) + ``` + + ```javascript + /* + * Whenever a function is called, a special variable named arguments is added to the environment in which the function body runs. + */ + function argumentCounter() { + console.log("You gave me", arguments.length, "arguments."); + } + argumentCounter("Straw man", "Tautology", "Ad hominem"); // You gave me 3 arguments. + ``` + + ## Methods: + + ```javascript + var bob = new Object(); + bob.age = 17; // or: bob["age"] = 17; this way you can use variables as well: bob[variable]; + bob.setAge = function (newAge){ bob.age = newAge; }; + bob.setAge(5); // would set the Age Property of bob to 5 using the respective function + // here we define our method using "this", before we even introduce bob + var setAge = function (newAge) { this.age = newAge; }; + var bob = { age: 25, setAge: setAge } + bob.setAge(50); + // writing an object constructor or object literal notation – both work the same + function someObject() { + this.stuff = "bla" + this.someMethod = function() { console.log(this.stuff) }; + } + // Associate methods to properties + var pile = { + elements: ["eggshell", "orange peel", "worm"], + get height() { + return this.elements.length; + }, + set height(value) { + console.log("Ignoring attempt to set height to", value); + } + }; + // the get and set notation for properties allows you to specify a function to be run when the property is read or written + console.log(pile.height); // → 3 + pile.height = 100; // → Ignoring attempt to set height to 100 + // You can also add such a property to an existing object, for example a prototype, using the Object.defineProperty function + function Pile() { + this.elements = ["eggshell", "orange peel", "worm"]; + } + Object.defineProperty(Pile.prototype, "height", { + get: function() { return this.elements.length; } + }); + var test = new Pile(); + console.log(test.height); //-> 3 + ``` + + ## Predefined Functions/Methods + + ### On Strings + + ```javascript + /* + * toUpperCase, toLowerCase, trim, charAt + */ + "Doh".toUpperCase() // "DOH" + "Doh".toLowerCase() // "doh" + " okay \n ".trim() // "okay" + "bla".charAt(0) // b –– identical to "bla"[0] + /* + * Repeat + */ + '-'.repeat(2); //-> '--' (not supported by IE and Opera) + ``` + + ### On Arrays + + ```javascript + /* + * Push, Pop, shift and unshift + */ + var mack = []; + mack.push("Mack"); + mack.push("the", "Knife"); + mack; // → ["Mack", "the", "Knife"] + mack.join(" "); // → Mack the Knife + mack.pop(); // → Knife + mack; // → ["Mack", "the"] + // push and pop add or remove elements at the end of an array + // shift and unshift add or remove elements at the start of an array + /* + * indexOf, lastIndexOf + */ + [1, 2, 3, 2, 1].indexOf(2); // → 1 + [1, 2, 3, 2, 1].lastIndexOf(2); // → 3 + /* + * slice & concat + */ + [0, 1, 2, 3, 4].slice(2, 4); // → [2, 3] (positions 2,4 – 2 included 4 excluded) + [0, 1, 2, 3, 4].slice(2); // → [2, 3, 4] + ["a", "b"].concat("c", 1, "d") // → ["a", "b", "c", 1, "d"] + /* + * filter + */ + function isBigEnough(value) { return value >= 10; } + var filtered = [12, 5, 8, 130, 44].filter(isBigEnough); // → filtered is [12, 130, 44] + /* + * map + */ + var numbers = [1, 4, 9]; + var roots = numbers.map(Math.sqrt); // roots is now [1, 2, 3] (1*1=1, 2*2=4, 3*3=9), numbers is still [1, 4, 9] + /* + * reduce + */ + var total = [0, 1, 2, 3].reduce(function(a, b) { return a + b; }); // total == 6 + /* + * forEach + */ + function logArrayElements(element, index, array) { console.log('a[' + index + '] = ' + element); } + [2, 5, , 9].forEach(logArrayElements); // → a[0] = 2 // → a[1] = 5 // → a[3] = 9 + // Notice that index 2 is skipped since there is no item at that position in the array. + /* + * every & some + */ + function isBigEnough(element, index, array) { return element >= 10; } + [12, 5, 8, 130, 44].every(isBigEnough); // false + [12, 5, 8, 130, 44].some(isBigEnough); // true + ``` + + ## Nodes + + ```javascript + /* + * Select children of an element with content + * given: table > tr > td + td + */ + var t = document.querySelector('#table'); + var td = t.content.querySelectorAll("td"); // nodelist [td, td] + // note: without .content it would not be possible to select the childs. + /* + * clone nodes with importNode + * see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template for a good example + */ + var clone = document.importNode(externalNode, deep); + var tb = document.getElementsByTagName("tbody"); + var clone = document.importNode(t.content, true); // import/clone the content of the table + tb[0].appendChild(clone); // append it to tbody + ``` + + ## Custom Constructors / Classes: + + ```javascript + // new Object(); is a predefined constructor by js that creates an empty object, we can create our own class constructors like so: + function Person(name,age) { + this.name = name; + this.age = age; + } + var bob = new Person("Bob Smith", 30); // creates an object/class Person with the keys/properties specified in our constructor + // here is where a constructor notation makes sence + function Dog (breed) { + this.breed = breed; + }; + var buddy = new Dog("golden Retriever"); + Dog.prototype.bark = function() { console.log("Woof"); }; // prototype adds that method to the constructor. Instead of buddy.bark = ... + buddy.bark(); + var snoopy = new Dog("Beagle"); + snoopy.bark(); // is also able to bark. + function Penguin(breed) { + this.breed = breed; + var priv = "Private Variable"; // a variable that is only accessible within the constructor + this.getPriv = function() { return priv; }; // to be able to access a private variable from outside + } + Penguin.prototype = new Dog(); // Penguins will inherit from Dog and also be able to bark. A Prototype Chain. + var penguin = new Penguin("penguin"); // create an instance of the Penguin class. + penguin.bark(); // Woof + /* + * defineProperty & hasOwnProperty + */ + Object.prototype.nonsense = "hi"; // hi will be an enumerable property, hence show up in any for .. in .. loop on any object. To prevent that use defineProperty + for (var name in map) console.log(name); // → pizza // → touched tree // → nonsense + delete Object.prototype.nonsense; + Object.defineProperty(Object.prototype, "hiddenNonsense", {enumerable: false, value: "hi"}); + for (var name in map) console.log(name); // → pizza // → touched tree + console.log(map.hiddenNonsense); // → hi + // alternatively: + for (var name in map) { + if (map.hasOwnProperty(name)) { + // ... this is an own property + } + } + ``` + + ## Math: + + ```javascript + // returns the largest of 2 numbers + Math.max(10, 20) //-> 20 + // returns the largest integer less than or equal to a given number + Math.floor( 45.95); //-> 45 + /* + * Randoms + */ + // random Number between 0 and 1 but never 0 nor 1 + Math.random() //-> i.e. 0.73452221 + // *x sets the width and +y the range of the randomness + Math.floor(Math.random() * 5 + 1) // Random Number between 1-5 + // Returns a random integer between min (included) and max (included) + // Using Math.round() will give you a non-uniform distribution! + function getRandomIntInclusive(min, max) { + return Math.floor(Math.random() * (max - min + 1)) + min; + } + /* + * .sqrt to calculate distances + */ + // Pythagorean theorem says that the square of the distance we are looking for is equal to the square of the x-coordinate plus the square of the y-coordinate thus **√(a2 + b2)** to calculate the distance to a point c: + Math.sqrt(a * a + b * b); + // or less chic: Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2)); + ``` + + ## Loops: + + ```javascript + for(var i = 0; i < 6; i++){ }; // for a number of time + for(var p in obj){ } // for in iterates a specified variable p over all the enumerable properties of an object + while(true){ }; // while a condition is true + do{ }while(true); // does x while a condition is true (runs x at least once) + break; // terminate a loop, switch, or in conjunction with a label statement. + ["a", "b", "c"].forEach(function(entry) { console.log(entry); }); //although move convenient, forEach is ~30% slower than a normal for loop + ``` + + ## Logical Operators + + ```javascript + if(true){ /* */ } else if (true){ /* */ } else { /* */ } + ``` + + ```javascript + switch(variable){ case 'option1': /* */ break; case 'option2': /* */ break; default: /* */ } + ``` + + ### Conditional Operator + + ```javascript + console.log(true ? 1 : 2); // → 1 + console.log(false ? 1 : 2); // → 2 + // The value before ? “picks” which of the other two values will come out. When true, the first value is chosen, and when false, the value on the right comes out. + ``` + + ## User Input + + ```javascript + var name = prompt("who're you?"); + ``` + + ## JSON + + ```javascript + // JSON.stringify takes a JavaScript value and returns a JSON-encoded string + var string = JSON.stringify({name: "X", born: 1980}); + console.log(string); // → {"name":"X","born":1980} + // JSON.parse takes such a string and converts it to the value it encodes + console.log(JSON.parse(string).born); // → 1980 + ``` + + ## ES6 + + ```javascript + /* + * Using glob variables in new objects + */ + var foo = 2; + var obj = { bar: 1, foo } //-> obj.bar = 1 -> obj.foo = 2 + ``` + + ### Destructuring + + ```javascript + var foo = { + bar: 1, + baz: 2 + }; + var { bar, baz } = foo; + console.log(bar); //-> 1 + console.log(baz); //-> 2 // instead of foo.bar / foo.baz + // also with arrays: + var array = [1, 2]; + var [ a, b ] = array; + console.log(a,b) //-> 1 2 + // very nice on functions: + // usually you would have an opts value but now + // you can destructure the incoming object directly in the function + // also note how we changed the name of weight to just w + function calcBmi({ weight: w, height, max, callback }){ + var bmi = w / Math.pow(height, 2); + if(bmi > max) { console.log('sorry you are obese') } + if(callback) { callback(bmi) } // instead of if objs.callback + } + // by passing objects + calcBmi({ weight, height, max: 25 }); + // you can now omit a data and it will just be passed as 'undefined', here we leave out max. + // also the order does not matter anymore! + calcBmi({ callback: function() {}, weight, height }); + ``` + + ### Default Arguments + + ```javascript + function someThing(value = 12){ + // stuff + } + ``` + + ### Template Strings + + ```javascript + var name = "will"; + var thing = "party"; + // old way + var greet = "hi, my name is" + name + "\n and I like to" + thing + "!"; + // new way. Note the inline variables and how to break lines. + var greet = `hi, my name is ${name} + and I like to ${thing} !`; + ``` + + ### Scoping + + ```javascript + // let is the new var + // define block variables (only used within blocks) + if () { let b = 2; } + console.log(b); // undefined + // use const as default and change it to let only when you have to change the value + // const is also block scoped but unchangable + const a = 1; + a = 2; //-> error + ``` + + ### Classes + + ```javascript + // old: + function Parent() { /*constructor*/ } + Parent.prototype.foo = function() {}; // to add a function to the constructor + var parent = new Parent(); + parent.foo(); + // new + class Parent { + // in ES7 I could also add static properties here, like this: + age = 30; + constructor() { + } + foo() { + } + static bar() { + } + } + var parent = new Parent(); + parent.foo(); + parent.age; //-> 30 + Parent.bar(); + class Child extents Parent { + constructor() { + super() // will call the constructor of Parent + } + baz() { + } + } + var child = new Child(); + child.baz(); // works + child.foo(); // works + ``` + + ### Arrow Functions + + ```javascript + // basics + // old + var foo = function(a, b) { return a + b; } + // new + var foo = (a, b) => { return a + b; } + // implicit returns (only on one liners): + do.something((a, b) => a + b); + // also without parenthesis when you only have one argument + do.something(a => a + 1); + [0,1,2].map(val => val+1); //-> [1,2,3] + // it also binds the this + var module = { + age: 30, + foo: function() { + setTimeout(() => { // automatically bind the previous this to the function + console.log(this.age); // still works + }, 100); + } + }; + // note that it will overwrite i.e. jQuerys this value. + ``` + + ### Modules + + ```javascript + // old + module.exports.foo = function () {}; + module.exports.bar = function () {}; + // another file: + var myModule = require("myModule"); + var foo = myModule.foo; + // new + export function foo() { }; + export function bar() { }; + export var x = 3; + import { foo, bar, x as test } from "myModule"; + console.log(test) //-> 3 + // or whole modules + export default {}; + import myModule from "myModule"; + ``` + + ### Generator Functions + + ```javascript + async function() { + var friends = await $.get("http://bla.com/friends") + console.log(friends); + } // returns one promise that is denible + ``` + + ## Tricks + + ### Get password combinations + + ```javascript + var passwords = function(chars, length){ + var chars = chars.split(""); + var index=[]; + (function loop(base, i){ + for(var k=0; k< chars.length; k++) { + if(i>1) loop(base+chars[k], i-1); + else index.push(base+chars[k]); + } + })("", length) + return index; + } + var possible = "0123456789"; + var length = 4 + var possibilities = passwords(possible, length); + ``` + + Use them + + ```javascript + var length = possibilities.length; + (function loop(base, i){ + if(i < 0) return; + let n = base[i]; i -= 1; + setTimeout(() => { return loop(base, i) }); + })(possibilities, length); + ``` \ No newline at end of file diff --git a/Writerside/topics/Module.md b/Writerside/topics/Module.md new file mode 100644 index 0000000..296ca8f --- /dev/null +++ b/Writerside/topics/Module.md @@ -0,0 +1,41 @@ +# 모듈 + +import와 export 키워드는 모듈에서만 사용할 수 있습니다. + +## 모듈로 내보내기 + +모듈로 내보내려는 항목 앞에 export 키워드를 붙여 줍니다. + +```javascript +export const PI = 3.141592; + +export function hello() { + return "Hello"; +}; +``` + +또는, 모듈 파일의 맨 끝에 export 키워드로 내보낼 항목들을 나열합니다. + +```javascript +const PI = 3.141592; + +function hello() { + return "Hello"; +}; + +export { + PI, hello +}; +``` + +## 모듈 가져오기 + +```javascript +import { PI, hello } from "./mymodule.js"; +``` + +## HTML에서 모듈 선언 + +```html + +``` \ No newline at end of file diff --git a/Writerside/topics/Number.md b/Writerside/topics/Number.md new file mode 100644 index 0000000..fa936e9 --- /dev/null +++ b/Writerside/topics/Number.md @@ -0,0 +1,94 @@ +# 숫자 + +자바스크립트에서 모든 숫자는 8바이트 배정밀도 부동소수형으로 저장됩니다. 숫자에는 ```+Infinity```, ```-Infinity```, ```NaN``` 3개의 특수 값이 포함됩니다. + +## Number + +```javascript +Number.MAX_VALUE +Number.MIN_VALUE +Number.NaN +Number.NEGATIVE_INFINITY +Number.POSITIVE_INFINITY +Number.EPSILON +Number.MIN_SAFE_INTEGER +Number.MAX_SAFE_INTEGER +``` + +```javascript +Number.parseFloat() +Number.parseInt() +Number.isFinite() +Number.isInteger() +Number.isNaN() +Number.isSafeInteger() +``` + +```javascript +toExponential() +``` + +지수 표기법으로 나타낸 문자열을 반환합니다. 매개 변수에는 소수점 이하 자릿수를 전달합니다. + +```javascript +toFixed() +``` + +고정 소수점 방식으로 표현된 문자열을 반환합니다. 매개 변수에는 소수점 이하 자릿수를 전달하며, 기본 값은 0입니다. + +```javascript +toPrecision() +``` + +유효 자릿수에서 반올림한 문자열을 반환합니다. 매개 변수에는 유효자릿수를 전달합니다. + +## Math + +```javascript +Math.PI +``` + +```javascript +/* 절대값 */ +Math.abs() +/* 삼각함수 */ +Math.sin() +Math.cos() +Math.tan() +Math.asin() +Math.acos() +Math.atan() +Math.atan2() +Math.sinh() +Math.cosh() +Math.tanh() +Math.asinh() +Math.acosh() +Math.atanh() +/* 제곱근 */ +Math.pow(a, n) // a의 n승 +Math.sqrt(a) // 제곱근 +Math.cbrt(a) // 세제곱근 +/* 지수와 로그 */ +Math.exp() +Math.expm1() +Math.log10() +Math.log1p() +Math.log2() +/* 올림과 내림 */ +Math.floor() +Math.ceil() +Math.round() +Math.fround() +Math.trunc() +/* 최소, 최대 */ +Math.min(a, ...) +Math.max(a, ...) +/* 랜덤 */ +Math.random() // 0 ~ 1 사이의 값을 반환 +/* 그 외 */ +Math.hypot(a, ...) +Math.sign(a) // 어떤 수의 부호를 반환. 1, 0, -0, -1, NaN 중 하나를 반환. +Math.clz32(a) // 숫자를 32비트 이진 표현으로 변환 후 앞 쪽의 0의 갯수를 반환 +Math.imul(a, b) // 두 숫자의 32비트 정수 곱셈. ECMAScript2015에서 추가되었습니다. +``` \ No newline at end of file diff --git a/Writerside/topics/Object.md b/Writerside/topics/Object.md new file mode 100644 index 0000000..ae05554 --- /dev/null +++ b/Writerside/topics/Object.md @@ -0,0 +1,134 @@ +# 객체 + +```javascript +let obj = {}; // 또는 +let obj = new Object(); + +obj.age = 14; +obj.name = "Charlie"; + +console.log(obj.name); // C언어의 구조체 스타일 +console.log(obj['name']); // PHP의 연관 배열 스타일 +``` + +## 객체의 프로퍼티 나열 + +```javascript +for (let key in obj) { + console.log(key); +} + +for (let key of Object.keys(obj)) { + console.log(key); +} + +for (let key of Object.getOwnPropertyNames(obj)) { + console.log(key); +} +``` + +## 생성자 함수 + +```javascript +function Person(name, age) { + this.name = name; + this.age = age; +} + +let charlie = new Person("Charlie", 14); +``` + +### Object.create() + +```javascript +let Point = { + x: 0, + y: 0, + toString: function () { + return "(" + this.x + ", " + this.y + ")"; + } +}; +let point1 = Object.create(Point); + +console.log(point1.toString()); +``` + +## 프로토타입을 통한 프로퍼티 정의 + +```prototype```을 통해서 프로퍼티를 추가하면, 하나의 인스턴스에만 추가된는 것이 아니라 해당 객체의 모든 인스턴스에 프로퍼티가 추가된다. + +```javascript +Person.prototype.gender = "Male"; +``` + +## 프로퍼티의 삭제 + +상속받지 않은 속성은 delete 연산자로 제거할 수 있습니다. + +## 프로토타입 기반 + +자바나 C++과 같은 클래스 기반의 언어와는 달리 자바스크립트는 프로토타입 기반의 언어입니다. 프로토타입 기반 언어의 특징 상 클래스와 인스턴스의 구분이 모호해집니다. + +```javascript +function Animal(name) { + this.name = name; +} + +function Dog(name) { // Animal을 상속 + Animal.call(this, name); + this.bark = function () { + console.log("멍멍"); + }; +} +Dog.prototype = Object.create(Animal.prototype); + + +let snoopy = new Dog("Snoopy"); +console.log(snoopy.name); +snoopy.bark(); +``` + +## 객체 속성의 해체 + +```javascript +let person = { name: "Charlie", age: 14 }; + +let { name, age } = person; + +console.log(name); +console.log(age); +``` + +# 클래스 + +난해한 프로토타입 기반의 객체 대신 클래스 기반으로 클래스를 정의할 수도 있습니다. + +```javascript +class Animal { + constructor(name) { // 생성자 + this.name = name; + } + + static someStaticMethod() { } +} + +class Dog extends Animal { // 확장 + constructor(name) { + super(name); // 부모 생성자 호출 + } + +} + +let snoopy = new Dog("Snoopy"); + +console.log(snoopy.name); +``` + +# JSON + +자바스크립트 객체와 문자열을 서로 변환할 수 있습니다. + +```javascript +JSON.parse(str) +JSON.stringfy(obj) +``` \ No newline at end of file diff --git a/Writerside/topics/Operator.md b/Writerside/topics/Operator.md new file mode 100644 index 0000000..2279669 --- /dev/null +++ b/Writerside/topics/Operator.md @@ -0,0 +1,96 @@ +# 연산자 + +대부분 자바의 연산자와 같습니다. + +## 비교 연산자 + +- 동등 (==) + + 서로 값이 참입니다. + +- 부등 (!=) + + 서로 다르면 참입니다. + +- 일치 (===) + + 서로 값이 같고 자료형도 같으면 참입니다. + +- 불일치 (!==) + + 서로 값이 다르거나 자료형이 다르면 참입니다. + + +```javascript +3 == "3" // true +3 === "3" // false +``` + +## 숫자화 연산자 (+) + +피연산자를 숫자로 변환합니다. + +``` ++"3" // 3 ++true // 1. +``` + +## typeof + +typeof 연산자를 사용하면 변수의 자료형을 알 수 있습니다. + +```javascript +let a = function () { }; +let b = "Hello"; +let c = 1; +let d = [1, 2, 3]; +let e = {}; +let f; +let g = true; +let h = null; + +console.log(typeof a); // function +console.log(typeof b); // string +console.log(typeof c); // number +console.log(typeof d); // object. 배열은 array일 것 같지만 object입니다. +console.log(typeof e); // object +console.log(typeof f); // undefined +console.log(typeof g); // boolean +console.log(typeof h); // object. null은 object입니다. +``` + +## instanceof + +객체의 형태를 확인할 때 사용합니다. + +```javascript +let a = new String("Hello"); +let b = "Hello"; +console.log((a instanceof String) ? "yes" : "no"); // yes +console.log((b instanceof String) ? "yes" : "no"); // no +``` + +## in + +객체에 어떤 속성이 있는 경우에 true를 반환합니다. + +```javascript +let array = ["a", "b", "c"]; +console.log((1 in array) ? "yes" : "no"); // yes +console.log(("b" in array) ? "yes" : "no"); // no. 배열의 경우 인덱스를 사용해야 합니다. +console.log(("length" in array) ? "yes" : "no"); // yes. Array객체에 length메서드가 있으므로. + +let obj = { a: "A", b: "B", c: "C" }; +console.log(("b" in obj) ? "yes" : "no"); // yes + +console.log(("PI" in Math) ? "yes" : "no"); // yes. Math객체에 PI가 있으므로 +``` + +## void + +void 연산자는 식을 평가하지만, 값을 반환하고 싶지 않을 때 사용합니다. + +```html + + +``` \ No newline at end of file diff --git a/Writerside/topics/Promise.md b/Writerside/topics/Promise.md new file mode 100644 index 0000000..bd13e52 --- /dev/null +++ b/Writerside/topics/Promise.md @@ -0,0 +1,94 @@ +# 프로미스 + +```javascript +let task1 = new Promise((resolve, reject) => { + try { + setTimeout(() => { + resolve({ message: "OK" }); + }, 3000); + } catch (e) { + reject(e); + } +}); + +let i = 0; +const uid = setInterval(() => { + console.log(i); + i++; +}, 500); + +task1.then((result) => { + console.log(result); +}).catch((reason) => { + console.error(reason); +}).finally(() => { + console.log("The End"); + clearInterval(uid); +}); +``` + +프로미스를 생성할 때에는 2 개의 콜백을 사용합니다. resolve는 작업이 성공했을 때 결과를 반환하고, reject는 작업이 실패했을 때 호출합니다. + +비동기 작업이 성공하면 then이 호출되고 resolve에서 전달한 값을 받습니다. 실패한 경우에는 catch가 호출되고 reject에서 전달한 값을 받습니다. finally는 성공 또는 실패한 경우에 호출됩니다. + +- Promise.resolve(val) +- Promise.reject(val) + +```javascript +let task1 = Promise.resolve(100); + +task1.then((result) => { + console.log(result); +}); + +let task2 = Promise.reject("BAD"); +task2.catch((reason) => { + console.error(reason); +}); +``` + +- Promise.all() + + 모든 프로미스가 완료된 이후에 결과가 배열로 전달됩니다. + +- Promise.race() + + 처음으로 완료된 프로미스의 결과만 전달됩니다. + + +```javascript +let task1 = new Promise((resolve, reject) => { + setTimeout(() => { + resolve(3); + }, 3000); +}); +let task2 = new Promise((resolve, reject) => { + setTimeout(() => { + resolve(2); + }, 2000); +}); +let task3 = new Promise((resolve, reject) => { + setTimeout(() => { + resolve(1); + }, 1000); +}); + +Promise.all([task1, task2, task3]) + .then((result) => { + console.log(result); // [3, 2, 1] + }); +Promise.race([task1, task2, task3]) + .then((result) => { + console.log(result); // 1 + }); +``` + +## async / await + +```javascript +async function myFunction(param) { + ... +} +``` + +async 함수를 정의하기 위해 사용됩니다. async 함수에는 await식이 포함될 수 있습니다. await 문은 async 함수의 실행을 일시 중지하고 전달 된 Promise의 해결을 기다린 다음 async 함수의 실행을 다시 시작하고 완료후 값을 반환합니다. await 키워드는 async 함수에서만 유효하다는 것을 기억하십시오. \ No newline at end of file diff --git a/Writerside/topics/Regular-Expression.md b/Writerside/topics/Regular-Expression.md new file mode 100644 index 0000000..740d73d --- /dev/null +++ b/Writerside/topics/Regular-Expression.md @@ -0,0 +1,30 @@ +# 정규표현식 + +```javascript +let regex = /[a-z0-9]*/; +let regex = new RegExp("[a-z0-9]*"); +let regex = /[a-z0-9]*/g; +let regex = new RegExp("[a-z0-9]*", "g"); +``` + +```javascript +exec(str) // 결과를 배열로 반환합니다. 일치하지 않으면 null을 반환합니다. +test(str) // 결과를 true 또는 false로 반환합니다. +``` + +```javascript +let regex = /(\w+)\s(\w+)/; + +let result = regex.exec("stive jobs"); +console.log(result); +/* + [ + 'stive jobs', + 'stive', + 'jobs', + index: 0, + input: 'stive jobs', + groups: undefined + ] +*/ +``` \ No newline at end of file diff --git a/Writerside/topics/String.md b/Writerside/topics/String.md new file mode 100644 index 0000000..ad288f9 --- /dev/null +++ b/Writerside/topics/String.md @@ -0,0 +1,158 @@ +# 문자열 + +## String + +```javascript +let str = new String("Hello"); +``` + +```javascript +charAt() +charCodeAt() +codePointAt() +indexOf() +lastIndexOf() +startsWith() +endsWith() +includes() +concat() +fromCharCode() +fromCodePoint() +split() +slice() +substring() +substr() +match(regexp) +replace(regexp) +search(regexp) +toLowerCae() +toUpperCase() +normalize() +repeat() +trim() +``` + +## 국제화; Intl + +### DateTimeFormat + +```javascript +const FORMAT = new Intl.DateTimeFormat("ko-KR", { + year: "numeric", month: "2-digit", day: "2-digit", + hour: "2-digit", minute: "2-digit", second: "2-digit", + timeZoneName: "long" +}); + +let now = new Date(); +console.log(FORMAT.format(now)); +``` + +#### 매개변수 옵션 + +- dateStyle + + - full + - long + - medium + - short +- timeStyle + + - full + - long + - medium + - short +- timeZone + + "UTC", "Asia/Seoul", … + +- hour12 + + 12시간제 여부. true / false + +- hourCycle + + - h11 + - h12 + - h23 + - h24 +- weekday + + - long + - short + - narrow +- era + + - long + - short + - narrow +- year + + - numeric + - 2-digit +- month + + - numeric + - 2-digit + - long + - short + - narrow +- day + + - numeric + - 2-digit +- hour + + - numeric + - 2-digit +- minute + + - numeric + - 2-digit +- second + + - numeric + - 2-digit +- timeZoneName + + - long + - short + +### NumberFormat + +```javascript +let PRICE_FORMAT = new Intl.NumberFormat("ko-KR", { + style: "currency", currency: "KRW", + minimumFractionDigits: 2 +}); +console.log(PRICE_FORMAT.format(1000)); +``` + +#### 매개변수 옵션 + +- style + + - decimal + - currency + - percent +- currency + + "USD", "EUR", KRW", … + +- currencyDisplay + + - symbol + - code + - name +- useGrouping + + 천 단위 구분자. true / false + +- minimumIntegerDigits + +- minimumFractionDigits + +- maximumFractionDigits + +- minimumSignificantDigits + +- maximumSignificantDigits \ No newline at end of file diff --git a/Writerside/topics/This.md b/Writerside/topics/This.md new file mode 100644 index 0000000..7f38bac --- /dev/null +++ b/Writerside/topics/This.md @@ -0,0 +1,9 @@ +# this + +자바스크립트에서 this 키워드는 상식과 많이 다르게 작동합니다. + +전역 컨텍스트에서의 this는 전역 객체(브라우저에서는 window 객체)를 가리킵니다. + +일반적인 함수 컨텍스트에서는 전역 객체를 가리킵니다. + +https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this \ No newline at end of file diff --git a/Writerside/topics/Web-Socket.md b/Writerside/topics/Web-Socket.md new file mode 100644 index 0000000..9500e20 --- /dev/null +++ b/Writerside/topics/Web-Socket.md @@ -0,0 +1,35 @@ +# 웹소켓 + +```javascript +let websocket = new WebSocket("wss://echo.websocket.org/"); +websocket.onopen = function (event) { + websocket.send("Hello"); +}; + +websocket.onclose = function (event) { + console.log(event.code + ": " + event.reason); +}; + +websocket.onmessage = function (event) { + console.log(event.data); +}; + +websocket.onerror = function (event) { +}; +``` + +- send() + + 서버에 데이터 전송. String, Blob, ArrayBuffer를 보낼 수 있습니다. + +- close() + + 연결을 닫습니다. + +- onopen + +- onclose + +- onerror + +- onmessage \ No newline at end of file