javascript (7) - 입력받기(Prompt)

안녕하세요  :D

 

이번 포스팅에서는

사용자로부터 입력을 받아서 

출력해보는 기능을 위한

prompt 문법에 대해서 알아보겠습니다:D 

 

일단 저는 사용자로부터 입력을 받을 상황을 가정하고

그에 따른 코드를 구현해보며

설명해보고자 합니다  :D

 

일명 !

'자소서 복사기'

말도 안되는 프로그램이지만..ㅎㅎㅎ

쓰기 귀찮은(?)

자소서에 각자의 이름만 입력하면

멋진 자소서를 출력해주는 프로그램을 만들고자 합니다:D

 

자소서 복사 프로그램의 특징을 정리해보면

 

1) 이름을 입력받는다(prompt)

2) 입력받은 이름을 선언한 변수(name)에 할당한다

3) 미리 자소서 양식을 변수로 만들어 둔다. 이 때, 이름 부분에 템플릿 리터럴(Template Literal)을 통해 name변수로 뚫어(?) 놓는다

4) 이름이 추가된 자소서 양식을 출력한다(Alert)

 

그럼 먼저,

 

1) 이름을 입력받는다

2) 입력받은 이름을 선언한 변수(name)에 할당한다

일단 저는 함수명을 getResume(자소서 받기)로 만들었고,

그 안에 name이라는 변수를 선언하여 prompt 메서드를 써서 사용자로부터 입력을 받고자 합니다

 

이처럼 

prompt 메서드는 

사용자에게 입력을 받고(1)

입력 받은 값을 선언해둔 변수에 할당할 수 있습니다(2) =>prompt메서드 자체가 사용자로부터 입력받은 값을 리턴하기 때문!

그러면 소괄호() 안에 '회원님의 풀네임을 입력해주세요' 는 뭘까요??

이는 입력을 받을 때 사용자에게 보여주는 글? 알림글? 정도로 생각하시면 될 것 같습니다:D

실제로 보여드리면

이런 식으로 

입력을 받을 때 뭐를 입력받기를 원한다고 사용자에게 정보를 주는 것이죠!

 

**참고로 prompt, alert, confirm 등의 메서드는 앞서 말했듯이

사용자에게 보여주기 위한 메서드이므로 웹 사이트에서 실제로 사용자에게 보여질 때 이런 모습으로

스크린에 나타난다는 것 알아두세요!

각각 prompt('입력해주세요') // alert('404 Error') 를 개발자 도구에서 실행했을 때 나오는 팝업입니다 :D

이런식으로 yes or no, 즉,  true or false를 받아올 수 있는 confirm 메서드도 챙겨가세요! :D 

 

그럼 이부분은 뭘까요?

이 부분은 입력받은 값이 문자열이 아닐 때 '잘못입력하셨습니다. 다시 입력해주세요:D' 를

alert 함수를 통해 사용자에게 보여주고

(**console.log와 같지만, alert는 사용자에게 보여주고자 할 때 쓰는 것이고, console.log는 개발자가 보는 용이라고 생각하시면 됩니다)

return getResume();

즉, 재귀함수처럼

다시 입력받는 과정으로 돌아가도록 한 것입니다:D 

 

다음으로,

 

3) 미리 자소서 양식을 변수로 만들어 둔다. 이 때, 이름 부분에 템플릿 리터럴(Template Literal)을 통해 name변수로 뚫어(?) 놓는다

4) 이름이 추가된 자소서 양식을 출력한다(Output)

 

최종 완성본 인데요!

자소서는 대충 써봤는데.. 대충써도 오글오글이네요..;;ㅎㅎ

 

Anyway! 저는 일단

resumeForm이라는 자소서 양식을 변수로 선언했고, 그 안에 미리 자소서 양식을 만들어놓고(템플릿 리터럴 방식으로)

그 안에 ${}을 써서 name부분만 바뀔 수 있도록 했습니다.

그러면 이제 이 함수는 

input으로 name을 받아

resumeForm 변수에 할당된 문자열 속 name을 채워넣고

끝에 완성된 resumeForm리턴하게 됩니다  :D

 

그럼 프로그램을 돌려보겠습니다

줄바꿈을 엉망으로 해놔서..죄송합니다;

결과물이 좀 보기 안좋지만(?)

제 이름을 치니까(용기러기) 

제 이름이 넣어진 예쁜(?)ㅎ 자소서가 완성되서 출력됐습니다 :D

 

이런식으로

prompt 메서드는 입력을 받아, 그 값을 출력해주는 기능을 한다는 것을

자소서 프로그램으로 알아봤습니다 :D

 

감사합니다:D