Code Playground

< h1 > Code Playground </ h1 >

1번 2번 3번 만약에 위 HTML코드에서 태그를 자바스크립트를 이용하여 동적으로 제어하기 위해 돔을 가져온다고 해보자. 여러 가지 방법이 있겠지만 가장 흔하게 사용되는 방법은 아래와 같다. const $li = document.querySelectorAll('.list li'); 콘솔 창에 출력해보면 원하던대로 li 요소들을 잘 가져오는 것을 확인할 수 있다. 또한 querySelectorAll()을 이용하여 가져 온 li 요소들은 NodeList라는 이름의 객체로 반환된다. const $li = document.querySelector('.list').children; 이번에는 다른 방법으로 li 요소에 접근했는 데, 부모 요소인 ul의 children 속성을 사용하여 탐색하였다. 이 경우에도 아까와..

클로저에 대해서 이해하려고 간단한 툴팁 만들기 연습을 해보았다. 물론 클로저를 이용하지 않아도 그냥 클래스를 조작해서 만들 수 있지만 나는 클로저 이해하는게 목적이니까 굳이 굳이 클로저를 활용하여 만들기ㅋㅋ 초간단 버튼 툴팁! Toggle hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello..

-해당 문제는 codewars사이트의 level5 문제입니다. (1~8단계 중 8단계가 가장 쉬운 레벨)- [문제] Given a list of integers and a single sum value, return the first two values (parse from the left please) in order of appearance that add up to form the sum. sum_pairs([11, 3, 7, 5], 10) # ^--^ 3 + 7 = 10 == [3, 7] sum_pairs([4, 3, 2, 3, 4], 6) # ^-----^ 4 + 2 = 6, indices: 0, 2 * # ^-----^ 3 + 3 = 6, indices: 1, 3 # ^-----^ 2 + 4 ..

https://im-developer.tistory.com/100 [JS/DOM] 자바스크립트, 문서 객체 모델(Document Object Model)에 대하여 문서 객체 모델은 영어로 "Document Object Model"이라고 하고 줄여서 DOM(돔)이라고 부른다. DOM이란 웹 문서의 모든 요소를 자바스크립트를 이용하여 조작할 수 있도록 객체를 사용하여 문서를 해석하는 방법을.. im-developer.tistory.com 지난번 글에서 DOM이 무엇인지에 대해서 다루었다. 오늘은 DOM에 어떻게 접근하고 탐색하는 지 본격적으로 다뤄보려고 한다. HTML Element에 접근하기 지난 번 글에서 우리는 Element(요소)가 HTML 문서 상의 태그를 객체화시킨 것이라는 것을 알았다. 이제 그..

예전에도 한 번 이 주제에 대해서 글 쓴 적이 있는데, 사실 그 때는 완전히 이해가 안 된 상태에서 쓴 글이었다. MDN이나 W3Schools에 클로져 관련 글을 읽어봐도 쉽게 이해가 안갔는데 이번주에 수업을 듣고 처음으로 이해가 갔다.! 그래서 다시 한 번 개념 정리를 해보려고 한다. Lexical Scope Closure에 대해서 얘기하기 전에 우리는 Lexical Scope가 무엇인지 정확히 알고 넘어가야한다. 지난 번 글에서도 정리했는 데, Lexical Scoping은 함수를 어디에 선언했는지에 따라서 스코프가 결정되는 것을 말한다. 즉, 함수를 어디에서 호출했느냐는 스코프에 전혀 영향을 끼치지 않는다. var a = 1; function foo () { var a = 10; console.lo..

-해당 문제는 codewars사이트의 level6 문제입니다. (1~8단계 중 8단계가 가장 쉬운 레벨)- [문제] In this kata, you must create a digital root function. A digital root is the recursive sum of all the digits in a number. Given n, take the sum of the digits of n. If that value has more than one digit, continue reducing in this way until a single-digit number is produced. This is only applicable to the natural numbers. Here's how ..

-해당 문제는 codewars사이트의 level6 문제입니다. (1~8단계 중 8단계가 가장 쉬운 레벨)- [문제] Array.prototype.length will give you the number of top-level elements in an array. Your task is to create a function deepCount that returns the number of ALL elements within an array, including any within inner-level arrays. deepCount([1, 2, 3]); //>>>>> 3 deepCount(["x", "y", ["z"]]); //>>>>> 4 deepCount([1, 2, [3, 4, [5]]]); //>>..

slice()와 splice()는 배열을 다룰 때 자주 사용하는 함수이다. 두 함수는 언뜻 보기에 비슷한 기능을 하는 것처럼 보이지만 큰 차이점이 있다. [1] Array​.prototype​.slice() slice() 메소드는 begin부터 end 전까지의 복사본을 새로운 배열 객체로 반환한다. 즉, 원본 배열은 수정되지 않는다. slice(start[, end]) start: 추출 시작점에 대한 인덱스. undefined인 경우: 0부터 slice 음수를 지정한 경우: 배열의 끝에서부터의 길이를 나타낸다. slice(-2)를 하면 배열의 마지막 2개의 요소를 추출한다. 배열의 길이와 같거나 큰 수를 지정한 경우: 빈 배열을 반환한다. end: 추출을 종료할 기준 인덱스. (end를 제외하고 그 전까..

재귀再歸 (Recursion) 프로그래밍에서 재귀(Recursion)란 자신을 정의할 때 자기 자신을 재참조하는 것을 말한다. 따라서 재귀 함수란 함수가 호출되어 실행할 때, 함수 내부에서 자기 자신을 다시 호출하는 재귀 호출(Recursive call)의 형태를 말한다. Recursive vs Iterative 보통 Recursive와 Iterative가 많이 비교되곤 한다. Iterative는 '반복적인'이란 뜻을 가지고 있다. 즉, 우리가 흔히 사용하는 for문이나 forEach문과 같은 반복 연산을 가리킨다. 항상 그런 것은 아니지만 많은 경우에 Recursion으로 처리할 수 있는 문제는 Iterator로도 처리할 수 있고, 반대로 Iterator로 처리할 수 있는 것은 Recursion으로 처..

Math.random() 자바스크립트의 Math.random() 메소드가 뭔지 MDN에서 살펴보면 0(포함)보다 크고 1(불포함)보다 작은 랜덤 숫자를 부동 소수점(floating-point)으로 반환하는 함수라고 되어있다. 여기서 부동 소수점이란 무엇일까? 컴퓨터에서 실수를 표현하는 것은 정수를 표현하는 것보다 훨씬 복잡하다. 왜냐면 실수 또한 2진수로 표현해야하기 때문이다. 실수로 표현하는 방식은 두 가지가 있는 데, 바로 고정 소수점(fixed point) 방식과 부동 소수점(floating point) 방식이다. 실수는 정수 부분과 소수 부분으로 나눠진다. 이 때 실수를 표현하는 가장 간단한 방법은 소수부의 자릿수를 미리 정하여 표현하는 방법이다. 이 것이 고정 소수점 방식이다. 고정 소수점 방식..