Javascript- prompt / length / slice

alert, prompt, slice 등을 익히면서 푼 두 가지 문제를 다시 정리.

 

환경

Chrome 브라우저, iMac 사용. 아무 사이트를 하나 골라서 개발자 도구(Developer Tool)로 Source > snippet을 선택해서 실행했고, 콘솔(Console)에서 verify 하면서 진행했다.

 

#1. 남은 글자 수 출력

140자까지만 입력할 수 있는 경우, 몇 자가 남았는지 알려주기. 이 문제는 아래와 같이 세가지 단계로 나눠볼 수 있다.

1. 문장을 입력할 수 있는 빈칸 띄우기
2. 글자수를 계산하기
3. 140자 중 몇자를 더 쓸 수 있는지 알려주기

tweet이라는 var를 정의한 후, prompt를 활용해서 문장을 입력하도록 한 후 length로 글자 수를 세고, 몇 자가 남았는지 alert으로 띄웠다.

var tweet = prompt("Compose your tweet:");
var tweetCount = tweet.length;
alert("You have written "+ tweetCount + " characters, you have "+ (140-tweetCount)+" characters remaining.");

 

#2. 첫 번째 글자만 대문자로 바꿔서 인사와 함께 출력하기

사용자가 입력한 영어 이름을 첫 번째 글자만 대문자로 바꿔서 인사와 함께 출력하기 (예. Hello, Gianna!). 두번째 문제는 1번보다 약간 복잡하고 지금까지 배운 자바스크립트를 총동원해야했기때문에 시간이 조금 더 걸렸다.

1. 이름을 입력받기
2. 모든 글자를 소문자로 바꾸기
3. 첫번째 글자와 나머지 글자를 분리하기
4. 대문자로 바꾼 첫 글자와 이름의 나머지 부분을 합쳐서 출력하기

var name = prompt("What is your name? ");
name = name.toLowerCase();
var nameslice1 = name.slice(0, 1);
var nameslice2 = name.slice(1, name.length);
alert("Hello, "+ nameslice1.toUpperCase() + nameslice2);

 

실수하거나 헤맨 것

1. slice를 아래처럼 쉼표(,)가 아닌 마침표(.)를 썼다.

slice(1.3)

2. 전체 글자 수를 모르는데, 첫 번째 글자를 뺀 나머지 글자를 어떻게 분리하지? 이 부분을 꽤 한참 고민했는데 length로 해결했다.

var nameslice2 = name.slice(1, name.length);

 

느낀점

문제는 최소 단위로 나눠서 한 번에 하나씩 해결하기.

개발은 문제를 바라보고, 인식하고, 해결하기 위해 시도하는 과정이구나. 이 말이 어떤 의미인지 어렴풋이 와닿는 하루였다. string에 대한 이런저런 기능을 연습했지만 "급한 마음으로 문제를 한 번에 풀려고 하지 말아야 한다"는 것을 절실히 느꼈다.

차근차근 문제를 다시 정의하기

1번 문제는 간단했으니 한 번에 풀 수 있었지만, 2번도 같은 방식으로 접근하니 막막했다. 문제 자체에 답을 낼 수 있는 프로세스가 이미 담겨있으니, 하나씩 하나씩 단계를 나눠서 문제를 다시 정의하는 습관을 들여야겠다.

특히 지금의 나처럼 완벽한 초보라면 더욱 이런 과정을 거치는 것이 좋겠다. 그리고 꼭 한 줄 한 줄 console에서 verify 하면서 차근차근 진행할 것.

 

 

참고
Alert method https://developer.mozilla.org/en-US/docs/Web/API/Window/alert
Prompt method https://developer.mozilla.org/en-US/docs/Web/API/Window/prompt