Phot_o_matic Programming

고전적인 객체 생성 방법은 아래와 같이, key와 value를 각각 동시에 지정해주는 방법이었다. let name = "swoo"; let age = 29; let obj = { name : name, age : age } 또한, 새로운 값을 가지는 객체를 생성하는 함수로써 아래와 같은 코드를 사용하였었다. function getObj() { let name = "swoo"; let getName = functoin() { return name; } let setName = function(newName) { name = newName; } let printName = function() { console.log(name); } return { getName : getName, setName : setN..

Programming/Concept 2019. 4. 18. 22:25

문제) 아래의 li 태그 내에 있는 목록의 것들 중, 문자열 'e'가 포함된 노드로만 구성된 배열을 만들어서 반환하라. /* 아래의 방식으로 풀 수 있다. 1. li 태그를 전부 select 2. select한 배열 내를 filter 하는 method 3. filter 시에 includes, from의 사용 */ function print(){ let list = document.querySelectorAll("li"); //이렇게 하면 list가 "[object NodeList]"라는 Array-like 값으로 나옴 let listArray = Array.from(list); //listArray의 각 원소는 Node이므로 값 판별을 위해서는 innerText에 대하여 판별을 해야함 le..

Programming/Concept 2019. 4. 18. 21:58

from method를 사용하면, Javascript 언어 내에 내장되어 있는 Array-like한 객체들을 진짜 Array로 바꿀 수 있다. 대표적인 Array-like로는 arguments가 있다. from method의 사용 예시 function addMark() { let newArray = Array.form(arguments); let newData - newArray.map(function(value){ return value + "!"; }); console.log(newData); } addMark(1,2,3,4,5,6,7,8,9); // 각각의 숫자에 "!" 문자열이 추가된 원소로 구성된 Array가 return 될 것이다

Programming/Concept 2019. 4. 18. 21:40

펼침 연산자는 쉽게 말해서 배열을 펼쳐주는 역할을 한다. 배열을 바꾸지 않고도 새로운 값을 복사하거나, 배열을 합치거나, 배열을 펼쳐진 상태로 파라미터로 전달하는 등의 활용이 가능해진다. let a = [1, "", undefined, NaN, null]; let b = [...a]; console.log(a); // [1, "", undefined, NaN, null] console.log(b); // [1, "", undefined, NaN, null] console.log(a===b); // false // 새로운 배열로서 메모리에 들어간 복사를 한 형태 // concat을 이용한 것과 같은 결과 // 배열을 바꾸지 않고 새로운 값을 복사할 수 있다 let c = [...a, 'add']; cons..

Programming/Concept 2019. 4. 17. 14:39

공통점 : 순회하고자 하는 객체의 길이만큼 반복 차이점 : 1) 불러오는 값의 차이 (index or element) fruits라는 Array 객체에 아이템을 ['사과', '오렌지', '배']로 초기화한다. 그 다음, fruits 객체를 for in을 사용하여 console.log로 각 값을 찍어보면? var fruits = ['사과', '배', '오렌지']; for (value in fruits) { console.log(value); } // 결과는 3회 반복으로 0, 1, 2가 String 값으로서 순차적으로 찍힐 것이다. for of를 사용하면 각각 사과, 배, 오렌지의 값이 찍힌다. 2) Prototype의 순회 for in을 사용하게 되면, 반복하고자 하는 대상으로 지정한 객체(Array o..

Programming/Concept 2019. 4. 17. 13:44

Recursion이란? : Function이 스스로를 내부에서 부르게 하여 문제를 해결하는 기술이다. 이렇게 하면 소량의 처리만 완료하고 나머지 문제를 재귀 호출에 위임할 수 있게 된다. 아래의 함수를 보고 고민하여 보자. var eat = function(meal) { console.log('meal before bite:', meal); console.log('now eating', meal.pop()); if(meal.length) { eat(meal); } else { console.log('done with the meal!'); } } 위 함수의 결과는 다음과 같다. eat(['soup', 'potatoes', 'fish']); // => meal before bite: ["soup", "po..

Programming/Concept 2019. 4. 16. 17:08

WHY JQUERY? 커뮤니티의 지원이 훌륭하다 DOM 조작을 비교적 수월하게 한다 AJAX의 사용이 간편하다 간단한 애니메이션도 쉽게 만들 수 있다 다양한 플러그인들이 있다 버거의 신속한 수정이 이뤄지고 있다 강력한 method chaining을 쓸 수 있다 Basic JQUERY Syntax Element 선택 $(selector이름) Element 생성 $(htmlstring) => e.g. $('body'), $('head'), $('title'), $('') 항상 JQUERY object를 return한다 (array like) JQUERY CHEET SHEET : http://htmlcheatsheet.com/jquery/

Programming/Concept 2019. 4. 16. 16:34

DOM이란? HTML 문서의 구조적 관계와 속성에 대한 모델 HTML 문서를 대표하는 트리 구조 Javascript에서 document 객체를 통해 전역으로 접근할 수 있음 Javascript 언어의 한 부분이 아니다! Adding Event Handler Event : 어떤 동작의 발생을 전달하기 위해 객체가 보낸 메시지 e.g. 웹페이지의 로드 버튼의 클릭 브라우저 창의 resize DOM을 이용해 이벤트 핸들러를 추가할 수 있음 onEventName (e.g. onclick) Creating Element Javascript way createButton() { var btn = document.createElement("BUTTON"); var t = document.createTextNode("..

Programming/Concept 2019. 4. 16. 16:27