본문 바로가기

전체 글

[JavaScript] 배열(Array) 1. 배열 배열은 다수의 데이터를 묶어서 처리해야 하는 경우에 유용하게 사용된다. 특히 배열과 for문을 같이 활용하면 100개 혹은 10000개 혹은 그 이상의 개수의 데이터들도 단 몇줄로 구현할 수 있게되고 인덱스를 비롯한 배열을 처리하는 여러가지 함수들을 통해 해당 데이터들에 손쉽게 접근하여 활용할 수 있게 된다. 즉 배열을 통해 코드를 훨씬 더 축소하여 효율적으로 사용할 수 있게 된다. - 배열을 선언하는 방법 var arr1 = New Array(); var arr2 = New Array(1, 2, 3); var arr3 = [1, 2, 3]; var arr4 = []; - 배열에 원소를 추가, 제거하는 방법(push, unshift, pop, shift) 배열에 원소를 추가하는 메소드는 두 가.. 더보기
[Javascript] DOM이란? | DOM의 선택자 | DOM tree | node vs element HTML을 위한 프로그래밍 인터페이스인 DOM(Documnet Object Model)에 대해 알아보자. issabmsangare.medium.com/nodes-vs-elements-in-the-dom-1865885d0b9b Nodes vs Elements in the DOM In my early JavaScript learning process, I came across two objects: ‘nodes’ and ‘elements’ which triggered some confusion in my mind. I… issabmsangare.medium.com developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/Introduction DOM 소개 -.. 더보기
식별자를 지정하는 4가지 방법 변수명, 함수명, 클래스명 등 식별자를 지정하는 방법 4가지를 알아보고 이러한 규정이 왜 필요한지 알아보자. winnercrespo.com/naming-conventions/ What is camelCase, PascalCase, kebab-case and snake_case? Since we cannot define a variable like fruits in basket because many (or maybe all) programming languages will interpret the space character as the end of the identifier and the beginning of something else, we need to do something like fruits.. 더보기
[JavaScript] Jasmine이란? 간단한 예제로 알아보기 BDD 프레임워크의 한 종류인 Jasmine에 대해 알아보고 간단한 예제를 직접 구현해보자. www.dailysmarty.com/posts/jasmine-specs Jasmine Specs introduction.js Jasmine is a behavior-driven development framework for testing JavaScript code. It does not depend on any other JavaScript frameworks. It does not require a DOM. And it has a clean, obvious syntax so that you can easily write tests. This gu www.dailysmarty.com * 본 포스팅은 위 문서를 .. 더보기
[CSS] Position의 모든것★ 이번 포스팅에서는 웹페이지에서 요소의 위치를 자유자재로 정렬하기 위한 모든 개념을 꼼꼼히 정리해볼 것이다. 1. Position CSS에서 Position은 요소가 문서 상의 어디에 위치할 것인가를 지정한다. 최종적으로 left, right, top, bottom (오프셋) 속성으로 문서의 최종 위치를 정의하게 되는데 Position의 값에 따라 그 위치를 지정하는 방식을 결정하게 된다. static(기본값) 기본값. 오프셋 속성을 무시한다. relative absolute 가장 가까운 부모요소의 위치에 따라 상대적으로 배치 (가까운 부모요소가 없다면 가장 상위 컨테이너에 따라 배치) fixed 문서의 최상위 컨테이너를 기준으로 배치 (단, 부모요소 중 transform, perspective, filt.. 더보기
[HTML] section태그와 article 태그의 차이점 버리고 써야 하는 이유 webactually.com/2020/03/03/%3Csection%3E%EC%9D%84-%EB%B2%84%EB%A6%AC%EA%B3%A0-HTML5-%3Carticle%3E%EC%9D%84-%EC%8D%A8%EC%95%BC-%ED%95%98%EB%8A%94-%EC%9D%B4%EC%9C%A0/ 버리고 HTML5 써야 하는 이유 - Webactually 각 태그는 목적에 맞게 쓰여야 합니다. 제목을 표시할 때는 헤딩 태그를 〈h1〉, 〈h2〉··· 순차적으로 나열하는 구조여야 합니다. 같은 레벨의 〈h〉 태그에 〈section〉을 둘러싸서 제목 크기를 webactually.com 위 게시물에서 article과 section의 차이점을 비롯해 태그가 왜 유용하지 않은지, 또 그런 태그.. 더보기
[JavaScript] 객체(Object) 객체 객체는 키와 값으로 이루어진 사전 형태의 데이터타입이다. 배열과 유사하지만 인덱스값(키값)을 문자로 사용할 수 있다는 특징이 있다. - 객체의 생성 객체를 만드는 방법에는 여러가지가 있다. 예를 들어 상품의 가격을 저장하는 객체를 만들어보자. var prices = {'A' : 3000, 'B' : 4000, 'C' : 2500} 'A'는 인덱스값, 즉 key가 되고 3000은 value가 된다. 객체를 만드는 다른 방법 var price = {}; price['A'] = 3000; price['B'] = 4000; price['C'] = 2500; 또 다른 방법 var price = new Object(); price['A'] = 3000; price['B'] = 4000; price['C'] =.. 더보기
[Javascript] 반복문(iterate, loop) 반복문에는 두 가지 종류가 있다. 1. while문 2. for문 1. while문 변수 초기화 while(반복 조건) { 반복 실행문 } 2. for문 for(초기화; 반복조건; 반복실행){ 실행문 } - 초기화부분은 실행 초기에 한 번만 실행됨 - 반복조건이 true로 충족하면 반복조건 실행 - 실행문이 실행되면 반복실행문 실행 -> 반복조건 충족여부 판별 *for문 괄호 안에 마지막의 세미콜론(;)은 생략한다. * i = i + 1의 다른 표현방법 i++ i = 0; alert(i++); // alert이 실행되는 중 i값에 0이 저장된다. (alert이 실행된 후에 i 값에 1이 저장된다.) ++i i = 0; alert(++i); // alert이 실행되는 중 i값에 1이 저장된다. (i값이 1.. 더보기