Fairy ' s

객체 관련된 정보와 동작을 함께 모아 놓은 것 프로퍼티는 '키 : 값' 형태를 가지고 있고, 값이 함수일 경우 이것을 '메서드'라고 한다. 내장 객체 - 자주 사용하는 요소들이 자바스크립트에 미리 정의되어 있는 객체 문서 객체 모델 (DOM) - 웹 문서 자체, 이미지, 링크, 폼 객체 등과 document 객체, 웹 문서 안의 이미지를 관리하는 image 객체 등 웹 브라우저 객체 - 현재 사용 중인 웹 브라우저 정보를 담고 있는 native 객체, history 객체, location 객체, screen 객체 등 사용자 정의 객체 - 사용자가 필요할 때마다 자신의 객체를 정의해서 사용할 수 있다. 사용자 정의 객체 객체 선언 // 객체 형식 let book1 = { title : "JavaScript..

내장 객체 사용자가 손쉽게 가져와서 사용할 수 있도록 미리 만들어진 객체 웹 브라우저 창에서 웹 문서를 열면 가장 먼저 window라는 객체가 만들어지고, 하위에 웹 브라우저 창의 각 요소에 해당하는 객체들이 만들어진다. 하위 객체들은 웹 브라우저 창의 각 요소(웹 문서, 주소 표시줄)에 해당하는 객체들이며 각 또 다른 하위 객체를 가지고 있다. window 객체 웹 브라우저 창과 관련된 정보를 가지고 있으며, 웹 브라우저 창을 관리한다. window.프로퍼티이름 (프로퍼티 종류 ↓) document : 웹 브라우저 창에 표시된 웹 문서에 접근할 수 있다. frameElement : 현재 창이 다른 요소 안에 포함되어 있으면 해당 요소 반환 ,그렇지 않으면 null 반환 sessionStorage : 웹..

DOM 자바스크립트 같은 프로그래밍 언어로 웹 문서에 접근하고 제어할 수 있도록 웹 문서를 체계적으로 정리하는 방법 웹 문서를 하나의 객체로 정의하고, 웹 문서를 이루는 텍스트나 이미지, 표 등 모든 요소도 각각 객체로 정의한다. ex. 웹 문서 전체 : document 객체, 웹 문서에 삽입된 이미지 : image 객체 등 웹 문서 객체들도 프로퍼티와 메서드를 가지고 있다. DOM 트리 Do it! 위의 html 소스를 아래와 같은 트리 계층 구조로 나타낼 수 있다. DOM 활용 DOM 트리와 노드 모든 HTML 태그는 요소(element) 노드가 된다. HTML 태그에서 사용하는 텍스트 내용은 자식 노드인 텍스트(text) 노드가 된다. HTML 태그에 있는 속성은 모두 자식 노드인 속성(attrib..

Event 웹 브라우저나 사용자가 실행하는 어떤 동작 - 사용법 ex. button.on[eventname = function() { ... } ex. body.addEventListener("eventname", (e) => { ... }); 문서 로딩 이벤트 about : 웹 문서가 완전히 로딩되기 전에 불러오기를 멈췄을 때 error : 문서가 정확이 로딩되지 않을 때 load : 로딩이 끝났을 때 resize : 문서 화면의 크기가 바뀌었을 떄 마우스 이벤트 click : HTML 요소를 클릭했을 때 dbclick : HTML 요소를 더블클릭 했을 때 mousedown : 요소에서 마우스 버튼을 눌렀을 때 mousemove : 요소에서 마우스 포인터를 움직일 때 mouseover : 마우스 포인터..

함수 동작해야 할 목적대로 여러 개의 명령을 묶는 것 alert() 라는 것을 이전 글에서 공부하였었는데, alert() 또한 자바스크립트에 포함되어 있는 함수이다. function 함수명(매개변수) { return 결과값; } // 함수 선언 함수명(인수); // 함수 실행 매개변수 : 함수의 외부에서 받는 값 - 매개변수에 인수를 전달받지 못한 변수는 undefined가 되어 결괏값은 NaN이 된다. 인수 : 매개변수가 있는 함수를 호출할 때 실제로 값을 넣어 넘겨주는 것 return 문을 이용하여 함숫값을 반환한다. 디버깅 프로그램의 결과가 예상한 것과 다르게 나왔을 경우 순서대로 하나씩 진행해 보면서 오류를 찾아낼 수 있다 디버깅 방법 1. html 문서를 열고 마우스 오른쪽 버튼을 클릭하여 바로..

입·출력 alert() : 알림 창에 텍스트나 변수값 표시 confirm() : 취소, 확인 선택 창 prompt() : 입력 창 표시 console.log() : 콘솔 창을 통해 출력 document.write() : 웹 브라우저 창에 표시 undefined - undefined 가 나타나는 이유는 콘솔 창에서 실행한 명령이 반환하는 값이 없기 때문이다. - 콘솔 창에서 alert 실행 시 undefined, confirm이나 prompt 실행 시 반환 값이 나타난다. 템플릿 리터럴 문자열과 변수, 식을 섞어서 하나의 문자열을 만드는 표현 형식 '\n'과 같은 줄 let name = "fairycode" let classroom = 201 // 연결 연산자 이용 console.log(name + "님,..