comtK

안녕하세요~ 오늘은 자바스크립트에 대해서 이야기해볼까 합니다.

간단한건데 스크립트 디버깅이라던지 뭐 다양한 경우가 있지만 자주쓰는것들에 대해서 이야기해볼겁니다.

바로 alert()과 confirm(), prompt()에 대해서 이야기해보겠습니다.

'alert'을 검색해봤는데 여러가지 뜻중에 '알리다' 라는 뜻이 있네요.

다른뜻은 지금 처음알았습니다.... 저는 그냥 '알리다'만 알고있었어요.. 여하튼..!! 뜻 그대로 뭔가를 알려주는것이라고 생각하시면 됩니다. 보통 회원가입하실때나, 비밀번호 설정할때 자주 보셨을것으로 생각됩니다. 계정을 생성할경우 중복체크할때나(뭐 요즘은 alert말고 ajax로 바로바로 체크해서 옆에 텍스트로 알려주는곳이 더 많은거같아요..) 비밀번호 설정시 처음 비밀번호와 입력한 비밀번호를 확인하는 과정에서, 두개의 비밀번호가 일치하지 않는경우 '비밀번호가 일치하지 않습니다.' 같은 확인창이 '띵!' 하고 나타나죠. 물론 계정 로그인시 비밀번호가 틀렸을때도 자주볼수있습니다.

이렇게 뭔가를 사용자에게 알려줄 경우에 많이 사용합니다. 사용법 역시 간단하죠.

위 이미지처럼 스크립트를 짜고, 아래 이미지처럼 버튼에 이벤트를 걸어서 호출합니다.

그러면 결과는

위 이미지처럼 나옵니다. 아주 간단해요. 참 쉽죠? 밥아저씨가 생각나는것은 기분탓일껍니다....ㅋㅋ

'confirm'역시 검색해봤어요.

대충 예상은 했어요. 그런데 일본어 사전에나온뜻이 더 맘에드는건 저뿐인가요...ㅋㅋ 저는 '확인하다' 라고 굳게믿고있었는데 영어사전은 절 배신했습니다. 아주 못된친구네요. 뭐 이상한이야기는 이쯤하고. '컨펌'이라는 단어 익숙하실겁니다. 프리랜서분이시던, 직장은 다니는 분이시던간에 작업하면서 한번씩 거치는과정이죠. '요구하신게 이거맞나요?' 혹은 '이렇게 진행하려하는데 어떤가요?'등 보통 1안부터해서 3안쯤까지 가다가 4안쯤가면 1안이 제일좋다고들 하시죠.. 역시 처음이 제일좋아요...ㅠㅜ

이제 언제쓰는건지 아실거라 생각됩니다. 사용자들에게 이 작업을 할것인지 말것인지를 물어보고 사용자의 결정에 따라 처리를 할 수 있는 함수입니다. alert()는 '확인'버튼 하나였지만, confirm()은 '확인'과 '취소'버튼이 있습니다. 어떠한 버튼을 누르냐에 따라서 분기를 할 수 있어요. 결과값은 boolean형으로 리턴됩니다. 변수에 따로 받아서 처리하셔도 되고, if문의 조건을 설정하는쪽에 직접 작성하셔도 됩니다. 뭔가를 결정할때 주로 볼수있어요. 결제를 한다던지(결제하는거 참 좋아하는데 할때마다 손이 부들부들....), 글을 작성하고 저장할때도 주로볼수있어요. 그러고보니 티스토리 블로깅할때는 못본거같은데 뭐 그럴수도 있죠. 이제 사용법을 알아볼까요.

저는 이런방식으로 사용합니다. 기호에 맞게 작성하세요 ㅋㅋ

그리고 아래 이미지처럼 버튼에 이벤트를 걸어서 호출합니다.

이제 함수를 호출해보겠습니다. 아래 이미지는 confirm()을 호출한 모습입니다.

실행하면 이렇게 나와요!! 그리고 각 버튼별로 분기를 하면

이런식으로 분기가 가능합니다. 이거역시 어렵지 않아요. 쉽게 사용하시면 됩니다.

'prompt'는 검색결과가 맘에들지않아요 ㅋㅋ 올리지 않을래요ㅠㅠ

'prompt'는 사용자에게 입력을 요구할때 사용합니다. 그런데 개인적으로 저는 잘 사용하지 않아요.. 지금 정리하면서 오랜만에 만나서 반갑네요. 아마 많이 못보셨을거라고 생각됩니다. 제가 여기저기 막 돌아다니고 그러는데 저도 많이 못봤어요.. 그래서 많이 할말이 없어요ㅠㅠ 보통 뭔가 입력받을때 form을 만들어서 그안에 입력하고 확인버튼 누르면 체크하시지 않나요ㅠ? 저만그런가요.. 뭐 각설하고 바로 사용법을 알아보겠습니다.

위 이미지처럼 스크립트를 작성한 후에, 아래 이미지처럼 버튼에 이벤트를 걸었습니다.

저는 이런방식으로 사용합니다. 정말 어색해요 마치 초등학교때 그냥저냥 알던친구를 버스에서 우연히 만나서 서로 알아보고 옆자리에 앉아서 어색하게 대충 안부물으면서 가는데 심지어 목적지까지 같아서 가는길 내내 어색할때정도의 어색함이랄까.. 와닿으실지 모르겠네요.. 대충 상상해보시면 상상만으로도 불편하지않을까 싶습니다. 이제 호출해볼까요.

이렇게 사용자에게 입력을 요구합니다. 그런데 이렇게 뜨는거 저는 별로 않좋아해요ㅠㅠ '띵! 띵!' 그러면 좀 거슬려요ㅠ

그래도 예시니까 값을 입력하고~ 확인을 딱!! 누르면

이렇게 활용이 가능합니다 ㅋㅋㅋ 저는 변수에 담아서 alert로 값을 띄웠어요 ㅋㅋ

이렇게 입력받은 값은 따로 변수에 저장해서 가공할 수 있습니다. 이친구는 정말 할말이 많이 없네요.

오늘 작업한 내용을 파일로 올려놓을께요!! 

alert.html

블로그 내용중에 제가 표로 만든내용이나 기타 설명같은부분들이 맘에 안드시거나 그렇게 생각하지 않는분이 계실수도 있는데, 지극히 개인적으로 느끼고, 작업한것을 토대로 작성한것입니다. 틀린부분은 지적해주시면 확인하는대로 수정하겠습니다~ 개인의견차가 있는 부분은 그냥 '아 이친구는 이렇게 생각하는구나' 하고 넘어가주셔도 괜찮을거같아요~