JavaScript alert 사용해서 Hello World 띄우기
JavaScript alert 사용해서
Hello World 띄우기
ㆍ 이번글에서는 HTML의 기본구조에서 JavaScript
alert코드를 추가해서 Hello World를 띄워보도록
하겠습니다.
ㆍ JavaScript로 활용가능한 부분이 엄청나게 많지만
일단은 먼저 기초적인 HTML구조에 적용시켜서
사용해보겠습니다.
일단 Hello World를
출력하는 HTML코드는
(HTML 기본구조 및 Hello World 출력하기)
에서 만든 코드를 가져다가
JavaScript만 추가시켜서
실행시켜보도록 하겠습니다
HTML 기본구조만 알고 있다면
alert 추가시키는 부분은 3줄밖에
안되므로 간단하게 구현할 수 있습니다.
아래는 alert를 추가시킨 코드입니다.
<html>
<head>
<meta charset = "utf-8">
<title>Hello World</title>
</head>
<body>
<script>
alert('Hello World');
</script>
</body>
</html>
위와 같은 코드를
실행시키면 아래와 같은
결과를 얻을 수 있습니다.
웹페이지가 실행되면서
대화상자가 하나 중앙에
뜨는것을 알 수 있습니다.
코드를 보면
대충 훑어봐도
한눈에 알아볼 수 있듯이
JavaScript부분은
<body>
안에 3줄입니다
<script>
alert('Hello World');
</script>
아주 보기 좋게
<script>라고 이해하기
쉬운요소입니다
여기 3줄에서 알아둘 사항은
1. <script> ~ </script>안에 코드를 적는다.
2. alert를 사용해서 메시지박스를 띄운다
이 정도가 될 것 같습니다.
1번은 따로 설명을 안해도 될 것 같고
2번 alert에 대해 알아보겠습니다.
alert는 사전을 찾아보면
경보, 경고
뭐 위험을 알린다는
의미입니다.
제가 안드로이드를 해서 그런지
안드로이드에서도
alert dialog를 사용한
생각이 많이 납니다.
위의 코드에서
사용한 그대로 alert는
()괄호안에 메시지박스에
띄울 내용을 넣어주시면
됩니다.
괄호안에서 \n을
통해서 개행도 가능합니다
<script>
alert('Hello World\n Hi World');
</script>
이런식으로 \n을 넣어주면
위와 같이 2줄로
메시지 박스를
띄울 수 있습니다.
또한 alert()
괄호안에서 숫자연산도
가능하고 텍스트와 숫자도
혼합해서 사용할 수 있습니다.
아래와 같이 코드를 적어준후에
<html>
<head>
<meta charset = "utf-8">
<title>Hello World</title>
</head>
<body>
<script>
alert('1+2='+(1+2)+'입니다');
</script>
</body>
</html>
실행을 시켜보면
위와 같이 1+2가 연산된
3이 제대로 출력되는 것을
확인 할 수 있습니다.
'웹(Web) > JavaScript' 카테고리의 다른 글
| JavaScript 마우스 이벤트(mouse event) (0) | 2016.11.13 |
|---|---|
| getElementById() + 요소,태그,속성,속성값이란 (1) | 2016.08.01 |
| prompt를 써보자 (1) | 2016.07.30 |
| confirm을 써보자 (0) | 2016.07.22 |
| JavaScript에서 document.write를 써보자 (0) | 2016.06.23 |