FrontEnd 썸네일형 리스트형 [java script] addEventListener의 이벤트 종류 ◎ UI 이벤트 NO Event Description 1 load 웹 페이지나 스크립트의 로드가 완료되었을 때 2 unload 웹 페이지가 언로드 될 때 (주로 새로운 페이지를 요청한 경우) 3 error 브라우저가 자바 스크립트 오류를 만났거나 요청한 자원이 존재하지 않는 경우 4 resize 브라우저 창의 크기를 조절했을 때 5 scroll 사용자가 페이지를 위 아래로 스크롤 할 때 6 select 텍스트를 선택했을 때 ◎ Keyboard 이벤트 NO Event Description 1 keydown 키를 누르고 있을 때 2 keyup 누르고 있던 키를 뗄 때 3 keypress 키를 누르고 뗐을 때 4 keyCode 키 코드 값 ◎ Mouse 이벤트 NO Event Description 1 clic.. 더보기 [java script] 문서 객체 모델(DOM) 1. 문서 객체 모델이란? ◎ 자바스크립트를 이용해 웹 문서에 접근하고 제어할 수 있도록 객체를 사용해 웹 문서를 체계적으로 정리하는 방법입니다. ▷ 웹 문서와 그 안의 모든 요소를 '객체'로 인식하고 처리합니다. ex) 웹 문서 전체는 document 객체, 삽입한 이미지는 image 객체, h1의 글자는 text 객체입니다. ◎ DOM 트리 ▷ 웹 문서에 있는 요소들 간의 부모, 자식 관계를 계층 구조로 표시한 것입니다. ▷ 나무 형태가 되기 때문에 "DOM 트리"라고 합니다. ▷ 노드(node) : DOM 트리에서 가지가 갈라져 나간 항목입니다. ▷ 루트 노드(root node) : DOM 트리의 시작 부분(html) ◎ DOM 구성 원칙 ▷ 모든 HTML 태그는 요소(element) 노드 ▷ 웹 .. 더보기 [java script] 브라우저 관련 객체(window, navigator, location) 1. 브라우저 관련 객체의 계층 구조 no 종류 설명 1 window 브라우저 창이 열릴 때마다 하나씩 만들어집니다. 브라우저 창 안의 요소 중에서 최상위에 있습니다. 2 document 웹 문서마다 하나씩 있으며 태그를 만나면 만들어집니다. HTML 문서의 정보가 담겨 있습니다. 3 navigator 현재 사용하는 브라우저의 정보가 들어 있습니다. 4 history 현재 창에서 사용자의 방문 기록을 저장합니다. 5 location 현재 페이지의 URL 정보가 담겨 있습니다. 6 screen 현재 사용하는 화면 정보를 다룹니다. 2. window ◎ window 객체의 프로퍼티 ▷ 주로 웹 브라우저 창의 정보를 가져오거나 값을 바꿀 때 사용합니다. No 종류 설명 1 document 브라우저 창에 표시된.. 더보기 [java script] 객체 2(내장 객체 Date, Math) 1. 내장 객체 Date ◎ Date 객체 인스턴스 만들기 // Date 객체로 현재 날짜 나타내기 new Date(); // Date 객체로 특정 날짜 나타내기 new Date("2020-02-25") // Date 객체로 특정 날짜와 시간 나타내기 new Date("2020-02-25T18:00:00") //날짜와 시간 입력 방식 // 1) YYYY-MM-DD 형식 new Date("2020-02-25") // 2) YYYY-MM-DDTHH 형식 new Date("2020-02-25T18:00:00") // 3) MM/DD/YYYY 형식 new Date("02/25/2020") // 4) 이름 형식 new Date("Mon Jan 20 2020 15:00:41 GMT+0900 (대한민국 표준시)") .. 더보기 [java script] 객체 1(object, 내장 객체 Array) 1. 객체란? ▷ 프로그램에서 인식할 수 있는 모든대상 ▷ 데이터를 저장하고 처리하는 기본 단위 ◎ 자바스크립트 객체 : 자바스크립트 안에 미리 객체로 정의해 놓은 것입니다. ▷ 문서 객체 모델(DOM) : 문서, 이미지, 링크, 텍스트 필드 모두 별도 객체로 관리 ▷ 브라우저 관련 객체, 내장 객체(자주 사용하는 요소 저장) ▷ 사용자 정의 객체 : 사용자가 직접 만드는 객체 ◎ 객체 인스턴스 생성 방법 : 객체 자체가 아닌 인스턴스 형태로 만들어서 사용합니다. ▷ 인스턴스 : 객체를 틀처럼 사용해서 같은 모양으로 찍어낸 것입니다. ex) (기본형) new 객체명 ex) Date 객체의 인스턴스 만들어 날짜와 시간 표시 예제 현재 시간은 Fri Dec 16 2022 09:14:41 GMT+0900 (한.. 더보기 [java script] 자바 스크립트 함수 2(function) 3. 함수 표현식 ◎ 화살표 함수 ▷ ES6 이후로 사용하는 => 표기법 ▷ 익명 함수에서만 사용할 수 있습니다. const hi = function(){ return alert("안녕하세요?"); } const hi = () => {return alert("안녕하세요")}; const hi = () => alert("안녕하세요"); 위의 세 가지 함수 표현법은 모두 동일한 함수 표현법입니다. 4. 이벤트와 이벤트 처리기 ▷ 이벤트 ▶ 웹 브라우저나 사용자가 행하는 동작 ▶ 웹 문서 영역 안에서 이루어지는 동작만 가리킵니다. ▶ 주로 마우스나 키보드를 사용할 때, 웹 문서를 불러올 때, 폼에 내용을 입력할 때 발생합니다. ▷ 마우스 이벤트 NO 종류 설명 1 click 사용자가 HTML 요소를 클릭할 때.. 더보기 [java script] 자바 스크립트 함수 1(function) 1. 함수란? ▷ 동작해야 할 목적대로 명령을 묶어 놓은 것입니다. ▷ 각 명령의 시작과 끝을 명확하게 구별할 수 있습니다. ▷ 묶은 기능에 이름을 붙여 어디든 같은 이름으로 명령을 실행할 수 있습니다. ▷ 자바스크립트에는 이미 여러 함수가 만들어져 있어서 사용할 수 있습니다. ex) alert() 위의 방법과 같이 합을 구하는 함수를 선언할 수 있습니다. ◎ 변수의 특징 ▷ 스코프 : 변수가 적용되는 범위 ▶ 지역 변수 : 함수 안에서 선언하고 함수 안에서만 사용합니다. var과 함께 변수 이름 지정을 합니다. ▶ 전역 변수 : 스크립트 소스 전체에서 사용합니다. 함수 밖에서 선언하거나 함수 안에서 var 없이 선언합니다. 위의 코드 예시를 보시면 전역 변수만 출력 가능하고 지역 변수는 오류가 나타나게.. 더보기 [java script] 자바스크립트 반복문(for, while) ◎ for문 예제 ▷ for문도 자바와 동일합니다. ▷ for문을 사용할 때, for(초기 값, 조건식, 증감식) 3가지만 사용할 수 있다고 생각했지만, 증감식을 여러개 사용해도 됩니다. ex) for(초기 값, 조건식, 증감식1, 증감식2 ...) 1부터 5까지 더하면 15 1부터 100까지의 합 : 5050 1부터 100까지의 홀수 합 : 2500 1부터 100까지의 짝수 합 : 2550 ◎ for문을 이용한 구구단 예제 위의 코드는 아래와 같은 출력으로 결과가 나타납니다! ◎ while문을 이용한 팩토리얼(!) 예제 코드1) 10! = 10X9X8X7X6X5X4X3X2X1 = 3628800 코드2) 코드2처럼 변수 하나 더 추가하지 않고 더 간단하게 표시할 수 있습니다! ◎ 좌석배치도 예제 입장객 .. 더보기 이전 1 2 3 4 5 6 다음 목록 더보기
