데이터 입출력

innerText

js에서 요소에 작성된 내용(content)를 읽거나 변경하는 속성
내용만 읽어온다 (내용에 태그가 포함되어 있어도 읽어오지 않음)
변경되는 내용에 태그, 마크업 특수 문자가 포함되어 있어도 태그는 해석되지 않는다

const test1 = document.getElementById("test1");
function getBoxText(){
  console.log(test1.innerText);
}
function setBoxText(){
  test1.innerText = 
  "innerText로 <br> 변경된 <b>내용입니다 &copy; </b>";
}

innerHTML

자바스크립트에서 요소 전체를(태그 + 내용) 읽어들이거나 변경하는 속성
내용을 읽어올 때 태그 + 내용 모두를 포함해서 읽음
내용을 변경할 때 태그, 마크업 특수문자가 모두 해석됨

function setBoxHTML(){
  test2.innerHTML += "<ul><li>적용되나요??</li>"
  + "<li>됩니다!!</li></ul>";
}

[window.]alert()

브라우저에 경고창(알림창, 대화 상자)을 띄우는 함수

<button onclick="alert('확인!!!!!!')">alert 확인</button>

[window.]confirm()

"내용"에 대한 확인/취소 결과를 얻고자 할 때 사용하는 함수
alert에 확인/취소 두 개의 버튼이 생성됨
확인 -> true 반환
취소 -> false 반환

[window.]prompt()

텍스트를 입력할 수 있는 alert
텍스트 입력 후 확인 클릭 시 입력한 텍스트가 그대로 반환
취소 클릭 시 null 반환

요소접근방법

DOM(Document Object Model)
웹 문서(HTML)의 모든 요소를 객체 형식으로 표현한 것
(HTML 요소 == JS에서 객체라고 부름)
-> 문서 내 특정 요소에 접근 가능 + 요소(객체)에 속성 값을 세팅 또는 얻어올 수 있다

id로 접근하기

document.getElementById("id속성값");
아이디가 일치하는 요소(객체)를 얻어옴

const div1 = document.getElementById("div1");

class로 접근하기

document.getElementsByClassName("class속성값");
클래스가 일치하는 모든 요소를 얻어와 배열 형태로 반환

const arr = document.getElementsByClassName("div2");

name으로 접근하기

document.getElementsByName("name속성값");
name이 일치하는 모든 요소를 얻어와 배열(NodeList, 유사배열) 형태로 반환

const hobbyArray = document.getElementsByName("hobby");

tag로 접근하기

document.getElementsByTagName("tag명");
태그가 일치하는 모든 요소를 얻어와 배열 형태로 반환

const arr = document.getElementsByTagName("li");

CSS 선택자로 접근하기

document.querySelector("CSS 선택자");
선택자가 선택한 요소 중 첫 번째 요소를 반환
document.querySelectorAll("CSS 선택자");
선택한 요소 모두를 배열(NodeList, 유사배열) 형태로 반환

const bg = document.querySelector("#chatting-bg");
const arr = document.querySelectorAll("#css-div>div");

변수 선언 위치에 따른 구분

ES5 이전 버전

var : function level scope
-> 함수 내부에서 var로 선언하면 함수 안에서 쓸 수 있다
-> 단, if, for, while 등의 다른 {} 내부에 작성되어도
함수 안에 있는거면 무조건 function level

ES6 이후

var : 변수, 변수명 중복 O(덮어쓰기), 함수 레벨 scope
let : 변수, 변수명 중복 X, 블록{} 레벨 scope
const : 상수, 변수명 중복 X, 블록{} 레벨 scope

1순위 : const
(JS는 특정 요소를 선택해서 사용하는 경우가 많아서 변수에 고정시켜둠)

2순위 : let

3순위 : var (ES6 이후 부터 사용 빈도가 많이 적어짐)

이벤트

브라우저에서의 이벤트(동작, 행위)
click, keydown, keypress, keyup, mouseover, drag, change, submit, ...
고전/표준 이벤트 모델은 랜더링(해석)된 HTML 요소에만 이벤트 핸들러 연결이 가능하기 때문에 JS 코드 작성 위치를 잘 판단해야 한다

인라인(inline) 이벤트 모델

요소 내부에 이벤트 관련 코드를 직접 작성하는 방법
on이벤트명 = 함수명()

<button onclick="inlineEventModel(this)">인라인 이벤트 모델 확인</button>
<script>
	function inlineEventModel(btn){
  		if(btn.style.backgroundColor != 'pink'){
    		btn.style.backgroundColor = 'pink';
  		} else{
    		btn.removeAttribute('style');
  		}
	}
</script>

고전 이벤트 모델

요소가 가지고 있는 이벤트 리스너 속성(on이벤트명)에
이벤트 핸들러(함수)를 직접 대입해서 연결하는 방법
인라인 이벤트 모델처럼 HTML에 작성하는 것이 아닌
script 태그 또는 js 파일에 작성
단점 : 한 요소의 같은 이벤트 리스너에 여러 이벤트 핸들러를 대입할 수 없다

<script>
	const a = document.getElementById('test2-1');
	a.onclick = function(){
 		alert('test2-1 클릭')
	}
</script>

표준 이벤트 모델( 요소.addEventListener() )

W3C(웹 표준 재정 단체)에서 공식적으로 지정한 이벤트 모델
장점 : 한 요소에 여러 이벤트 핸들러를 추가할 수 있다

<div id="test3">클릭하면 크기가 늘어나요</div>
<script>
	document.getElementById('test3').addEventListener("click", function(){
  	this.style.width = this.clientWidth + 10 + 'px';
	});
</script>

HTML 요소의 기본 이벤트 제거

a 태그의 기본 이벤트
클릭하면 href 속성에 작성된 주소로 이동
form 태그의 기본 이벤트
action 속성에 작성된 주소로 내부에 작성된 input 값들을 제출

<script>
	document.getElementById('move').addEventListener('click', function(e){
  		e.preventDefault();
	});
</script>

김민석

이전 포스트

JavaScript

다음 포스트

JavaScript 기능