JavaScript slider 애니메이션 버튼 클릭시 내용을 접거나, 펼칠 수 있게 한다. 구현 버튼이벤트를 등록하고, classList에 애니매이션을 추가한다. height를 0px ~ 특정 px까지 늘렸다가 줄일 것이므로 요소를 감싸고있는 태그에서 0px로 줄였을 시 컨테이너 범위를 초과해 그리는 것을 방지하기 위해 overflow: hidden속성을 추가한다. Show / Hide Slide body{ background:grey; } #box{ width:400px; background:orange; margin:0 auto; margin-top:3%; overflow:hidden; } .slider { transition:all 2s ease-in-out; height:0px; } .slide..

바닐라 JS 모달 작성 모달창 생성구현 모달은 팝업이랑 다르게 현재 페이지 위에 새로운 레이어이다. 흔히 보듯 어떤 이미지 클릭하면 뒤로 흐리게 표시되고 그 이미지가 페이지 이동없이 확대되는 그런 창을 뜻한다. 구현에는 여러 방법이 있겠지만 나는 display none block으로 생겼다 없어졌다하는 방법과 z-index로 구현해보았다. display none block 모달창을 미리 화면에 그려넣고 해당 속성을 none으로 주게되면 해당 요소가 랜더트리에 포함되지 않는다. 따라서 none에서 다른 속성으로 바꾸게 되면 (또는 그 반대의 경우에도) 요소의 위치 및 크기를 계산하는 리 플로우, 요소를 화면에 그리는 리페인트과정이 수행된다. 트랜지션 적용 불가 transition은 어떤 속성값이 변경될 때..

JavaScript Drog and Drop 드래그앤 드롭을 구현한다. 다른 부모로 이동시킬 수 있도록 한다. 1. draggable 태그의 속성에는 draggable이 있다. 이를 true로 하여 드래그할 수 있다. sayhi 2. 드래그앤 드롭 핸들러 3가지 드래그앤 드롭을 구현하기 위해 다음 3가지 핸들러를 알아야한다. ondragstart : 드래그된 아이템에 id부여, 드래그 상태에서 일어날 변화를 지정할 수 있다. ondragover : 드롭 액션을 지정 ondrop : 드롭 행위가 일어남. 드래그된 아이템은 새로운 부모의 자식이 된다. 드래그 아이템 드랍 존 const item = document.querySelector('span.item'); const dropZone = ..

클래스와 객체의 혼합 클래스이론 클래스의 개념 자바스크립트의 클래스 자바스크립트의 클래스는 클래스 디자인 패턴을 사용하기위해 억지로 만들어낸 패턴이다. 클래스는 디자인패턴중 하나이니 쓸지말지는 자신의 결정에 달렸다. 클래스 체계 클래스는 설계도 같은 느낌이다. 구성은 아래와같다. 데이터 프로퍼티(변수) 메서드 생성자 객체를 생성할 때 필요한 정보를 초기화한다. class CoolGuy { // 생성자 constructor (trick) { // property this.specialTrick = trick } // 메서드 showOff () { console.log('My trick is ', this.specialTrick) } } 객체를 생성하는 방법 joe = new CoolGuy(&..

Chapter 3 객체 객체에 대해서 자세히 다룬다. 3.1 구문 객체는 선언적, 생성자형식으로 정의할 수 있다. let obj = { //선언적 a: 2, } let obj = new Object(); // 생성자 obj.a = 2; 생성자처럼 정의하면 프로퍼티를 일일히 나열해야하므로 비추천. 3.2, 3.3 타입과 내장객체 JS에는 7가지 원시타입이 존재한다. Unbonss 언디파인드, 널, 불리언, 오브젝트, 넘버, 스트링, 심볼 이 타입들은 메소드를 가질 수 없는 것이다. 내장 객체로 위의 원시타입과 대응되어보이지만 실제는 그렇지 않다. String Number Boolean Object Function Array Date RegExp Error 이 객체들은 클래스처럼보이지만 각각 생성자로 사용되..

Chapter 2 this All Makes Sense Now! 명시적 바인딩 this를 명시적으로 바인딩을 하는 적당한 유틸리티함수가 있다. apply call function foo () { console.log(this.a); } var obj = { a: 42 }; foo.call(obj); // 42 하드바인딩 function foo() { console.log( this.a ); } var obj = { a: 2 }; // bar 안에 foo는 obj로 바인딩되어있다. var bar = function() { foo.call( obj ); }; bar(); // 2 setTimeout( bar, 100 ); // 2 // `bar` hard binds `foo`'s `this` to `..

Chapter 2 this All Makes Sense Now! call site, call stack에 대해 이해한다. 1. call Site 함수가 호출된 지점을 의미 call Stack: 함수가 호출될 때 call Stack에 push되며, 반환값을 가져올 때 pop됨. 개발자도구에서 debugger찍어보면 콜스택을 볼 수 있음, 예외발생시에도 볼 수 있음. function baz() { // call-stack is: `baz` // so, our call-site is in the global scope console.log( "baz" ); bar(); // `bar` // so, our call-site is in `baz` console.log( "bar" ); foo(); // `bar`..

Chapter 1 This or That? JS에서 가장 헷갈리는 키워드인 this에 대해서 알아보자. this는 런타임 바인딩. 즉 함수가 호출될 때 바인딩이 결정된다. this를 호출과 무관하게 고정시킬 수 있는 것이 bind 함수를 호출할 때마다 함수 컨텍스트가 생기는데, 컨텍스트 내에 변수객체, 스코프체인, this가 생성된다. 함수호출방식에 따라 바인딩되는 객체가 달라진다. -1. 컨텍스트 스코프 호이스팅 this, 클로저 등의 동작원리를 담는 JS의 핵심원리이며 ECMAScript 스펙에선 "실행 가능한 코드를 형상화하고 구분하는 추상적인 개념"이라고 정의함. 실행 가능한 코드가 실행되기 위해 필요한 "환경"이라고 풀어쓸 수 있음. -1.1 컨텍스트 종류와 생성순서 컨텍스트 종류는 다음과 같다..

function foo () { var a = 2; function bar() { console.log(a); } return bar; } var baz = foo() baz() // 2 Chapter 5-2_ 스코프클로져 5.5장 모듈 먼저 렉시컬 스코프에 대해 다시 정리해보자 JS는 코드를 실행할 때 컴파일 단계에서 토크나이징, 렉싱이 발생한다. var num = 42; 라는 문자열을 잘게 쪼개 토큰이라는 조각으로 만드는 과정을 토크나이징이라 한다 (var, num, =, 5, ; 으로 쪼개어진다.) 렉싱은 토큰을 분석해 토큰에게 의미를 부여하는 과정인데, 개발자가 변수를 어디에 작성하는지에 따라 토큰이 분석되고, 스코프가 결정된다. 이때 구성된 스코프를 렉시컬 스코프라고 한다. 스코프는 함수, 블록..

Chapter 4 호이스팅 a = 2; var a; console.log( a ); var a 가 a = 2보다 아래 선언되었으니 console.log에는 undefined라는 결과가 니올것을 예상하는데 호이스팅 에 의해 2가 나온다. 이전 1장에서 사용했던 예제를 보면 var a = 2; 컴파일러는 두가지를 처리한다고 얘기했었다. var a a가 선언되어있는지 확인하고 선언되있지 않으면 엔진에 선언을 요청한다. a = 2 a에 2를 대입하는 코드를 생성하여 엔진에 넘겨준다. 처음 코드는 컴파일러에 의해 아래와 같이 바뀐다. var a; a = 2; console.log( a ); 이렇게 선언문이 가장 상단으로 끌어올려지는것을 호이스팅 이라고 한다. 호이스팅은 스코프 내에서도 일어납니다. function..