전체 (39) 썸네일형 리스트형 [JS] JavaScript Array 2 - Array method(배열 메소드) Array method 1. join (separator?:string); 모든 배열 요소를 하나의 string으로 리턴한다. separator를 전달하면 separator로 구분하여 리턴한다. const fruits = ['apple', 'banana', 'orange']; const result = fruits.join(); console.log(result); // apple,banana,orange const result2 = fruits.join(' | '); console.log(result2); // apple | banana | orange 2. split (separator:string, limit?); separator와 limit을 전달받아서 separator를 기준으로 string을.. [JS] JavaScript Array 1 - 자바스크립트 배열의 생성과 method Array 연관있는 값(element, item)을 모아서 관리하는 자료구조이다. 배열에 저장되는 값은 순차적으로 저장되며, 고유한 index값을 가진다. index는 객체에서의 property key와 같은 역할을 한다. 배열의 요소는 array[index] 처럼 대괄호를 사용하여 접근할 수있다. 1. Declaration (배열의 생성) const arr1 = new Array(); const arr2 = [1, 2]; 2. Index position const fruits = ['🍎', '🍌']; console.log(fruits); // ['🍎', '🍌'] console.log(fruits.length); // 2 배열의 개수 console.log(fruits[0]); // 🍎 console.lo.. [Navbar] Change Menu Color - Html, CSS, JS Change Menu Color See the Pen abBbvxm by Eunji Jeon (@emcjrl) on CodePen. Html Home About Books Portfolio Contact CSS body { display: flex; justify-content: center; align-items: center; min-height: 100vh; font-family:Georgia, 'Times New Roman', Times, serif; } .menu { display: flex; justify-content: center; } .menu_link { font-size: 1.2em; color: rgb(183, 202, 209); padding: 0 20px; list-style: .. [Navbar] Sliding Menu Indicator - Html, CSS, JS Sliding Menu Indicator See the Pen ExNxVJy by Eunji Jeon (@emcjrl) on CodePen. Html Home About Books Portfolio Contact CSS * { margin: 0; padding: 0; box-sizing: border-box; font-family: Georgia, "Times New Roman", Times, serif; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; } .navbar { position: relative; display: flex; } .navbar a { position: relative;.. [JS] getBoundingClientRect() - Viewport를 기준으로 하는 위치 값 가져오기 getBoundingClientRect() element.getBoundingClientRect() element의 크기(width, height)와 뷰포트(viewport)를 기준으로 한 위치(left, top, right, bottom, x, y), 이렇게 총 8가지 속성이 있는 DOMRect 객체를 리턴한다. width와 height은 contents뿐 아니라 padding과 border까지 포함한다. width와 height를 제외한 모든 속성은 뷰포트(viewport)의 top-left 를 기준으로 하며, 뷰포트(viewport)를 기준으로 하는 상대적인 값이기 때문에 scroll로 인해 위치가 변경 될 때마다 값이 변경된다. hello body { padding: 0; margin: 0; } .. [JS] Event delegation(이벤트 위임) Event delegation(이벤트 위임) event bubbling을 이용해서 event 제어하는 방법이다. 부모 안에 있는 자식 요소들에게 공통적으로 무언가를 처리해야 할 때 모든 자식 요소에 하나하나에 event listener(이벤트 리스너)를 추가하지 않고, 자식 요소의 공통된 부모 요소에 event Listener를 등록하여 자식 요소의 event를 제어한다. 부모 요소에 등록된 event Listener 에서 event.currentTarget과 event.target을 이용하여 event가 어디에서 발생했는지를 알 수 있고, 원하는 요소에서 event가 발생되면 그 때 event listener를 처리한다. 1 2 3 4 5 // Bad const lis = document.querySe.. [JS] Object의 생성과 접근 & Constructor Function Object는 JavaScript 데이터 타입 중 하나이다. Object는 key와 value의 집합체이다. object = { key : value }; 하나의 property는 key: value로 구성되어 있다. Object는 reperence type으로 변수에 저장할 때, object가 아닌 object가 저장된 메모리 주소가 저장된다. 1. Object 생성 Object literal syntax 변수처럼 객체를 생성하는 방법 중괄호{} 안에 key: value를 쉼표로 구분하여 생성한다. const obj1 = { key: value, key2: value2, ... }; Object constructor syntax 키워드 new를 이용하여 Object 생성자 함수를 호출하고 propert.. [JS] Event flow - capturing과 bubbling Event flow 이벤트가 발생하면 capturing phase -> target phase -> bubbling phase 순으로 이벤트를 감지한다. Click Me const outer = document.querySelector('.outer'); const middle = document.querySelector('.middle'); const button = document.querySelector('button'); outer.addEventListener('click', event => { console.log(`outer: ${event.currentTarget}, ${event.target}`); }); // outer: [objectHTMLDivElement], [object HTML.. 이전 1 2 3 4 5 다음
