alert()

이번 시간은 alert창에 대해서 알아 봅시다.

웹 서핑을 하시면서 따로 웹상에 띄어지는 작은 박스를 한번쯤은 보신적 있으시죠?

없으시다구요?

위의 이미지에 보이는 박스가 alert창 입니다. 무언가 알려주는 하나의 방법으로 쓰이고 있죠.

오늘은 이 alert창을 띄우는 방법에 대해서 알아봅시다.

alert('hi');

위의 소스를 script태그 안에 넣으면 박스가 띄어지고 hi라는 문구가 출력 됩니다.

문자열을 입력할때는 따옴표로 문자열을 감싸주세요.

소스를 타이핑 해보면서 체험해 봅시다.

<script>
alert('hi');
</script>

위와 같이 스크립트 태그 안에 자바스크립트 소스를 넣어 주시면 됩니다.

이제 아래의 전체 소스를 타이핑 해봅시다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>자바스크립트</title>
<script>
alert('hi');
</script>
</head>
<body>
</body>
</html>

위와 같이 얼럿창이 뜨면서 hi를 보여줍니다. ^-^

alert()창에서 어떤 연산을 해보는것도 가능 합니다. 예를 들어 5+3을 작성하면 결과인 8을 보여줍니다.

바른예 : alert(5+3);숫자로 인식 하기 때문에 5+3을 연산합니다.
나쁜예: alert('5+3'); ''로 감싸져 있어 문자열로 인식 하므로 연산하지 않습니다.

위와 같이 작성을 하는데요. 컴퓨터가 숫자로 인식해야 하기 때문에 문자열에서 쓰듯이 따옴표를 감싸주면 안됩니다.

그럼 실제 소스를 작성 해봅시다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>자바스크립트</title>
<script>
alert(5+3);
</script>
</head>
<body>
</body>
</html>

위의 결과를 보시면 연산 결과인 8이 alert창에 출력되는것을 볼 수 있습니다.

그럼 얼럿창에 12*6=72 라는 문구를 나타내기 위해서는 어떻게 할까요?

앞에 있는 12*6은 문자열로 나타내주면 됩니다. 문자열로하면 연산을 하지 않기 때문이죠 그리고 72는 문자열로 나타내지 않으면 됩니다. 그럼 계산을 하기 때문이죠.

그럼 이렇게 쓰겠죠

12*6=은 문자열로 나타내므로 따옴표로 감싸구요 이렇게. '12*6=' 이렇게 하고 뒤에 72는 12*6으로 나타냅니다.

그럼 위와 같이 '12*6=' 이것과 12*6을 연결을 해야 하는데요 연결은 + 를 사용 합니다. 그러므로 아래와 같이

alert('12*6='+12*6);

위와 같이 작성을 하면 됩니다. 전체 소스를 보면

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>자바스크립트</title>
<script>
alert('12*6='+12*6);
</script>
</head>
<body>
</body>
</html>

소스를 타이핑 해보시거나 위의 이 소스를 웹에서 보기로 결과를 확인할 수 있습니다.

그 외에도 변수명을 넣어서 그 변수가 갖고 있는 값을 출력할 수도 있습니다. 다음 강좌인 변수선언에서 그 결과를 확인해 봅시다.^-^ alert() 강좌는 이걸로 끝내겠습니다.