JavaScript 사용법 요약정리

JavaScript 사용법 요약정리

WEB/WEB의 기초

2021. 4. 25. 15:30

외부 스크립트 파일 연계시키기

<script src="파일경로"></script>

JS 기본 입출력

alert - 알림 창 출력하기

alert("안녕하세요?")

confirm - 확인 창 출력하기

var reply = confirm("정말 배경 이미지를 바꾸시겠습니까?");

prompt - 프롬프트 창에서 입력받기

var name = prompt("이름을 입력하세요.", "기본값");

document.write() - 웹 문서에 내용 출력하기

<script>
  var name = prompt("이름을 입력하세요.");
  document.write("<b><big>" + name + "</big></b>님, 환영합니다."):
</script>

console.log() - 콘솔 창에 내용 출력하기

<body>
  <h1>어서오세요</h1>
  
  <script>
    var name = prompt("이름을 입력하세요.");
    console.log(name + "님, 환영합니다.");
  </script>
</body>

※ 크롬에서 콘솔 창 띄우기 단축키 : Ctrl + Shift + J

기본문법

변수 선언

var 변수명;

var season = ["봄", "여름", "가을", "겨울"]

undefined 유형 : 자료형이 정의되지 않은 데이터

null 유형 : 데이터가 유효하지 않음

연산자

==	피연산자의 자료형을 자동으로 형변환
!=	피연산자의 자료형을 자동으로 형변환
===	값(피연산자)과 자료형이 같다.
!==	값(피연산자)이 같지 않거나 자료형이 같지 않다.
?	삼항 연산자

3 == "3" // true
3 != "3" // false

3 === "3" // false
3 !== "3" // true

(number % 3 == 0) ? alert("3의 배수입니다.") : alert("3의 배수가 아닙니다.");

문자열 비교

"javascript" > "Javascript"

위 코드의 결과값은 true이다.

ASCII 코드값으로 비교하기 때문

switch 문

<script>
  switch(session) {
    case "1" :
      document.write("<p>1입니다.</p>");
      break;
    case "2" :
      document.write("<p>2입니다.</p>");
      break;
    case "3" :
      document.write("<p>3입니다.</p>");
      break;
  }
</script>

parseInt - 정수 변환

var num = parseInt(prompt("몇 명입니까?"));

반복문

for문

<script>
  var i;
  var sum = 0;

  for(i = 1; i < 6; i++){
    sum += i;
  }
</script>

while문

<script>
  var i = 1;
  var sum = 0;

  while(i < 10) {
    sum += i;
    i++;
  }
</script>

do-while문

<script>
  var i = 1;
  var sum = 0;

  do {
    sum += i;
    i++;
  } while(i <= 9)
</script>

물론 JS에도 break, continue가 있다.

함수와 변수

함수 선언

<script>
  function addNumber(a, b = 1) {
    var sum = a + b;
    return sum;
  }
</script>

변수 b와 같이 ES6부터는 기본값을 지정할 수 있다.

JS에서의 전역 변수, 지역변수 구분

전역 변수	함수 밖에서 선언하거나 함수 안에서 var를 빼고 선언
지역 변수	함수 안에서 var를 선언, 함수 영역 스코프를 갖는다.

호이스팅(hoisting)

변수의 선언을 스코프의 가장 위쪽으로 끌어올려서 해석한다.

실제 코드

<script>
  var x = 10;

  functino displayNumber() {
    console.log("x is " + x);
    console.log("y is " + y); // y가 아직 선언이 안되어있음
    var y = 20;
  }

  displayNumber();
</script>

JS해석기가 인식하는 코드 - y값이 할당이 되어있지 않다.(undefined)

<script>
  var x = 10;

  functino displayNumber() {
    var y;
    console.log("x is " + x);
    console.log("y is " + y); // y is undefined
    y = 20;
  }

  displayNumber();
</script>

let과 const

var가 함수 안에서 사용되면, 함수 영역 스코프를 가지며 지역변수가 된다.

	변수 유효범위	같은 이름으로 재선언	값의 재할당	호이스팅
let	블록 레벨 스코프	X	O	O
const	블록 레벨 스코프	X	X	O

사실 let과 const는 호이스팅이 된다.

그러나 선언 이전에 호출하려하면 ReferenceError가 발생한다.

<script>
  var i = 0;
  
  if(i === 0) {
    console.log(cat_let); // ReferenceError
    
    console.log(cat_const); // ReferenceError
    
    console.log(cat_var); // undefined
    
    let cat_let = 1;
    const cat_const = 2;
    var cat_Var = 3;
  }
</script>

이는 호이스팅될 때 초기화, 즉 메모리에서 할당되지 않고

TDZ(Temporal Dead Zone)이라는 영역에 속하기 때문이다.

JS의 스코프, let, const, var에 대한 자세한 차이점은

YouTube Yalco채널영상에서 공부하기 : https://www.youtube.com/watch?v=HsJ4oy_jBx0

JS에서 변수를 사용하는 팁

전역 변수 사용을 최소화
var는 함수의 시작 부분에서 선언(호이스팅되기 때문)
for문의 카운터 변수에는 var보단 let을 사용
ES6이 된다면, var보단 let을 사용

익명 함수

<script>
  var sum = function(a, b) {
    return a + b;
  }
  
  document.write("함수 실행 결과: " + sum(10, 20) );
</script>

즉시 실행 함수

<script>
  (function(a, b) {     // 매개변수
    sum = a + b;
  }(100, 200));         // 인수
  
  document.write("함수 실행 결과: " + sum);
</script>

화살표 함수

<script>

  // 매개변수 없음
  const hi = () => { return "안녕하세요?" };
  
  // 매개변수 없음, 한줄이라 return 생략
  const hi2 = () => "안녕하세요?";      
  
  // 매개변수 1개, 소괄호 생략가능
  const hi3 = user => { document.write(user + "님, 안녕하세요?"); }
  
  // 매개변수 2개
  const sum = (a, b) => a + b;
  
</script>

이벤트와 이벤트 처리기

이벤트의 종류

마우스 이벤트	click	클릭할 때
	dblclick	더블클릭할 때
	mousedown	요소 위에서 버튼을 눌렀을 때
	mousemove	요소 위에서 포인터를 움직일 때
	mouseover	포인터가 요소 위로 옮겨질 때
	mouseout	포인터가 요소 밖으로 벗어날 때
	mouseup	요소 위 마우스 버튼에서 손을 뗄 때
키보드 이벤트	keydown	키를 누르고 있을 때
	keypress	키를 눌렀을 때
	keyup	키에서 손을 뗄 때
문서 로딩 이벤트	abort	완전 로딩 전에 멈췄을 때
	error	정확히 로딩되지 않았을 때
	load	로딩이 끝났을 때
	resize	화면 크기가 바뀌었을 때
	scroll	화면이 스크롤되었을 때
	unload	문서에서 벗어날 때
폼 이벤트	blur	폼 요소에 포커스를 잃었을 때
	change	목록, 체크 상태 등이 변경될 때
	focus	폼 요소에 포커스가 놓였을 때
	reset	폼이 리셋되었을 때
	submit	submit 버튼을 클릭했을 때

이벤트 처리기

기본형

<태그 on이벤트명 = "함수명">

예시1) 클릭하면 알림 창 표시하기

<body>
  <ul>
    <li><a href="#" onclick="alert('버튼을 클릭했습니다.')">green</a></li>
    <li><a href="#" onclick="alert('버튼을 클릭했습니다.')">red</a></li>
    <li><a href="#" onclick="alert('버튼을 클릭했습니다.')">blue</a></li>
  </ul>
</body>

예시2) 클릭하면 배경색 바꾸기 - document.querySelector

<body>
  <ul>
    <li><a href="#" onclick="changeBg('green')">green</a></li>
    <li><a href="#" onclick="changeBg('red')">red</a></li>
    <li><a href="#" onclick="changeBg('blue')">blue</a></li>
  </ul>

<script>
  function changeBg(color) {
    var result = document.querySelector('#result');
    result.style.backgroundColor = color;
  }
</script>
</body>

DOM을 이용한 이벤트 처리기

기본형

웹 요소.onclick = 함수;

예시) DOM을 사용하지 않고 버튼을 클릭해서 글자색 바꾸기

<body>
  <button id="change">글자색 바꾸기</button>
  <p>Reprehenderit tempor do quis sunt eu et exercitation deserunt. Laboris adipisicing est sint aliquip nulla pariatur velit irure elit qui id. Dolore aliquip dolore eu ut irure sint Lorem reprehenderit velit. Duis veniam irure cillum anim excepteur culpa pariatur sunt esse. Eu nulla commodo velit ex id dolore incididunt mollit incididunt nisi labore culpa qui ea. Commodo veniam veniam in ipsum ad minim occaecat qui pariatur adipisicing laborum quis.</p>
  
  <script>
  
  // 방법 1 : 웹 요소를 변수로 지정 & 미리 만든 함수 사용
  var changeBttn = document.querySelector("#change");
  changeBttn.onclick = changeColor;
  
  function changeColor() {
    document.querySelector("p").style.color = "#f00";
  }
  
  
  // 방법 2 : 웹 요소를 따로 변수로 만들지 않고 사용
  document.querySelector("#change").onclick = changeColor;
  
  function changeColor() {
    document.querySelector("p").style.color = "#f00";
  }
  
  
  // 방법 3 : 직접 함수를 선언
  document.querySelector("#change").onclick = function() {
    document.querySelector("p").style.color = "#f00";
  };

  </script>
</body>

예시) DOM 이벤트 처리기 연결로 버튼을 클릭해서 글자색 바꾸기

<body>
  <div id="item">
  <img src="images/flower.jpg" alt="">
  <button class="over" id="open">상세 설명 보기</button>
  <div id="desc" class="detail">
  <h4>등심붓꽃</h4>
  <p>북아메리카 원산으로 각지에서 관상초로 흔히 심고 있는 귀화식물이다. 길가나 잔디밭에서 흔히 볼 수 있다. 아주 작은 씨앗을 무수히 많이 가지고 있는데 바람을 이용해 씨앗들을 날려보내거나, 뿌리줄기를 통해 동일한 개체들을 많이 만들어 냄으로써 번식한다. </p>
  <button id="close">상세 설명 닫기</button>
  </div>
  </div>	

  <script>		
  document.querySelector('#open').onclick = function() {
  document.querySelector('#desc').style.display = "block";	// 상세 설명 부분을 화면에 표시
  document.querySelector('#open').style.display = "none";   // '상세 설명 보기' 단추를 화면에서 감춤
  }
  document.querySelector('#close').onclick = function() {
  document.querySelector('#desc').style.display = "none";	   // 상세 설명 부분을 화면에서 감춤
  document.querySelector('#open').style.display = "block";	 // '상세 설명 보기' 단추를 화면에 표시
  }				
  </script>
</body>

JS의 객체

내장 객체 : Array, Date 등
문서 객체 모델(DOM) : document, image, link 등
브라우저 관련 객체 : history, location, screen 등

인스턴스 만들기

<script>
  var now = new Date();
  document.write("현재 시각은 " + now.toLocaleString());
</script>

내장 객체 - Array

인스턴스 생성

초깃값이 없는 경우

<script>
  var numbers = new Array();	// 배열의 크기를 지정하지 않음
  var numbers = new Array(4);	// 배열의 크기를 지정함
</script>

초깃값이 있는 경우

<script>
  var numbers = ["one", "two", "three", "four"];		// 배열 선언
  var numbers = Array("one", "two", "three", "four");	// Array 객체를 사용한 배열 선언
</script>

프로퍼티 사용하기

<script>
  var numbers = ["one", "two", "three", "four"];
  
  for(i = 0; i < numbers.length; i++) {
    document.write("<p>" + numbers[i] + "</p>");
  }
</script>

Array의 메서드

concat()	두 개의 배열 합쳐 새로운 배열 생성
join()	요소를 합쳐 문자열 생성, 구분자 지정 가능
push()	맨 뒤에 요소 추가
pop()	맨 뒤의 요소 꺼내기
unshift()	맨 앞에 요소 추가
shift()	맨 앞의 요소 꺼내기
splice()	원하는 위치에 요소 추가 · 삭제하기
slice()	배열 슬라이싱
every()	주어진 함수에 대하여 참이면 true, 거짓이면 false 반환
filter()	주어진 함수로 참인 요소만 고르기
forEach()	배열 요소들에 함수 적용
indexOf()	주어진 값의 배열 인덱스 찾기
reverse()	배열 역순 정렬
sort()	지정한 조건에 따라 정렬
toString()	지정한 부분을 문자열로 반환

splice() - 인수의 개수에 따른 사용법

- 1개의 경우 : 주어진 인덱스 이후의 값 삭제

<script>
  // 인수가 1개일 경우
  var numbers = [1, 2, 3, 4, 5];
  var newNumbers = numbers.splice(2);
  document.write("반환된 배열 : " + newNumbers + "<br>" );	// [3, 4, 5]
  document.write("변경된 배열 : " + numbers );			// [1, 2]
  document.write("<hr>");
</script>

- 2개의 경우 : 주어진 인덱스 이후의 값을 지정한 개수만큼 삭제

<script>
  // 인수가 2개일 경우
  var study = ["html", "css", "web", "jquery"];
  var newStudy = study.splice(2,1);
  document.write("반환된 배열 : " + newStudy + "<br>");		// ["web"]
  document.write("변경된 배열 : " + study);			// ["html", "css", "jquery"]
  document.write("<hr>");
</script>

- 3개의 경우 : 주어진 인덱스 이후의 값을 지정한 개수만큼 삭제하고 지정한 요소 추가

<script>
  // 인수가 3개 이상일 경우
  // study는 현재 ["html", "css", "jquery"] 이다.
  
  var newStudy2 = study.splice(2, 1, "js");
  document.write("반환된 배열 : " + newStudy2 + "<br>");		// ["jquery"]
  document.write("변경된 배열 : " + study);			// ["html", "css", "js"]
</script>

slice() - 인수의 개수에 따른 사용법

- 1개의 경우 : 주어진 인덱스 이후의 요소들 모두 슬라이싱(기본 배열은 변하지 않음)

<script>
  var colors = ["red", "green", "blue", "white", "black"];
  var colors2 = colors.slice(2);		// 인덱스 2부터 끝까지
  document.write(colors2);			// ["blue", "white", "black"]
</script>

- 2개의 경우 : 주어진 인덱스부터 지정한 개수만큼 꺼내기

<script>
  var colors = ["red", "green", "blue", "white", "black"];
  var colors3 = colors.slice(2,4);		// 인덱스 2,3
  document.write(colors3);			// ["blue", "white"]
</script>

내장 객체 - Date

인스턴스 생성

초깃값이 없는 경우

<script>
  new Date();
</script>

초깃값이 있는 경우

<script>
  new Date("2020-02-25");
  new Date("02/25/2020");
  new Date("2020-02-25T18:00:00");	// 시간 정보
  new Date("2020-02-25T18:00:00Z");	// 국제표준시
  new Date("Mon Jan 20 2020 15:00:41 GMT+0900 (대한민국 표준시)");
</script>

Date의 메서드

날짜 · 시간 정보 가져오기
getFullYear()	연도를 4자리로 표시
getMonth()	월을 0~11의 숫자로 표시
getDate()	일을 1~31의 숫자로 표시
getDay()	요일을 0~6의 숫자로 표시
getTime()	1970년 1월 1일 자정 이후의 시간을 밀리 초로 표시
getHours()	시를 0~23의 숫자로 표시
getMinutes()	분을 0~59의 숫자로 표시
getSeconds()	초를 0~59의 숫자로 표시
getMilliseconds()	밀리초를 0~999의 숫자로 표시
날짜 · 시간 정보 설정하기
setFullYear()	연도를 4자리로 설정
setMonth()	월을 0~11의 숫자로 설정
setDate()	일을 1~31의 숫자로 설정
setDay()	요일을 0~6의 숫자로 설정
setTime()	1970년 1월 1일 자정 이후의 시간을 밀리 초로 설정
setHours()	시를 0~23의 숫자로 설정
setMinutes()	분을 0~59의 숫자로 설정
setSeconds()	초를 0~59의 숫자로 설정
setMilliseconds()	밀리초를 0~999의 숫자로 설정
날짜 · 시간 형식 바꾸기
toLocaleString()	현재 날짜와 시간을 현지시간으로 표시
toString()	문자열로 표시

내장 객체 - Math

Math의 프로퍼티

E	오일러 상수
PI	원주율
SQRT2	√2
SQRT1_2	1 / √2
LN2	loge2
LN10	loge10
LOG2E	log2e
LOG10E	log10e

Math의 메서드

abs()	절대값 반환
asin()	아크 사인 반환
acos()	아크 코사인 반환
atan()	아크 탄젠트 반환
atan2()	아크 탄젠트 반환
ceil()	소수점 이하 올림
floor()	소수점 이하 버림
round()
sin()	사인 반환
cos()	코사인 반환
tan()	탄젠트 반환
exp()	지수 함수
log()	로그 함수
min()	최소값
max()	최대값
pow()	지수값
random()	0~1 사이의 무작위 수 반환
sqrt()	제곱근 반환

브라우저와 관련된 객체

JS의 주요 내장 객체

window	브라우저 창마다 생성, 최상위 요소
document	HTML 문서의 정보, <body>태그를 만나면 생성
navigator	현재 브라우저의 정보
history	현재 창의 사용자 방문 기록
location	현재 페이지의 URL
screen	현재 화면 정보

window

window의 프로퍼티

document	웹 문서에 접근
frameElement	현재 창이 다른 요소안에 있으면 그 요소 반환
innerHeight	내용 영역의 높이
innerWidth	내용 영역의 너비
localStorage	데이터 로컬 스토리지 반환
sessionStorage	데이터 세션 스토리지 반환
location	window 객체의 위치 / 현재 URL
name	브라우저 창의 이름 가져오기 또는 수정
outerHeight	브라우저 창 바깥 높이
outerWidth	브라우저 창 바깥 너비
pageXOffset, scrollX	스크롤 시 수평으로 이동하는 픽셀 수
pageXOffset, scrollY	스크롤 시 수직으로 이동하는 픽셀 수
parent	현재 창이나 서브 프레임의 부모
screenX	브라우저 왼쪽 테두리와 모니터 왼쪽 테두리의 거리
screenY	브라우저 위쪽 테두리와 모니터 위쪽 테두리의 거리

window의 메서드

alert()	알림 창 표시
blur()	현재 창 포커스 제거
close()	현재 창 닫기
confirm()	[확인], [취소] 버튼 창 표시
focus()	현재 창 포커스 부여
moveBy()	현재 창을 지정한 크기만큼 이동
moveTo()	현재 창을 지정한 좌표로 이동
open()	새 창 열기
postMessage()	메시지를 다른 창으로 전달
print()	현재 문서 인쇄
prompt()	프롬프트에 입력한 텍스트 반환
resizeBy()	지정한 크기로 현재 창 크기 조절
resizeTo()	동적으로 브라우저 창 크기 조절
scroll()	특정 위치로 스크롤
scrollBy()	지정한 크기만큼 스크롤
scrollTo()	지정한 위치로 스크롤
sizeToContent()	내용에 맞게 창 크기 맞춤
stop()	로딩 중지

navigator

웹 브라우저의 버전, 플러그인 설치 정보, 온 · 오프라인의 각종 정보를 불러온다.

Chrome의 렌더링 엔진, JS 엔진 등을 확인하고 싶다면 주소창에 "chrome://version"이라고 쳐보자.

navigator의 프로퍼티

battery	배터리 충전 상태
cookieEnabled	쿠키 정보 무시하면 false, 허용하면 true 반환
geolocation	모바일 기기를 이용한 위치 정보
language	브라우저 UI의 언어 정보
oscpu	현재 운영체제 정보
userAgent	현재 브라우저의 사용자 에이전트 문자열

history

history에는 방문한 사이트가 배열 형태로 저장된다.

history의 프로퍼티

length

방문한 사이트 갯수가 저장

history의 메서드

back()	이전 페이지
forward()	다음 페이지
go()	현재 페이지를 기준으로 상대적인 위치의 페이지 불러오기 go(-1) : 이전 페이지 go(1) : 다음 페이지

location

현재 문서의 URL 주소 정보가 들어 있다.

location의 프로퍼티

hash	URL 중 #로 시작하는 해시 부분의 정보
href	전체 URL
host	URL의 호스트이름과 포트번호
hostname	URL의 호스트이름
port	URL의 포트번호
protocol	URL의 프로토콜
pathname	URL 경로
search	URL 중에서 ?로 시작하는 검색 내용 저장
username	도메인 이름 앞에 username을 함께 입력하는 사이트일 경우 username 정보 저장
password	도메인 이름 앞에 username, password를 함께 입력하는 사이트일 경우 password 정보 저장

location의 메서드

assign()	현재 문서에 새 문서 주소를 할당
reload()	현재 문서 다시 불러오기
replace()	현재 문서 URL을 다른 URL 문서로 교체
toString()	현재 문서의 URL을 문자열로 반환

screen

사용자의 화면 정보를 알아낼 때 사용

screen의 프로퍼티

width	UI 영역을 포함한 영역의 너비
height	UI 영역을 포함한 영역의 높이
availWidth	UI 영역을 제외한 영역의 너비
availHeight	UI 영역을 제외한 영역의 높이
colorDepth	픽셀을 렌더링할 때 사용하는 색상 수
pixelDepth	픽셀을 렌더링할 때 사용하는 비트 수
orientation	화면의 현재 방향

screen의 메서드

lockOrientation()	화면 방향 잠그기
unlockOrientation()	화면 방향 잠금 해제

DOM - 문서 객체 모델(Document Object Model)

DOM에 접근하기

반환형태가 HTMLCollection인 경우 - get 메서드 :

<script>
  // 1. id 선택자로 접근하기
  document.getElementById("heading")

  // 2. class 선택자로 접근하기
  document.getElementByClassName("bright")

  // 3. 태그 이름으로 접근하기
  document.getElementByTagName("p")
</script>

텍스트, 속성 노드까지 제어하려는 경우 - querySelector 메서드:

<script>
  // id="heading"인 요소
  document.querySelector("#heading")
  
  // class="bright"인 요소
  document.querySelector(".bright")
</script>

웹 요소 수정하기 - inner 메서드 :

<script>
  var now = new Date();
  
  // innerText 메서드
  document.getElementById("current").innerText = now;
  
  // innerHTML 메서드
  document.getElementById("current").innerHTML = now;
</script>

속성 가져오기, 수정하기 - getAttribue(), setAttribute() :

<script>
  // getAttribute
  function displaySrc() {
    var cup = document.querySelector("#cup");
    alert("이미지 소스: " + cup.getAttribute("src"));
  }
  
  // setAttribute
  function changePic() {
    var newPic = this.src;
    cup.setAttribute("src", newPic);
  }
</script>

DOM에서 이벤트 처리하기

DOM 요소에 함수 직접 연결하기

<script>
  var cup = document.querySelector("#cup");
  cup.onclick = function(){
    alert("이미지를 클릭했습니다");
  }
</script>

함수 이름을 사용해 연결하기

<script>
  var cup = document.querySelector("#cup");
  cup.onclick = changePic;
  
  fucntion changePic() {
    cup.src = "images/cup-2.png";
  }
</script>

event의 프로퍼티와 메서드

프로퍼티
target	-> 이벤트가 최초로 발생한 대상
timeStamp	-> 이벤트가 최초로 발생한 시간
type	-> 발생한 이벤트 이름
which	키보드 관련 이벤트에서 -> 키의 unicode 값
ctrlKey	[Ctrl]키를 눌렀는지 안눌렀는지 -> boolean
altKey	[Alt]키를 눌렀는지 안눌렀는지 -> boolean
shiftKey	[Shift]키를 눌렀는지 안눌렀는지 -> boolean
button	-> 마우스 버튼 키 값
charCode	-> 어떤 키를 눌렀는지 unicode값
clientX	-> 이벤트가 발생한 X좌표
clientY	-> 이벤트가 발생한 Y좌표
pageX	-> 현재문서 기준 이벤트가 발생한 X좌표
pageY	-> 현재문서 기준 이벤트가 발생한 Y좌표
screenX	-> 현재화면 기준 이벤트가 발생한 X좌표
screenY	-> 현재화면 기준 이벤트가 발생한 Y좌표
메서드
preventDefault()	이벤트를 취소

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

이벤트 대상에 접근하려면 this를 사용해야 한다.

<script>
  var card = document.querySelector("#card");
  card.onclick = function(event) {
    alert("클릭한 이미지 파일 : " + this.src);
  }
</script>

addEventListener() - 한 요소에 여러 이벤트 처리기 연결하기

기본형

요소.addEventListener(이벤트, 함수, 캡쳐 여부);

1. 이벤트 - click, press처럼 on을 붙여쓰지 않는다.

2. 함수 - 실행할 명령, 함수를 지정

3. 캡쳐 여부 - 기본값 false(버블링)은 자식 -> 부모노드로 전달 / true(캡쳐링)은 부모 -> 자식 노로 전달

<script>
  var cover = document.getElementById("cover");
  cover.addEventListener("mouseover",changePic, false); // 포인터 올리면 사진바꾸기
  cover.addEventListener("mouseout",originPic, false);  // 포인터 내리면 원래대로

  function changePic() {
  cover.src = "images/easys-2.jpg";
  }
  
  function originPic() {
  cover.src = "images/easys-1.jpg";
  }
</script>

CSS 속성에 접근하기

기본형

document.요소명.style.속성명

예)

<script>
  document.getElementById("desc").style.color = "blue";
</script>

노드 리스트 다루기

요소 노드 만들기 - createElement(노드명)

<script>
  var newP = document.createElement("p");
</script>

속성 노드 만들기 - createAttribute(속성명)

<script>
  var srcNode = document.createAttribute("src");
  var altNode = document.createAttribute("alt");
  scrNode.value = "images/dom.jpg";
  altNode.value = "돔 트리 예제 이미지";
</script>

속성 노드 연결하기 - setAttributeNode(속성노드)

<script>
  newImg.setAttributeNode(srcNode);
</script>

텍스트 노드 만들기 - createTextNode(텍스트)

<script>
  var txtNode = document.createTextNode("DOM은 document object model의 줄임말입니다.");
</script>

자식 노드 연결하기 - appendChild()

부모노드.appendChild(자식노드)

<script>
  newP.appendChild(txtNode);
  document.getElementById("info").appendChild(newP);
</script>

노드 삭제하기 - removeChild()

DOM 트리에서 노드를 바로 삭제할 수 없다!

따라서 현재노드의 부모노드에 먼저 접근해야 한다.

노드.parentNode

예를 들어 ul - li 구조에서 li를 삭제하려면

ul에 먼저 접근한 다음, removeChild()로 자식노드인 li를 삭제해야 한다.

<script>
  li.parentNode.removeChild(li);
</script>

저작자표시 (새창열림)

'WEB > WEB의 기초' 카테고리의 다른 글

코드 플레이그라운드 비교 (0)	2023.04.10
CSS 사용법 요약정리 (1)	2021.03.14

yunbinni

태그

최근글

댓글

공지사항

아카이브

외부 스크립트 파일 연계시키기

JS 기본 입출력

alert - 알림 창 출력하기

confirm - 확인 창 출력하기

prompt - 프롬프트 창에서 입력받기

document.write() - 웹 문서에 내용 출력하기

console.log() - 콘솔 창에 내용 출력하기

기본문법

변수 선언

undefined 유형 : 자료형이 정의되지 않은 데이터

null 유형 : 데이터가 유효하지 않음

연산자

문자열 비교

switch 문

parseInt - 정수 변환

반복문

for문

while문

do-while문

함수와 변수

함수 선언

JS에서의 전역 변수, 지역변수 구분

호이스팅(hoisting)

실제 코드

JS해석기가 인식하는 코드 - y값이 할당이 되어있지 않다.(undefined)

let과 const

JS에서 변수를 사용하는 팁

익명 함수

즉시 실행 함수

화살표 함수

이벤트와 이벤트 처리기

이벤트의 종류

이벤트 처리기

DOM을 이용한 이벤트 처리기

JS의 객체

인스턴스 만들기

내장 객체 - Array

인스턴스 생성

프로퍼티 사용하기

Array의 메서드

splice() - 인수의 개수에 따른 사용법

slice() - 인수의 개수에 따른 사용법

내장 객체 - Date

인스턴스 생성

Date의 메서드

내장 객체 - Math

Math의 프로퍼티

Math의 메서드

브라우저와 관련된 객체

JS의 주요 내장 객체

window

window의 프로퍼티

window의 메서드

navigator

navigator의 프로퍼티

history

history의 프로퍼티

history의 메서드

location

location의 프로퍼티

location의 메서드

screen

screen의 프로퍼티

screen의 메서드

DOM - 문서 객체 모델(Document Object Model)

DOM에 접근하기

반환형태가 HTMLCollection인 경우 - get 메서드 :

텍스트, 속성 노드까지 제어하려는 경우 - querySelector 메서드:

웹 요소 수정하기 - inner 메서드 :

속성 가져오기, 수정하기 - getAttribue(), setAttribute() :

DOM에서 이벤트 처리하기

DOM 요소에 함수 직접 연결하기

함수 이름을 사용해 연결하기

event의 프로퍼티와 메서드