인생 디벨로퍼

[기초 JAVA Script] 2강 출력 본문

JAVA Script

[기초 JAVA Script] 2강 출력

뫄뫙뫄 2023. 7. 15. 21:15
728x90

[JAVA Script] - [기초 JAVA Script] 1. 자바스크립트란?

Index
   1. 콘솔출력
   2. 다이얼로그 박스 출력
   3. HTML 변경
 문법

 

더보기

개발자 도구 (크롬)

▶F12

1. 콘솔 출력

console.log("TEST");
  • 큰따옴표(””) 와 작은따옴표 (’’) 상관없이 결과 값이 출력

  • 수식 계산

HTML 문서 <script> 태그 사용

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<title>2-01_console</title>
<link href="../../_common/css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<div class="header-contents">
<h1>콘솔에 출력하기</h1>
<h2>개발 도구 열고 닫기</h2>
</div><!-- /.header-contents -->
</header>
<div class="main-wrapper">
<section>
	
</section>
</div><!-- /.main-wrapper -->
<footer>JavaScript Samples</footer>

<script>
    console.log('TEST');
</script>

</body>
</html>

<script> </script> 태그를 사용하여 콘솔 출력. (위치 상관 x )

자바스크립트 파일 읽기

<script src="script.js"></script>

src 속성에 파일 경로, 이름을 맞춰 작성.

(+) 같은 폴더 내에 있을경우, 경로 필요 없음

외부 파일에 작성하면 관리가 쉬워진다!

2. 다이얼로그 박스 출력

window.alert();

alert() 메소드를 사용해서, 다이얼로그를 출력할 수 있다.

alert();

객체인 window 를 생략해도 실행이 됨

<body>
<header>
<div class="header-contents">
<h1>다이얼로그 박스 표시</h1>
<h2>경고 다이얼로그 박스를 표시한다</h2>
</div><!-- /.header-contents -->
</header>
<div class="main-wrapper">
<section>

</section>
</div><!-- /.main-wrapper -->
<footer>JavaScript Samples</footer>
<script>
window.alert('애플리케이션 연동을 완료했습니다');
alert('꼭 window 가 없어도 된다');
</script>
</body>

 

3. HTML 변경 

  • id 속성 가져오기
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<title>2-04_html</title>
<link href="../../_common/css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<div class="header-contents">
<h1>HTML 변경하기</h1>
<h2>요소 가져오기</h2>
</div><!-- /.header-contents -->
</header>
<div class="main-wrapper">
<section>
	<p id="choice">여기에 일시를 표시한다</p>
</section>
</div><!-- /.main-wrapper -->
<footer>JavaScript Samples</footer>
<script>
console.log(document.getElementById('choice'));
</script>
</body>
</html>

콘솔 창에 <p id = "choice">여기에 일시를 표시한다</p> 가 나옴.

document.getElementById(id명)

document 객체의 getElementById 메서드
document 에서 id 요소를 가지고 온다

  • 가져온 요소의 콘텐츠 변경
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<title>2-04_html</title>
<link href="../../_common/css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<div class="header-contents">
<h1>HTML 변경하기</h1>
<h2>가져온 요소의 콘텐츠를 변경한다</h2>
</div><!-- /.header-contents -->
</header>
<div class="main-wrapper">
<section>
	<p id="choice">여기에 일시를 표시한다</p>
</section>
</div><!-- /.main-wrapper -->
<footer>JavaScript Samples</footer>
<script>
document.getElementById('choice').textContent = new Date();
console.log(document.getElementById('choice').textContent);
</script>
</body>
</html>

document.getElementById('choice').textContent = new Date();

document 객체에서 id="choice" 를 new Date(); 로 변경.

console.log(document.getElementById('choice').textContent);

콘솔에 찍을 수 도 있음.

(+) 프로퍼티 (property) 

  : 객체의 상태를 나타냄.

 textContent 는 document.getElementById('choice') 로 가져온 요소의 '콘텐츠'를 나타내는 프로퍼티

 

문법

console.log(’TEST’);
  • console : 객체
  • log( ) : 메소드
  • ( ) 안 : 매개변수(parameter)
  • ⇒ console 은 ‘TEST’ 를 log 해라

(참고)

처음 만나는 자바스크립트 - 가노 스케하루 저자(글) · 김완섭 번역

728x90

'JAVA Script' 카테고리의 다른 글

[기초 JAVA Script] 3-4강 함수 / 사칙연산  (0) 2023.07.16
[기초 JAVA Script] 3-3강 반복문 for문 / while 문  (0) 2023.07.16
[기초 JAVA Script] 3-2강 비교 연산자 / 논리 연산자  (0) 2023.07.16
[기초 JAVA Script] 3-1강 자바 스크립트 조건 / if 문 사용  (0) 2023.07.16
[기초 JAVA Script] 1강 자바스크립트란?  (0) 2023.07.15
'JAVA Script' Related Articles more