[모던자바스크립트 Deep Dive] 17장. 생성자 함수에 의한 객체 생성
·
JavaScript
1. Object 생성자 함수new 연산자와 함께 Object 생성자 함수를 호출하면 빈 객체를 생성하여 반환한다. 빈 객체를 생성한 이후 프로퍼티 또는 메서들르 추가해서 객체를 완성할 수 있다.// 빈 객체의 생성const person = new Object();// 프로퍼티 추가person.name = 'lee';person.sayHello = function () { console.log('Hi my name is + this.name):};console.log(pesron); // {name: 'lee', sayHello: f}person.sayHello(); // Hi my name is lee 생성자 함수(constructor)란? new 연산자와 함께 호출하여 객체(인스턴스)를 생성하는 함수..
e / e.target / e.target.value
·
JavaScript
1. e (event 이벤트 객체) 이벤트 핸들러 함수의 첫 번째 매개변수로 전달되는 객체이다. 보통 e 또는 event로 표현한다.발생한 이벤트에 대한 모든 정보를 담고 있는 객체로, 이벤트의 종류, 타켓 요소, 관련된 위치 정보, 키보드 입력 정보 등 다양한 속성과 메서드를 포함하고 있다.예) click, keydown 같은 이벤트 정보가 들어 있다.document.addEventListener('click', function(e) { console.log(e); // 이벤트에 대한 전체 정보}); 2. e.target이벤트가 발생한 대상 요소를 가리킨다.이벤트가 발생한 구체적인 HTML 요소(노드)를 가리키며, 이벤트가 발생한 버튼, 입력 필드, 링크 등 어떤 HTML 요소인지 알 수 있게..
getComputedStyle()
·
JavaScript
1. getComputedStyle() 메소드는 인자로 전달받은 요소의 모든 CSS 속성값을 담은 객체를 회신한다.이 속성값들은, 해당 요소에 대하여 활성 스타일시트와 속성값에 대한 기본 연산이 모두 반영된 결과값이다. 개별 CSS속성 값은 객체를 통해 제공되는 API 또는 CSS 속성 이름을 사용해서 간단히 색인화해서 액세스할 수 있다.Inline 스타일은 DOM에 바로 포함되어 있어 DOM 트리에서 접근할 수 있지만,외부 CSS 및 style 태그의 스타일은 CSSOM에서 관리되고, 렌더링 후 getComputedStyle()을 통해 브라우저가 계산한 최종 값을 얻을 수 있다.브라우저는 DOM 트리와 CSSOM(CSS Object Model) 트리를 결합하여 렌더 트리를 만드는데, 이 과정에서 외부 ..
배열의 함수 (map(), filter(), every(), sort())
·
JavaScript
1. map()map() 함수는 배열을 순회해서 각 요소를 콜백 함수로 적용해서 처리해 모은 새로운 배열을 반환하기 위한 함수이다. let array = [10, 2, 17, 33, 5];// map, 배열의 데이터는 모두 2를 곱한 값, 결과는 배열let mapResult = array.map((value) => { // 조건을 판단하는 것이 아닌, 조작된 데이터를 획득하고자 하므로 리턴은 조작된 값 return value * 2;})console.log(mapResult); //  [20, 4, 34, 66, 10] 위 코드는 다음 배열을 2배를 곱한 값을 출력하여 배열을 생성하는 map 함수의 사용 예이다.array 배열에 있는 각 숫자를 map() 함수로 변환하여, 각 숫자를 돌면서 배열의 데..
e.preventDefault(), e.target
·
JavaScript
1. e.preventDefault() 회원가입 이름 : 전화번호 : 직업 : 학생 개발자 회원가입 취소 'use strict';let resultContainer = document.getElementById('result');let formContainer = document.getElementById('form');let inputText = function (message) { resultContainer.innerHTML = message;}formContainer.addEventListener('submit', function (e) {; e.preventDefault(); let inpu..
[모던자바스크립트 Deep Dive] 15장. let, const 키워드와 블록 레벨 스코프
·
JavaScript
1. var 키워드로 선언한 변수의 문제점1-1. 변수 중복 선언 허용var x = 1;var y = 1;// var 키워드로 선언된 변수는 같은 스코프내에서 중복 선언이 허용한다.// 초기화문이 있는 변수 선언문은 자바스크립트 엔진에 의해 var 키워드가 없는 것 처럼 동작한다.var x = 100;//초기화문이 없는 변수 선언문은 무시한다.var y;console.log(x); // 100console.log(y); // 1 1-2. 함수 레벨 스코프var x = 1;if(true) { // x 는 변수다. 이미 선언된 전역 변수 x가 있으므로, x 변수는 중복 선언된다. // 이는 의도치 않게 변수 값이 변경되는 부작용이 발생한다. var x = 10; } console.log(x); ..
오류확인자
'JavaScript' 카테고리의 글 목록 (4 Page)