Phot_o_matic Programming

공통점 : 순회하고자 하는 객체의 길이만큼 반복 차이점 : 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

문제 설명 : 문자열 s는 한 개 이상의 단어로 구성되어 있따. 각 단어는 하나 이상의 공백문자로 구분되어 있다. 각 단어의 짝수번재 알파벳은 대문자로, 홀수번째 알파벳은 소문자로 바꾼 문자열을 리턴하는 함수 solution을 완성하라. 제한사항 : 문자열 전체의 짝/홀수 인덱스가 아니라, 단어(공백을 기준으로)별로 짝/홀수 인덱스를 판단해야 한다. 입출력 예 sreturntry hello worldTrY HeLlO WoRlD function solution(s) { return s.split(' ').map(word => { var result = ''; for (var i = 0; i &lt word.length; i++) { if(i%2) { result += word[i].toLowerCase()..

Programming/Algorithm 2019. 4. 16. 19:55

문제 : 어떤 문장의 각 알파벳을 일정한 거리만큼 밀어서 다른 알파벳으로 바꾸는 암호화 방식을 시저 암호라고 한다. 예를 들어AB는 1만큼 밀면BC가 되고, 3만큼 밀면DE가 된다.z는 1만큼 밀면a가 된다. 문자열 s와 거리 n을 입력받아 s를 n만큼 민 암호문을 만드는 함수, solution을 완성해 보아라. 제한 조건 공백은 아무리 밀어도 공백 s는 알파벳 소문자, 대문자, 공백으로만 이루어져 있다. s의 길이는 8000 이하이다. n은 1 이상, 25 이하인 자연수이다. 입출력 예 snresultAB1BCz1aa B z4e F d 알파벳과 관련된 알고리즘을 풀 때에는 아스키 코드표를 이용하면 훨씬 편해진다. function solution(s, n) { let arr = []; n = n % 26..

Programming/Algorithm 2019. 4. 16. 19:27

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

HTML 문서 어디에든 script 태그를 사용하여 JavaScript를 embed할 수는 있지만, 대표적으로 사용되는 곳은 다음 두 군데이다. 1) head 태그 안쪽 2) body 태그가 닫히기 직전 두 사용법은 JavaScript를 이용해 DOM을 접근할 수 있는가 아닌가를 결정짓는 주요한 포인트가 된다. 하나는 DOM이 로딩되지 않은 상태에서, 또다른 하나는 DOM이 로딩되고 난 후 JavaScript가 실행된다. 물론 DOMContentLoaded Event를 이용해서 DOM 로딩을 명시적으로 지정해 줄 수도 있다. 일반적으로 head 태그 안쪽에 embed하는 경우는, JavaScript 라이브러리를 추가할 때 사용하며, body 태그가 닫히기 직전은 DOM을 직접 다루는 경우에 사용된다.

카테고리 없음 2019. 4. 16. 16:41

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

Learn myself for CSS 레이아웃 & Box model margin, padding, border width, height, top, left, bottom, right position, box-sizing 레이아웃 고급 z-index float, flex 기본 스타일링 font-x, background-x 참고 학습 자료 : https://learn.shayhowe.com/html-css/

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