JavaScript alert 사용해서 Hello World 띄우기

Posted by ITPangPang
2016.06.19 03:45 웹(Web)/JavaScript


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이 제대로 출력되는 것을

확인 할 수 있습니다.

저작자 표시 비영리 변경 금지
신고
이 댓글을 비밀 댓글로