코드 그라데이션

1. 순환 함수 (forEach()) 이거를 const arr = [1, 2, 3, 4]; for (let i = 0; i console.log(elm)); 이렇게 바꾸는 거 가능. 그냥함수 형태로 바꾸면 arr.forEach(function (elm) { console.log(elm); }); 출력 결과는 arr.forEach(function (elm) { console.log(elm * 2); }); 하면 2. map() - 원본 배열의 모든 원소를 순회하면서 연산을 해서 반환할 수 있게 만들어주는 함수. 새로운 배열을 리턴함. 응용 2. ..

노드 리스트 노드 정보를 여러개 저장한 것. 배열과 비슷하게 저장함. 새 노드를 추가할 때는 웹 문서에 어떤 소스를 추가할지 먼저 고려하고, 그에 따라 요소 노드나 속성 노드 등을 만들어야 한다. 텍스트 노드를 사용하는 새로운 요소 추가하기 1. 요소 노드 만들기 - createElement() 메서드 document.createElement(노드명) 그런데 이 메서드는 새로운 노드를 만들 뿐 아직 웹 문서에 새로운 노드를 추가한 것은 아니다. 예를 들면 태그의 내용에 해당하는 텍스트 노드도 만들어야 한다. 2. 텍스트 노드 만들기 - createTextNode() 메서드 새로운 요소 노드를 만들었다면 그 다음은 내용을 담는 텍스트 노드를 자식 노드로 만들어 연결해야 한다. document.createT..

DOM에서 이벤트 처리하기 웹 문서에서 이벤트가 발생하면 이벤트 처리기를 연결해야 한다. HTML 태그에서 이벤트 처리기를 연결할 수 있지만, 태그와 스크립트 소스가 섞여 있어서 복잡한 프로그램에는 적합하지 않다. 이럴 때 DOM에서 이벤트 처리기를 연결하면 HTML 태그와 스크립트 소스 분리 가능 DOM 요소에 직접 함수 연결하기 이벤트 처리기 함수가 간단하다면 DOM 요소에 직접 연결할 수 있다. ex. 이미지를 클릭하면 알림 창 표시하기 실행 결과 함수 이름을 사용해 연결하기 이벤트가 발생했을 때 실행할 함수를 따로 정의해 두었다면 함수 이름을 사용해 연결할 수 있다. 이 경우 함수 이름 다음에 괄호를 추가하지 않는다. 예제 - 이미지를 cup 함수로 저장한 후 click 이벤트가 발생하면 chan..

문서 객체 모델의 개념 웹에서 자바스크립트를 사용하는 이유는 어떤 조건에 맞거나 사용자의 동작이 있을 때 웹 문서 전체 또는 일부분이 동적으로 반응하게 하는 것. 이렇게 반응하게 하려면 웹 문 서 의 모든 요소를 따로 제어할 수 있어야 한다. 이 때 필요한 개념인데 자바스크립트를 이용하여 웹 문서에 접근하고 제어할 수 있도록 객체를 사용해 웹 문서를 체계적으로 정리하는 방법 DOM 트리 부모와 자식 구조로 표시하면 마치 나무 형태가 되므로 DOM 트리라고 한다. 노드(node) : 트리에서 가지가 갈라져 나간 항목 루트 노드 : DOM 트리 의 시작 부분인 html 노드를 나무 뿌리에 해당한다 해서 붙인 이름 루트 노드를 시작으로 웹 문서에서 사용한 요소는 계층 구조를 이룬다 따라서 각 노드 사이의 관계..

브라우저와 관련된 객체 웹 브라우저 창에 문서가 표시되는 순간 브라우저는 HTML 소스를 한줄씩 읽으면서 화면에 내용을 표시하고 관련된 객체를 만들어낸다. 이 객체들은 계층 구조로 이루어져있다. 아래 그림은 예시 자주 사용하는 브라우저 관련 내장 객체 window 객체의 프로퍼티 window 객체는 웹 브라우저의 상태를 제어, 자바스크립트의 최상위에 위치 자바스크립트의 모든 객체는 window 객체 안에 포함된다. 웹 브라우저 창의 정보를 가져오거나 값을 바꿀 때 사용한다. 프로퍼티를 사용하려면 window. 를 프로퍼티명 앞에 붙인다! 종류 window 객체의 메서드 window 객체의 메서드는 대화 창을 표시하거나 브라우저 창의 크기나 위치를 알아내고 지정하는 등 웹 브라우저 창 자체와 관련되어 있다..

객체 자바스크립트에서는 프로그램에서 인식할 수 있는 모든 대상을 가리킨다. 웹과 관련된 대상을 모두 객체로 인식 자바스크립트의 객체 문서 객체 모델(DOM)： 웹 문서 자체도 객체이고 그 안에 삽입되어 있는 이미지와 링크, 텍스트 필드 등도 모두 객체. 일반적으로 웹 문서에 삽입하는 요소는 document, image, link 객체 등이 있음. 브라우저 관련 객체: 웹 브라우저에서 사용하는 정보도 객체로 나타낼 수 있다. 사용하는 브라우 저 정보를 담고 있는 navigator 객체를 비롯해 history, location, screen 객체 등. 내장 객체: 웹 프로그래밍을 할 때 자주 사용하는 요소는 자바스크립트 안에 미리 객체로 정의되어 있다., 예를 들어 날짜, 시간과 관련된 프로그램을 개발하려면..

이벤트 웹 브라우저나 사용자가 행하는 어떤 동작 웹 브라우저 안에 서 이루어 지는 모든 동작이 이벤트는 아니다. 웹 페이지를 읽어 오거나 링크를 클릭하는 것처럼 웹 문서 영역 안에서 이루어지는 동작만을 말한다. 웹 문서 영역을 벗어나 클릭하는 행위는 이벤트가 아니다. => 주로 마우스나 키보드를 사용할 때, 웹 문서를 불러올 때, 폼에 내용을 입력할 때 발생한다. 이벤트의 종류 이벤트 처리기 웹 문서에서 이벤트가 발생하면 처리하는 함수를 이벤트 처리기 또는 이벤트 핸들러 라고 한다. 먼저 HTML태그 안에서 ‘on’다음에 ‘이벤트명’을 붙여서 속성 이름을 만들고, 그다음에 실행할 이벤트 처리기의 함수명을 작성하면 된다. # 예제 마우스로 클릭했을 때의 이벤트 이름은 click입니다. 태그 안에 oncli..

익명 함수 이름이 없는 함수 익명 함수를 선언할 때는 이름을 붙이지 않는다. function(a, b) { return a+b; } 익명 함수 실행하기 실행 결과 즉시 실행 함수 한 번만 실행하는 함수라면 함수를 정의하면서 동시에 실행할 수 있다. 즉시 실행 함수는 함수를 실행하는 순간에 자바스크립트 해석기에서 함수를 해석한다. 즉시 실행 함수는 함수를 식 형태로 선언하므로 마지막에 세미콜론을 붙인다. 기본형 예제 실행 결과 매개변수가 있는 형태 선언 부분 끝에 함수 실행을 위한 인수를 넣어준다. 실행 결과 화살표 함수 기본형 매개변수 => { 함수 내용 } 매개변수가 없는 경우 : 괄호 안을 비워둔다. const hi = function() { return "안녕하세요?"; } 화살표 함수로 작성하면 ..