슬기형의 JS초보무료 강의 - 다이얼로그 박스 표시 01
자바스크립트로 브라우저 실행 시 알림 박스를 만들어 보자.
다이얼로그 박스라고들 한다.
실행 화면 1
01_alert.html 소스 코드
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>01 alert</title>
</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>
window.alert('예1 : 안녕하세요');
alert('예2 : 안녕하세요');
alert('예3 : '+ 100 + 156); //숫자를 문자로 인식
alert(100 + 156); //숫자로 인식
console.log('저는 콘솔로그 입니다.');
</script>
</body>
</html>설명 alert, window.alert
window.alert() 나 alert()나 동일하다. 초보강좌니 길게 설명은 안 하겠다. 우선 같은 기능이라고 알고 있자.
다만 특이한 점은 alert() 안에 숫자를 넣었을 경우, 숫자와 문자를 혼합으로 넣었을 경우, 자바스크립트 엔진이 이해하는 방식이 다르다.
숫자계산 : alert(100 + 156) : 오로지 숫자만 넣었고 수식을 넣었다. 그리고 싱글 쿼테이션이 없으므로 계산이 일어난다.
문자로 인식 : alert("예3" + 100 + 156) '예3' 라는 싱글, 더블 쿼테이션 문자와 숫자가 함께 있으므로 숫자를 문자로 인식한다.
실행 화면 2
디버깅이란 Console.log()
앞으로 프로그램을 만들다 보면 많은 변수들을 사용하게 된다. 중간중간 내가 만든 변수들에 예상한 값이 들어 있는지 확인을 하고자 할 때 유용하게 사용할 수 있다.
이런 행위를 디버깅이라고 하는데 디버깅을 잘하는 사람치고 고수가 아닌 사람은 없고, 프로그램도 잘 만든다.
console.log에 변수를 넣어 확인하는 디버깅은 아주 기초적이지만 절대 무시할 수도 없는 습관이다. 정식 운영서버에 프로그램이 반영될 때는 디버깅 코딩을 지워야 한다. 리소스를 많이 잡아먹는 이유가 있다.
브라우저에서 F12를 누르고 Consol 탭에 가면 html 파일 안에 코딩한 값을 확인할 수 있다.
alert와 동일하게 console.log도 자바스크립트 엔진에서의 숫자, 문자 해석 형태가 동일하다.
alert, console.log의 사용법에 대해 알아봤다.
'Web Front 개발공부 > HTML과 JAVASCRIPT' 카테고리의 다른 글
| 슬기형의 자바스크립트 기초강의 - 문자열 다루기 04-1 (0) | 2022.12.30 |
|---|---|
| 슬기형의 자바스크립트 기초강의 - 확인 및 취소 다이얼로그 03 (0) | 2022.12.26 |
| 슬기형의 자바스크립트 기초강의 - HTML 변경하기 02 (0) | 2022.12.25 |
| JavaScript Fetch API사용 예제 (0) | 2022.12.20 |
| 웹브라우저 저장소 스토리지storage 간단 예제 (0) | 2022.12.20 |
댓글