Web/Javascript

[Javascript] 자바스크립트 기초와 alert(), comfirm(), prompt()

Untitled_Blue 2023. 6. 23. 10:10
반응형
반응형

안녕하세요. 이번 글은 자바스크립트의 기초에 대한 설명입니다.

 

- 자바스크립트(Javascript) 란?

  • 웹 문서의 동적인 요소를 시작으로 시각적으로 반응하는 효과를 부여하기 위한 하나의 언어
  • 자바스크립트를 통해 웹의 요소를 제어할 뿐만 아니라 다양한 API를 제작할 수 있으며 서버도 개발할 수 있다.

- 자바스크립트를 사용하는 방법

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script>
        // 이 부분에 자바스크립트를 구현할 수 있다..
    </script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="./File_Path/"></script> <!-- 외부의 자바스크립트(.js) 파일을 불러올 수 있다. -->
</head>
<body>
    
</body>
</html>

HTML 문서 안에 태그를 통한 구현 방법을 인라인 기법이라 하며 이외에도 외부 파일을 불러오는 방법으로도 자바스크립트 코드를 실행할 수 있다.

- 표현식과 문장

  • 표현식 : 연산, 실제 값, 함수(메서드)를 의미한다.
  • 문장 : 조건문과 제어문 같은 명령문을 의미한다.

- 웹사이트에 알림창을 띄우다. alert(), comfirm(), prompt()

  • alert("메시지") : 단순 알림창을 띄우는 함수
  • comfirm("메시지") : 확인과 취소를 클릭하도록 유도하는 알림창을 띄우는 함수
  • prompt("메시지", "기본값") : 확인과 취소뿐만 아니라 입력창을 통한 값을 입력하도록 유도하는 알림창을 띄우는 함수
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script>
        alert("Hello");
        document.write("Hello. JS :)");
    </script>
    
</body>
</html>

다음은 alert()를 통해 기본적인 알림창을 구현한 것이다. 어떠한 입력창도 존재하지 않으면서 확인 버튼만 존재한다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script>
        var check = confirm("무엇을 누르시겠습니까?");
        
        if (check == true) {
            document.write("확인을 선택하셨습니다.");
        }
        else {
            document.write("취소를 선택하셨습니다.");
        }
    </script>
    
</body>
</html>

다음은 comfirm()를 통해 확인과 취소를 선택하는 창을 구현한 코드와 실행결과이다. 해당 함수의 반환형은 boolean 논리형이며 반환값을 통해 if-else문을 통해 로직을 논리적으로 구현할 수 있다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script>
        var check = prompt("이름을 입력해주세요.", "이름");

        if (check == null) {
            document.write("빈 값이므로 Guest 모드로 입장됩니다.");
        }
        else {
            document.write(check + "님. 환영합니다 !");
        }
    </script>
    
</body>
</html>

다음은 prompt() 함수를 통해서 입력창을 구현해서 값을 입력받을 수 있도록 구현한 소스코드와 실행화면이다. 반환형을 활용해서 로직을 구현할 수도 있다는 점을 확인할 수 있다. 입력하지 않거나 취소 버튼을 클릭하면 빈 값이라고 표현하는 등 별도의 로직을 구현 가능하다는 점을 확인할 수 있다.

 

다음은 자바스크립트의 기본 문법에 대한 설명입니다. 감사합니다.

 

반응형