power-girl0-0

[BOM] 사용자와 커뮤니케이션 하기 본문

언어/Javascript

[BOM] 사용자와 커뮤니케이션 하기

power-girl0-0 2021. 2. 7. 22:19
728x90

생활코딩 웹브라우저 javascript를 참고하여 공부하였습니다.

스스로 공부한 것을 정리하고 복습하기 위한 목적으로 작성하였습니다.

( 출처 :  https://opentutorials.org/course/743inf.run/pBzy)

 alert 

사용자에게 어떤 정보를 제공하거나 문제 발생시 경고하는 것, 또는 코딩하는 과정에서 어떠한 변수에 담겨 있는 값 또는 어떤 함수가 리턴하는 값이 무엇인가를 확인할 때 많이 사용하는 것으로 경고창이라고 부른다.

 

아래 예제는 버튼을 클릭하면 경고창이 출력되는 코드이다.

<!DOCTYPE html>
<html>
    <body>
        <input type="button" value="alert" onclick="alert('hello world');" />
    </body>
</html>

 

경고창의 특징은 경고창이 실행되는 동안, 그 다음 코드는 실행되지 않는다는 것이다.

 

경고창은 디버깅 용도로 많이 사용되었지만, 최근에는 대부분 브라우저들이 개발자 도구를 가지고 있기 때문에 console.log를 통해서 디버깅을 사용하는 경우가 많이 늘어나고 있다.

 

왜냐하면, 경고창은 실행되는 동안 다른 명령어가 실행이 되지 않는데, console.log는 실행한 부분들이 실행될 때마다 로깅이라는 형태로 기록이 쭉 되기 때문에 경고창보다는 콘솔을 많이 쓰는 추세이다.

 confirm 

실습을 통해서 알아보자.

 

콘솔창에 confirm('ok')명령어를 입력하였더니, 아래와 같이 출력되었다.

여기서 확인 버튼을 누르면 true값을 반환해주고, 취소 버튼을 누르면 false값을 반환해준다.

해당 실습을 소스코드로 작성해보자.

<!DOCTYPE html>
<html>
    <body>
        <input type="button" value="confirm" onclick="func_confirm()"/> 
        <!--버튼 클릭시 func_confirm() 함수 호출-->
        
        <script>
            function func_confirm(){
                if(confirm('ok?')){	//ture일 경우
                    alert('ok');
                } else {		//false일 경우
                    alert('cancel');
                }
            }
        </script>
        
    </body>
</html>

위 코드는 confirm이라는 버튼을 클릭하면, func_confirm()함수를 호출한다.

func_confirm()함수는 ok? 문자열을 출력하는 confirm이 실행된다.

그 후, 리턴 값이 ture이면 if문이 실행되고 false일 경우는 else문이 실행된다.

 prompt 

사용자가 입력한 값을 받아서 자바스크립트가 얻어낼 수 있는 기능이다.

 

실습을 통해서 알아보도록 하자.

콘솔창에 prompt('pwd ?') 명령어를 입력하면, 아래와 같이 출력된다.

prompt함수에 입력했던 문자열과 같이 입력창도 출력된다.

여기서, 입력창에 값을 입력하고 확인버튼을 누르면 사용자가 입력한 값이 리턴된다. 

 

따라서 아래와 같은 출력물을 확인할 수 있다.

해당 실습을 소스코드로 작성해보자.

<!DOCTYPE html>
<html>
    <body>
        <input type="button" value="prompt" onclick="func_prompt()" />
        <script>
            function func_prompt(){
                if(prompt('id?') === 'egoing'){ //입력값이 egoing과 일치하면 실행된다.
                    alert('welcome');
                } else {
                    alert('fail');
                }
            }
        </script>
    </body>
</html>

위 코드는 버튼을 클릭하면, func_prompt 함수가 실행된다.

그 후, prompt창이 출력되어 사용자에게 입력값을 받아오는데 값이 egoing이면 if문이 실행되고 일치하지 않으면 else문이 실행된다.

 

 

 

728x90
저작자표시

'언어 > Javascript' 카테고리의 다른 글

[BOM] Navigator 객체  (0) 2021.02.08
[BOM] Location 객체  (0) 2021.02.08
[BOM] 전역객체 Window  (0) 2021.02.07
Object Model 구조  (0) 2021.02.07
Object Model & 객체화  (0) 2021.02.06
'언어/Javascript' Related Articles more
Comments