happy cat image

everdevel

coding

login
알림X
  • 현재 댓글에 대한 답변만 표시합니다.
  • 표시할 댓글 이력이 없거나 로그인해 주세요.
























everdevel이 만든 무료 클라우드 개발환경을 소개합니다.

방문해 주셔서 감사합니다.

alert()

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

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

없으시다구요?

alert_img

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

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

JavaScript

alert('hi');

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

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

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

JavaScript

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

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

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

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

결과는 바로 아래에서 확인하겠습니다.

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

alert()창에서 연산하기

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

JavaScript

바른예 : 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() 강좌는 이걸로 끝내겠습니다.


봐주셔서 감사합니다. 문의 또는 잘못된 설명은 아래의 댓글에 부탁드립니다.
당신의 작은 누름이 저에게는 큰 희망이 됩니다.

컨텐츠의 내용을 더 보려면 바로 아래에서 확인할 수 있습니다.


    
    

강좌로 돌아가기

댓글 0개

정렬기준