분류 전체보기

    자바스크립트에서 this와 Arrow Function

    const getFullName = () => '${this.firstName} ${this.lastName}'; const user = { firstName: 'Adam', lastName: 'Smith', getFullName: getFullName, }; console.log(user.getFullName()); Arrow Function에서 this의 값은 일반함수처럼 호출한 대상에 따라 상대적으로 변하지 않고, Arrow Function이 선언되기 직전에 유효한 this값과 똑같은 값을 가지고서 동작하게 된다. getFullName이 선언될 때 this의 값은 전역 객체인 window 객체가 된다. getFullName 함수를 실행하려고 하면, window 객체의 firstName과 lastNa..

    값으로서의 함수

    1. 자바스크립트의 함수 typeof 연산자로 함수의 타입을 확인해보면 function이 리턴된다. 그러나 자바스크립트의 함수는 엄연히 따지면 객체이다. 자바스크립트의 함수는 선언 자체로도 값으로 평가될 수 있다. (변수에 함수 선언을 할당하는 함수 표현식 가능) 변수나 다른 데이터 구조 안에 할당할 수 있고, 다른 함수의 파라미터로 전달될 수 있다. 다른 함수의 리턴값이 될 수도 있다. 이러한 조건을 모두 만족하는 함수를 일급 함수(First-Class-function)이라고 부른다. 2. 값으로서의 함수 예제 // 함수 표현식으로 함수 만들기 const sayCodeit = function() { console.log('Codeit'); }; sayCodeit(); // 객체 프로퍼티로 함수를 선언해..

    AND와 OR 연산 방식

    JavaScript에서 AND 연산자(&&)는 왼쪽 값이 truethy하면 오른쪽 값을, falsy하면 그대로 왼쪽 값을 리턴하는 방식으로 동작한다. Or 연산자(||)는 왼쪽 값이 truethy하면 그대로 왼쪽 값을, falsy하면 오른쪽 값을 리턴한다. 사용 예시 1) console.log(null && undefined); console.log(0 || true); console.log('0' && NaN); console.log({} || 123); null true NaN {} 사용 예시2) function print(value) { const message = value || 'Codeit'; console.log(message); } print(); print('JavaScript'); 함수..

    스타일 다루기

    방법1. style 프로퍼티 활용 // 스타일 다루기 const today = documnet.querySelector('#today'); const tomorrow = document.querySelector('#tomorrow'); // style 프로퍼티 today.children[0].style.textDecoration = 'line-through'; today.children[0].style.backgroundColor = '#DDDDDD'; today.children[2].style.textDecoration = 'line-through'; today.children[2].style.backgroundColor = '#DDDDDD'; text-decoration --> textDecorati..

    HTML 속성 다루기 예제

    오늘 할 일 공부 청소 쇼핑 1. 태그의 class 속성 삭제 const main = documnet.querySelector('.main'); main.lastElementChild.removeAttribute('class'); 2. 올바른 출력 결과 찾기 const toDoList = documnet.querySelector('#to-do-list'); const item = toDoList.firstElementChild; const el = document.createElement('a'); el.setAttiribute('href', 'http://www.naver.com'); el.textContent = item.textContent; item.innerHTML = el.outerHTML; ..

    자바스크립트 요소 노드 추가하기

    자바스크립트 요소 노드 추가하기

    오늘 할 일 공부 청소 쇼핑 내일 할 일 공부 예매 유튜브 시청 더보기 1. 기존의 문서 구조를 덮어쓰는 방식 - innerHTML과 outerHTML의 문제점 const today = document.querySelector('#today'); today.innerHTML = '처음' + today.innerHTML; today.innerHTML = today.innerHTML + '마지막'; today.outerHTML = '이전' + today.outerHTML; const newToday = document.querySelector('#today'); newToday.outerHTML = newToday.outerHTML + '다음'; 더보기 innerHTML이나 outerHTML 프로퍼티는 기존..

    id, class, css 선택자로 태그 선택하기

    3. css 선택자로 태그 선택하기 프로그래밍 언어 JavaScript Python Java C Ruby css 선택자를 활용해서 태그를 선택하는 메소드는 document 객체의 querySelector와 querySelectorAll 두 가지가 있다. 하나의 요소를 선택할 때는 querySelecor를 사용하는데, querySelector('#아이디')는 getElementById('아이디')와 같은 결과를 리턴한다. 이때 querySelector 메소드를 활용하면 클래스나 태그 이름처럼 여러 개의 요소가 존재하는 선택자를 쓰더라도 그 중 가장 첫번째 요소 하나만 선택한다. 여러 개의 요소를 선택할 때는 querySelectorAll을 사용한다. 여러 개의 요소가 선택되기 때문에 NodeList라는 이..

    유사배열(Array-Like Object)

    0. 유사 배열이란? 배열과 유사한 객체를 유사배열, 영어로는 Array-Like Object라고 부른다. 유사 배열에도 최소한 갖춰야 할 조건과 특징들이 있다. 1. 숫자 형태의 indexing이 가능하다. 유사 배열도 배열과 마찬가지로 배열이라는 이름에 걸맞게 각 요소에 0부터 시작하는 숫자 형태의 index가 있어야 한다. 2. length 프로퍼티가 있다. 객체가 가지고 있는 요소의 갯수를 저장하는 length 프로퍼티 역시 배열의 특징이다. 유사 배열도 length 프로퍼티가 있어야 하는데, 숫자 형태의 index가 있더라도 length 프로퍼티가 없다면 유사 배열이라기 보단 숫자 형태의 key로 구성된 일반적인 객체라고 볼 수 있을 것이다. 3. 배열의 기본 메소드를 사용할 수 없다. 유사 배..

    html/css_01

    홈페이지 개발 = 정적 페이지 성격 웹(기반) 애플리케이션 개발 = 동적 페이지 성격 html, css, js, jquery, react HTML(Hyper Text Markup Language) 동영상 -> 인코딩(encoding, 이진수화) -> 디지털(00110101) -> 디코딩(decoding) -> 동영상 보기 문자 -> 인코딩(encoding, 이진수화) -> 디지털(0010101) -> 디코딩(decoding) -> 문자 보기 인코딩/디코딩 방법 : utf-8(가변형, 영문 1바이트, 한글 3바이트), ms949(한 문자를 2바이트로 처리), euc-kr(영문과 한글만 지원)