[자바스크립트 기초] 프롬프트로 문자열을 입력받아 문장 변경하기

[자바스크립트 기초] 프롬프트로 문자열을 입력받아 문장 변경하기

이번 시간에는 자바스크립트에서 프롬프트창 (입력창) 이 뜨면,

사용자가 직접 원하는 문자열을 입력하여, 바꿔보는 스크립트를 배우도록 하겠습니다^^

하나하나 열심히 따라하다 보면, 분명 도움되는 부분들이 있을 것이오니

끝까지 인내를 가지고 한번 따라해 주시길 바래요!

우선, 늘 하던데로 노트패드를 열어서

기본틀을 작성해 주시구요~!

그 다음부터 본격적으로 스크립트를 구성해 나가 보도록 합니다.

바디 부분에 스크립트를 구성해 보도록 했구요,

X라는 변수를 만들고,

X에다가 0.1 을 e를 이용해서 표현해 보았습니다.

그리고, document.write 출력부분에 변수는, 입니데이^^ 를 별도로 출력하게 하고

그 가운데에 X가 출력되도록 하였지요.

그, 결과~ 이렇게 출력되는 것을 확인하실 수 있습니다^^

비슷한 방법으로 응용해 봅니다^^

이번에는 X에다가 문자를 넣었습니다.

이렇게 출력됨을 확인하실 수 있습니다.

여기서 중요한 사실 하나!

수치를 나타내는것은, "" 큰따옴표를 사용하지 않고, 그냥 숫자만 사용합니다.

그리고 문장을 나타내는 것은 "" 큰따옴표를 사용합니다.

즉! 10 만 입력하면, 스크립트가 이것을 숫자 로 인식합니다.

"10" 이렇게 입력하면, 문자로 인식을 합니다.

이번에는 애니멀 이라는 변수를 주고나서,

토끼와 거북이 문장을 입력해 놓았습니다.

그리고, 버튼을 하나 만들었구요,

버튼은, 저 아래빨간 박스 안쪽에 input type = "button" 이 부분이 버튼 생성 태그 입니다.

그리고, 클릭할때, 경고창이 뜨게하는것이 onclick 부분이지요.

onclick="함수지정();"

이 부분을 기억해 주시고요, 이 말뜻은

클릭하면, 지정된 함수를 실행한다~ 라는 뜻으로 해석됩니다.

자, 그러면 이렇게 구성이 되는데,

alert를 클릭 해 볼까요???

짜잔~~! 이렇게 문장이 출력이 됩니다^^

즉! 함수와 변수가 어떤식으로 들어가는지에 대해서 위의 스크린샷을 보시고

참고해 주시면 되겠습니다.

이렇게 버튼이 나오구요~

정상적으로 클릭하세용 이라는 문구가 출력됨을 확인 할 수 있죠.

자, 본격적으로 들어가 봅시다.

바디 부분에 h1 대제목 태그를 넣구, 자바연습 이라는 문구를 입력창을 받아 바꿔보는 스크립트 입니다.

그렇기 때문에, h1 자바연습 부분에 ID값을 정해주었는데,

변신시켜야 하니까, 좌표를 지정해 주는것 이라고 해석해 주심 되겠습니다.

위의 태그대로 구성하면, 이렇게 출력이 됩니다.

프롬프트 창이 정상적으로 뜨고,

이제 아무거나 입력해 봅니다^^

요렇게 입력해 봤습니다.

그러면 정상적으로 잘 바뀌는지 한번 테스트 해 봅시다^^

오호라~! 잘 바뀌는군요~!

저도 자바스크립트를 배우고 있지만,

어렵긴 해요~ 그치만 재밌는 부분이 참 많네요^^;

뭐든지 기초가 정말 중요한 것 같네요~!

그러니까, 절대 포기하지 마시고~

같이 열심히 배워보도록 해요^^