비전공 썸네일형 리스트형 [java script] 문서 객체 모델(DOM) 1. 문서 객체 모델이란? ◎ 자바스크립트를 이용해 웹 문서에 접근하고 제어할 수 있도록 객체를 사용해 웹 문서를 체계적으로 정리하는 방법입니다. ▷ 웹 문서와 그 안의 모든 요소를 '객체'로 인식하고 처리합니다. ex) 웹 문서 전체는 document 객체, 삽입한 이미지는 image 객체, h1의 글자는 text 객체입니다. ◎ DOM 트리 ▷ 웹 문서에 있는 요소들 간의 부모, 자식 관계를 계층 구조로 표시한 것입니다. ▷ 나무 형태가 되기 때문에 "DOM 트리"라고 합니다. ▷ 노드(node) : DOM 트리에서 가지가 갈라져 나간 항목입니다. ▷ 루트 노드(root node) : DOM 트리의 시작 부분(html) ◎ DOM 구성 원칙 ▷ 모든 HTML 태그는 요소(element) 노드 ▷ 웹 .. 더보기 [java] 자바의 정석 ch4 연습문제 풀이 4-1) 다음의 문장들을 조건식으로 표현하라. ▷ int형 변수 x가 10보다 크고 20보다 작을 때 true인 조건식 int x = 15; if(x > 10 && x < 20){ System.out.println(true);} ▷ char형 변수 ch가 공백이나 탭이 아닐 때 true인 조건식 char ch = 'a'; if(ch != ' ' && ch != '\t' ) { System.out.println(true); } ▷ char형 변수 ch가 ‘x' 또는 ’X'일 때 true인 조건식 char ch = 'x'; if(ch == 'x' || ch == 'X' ) { System.out.println(true); } ▷ char형 변수 ch가 숫자(‘0’~‘9’)일 때 true인 조건식 ch = '.. 더보기 [java] 자바의 정석 ch3 연습문제 풀이 3-1) 다음 연산의 결과를 적으시오. package JAVA1218; public class ex03_01 { public static void main(String[] args) { // TODO Auto-generated method stub int x = 2; int y = 5; char c = 'A'; // 아스키 코드 : 65 System.out.println(1+x = 5 || x 2); System.out.println(y += 10 - x++); System.out.println(x += 2); System.out.println(!('A' = 0 ? (num/10+1)*10-num : false ▷ 간단하게 표현하면 10 - num % 10으로 표현할 수 있습니다! 3.. 더보기 [java] 자바의 정석 ch2 연습문제 풀이 2-1) 8개의 기본형을 알맞게 정리하시오 풀이) 크기 종류 1 byte 2 byte 4 byte 8 byte 논리형 boolean 문자형 char String 정수형 byte short int long 실수형 float double ▷ boolean은 0과 1만 받으므로 1비트로 충분하지만, 자바의 최소 단위는 1byte입니다. 2-2) 주민등록번호를 숫자로 저장하고자 한다. 이 값을 저장하기 위해서는 어떤 자료형(data type)을 선택해야 할까? regNo라는 이름의 변수를 선언하고 자신의 주민등록번호로 초기화하는 한 줄의 코드를 적으시오. 풀이) long regNo = 1234561234567L; ▷ 13자리의 숫자이기 때문에 long 타입으로 정의합니다. long type에는 숫자 뒤에 L을 .. 더보기 [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 요소를 클릭할 때.. 더보기 이전 1 ··· 30 31 32 33 34 35 36 다음
