JavaScript

[JavaScript/Web] 이벤트 객체

코드스테이즈 41기 교육 내용을 정리하고 있습니다. 틀린 부분이 있으면 댓글로 알려주시면 감사하겠습니다. 이벤트 객체 기초적인 event를 알고, event handler를 element에 적용할 수 있다. onclick 에 직접 할당하는 것과 addEventListener의 차이를 이해한다. eventHandler 함수를 만들고, eventHandler의 첫 번째 인자를 사용할 수 있다. 1번버튼 2번버튼 다음 코드를 실행하면 두개의 버튼이 화면에 출력됩니다. let btn = document.querySelectorAll("button"); let btnNum1 = btn[0]; let btnNum2 = btn[1]; btnNum1.onclick = handleClick; btnNum2.onclick..

[JavaScript/Web] Dom에 대한 추가 공부

코드스테이즈 41기 교육 내용을 정리하고 있습니다. 틀린 부분이 있으면 댓글로 알려주시면 감사하겠습니다. DOM과 JavaScript 지난 학습 목표였던 'DOM과 JavaScript의 차이에 대해 이해할 수 있다.'가 미흡한것 같아서 Dom에 대한 추가 공부를 하였다. 자바스크립트는 Html을 조작하기 위해 만들어진 언어이다. Dom은 document object model로 스크립트 언어로 Html요소를 제어할수 있도록 웹 문서를 객체화 한것이다. html요소는 하나의 부모 태그와 n개의 자식 태그를 갖을수 있다. 이를 시각화 하면 나무 모양이 나오는데, 이를 dom tree라고 한다. 각가의 요소를 노드라고 한다. 웹문서 영역을 제어 할수 있게 제공하는 객체는 document객체이다 document..

[JavaScript/Web] Dom다루기

코드스테이즈 41기 교육 내용을 정리하고 있습니다. 틀린 부분이 있으면 댓글로 알려주시면 감사하겠습니다. DOM 다루기 Dom의 CRUD( create, read, update, delete )에 대해서 배운다. 학습 목표 DOM을 JavaScript로 조작하여 HTML Element를 추가할 수 있다. (CREATE) DOM을 JavaScript로 조작하여 HTML Element를 조회할 수 있다. (READ) DOM을 JavaScript로 조작하여 HTML Element를 변경할 수 있다. (UPDATE) DOM을 JavaScript로 조작하여 HTML Element를 삭제할 수 있다. (DELETE) 생성한 HTML Element를 부모 엘리먼트의 자식 엘리먼트로 포함할 수 있다. (APPEND) ..

[Javascript/Web] DOM의 기초

코드스테이즈 41기 교육 내용을 정리하고 있습니다. 틀린 부분이 있으면 댓글로 알려주시면 감사하겠습니다. DOM Dom은 Document Object Model의 약자로, HTML 요소를 자바스크립트 Objedt 처럼 조작할 수 있는 Model입니다. 자바스크립트를 이용하면 HTML을 조작할수 있습니다. 학습 목표 DOM의 개념을 이해한다. DOM의 구조를 파악하고, HTML과 DOM이 어떻게 닮아있는지 이해한다. HTML에서 JavaScript 파일을 불러올 때 주의점에 대해서 이해한다. DOM과 JavaScript의 차이에 대해 이해할 수 있다. HTML에서 JavaScript 적용하기 Html에서 자바스크립트를 적용하기 위해서는 script태그를 이용한다. 다음은 HTML과 같은 디렉토리에 존재하는..

[JavaScript] ES6 주요 문법 (spread/rest, 구조 분해)

코드스테이즈 41기 교육 내용을 정리하고 있습니다. 틀린 부분이 있으면 댓글로 알려주시면 감사하겠습니다. spread/ rest 문법 spread : 주로 배열을 풀어서 인자로 전달하거나, 배열을 풀어서 각각의 요소로 넣을때에 사용합니다. rest : 파라미터를 배열의 형태로 받아서 사용할 수 있습니다. 파라미터 개수가 가변적일 때 유용합니다. spread 사용 예시 function sum(x, y, z) { return x + y + z; } const numbers = [1, 2, 3]; console.log(sum(...numbers)); 다음을 실행하면 6이 출력된다. number 앞에 ' . . . '는 각각을 분해하는 특징이 있다. 따라서 function sum에 1,2,3이 인자로 들어가고 ..

[JavaScript] 클로저

코드스테이즈 41기 교육 내용을 정리하고 있습니다. 틀린 부분이 있으면 댓글로 알려주시면 감사하겠습니다. 클로저 (1) 함수호출이 두번 발생하는 화살표함수가 있다. const adder = x => y => x+y; adder(5)(7);//12 다음함수는 아래함수와 동일한 실행을 보인다. const adder = function(x){ return function(y) { return x + y; } } adder 내부 리턴에 익명 함수는 외부의 매개변수인 x에 접근하여 덧셈값을 리턴하고 있다. 클로저는 함수를 리턴하는 함수이다. 클로저는 리턴하는 함수에 의해 스코프가 구분된다. 클로저의 핵심은 스코프를 이용해서, 변수의 접근 범위를 닫는데 있다. 이들은 내부 함수에서 외부함수 변수에 접근할수 있다는 ..

[JavaScript] 스코프

코드스테이즈 41기 교육 내용을 정리하고 있습니다. 틀린 부분이 있으면 댓글로 알려주시면 감사하겠습니다. 스코프 변수 접근규칙에 따른 유효범위 let name ='Lee'; function greetSomeone(){ let greet = 'Hello' return greet+' '+name; } console.log(greetSomeone()); console.log(name); console.log(greet); 다음 코드의 출력은 어떨까? console.log(greetSomeone());은 Hello Lee가 출력된다. 이전에 공부했던 함수의 모양이니 어렵지 않게 이해가 가능하다. console.log(name);은 Lee가 출력된다. console.log(greet);은 referenceErro..

[JavaScript] 원시형 자료형과 참조형 자료형

코드스테이즈 41기 교육 내용을 정리하고 있습니다. 틀린 부분이 있으면 댓글로 알려주시면 감사하겠습니다. 원시 자료형 자바스크립트에서 원시형 타입의 데이터중 자주 사용하는 다섯개는 string, number, boolean, undefined, null입니다. 이들은 데이터가 하나의 정보를 갖고 있습니다. 쉽게 let a = 10; 이라는 코드를 두고 생각해 보면 a라는 이름의 메모리에는 10이라는 정보가 담겨있습니다. 그래서 누군가 console.log(a) 로 a의 정보를 호출하면, 컴퓨터는 a라는 이름의 메모리를 찾고, 안에 담겨 있는 10이라는 정보를 출력합니다. 원시 자료형은 동적 메모리를 갖습니다. 원시 자료형 각각이 메모리 크기가 정해지는데, 정보의 크기가 메모리 보다 작아도 메모리의 크기는..

[JavaScript] 배열

코드스테이즈 41기 교육 내용을 정리하고 있습니다. 틀린 부분이 있으면 댓글로 알려주시면 감사하겠습니다. 배열 순서가 있는 값이다. let number = [73,65,12,90,42]; 자바스크립트에서는 73,65,12,70,42의 element를 갖는 number라는 이름의 배열을 다음과 같이 만든다. 배열의 순서는 index라 부르는데, index는 0부터 시작하는 특징이 있다. number배열에서 '73'element는 0번째 위치에 있으니, index는 0이라고 할수 있다. 배열에 대괄호와 숫자를 넣으면 배열에서 해당 순서 번째의 값이 나온다. number[0]; // 73 number[1]; //65 number[2]; //12 number[3]; //90 number[4]; //42 numb..

[JavaScript]계산기 만들기

코드스테이즈 41기 교육 내용을 정리하고 있습니다. 틀린 부분이 있으면 댓글로 알려주시면 감사하겠습니다. https://github.com/Leewang31/fe-sprint-calculator 새로 알게된 내용 0 // script.js const display = document.querySelector('.calculator__display'); console.log(display.textContent); // '0' console.log(typeof(display.textContent)); // 'string' 다음과 같은 코드가 있을때 div태그 안에 0값을 15로 변경하고 싶다. 클래스 calculator_display를 document.querySelector()로 받아 display라는 변..