<시험정리> 웹 개발 기초 기말고사

HTML

<input type="">

type이 button인 경우 value값은 버튼의 text

type이 radio나 checkbox인 경우는 id나 name으로 묶어서 처리한다.

체크가 됐는지는 obj.checked를 이용하여 확인

 

콤보박스

<select> <option></option> </select> //selectedIndex사용으로 선택한 인덱스 확인 (id를 가져오면 배열이기에)

 

<script></script>안에 작성

function키워드도 script안에 작성

 

css

수평 정렬 : 자손에게 float속성, 부모의 overflow속성은 hidden //overflow를 해야 글자가 안떠다님

중앙 정렬 : width속성을 부여, margin속성을 '0 auto'로 입력

one True 정렬 : 부모 태그에 width 입력, 수평 정렬하는 부모에 overflow:hidden적용, 자손태그에 width와 float 부여

절대 위치 배치 : 자손 position : absolute, 부모 position : relative

요소 중앙 배치 : 중앙 정렬하는 div태그 position : absolute, left, top속성 50%지정, div태그

-> margin-left, margin-top 속성 음수 입력(값은 div태그의 너비와 높이의 정확히 반)

고정 바 배치 : position : fixed, left,top,right,bottom속성에 값을 입력해 위치 설정, width,heigth 속성으로 크기 조절

 

jQuery

<script src="http://code.jquery.com/jquery-3.1.0.js"></script> // jQuery 라이브러리 사용

&(선택자).메서드(매개변수, 매개변수)

&(document).ready(...); -> HTML 문서 로드가 완료되면 ... 실행

attr(); //문서 객체의 속성 조작

ex) var src = &('script').attr('src'); //속성을 추출

 

시스템 메세지 출력 alert("내용");

 

id를 이용한 값 가져오기 : document.getElementById("Id").value

id를 이용한 객체 가져오기 : document.getElementById("Id");

id를 이용한 내용 바꾸기  : document.getElementById("Id").innerHTML;

 

jQuery는 id를 '#var'방식으로 가져온다.

id를 이용한 값 가져오기 : var1= $('#var1').val();

id를 이용한 내용 바꾸기  : $('#result').text(parseInt(var1)+parseInt(var2));

 

hover(올릴 때, 내릴 때)

 

마우스 들어감  : $(".box").mouseenter(function(){

$("#result").text("마우스 들어감);
});

마우스 나감  : $(".box").mouseleave(function(){

$("#result").text("마우스 나감);
});

 

hover로도 구현 가능 hover(올릴 때, 내릴 때)

$(".box").hover(

function(){

$(this).css("background-color","red"); //this는 .box와 동일(자기 자신)

$(this).html("red");

},function(){

$(this).css("background-color","blue");

$(this).html("blue");

}

);

 

css제어

$('h1').css('color','red');

 

<div></div>는 $('div').click();으로 제어

<div class="box"></div>는 $('.box').css({});로 제어

<div id="box"></div>는 $("#box").css({});로 제어

 

JSON : 속성 : 값이 쌍으로 되어있다.

 

AJAX : 비동기 방식으로 표기

 

form control

$("#mySelect").on('change',function(){}); // 변경 이벤트

선택 된 값 가져오기 : select

$("#mySelect option:selected").val(); //value값 (영어)

$("#mySelect option:selected").text(); //text값 (한글)

input

$("input[name='city']:checked").val(); // 값 가져오기 (radio)

$("input:checkbox[name='item']").each(function(){}); //each는 자동 반복

 

포커스 맞추기 : $(this).focus();

포커스 잃을 때 : $("#password").blur(function());

 

$(document).ready(function(){});

 

html(); //문서 객체 내부의 HTML 태그 조작 (HTML 효과 적용)

var text= &('h1').text(); -> 선택된 모든 객체 글자 추출

text(); //문서 객체 내부의 글자 조작 (단순 글자)

var html= &('h1').html(); -> 첫 번째 객체 글자 추출

 

$('h1:nth-child(1)').text("..."); 단순 텍스트 (h1의 1번)

$('h1:nth-child(2)").html("..."); 하이퍼링크 적용(h1의 2번)

 

이미지 숨기기 jQuery

$("Hide_Button").click(function(){

$("img").hide();

});

이미지 보이기

$("Show_Button").click(function(){

$("img").show();

});

 

input type

아이디 : text

비밀번호 : password

성별 radio(택 1)

복수선택 checkbox

제출 버튼 submit

 

변수를 체크했는가(했으면 true, 아니면 false) : var.is(":checked)"

form에서 var value = ("#value");를 한 후 value.val()로 값을 가져와 체크

-> 입력이 안되있으면 value.focus()를 통하여 포커스 주기

 

$("#form의 id").submit(); //서버로 전송

 

이벤트

on() 이벤트 연결

off() 이벤트 제거

ex) &(selector).on(eventName,eventHandler);

 

event.preventDefault(); // 서버로 입력 양식 전송 중단

 

mouseover랑 mouseenter 거의 비슷

mouseout랑 mouseleave 거의 비슷

 

클래스 조작

addClass() 클래스 추가

removeClass() 클래스 제거

toggleClass() 클래스 전환

 

시각 효과

show(속도) : 문서 객체가 커지며 표시

hide(속도) : 문서 객체가 작아지며 표시

toggle(속도) : show()메서드 hide()메서드 번갈아 실행

 

slideDown(속도) : 문서 객체가 슬라이드 효과와 함께 표시

slideUp(속도) : 문서 객체가 슬라이드 효과와 함께 사라짐

slideToggle(속도) : slideDown()메서드 slideUp()메서드 번갈아 실행

 

fadeIn(속도) : 문서 객체가 선명해지며 표시

fadeOut(속도) : 문서 객체가 흐려지며 표시

fadeToggle(속도) : fadeIn()메서드 fadeOut()메서드 번갈아 실행

 

속도 문자열

slow 600ms

normal 500ms

fast 400ms

 

애니메이션 효과 //큐 방식 선입선출

animate() 메서드

1. &(selector).animate(속성 객체);

2. &(selector).animate(속성 객체, 시간);

3. &(selector).animate(속성 객체, 시간, 콜백 함수// 모션 끝난 뒤 새로운 모션 실행);

 

일정시간 애니메이션 정지 : dealy()

애니메이션 중단 : stop()

ex0 &('h1').stop(clearQueue,goToEnd);

clearQueue (기본값)

- false - 현재 실행중인 애니메이션만 멈춤

- true - 예약된 모든 애니메이션 멈춤

goToEnd 매개변수 : 애니메이션 중지할 때 어떤 상태로 종료할지 지정

- false - 현재 상태 멈춤

- true - 마지막 상태로 가서 멈춤

 

setInterval(함수, 특정 시간); //특정 시간마다 함수 실행

 

fadeIn : 서서히 보임(show)

fadeOut : 서서히 사라짐(hide)

 

애니메이션 제어 : $("img").animate({내용});

height : 'toggle' (ON/OFF 제어)

 

Javascript

 

obj.value는 value값을

obj.text는 html내용을 가져옴

 

DOM 객체 찾기

1. getElementById(); // id로 찾기 (단수)

2. getElementsByTagName(); // TagName으로 찾기 (복수)

ex) document.getElementsByTagName("div"); 

3. getElementsByClassName(); // ClassName으로 찾기 (복수)

ex) document.getElementsByTagName("class"); 

4. getElementsByName(); // Name으로 찾기 (복수)

 

var p = document.getElementById("ID"); // id를 찾아 p 변수에 대입

p.id; = id의 이름

p.tagName = id를 가진 태그 이름

p.innerHTML = 적용된 HTML 내용

p.style.color = 글자 색

p.onclick = onclick을 할 때의 정보

p.childElementCount = 자식의 개수

p.offsetWidth = p의 너비

p.offsetHeight = p의 높이

 

this키워드 : 객체 자신을 가리킨다.

 

자바스크립트 코드 작성 위치

1. HTML 태그 이벤트 리스너 속성

2. <script></script>태그 //head 태그, body 태그 내 어디든 가능, 여러 번 삽입 가능

3. 자바스크립트 파일.js // <script src="파일이름.js">코드 추가 X</script> 

4. 하이퍼링크의 href부분

 

javascript:alert("내용") <- 내용을 가진 창을 띄워줌

prompt("메세지","디폴트 입력값") - 인자(입력 값), 확인, 취소

ex) var ret = prompt("이름을 입력", "최진수"); 

confirm("메세지") - 확인, 취소

ex) var ret = confirm("메세지");

alert("메세지") - 확인

ex) alert("클릭"); 

 

보통 받아오는 값은 string(문자열)형태이기에 parseInt("값");을 통하여 정수형으로 형변환 해야한다.

 

함수에서 자기 자신 넘기기 ex) onclick="over(this)"

 

웹 페이지 : document

브라우저 윈도우 출력

document.write() //printf()

document.writeln() //\n을 사용 줄넘기기x 한 칸띄우기

document.write("<h3>내용</h3>"); // h3태그를 출력하는 방법(다른 태그도 동일)

 

이벤트 리스너

1. onmouseover="코드"; // 마우스가 올라가면

2. onmouseout="코드"; // 마우스가 내려가면

 

이벤트

load 이벤트 - 1. HTML 문서 전체 로딩완료 2. 이미지의 로딩 완료시

click 이벤트 - 마우스 클릭

submit 이벤트 - submit 버튼 클릭

reset 이벤트 - reset 버튼 클릭

focus 이벤트 - 입력하기 위해 선택

keypress 이벤트 - 키를 누를 때

keyup 이벤트 - 누른 키를 놓을 때

resize 이벤트 - 윈도우 크기 변경 시

change 이벤트 - 라디오 버튼 선택 시

dbclick 이벤트 - 마우스 더블클릭 시

 

if-else if-else

if(조건){
}

else if(조건){

}

else{

}

 

switch(식){

case 값:

실행문

break;

case 값:

실행문

break;

......

default:

실행문

}

 

eval(exp) : exp의 자바스크립트 식을 계산하고 결과 리턴

parseInt(str) : str문자열을 10진수 정수로 변환하여 리턴

parseInt(str,radix) : str문자열을 radix 진수로 해석하고, 10진수 정수로 바꾸어 리턴

parseFloat(str) : str문자열을 실수로 바꾸어 리턴

isFinite(value) : value가 숫자면 true

isNaN(value) : value가 숫자가 아니면 true

 

css제어

ex)

function over(obj)

{

obj.style.background="yellow";

}

 

addEventListener(eventName, listener,[useCapture])

 

p = document.getElementById("p");
p.addEventListener("mouseover", over); // 이벤트 리스너 over 등록
p.addEventListener("mouseout", out); 

 

onfocus - 포커스를 받을 때 발생

onblur - 포커스를 잃을 때 발생

 

함수 안에 var를 통해 선언 => 지역 변수

함수 밖에 var를 통해 선언 또는 함수 안에 var없이 선언 => 전역 변수

지역 변수와 전역 변수의 이름이 같을 때 전역 변수에 접근하기 위해서는 this.전역변수를 사용하면 된다.

 

이벤트 객체는 이벤트 리스너 함수의 첫 번째 매개변수로 전달

1. 이름을 가진 이벤트 리스너

function f(e){....} //매개변수 e에 이벤트 객체 전달받음

obj.onclick = f; // obj 객체의 onclick 리스너로 함수 f 등록

2. 익명 함수인 경우

obj.onclick = function(e){...} //매개변수 e에 이벤트 객체 전달받음

3. HTML 태그에 이벤트 리스너

function f(e) {...}

<button onclick="f(event)">버튼</button>

<div onclick="alert(event.type)">버튼</div>

 

이벤트 객체에 들어있는 정보

- 현재 발생한 이벤트에 관한 다양한 정보 -> 객체의 프로퍼티와 메소드로 알 수 있다.

- 이벤트 객체의 공통 멤버

1. type - 현재 발생한 이벤트 종류

2. target - 이벤트를 발생시킨 객체

3. currentTarget - 현재 이벤트 리스너를 실행하고 있는 DOM객체

4. defaultPrevented - 이벤트의 디폴트 행동이 취소되었는지 나타내는 true/false 값

5. preventDefault() - 이벤트의 디폴트 행동을 취소시키는 메소드

 

이벤트의 디폴트 행동

- 특정 이벤트에 대한 HTML 태그의 기본 행동

ex) <a>의 click 이벤트 디폴트 행동 -> 웹 페이지 이동

이를 막는 방법

1. 이벤트 리스너에서 false 리턴

-> <a href="http://www.naver.com" onclick="return false">이동 안 되는 링크</a>

2. 이벤트 객체의 preventDefault() 메소드 호출

-> <a href="http://www.naver.com" onclick="event.preventDefault();">이동 안되는 링크</a>

 

document : HTML 문서 전체를 대변 // DOM객체가 아님

-> 연결된 스타일 시트가 없어 document에서는 CSS3스타일시트 연결X

 

style 시트에서의 direction : rtl(right-to-left direction) | ltr(left-to-right direction) // 오른쪽 정렬, 왼쪽 정렬

 

onload = "내용"; // 페이지가 모두 로드 되고 실행

 

onload 리스너

- window 객체에 발생(body로 onload하는 것과 동일)

- 이미지 로딩 완료

 

document.write();

document.writeln(); // HTML 텍스트에 \n을 덧붙여 출력 => 한 칸 띄는 효과 == &nbsp;

-> 한 줄을 띄려면 document.write("<br>");

document.open(); // 현재 브라우저에 출력된 HTML 지우고 새 HTML 페이지 시작

document.close(); // 현재 브라우저에 출력된 HTML 페이지 완성 (더 이상 document.write() 사용 불가)

 

사용자 객체 만들기

1. 직접 객체 만들기 : new Object() 이용 //객체 안에 멤버 변수, 메소드 작성(메소드는 미리 함수 작성)

2. 직접 객체 만들기 : 리터럴 표기법 이용 //객체 안에 멤버 변수, 메소드 작성(메소드도 작성)

3. 객체의 틀(프로토타입)을 만들고 객체 생성 - 일반적으로 사용(클래스)

- function student(name,score){ 내용 } 처럼 생성자 함수 구현 //안에 멤버 변수, 메소드 작성

-> new 연산자를 이용해객체 생성

 

window.open(URL,NAME,OPTION);

1. URL : 새 창에 URL 주소 열기

2. NAME : 이름 또는 target 속성(_blank, _parent, _self, _top, name)

3. OPTION : width, height, toolbar, menubar, ...

 

배열

ex) var cities = ["Seoul","New York","Paris"]; //크기가 3인 배열

-> cities[3] = "A"; // 크기가 4인 배열로 변한다. 

=> 배열 크기 고정 X, 마지막 원소 추가 시 증가

ex) cities[10] = "B"; // 오류(cities의 크기는 3 증가해도 4였기 때문에 범위를 넘음)

 

배열의 length프로퍼티

배열.length; => 배열의 크기

이를 이용하여 배열 크기 조절 가능

배열.length = 10; //크기가 10으로 조정 처음 10개 원소 외 모두 삭제

배열에 여러 타입 데이터 섞어서 저장 가능(0번은 0, 1번은 5.5, 2번은 "문자열", 3번은 Date객체, ... 등)

 

c = a.concat(b); // c는 a와 b를 연결한 새 배열

c = a.join("##"); // c는 배열 a를 연결한 문자열

c = a.reverse(); // a.reverse()로 a 배열도 변경, c는 결과 배열 (문자열이 a,c 둘다 뒤집힘)

c = a.slice(1,2); // c는 새 배열이며, 배열 1번을자름 (slice(start,end); start<=값<end;)

c = a.sort(); // a.sort()로 a 배열도 변경, c는 결과 배열 => 정렬

c = a.toString(); // 원소 사이에 ","를 넣어 문자열 생성

 

Date 객체

var now = new Date(시,분,초);

now.toUTCString(); // Universal Time Coordinated 국제 사회가 사용하는 과학적 시간 표준

now.getFullYear(); // 년도 ex)2021

now.getMonth(); // 월(1월을 0부터 시작)

now.getDate(); // 일

now.getHours(); // 시간

now.getMinutes(); // 분

now.getSeconds(); // 초

now.getMilliseconds(); // 밀리초

now.toLocaleString(); // 지역(현지)시간

 

String 객체

var a = new String("Boys");

a.charAt(0); // 0번째 글자 가져오기(배열 인덱스)

a.concat(b,"입니다") // a의 뒤에 b변수와 "입니다" 붙이기

a.indexOf("s"); // 해당 문자의 위치를 배열 인덱스값으로 줌( 없으면 -1 )

a.slice(5,8); // 5번 인덱스 부터 8번 전까지 추출

a.substr(5,3); // 5번 인덱스 부터 3글자 추출

a.toUpperCase(); // 대문자로 변환

a.replace("and","or"); // and를 or로 변환 (앞 매개변수를 뒤 매개변수로 변환)

a.trim(); // 공백 제거

var c = a.split(" "); // 매개변수로 분리 => 배열 생성(변수에 넣음), c는 배열이 된다.

 

수학

Math.floor(값) : 소수점 이하는 버림

Math객체

new Math()로 객체 생성 X => 바로 사용

ex) Math.sqrt(4);

난수 발생

var m = Math.random()*100; // m은 0~99.999....보다 작은 실수 난수

var n = Math.floor(m); // m에서 소수점 이하 제거(0~99사이)

 

문서 동적 구성

DOM 객체 동적 생성 : document.createElement("태그 이름");

DOM 트리에 삽입 :

1. 부모.appendChild(DOM 객체);

new.appendChild(newDIV); - 마지막 자식으로 추가

2. 부모.insertBefore(DOM 객체, [기준자식]);

new.insertBefore(newDIV, new.childNodes[n]);- 태그의 n+1 번째 자식 앞에 추가

DOM 객체 삭제

var removeObj = 부모.removeChild(삭제 할 객체);

 

이벤트 흐름

- 캡쳐 단계

- 버블 단계

- 이벤트 흐름 중단 : stop.Propagation() 호출

 

마우스 이벤트 객체의 프로퍼티

x,y - (x,y)는 타겟 객체의 부모 객체 내에서의 마우스 좌표

screenX, screenY - (screenX,screenY)는 스크린 기준으로 한 마우스 좌표

clientX, clientY - (clientX,clientY)는 브라우저 윈도우의 문서출력 영역 내에서 마우스 좌표

offsetX, offsetY - (offsetX,offsetY)는 타겟 객체 내에서 마우스 좌표

button - 눌린 마우스 버튼

0 - 버튼 안누름

1 - 왼쪽 버튼

2 - 오른쪽 버튼

3 - 왼쪽, 오른쪽 버튼 둘 다

4 - 중간 버튼

wheelDelta - 마우스 휠이 구른 방향

양수 - 위쪽으로 굴림 (120)

음수 - 아래쪽으로 굴림 (-120)

onclick - 마우스 클릭

ondblclick - 마우스 더블 클릭

onmousedown - HTML 태그에 마우스 버튼을 누르는 순간

onmouseup - 눌러진 버튼이 놓여지는 순간

onmouseover - HTML 태그 위로 올라오는 순간 (자식 포함)

onmouseout - HTML 태그 영역 벗어나는 순간 (자식 포함)

onmouseenter - HTML 태그 위로 올라오는 순간 (버블 단계 X)

onmouseleave - HTML 태그 영역 벗어나는 순간 (버블 단계 X)

onwheel - HTML 태그에 마우스 휠이 구르는 동안 호출

oncontextmenu - HTML 태그 위 마우스 오른쪽 버튼 클릭

 

selectedIndex => index는 선택 상태의 옵션 인덱스 0,1,....

selectedIndex =2; // 3번째 옵션 선택

options[2].selected = true; // 3번째 옵션 선택

 

키 이벤트

onkeydown - 키가 눌리는 순간 호출, 모든 키에 대해 작동

onkeyup - 눌러진 키가 떼어지면 호출

onkeypress - 문자 키와 <Enter>, <Space>, <Esc> 키에 대해서만 눌러지는 순간 추가 호출 (문자 키 아니면 호출 X)

 

<input type="text" id="text" onkeydown="whatKeyDown(event)">

function whatKeyDown(e){}

e.altKey를 체크하고 e.altLeft왼쪽 Alt키 else로 오른쪽 alt키

e.shiftKey를 체크하고 e.shiftLeft,...

e.ctrlKey를 체크 e.ctrlLeft

e.keyCode는 나머지 키를 누르면 작동

 

onreset - reset 버튼 클릭시 (<input type="reset"> 클릭 시) - false 리턴하면 폼 초기화 X

onsubmit - submit 버튼 클릭시 (<input type="submit"> 클릭 시 ) - false 리턴하면 폼 전송 X

리스너 작성 - onreset과 onsubmit리스너는 form태그에 달아야 한다.

 

함수 호출

function 이름(매개변수) { return; }

매개변수로 this를 받으면 해당 태그 조작 가능

 

window 객체

- 브라우저 윈도우나 탭 윈도우마다 별도의 window 객체 생성

window 객체 생성

- 3가지 경우

1. 브라우저가 새로운 웹 페이지 로드

2. 자바스크립트 코드로 윈도우 열기 시 window 객체 생성

-> window.open("웹페이지 URL","윈도우 이름", "윈도우 속성");

-> 윈도우 이름 (_blank, _parent, _self, _top, name)

3. iframe 태그 당 하나의 window 객체 생성

- 자바 스크립트 코드로 윈도우 객체에 대한 접근

-> window, 혹은 window.self 혹은 self 

 

window 객체의 타이머 기능 2가지

- 타임아웃 코드 1회 호출 : setTimeout()/clearTimeout()

setTimeout("함수이름",시간)

- 타임아웃 코드 반복 호출 : setInterval()/clearInterval()

 

윈도우 위치 및 크기 조절

window.moveBy(x,y);

window.moveTo(x,y);

window.resizeBy(x,y);

window.resizeTo(x,y);

 

웹 페이지 스크롤

window.scrollBy(x,y);

window.scrollTo(x,y);

 

웹 페이지 프린트

window.print();

-> print 전 onbeforeprint 리스너, 후 onafterprint 리스너 호출

 

location 객체

- URL정보를 나타내는 객체

 

navigator 객체

- 현재 작동 중인 브라우저에 대한 다양한 정보를 나타내는 객체

 

screen

- 브라우저가 실행되는 스크린 장치에 관한 정보를 담고 있는 객체

 

history

- 윈도우에서 방문한 웹 페이지 리스트(히스토리)를 나타내는 객체