JavaScript / Object / .innerText, .innerHTML
목차
.innerText
.innerText은 특정 요소의 텍스트를 가져오거나, 특정 요소의 텍스트를 변경한다.
문법 1 - 내용 가져오기
- element의 내용을 가져온다.
element.innerText
- id의 값이 xyz인 요소의 내용을 변수 jb에 저장한다.
var jb = document.getElementById( 'xyz' ).innerText;
예제 1
- id의 값이 jb인 요소의 텍스트를 가져와서 출력한다.
- 태그 등은 제외한 텍스트만 가져온다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>JavaScript</title>
<style>
body {
font-family: Consolas, monospace;
font-size: 20px;
}
</style>
</head>
<body>
<p id="jb"><span style="color: red;">Hello</span> World!</p>
<script>
var jbText = document.getElementById( "jb" ).innerText;
document.write( jbText );
</script>
</body>
</html>
문법 2 - 내용 변경하기
- 선택한 element의 내용을 content로 바꾼다.
element.innerText = content
- id의 값이 xyz인 요소의 내용을 ABC로 바꾼다.
document.getElementById( 'xyz' ).innerHTML = 'ABC';
예제 2
- id의 값이 jb인 요소의 텍스트를 Goodbye World!로 변경한다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>JavaScript</title>
<style>
body {
font-family: Consolas, monospace;
font-size: 20px;
}
</style>
</head>
<body>
<p id="jb"><span style="color: red;">Hello</span> World!</p>
<script>
document.getElementById( "jb" ).innerText = 'Goodbye World!';
</script>
</body>
</html>
.innerHTML
.innerHTML은 특정 요소의 내용을 가져오거나, 특정 요소의 내용을 변경한다. .innerText와의 차이점은 HTML 태그 등도 포함한다는 것이다.
문법 1 - 내용 가져오기
- element의 내용을 가져온다.
element.innerHTML
- id의 값이 xyz인 요소의 내용을 변수 jb에 저장한다.
var jb = document.getElementById( 'xyz' ).innerHTML;
예제 1
- id의 값이 xyz인 요소의 내용을 가져와서 출력한다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>JavaScript</title>
</head>
<body>
<p>Lorem</p>
<ul id="xyz">
<li>Ipsum</li>
<li>Dolor</li>
</ul>
<hr>
<script>
var jb = document.getElementById( 'xyz' ).innerHTML;
document.write( '<ul>' + jb + '</ul>' );
</script>
</body>
</html>
문법 2 - 내용 변경하기
- 선택한 element의 내용을 content로 바꾼다.
element.innerHTML = content
- id의 값이 xyz인 요소의 내용을 ABC로 바꾼다.
document.getElementById( 'xyz' ).innerHTML = 'ABC';
예제 2
- id의 값이 xyz인 요소의 내용을 바꾼다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>JavaScript</title>
</head>
<body>
<p>Lorem</p>
<ul id="xyz">
<li>Ipsum</li>
<li>Dolor</li>
</ul>
<script>
document.getElementById( 'xyz' ).innerHTML = '<li>Dolor</li>';
</script>
</body>
</html>
JavaScript / Object / document.characterSet / 문자 인코딩 반환하는 속성
.characterSet .characterSet은 문서의 문자 인코딩을 반환하는 속성입니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> body { font-family: Consolas, monospace; } </style> </head> <body> <script> document.write( "<p>document.characterSet : " + document.characterSet + "</p>" ); </script> </body> </html>
객체 생성 방법 1 var jb = { 'a':100, 'b':200, 'c':300 }; 객체 생성 방법 2 var jb = {}; jb = 100; jb = 200; jb = 300; 객체 생성 방법 3 var jb = new Object(); jb = 100; jb = 200; jb = 300; 객체 생성 방법 4 var jb = new Object(); jb.a = 100; jb.b = 200; jb.c = 300;
JavaScript / 대화상자 / Alert, Confirm, Prompt
자바스크립트에서 대화상자는 세가지가 있습니다. Alert, Confirm, Prompt로, 새 창을 띄운다는 점은 같으나 역할이 다릅니다. Alert Alert는 단순히 메시지를 전달하는 역할만 합니다. 반환하는 값이 없습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript | alert</title> <script> alert( 'Lorem ipsum dolor' ); ...
JavaScript / Object / Math.floor(), Math.ceil(), Math.round()
Math.floor() Math.floor()는 어떤 수보다 크지 않은 최대의 정수를 반환합니다. 문법 Math.floor( Number ) Number에는 숫자가 들어갑니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> body { font-family: Consolas, monospace; ...
JavaScript / Object / Date / 당월 말일 구하는 방법
다음은 2022년 3월 1일이다. Date( 2022, 2, 1 ) 날짜 자리에 0이 들어가면 전달 말일이다. 즉 다음은 2022년 2월 28일이다. Date( 2022, 2, 0 ) 이를 이용하여 현재 달의 말일을 구할 수 있다. 다음은 오늘 날짜를 출력하는 것이고... <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> ...
JavaScript / 함수 / eval() / 문자열을 코드로 인식하게 하는 함수
eval() eval()은 문자열을 코드로 인식하게 하는 함수입니다. 문법 eval( string ) 예를 들어 eval( '2+2' ) 는 문자열 2+2가 아니라 계산한 결과 4입니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> body { font-family: Consolas, monospace; } </style> </head> <body> <script> var jb = '2+2'; document.write( '<p>' + jb + '</p>' ); document.write( '<p>' + eval( jb ) + '</p>' ); </script> </body> </html>
JavaScript / Object / Math.random() / 난수(랜덤 숫자) 만드는 속성
Math.random() Math.random()는 난수(랜덤 숫자)를 만듭니다. 문법 Math.random() 0.673172894273546와 같은 0 이상 1 미만의 난수를 만듭니다. 예제 1 - 난수 만들기 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> body { font-family: Consolas, monospace; ...
JavaScript / 구문(Statement) 넣는 방법
자바스크립트는 줄바꿈을 하면 구문(Statement)이 종료된 것으로 봅니다. var jb1 = 'Lorem' var jb2 = 'Ipsum' 하지만, 구문이 완성되지 않았다면 다음 줄까지 해석합니다. 즉 var jb1 = 'Lorem' 과 var jb1 = 'Lorem' 은 같습니다. 구문이 종료되었음을 명확히 표시할 때는 세미콜론(;)을 사용합니다. var jb1 = 'Lorem'; var jb2 = 'Ipsum'; 세미콜론 사용은 선택사항이지만, 한 줄에 여러 구문을 쓸 때는 구문과 구문 사이에 꼭 ...
JavaScript / Library / Lozad.js / 이미지 Lazy Loading 구현해주는 라이브러리
Lazy Loading 웹 페이지의 로딩 속도에 큰 영향을 미치는 것 중의 하나는 이미지입니다. 이를 해결해주는 방법 중의 하나가 Lazy Loading입니다. 웹브라우저에 보이는 영역 안에 있는 이미지는 로드하고, 보이지 않는 부분은 로드하지 않습니다. 밑으로 스크롤하여 이미지가 있는 영역에 도달하면 그 때 이미지를 로드합니다. 이렇게 하면 불필요한 이미지 로딩으로 인한 속도 저하를 방지할 수 있습니다. Lozad.js Lozad.js는 Lazy ...
JavaScript / Object / String.toUpperCase(), String.toLowerCase()
.toUpperCase() 문법 .toUpperCase()는 대문자로 변환하는 메서드이다. 예를 들어 다음은 ABC를 반환한다. 'abc'.toUpperCase() 예제 1 - 대문자로 변환하여 출력 문자열 Aaa를 대문자로 변환하여 출력한다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> * { font-family: ...