찾으시는 정보가 있으시다면
주제별reference를 이용하시거나
우측 상단에 있는 검색기능을 이용해주세요

40일차 수업

========복습========

요소 추가

• appendChild(), insertBefore()

속성, 텍스트 변경

• nodeValue, innerHTML, value, setAttribute()

변경할 대상을 선택

• id, class, TagName, 또는 관계를 통해서 선택

======== 끝 ========

40일차 수업

window 객체

BOM(Browser Object Model), 모델 안에 있는 객체, 웹 표준은 아님

웹브라우저의 창, 전역객체, DOM 요소들은 모두 window 객체의 property

window.innerHeight;	// 현재 윈도우의 높이
window.open(“https://spongebob53.github.io/”,“_blank”, “width=400px, height=400px”);
// window.open(url, name, space, replace);
// url : 보여줄 페이지
// name : 속성(어떻게 창을 열 것인지 설정), _blank(새창,기본값), _self(현재창), _parent(부모프레임)
// space : 페이지 열릴 때 창의 크기, 스크롤 여부, 크기변경 여부 설정
.close(); // 창 닫기
location.href;	// 현재 페이지의 주소를 가져오거나, 새로운 문서를 불러올 때 사용

웹 표준

HTML, CSS, JS : Java 처럼 규칙이 엄격하지 않고 유연함, 개발자의 개성에 따라 코드가 천차만별

관리 측면에서 불안함을 해소하기 위해 W3C에서 웹 표준을 만듬

개발자의 사용성, 접근성 증가

history

브라우저의 사용했던 내역을 저장

window.history.back();	// 이전페이지 가기
window.history.go(-1);	// 음수에 따라 뒤로가기
window.history.forward();	// 다음페이지 가기

Screen, Navigator 객체

대화상자, 화면에 출력하는 것보다 우선적으로 실행

alert(); : 경고창, 사용자에게 메세지를 보여주고, 확인을 기다리는창

• 대화 상자의 확인을 눌러야지만 다음 작업이 진행

prompt(); : 메세지를 보여주고, 사용자가 입력한 “문자열”을 반환한다

confirm(); : 메세지를 보여주고, 확인 or 취소를 기다리는 창, 결과값을 참거짓으로 반환한다

Event

HTML 요소 안에서의 사건 발생, 사건이 발생했을 때 특정 동작을 하겠다

이벤트를 발생시키는 조건 : 키보드, 마우스, DOM or window(요소나 페이지의 focus 등)

JS 에서 이벤트에 대한 것들을 미리 정의해 놓음

var btn = document.querySelector(“#btn”);

btn.onclick = function() { … }; // 1 방법

function btnclick(){ … };	// 2 방법
btn.onclick = btnclick();

// 위의 두가지 방법은 이벤트를 다중으로 받지 못하는 단점

btn.addEventListener(“click”,btnclick);	// 대상.addEventListener(이벤트명,함수명);
function btnclick(event){
var target = event.target;	// event 인자로 사용가능, 이벤트 정보에 대해 미리 정의된 변수
}

Timer

Java에서 sleep과 비슷한 기능

함수가 일정 시간 뒤에 호출이 되도록 딜레이를 주는 방법

setTimeout(호출함수, 지연시간 ms); : 일정 시간 뒤에 시작, clearTimeout(대상);으로 종료

setInterval(호출함수, 반복주기 ms); : 일정 시간마다 반복, clearInterval(대상);으로 종료

Mouse event

click : 마우스 클릭 시

mouseover : 마우스 커서가 해당 태그 위로 올라왔을 때

mouseout : 마우스 커서가 해당 태그 위에서 떠났을 때

mousedown : 마우스를 눌렀을 때

mouseup : 마우스를 떼었을 때

onclick처럼 on 을 붙이면 태그 안에서도 바로 작성 가능

Keyboard event

keydown : 키보드를 누르는 순간

keyup : 키보드를 떼는 순간

keypress : 키보드를 누르는 동안(문자가 연결되는 상황)

focus : 요소에 집중하고 있을 때, 요소를 선택하거나 입력 준비 중일때

blur : focus의 반대

form

전달 과정을 지원해주는 태그

• 시작태그와 종료태그 사이에 있는 input 태그 안에 들어있는 값은 전부 전달

• 데이터를 보여주기 뿐만 아니라 사용자에게 입력받는 행위

• 현재 페이지 결과를 처리, 다른 페이지에 전달

form 안에서만 작동하는 type

• input type =“submit” : 데이터 제출

• input type =“reset” : 데이터 초기화

URL 살펴보기

http://주소:8080/파일경로/파일명.html?속성명=속성값&속성명=속성값…

파일명 다음에 나오는 ‘?’ : 구분선, 이후에 나오는 글자는 키쌍의 형태로 전달될 데이터

데이터의 모양은 “속성명=속성값”, 여러개의 속성일 경우 &로 구분

속성: form 태그에 작성된 input 태그의 순서대로 나열, 속성명은 input의 name 속성값을 가져옴

속성 값 : 해당 input태그의 입력값

데이터 전달

<form action = “ 입력할 데이터를 처리할 페이지 주소” method = “방식 선택”>

method : 데이터를 주고 받는 방식

get

• 주소에 데이터를 추가하여 전달하는 방식

• 전달하는 데이터가 주소창에 보이기 때문에 보안상 좋지 않음

• 주소창의 길이가 제한적이기 때문에 전달할 수 있는 데이터가 한정되어있음

• 전달할 수 있는 데이터는 문자열

• 속도가 빠름

post

• 데이터를 별도로 첨부하여 전달하는 방식

• 데이터가 외부에서 보이지 않음

• 전달할 수 있는 데이터 제한이 없음

• 데이터의 자료형도 자유로움