[JavaScript] 문자열을 다루어 보자

안녕하세요. 개발토끼 입니다.

프로그램은 사용자(사람)과 소통하기 위해서 문자와 언어로 표현되어야 하죠. 근데 미리 준비된 단어만 보여준다면 정말 쓸모 없는 프로그램일 것입니다.

동적(움직임, 변화가 있는)으로 문자를 출력하는 일련의 기능이 있어야 진정한 컴퓨터 프로그램이라고 할 수 있겠죠.

 

그래서 오늘은 자바스크립트의 문자열을 표시하고 붙이고 자르고 길이 재고 이것 저것 다 해보도록 하겠습니다.

 

그럼 웹 스톰을 실행합니다.

 

Open을 눌러 어제 만들었던 폴더를 열어줍니다.

그냥 새롭게 Create New Project를 눌러 새롭게 만들어 주셔도 무방합니다.

 

 

 

 

프로젝트 폴더에 새로운 폴더를 추가해줍니다.

여러가지 내용들을 JavaScript Project라는 폴더에 모두 보관하기 위해서죠.

 

 

 

 

이름은 JavaScript String이라는 폴더로 만들어줍니다

원하는 이름 아무거나 하셔도 무방합니다.

다음으로 넘어가볼까요?

 

 

 

 

새로운 HTML 페이지 파일도 추가해줍니다.

 

 

 

 

이름은 String_Index로 지어줍니다.

이것도 원하는 이름으로 만들어주셔도 무방합니다.

근데, 보통 웹 페이지의 첫 페이지는 Index라고 명명하기도 합니다.

 

 

 

 

<p> </p> 태그를 추가해줍니다.

위 사진 같이 p 태그를 추가 해줍니다.

<p> 태그는 Paragraph라는 뜻으로 한 페이지에 있는 단락을 나타내 줍니다.

그리고 자세히 보시면 HTML ID 값이 showMessage로 설정해져 있을 것입니다.

자바스크립트가 HTML의 특정 태그를 쉽게 찾을 수 있도록 ID 값을 설정해주는 거죠.

 

 

 

 

그 다음 스크립트 부분을 추가 해줍니다.

<script> </script> 이 부분을 <P> 태그 다음에다가 붙여주죠.

그리고 나서 Script 부분에 이제 자바스크립트 명령어를 넣어줍니다.

넣어줄 명령어는

document.getElementById(" ") 입니다.

이것에 대해서 간단하게 설명드리면 document는 Html 문서를 뜻합니다.

HTML 문서 내에서 get은 가져오겠다 무엇을?

ElementById("rabbit") 괄호 안에 있는 rabbit이라는 ID를 가져오겠다는 의미 입니다.

즉, 어떤 Html 문서 안에 있는 특정 Html ID값을 가진 엘리먼트를 가져오겠다는 명령이죠.

 

 

 

 

JS Hint 를 사용하자!

document.getElementById("")를 입력하면 " " 사이에서

키보드 : CTRL(컨트롤) + 스페이스(space)를 눌러주세요.

그러면 위 화면같이 showMessage라는 목록이 나오게 됩니다.

 

 

 

 

그리고 .innerHTML을 넣습니다.

여기서 .innerHTML은 showMessage라는 ID를 가진 HTML 엘리먼트에다가 "안녕하세요. 반갑습니다." 라고 넣는다는 거죠.

그럼 웹브라우저에서는 어떻게 표시가 될까요?

한번 확인 해봅시다.

 

 

 

키보드 : ALT(알트) + F2 번을 부르게 되면 위와 같이 메뉴가 나타납니다.

원하는 브라우저를 선택해서 실행해봅시다.

저는 Chrome으로 실행 해보겠습니다.

 

 

 

 

그럼 브라우저에서 "안녕하세요. 반갑습니다." 라고 표시되게 됩니다.

신기하신가요? ㅎㅎㅎㅎ 프로그래밍을 어느정도 다루어본 분들은 별로 신기하지 않을 수도 있죠.

어쨋든 다음으로 넘어가봅시다.

 

 

 

그렇다면 어떠한 변수를 통해서 저 문자를 표현해볼까요?

 

var myName = "개발 토끼";

이렇게 적어봅시다.

그리고 "안녕하세요"라는 문자 다음에 + myName; 이라고 적어보세요.

위와 같이 다 적으셨나요?

그럼 실행해 봅시다.

 

 

 

 

 

이번에는 인터넷 익스플로러로 실행해보죠.

그러면 myName이라는 변수에 들어있는 "개발 토끼"라는 내용이

"안녕하세요"와 합쳐져서 위와 같이 표시되게 됩니다.

ㅎㅎㅎㅎ

여기에서 알 수 있는 것이 있죠.

[문자열 1] + [문자열] = [문자열1문자열2] 이런식으로 합쳐지게 됩니다.

그렇다면 [문자열] - [문자열]은 가능할까요? 혹은 [문자열] * [문자열]은요?

ㅎㅎㅎㅎ

아쉽게도 문자열의 합성은 + 만 사용가능합니다.

왜냐하면 예를 들어 문자열을 - 연산할 때를 가정해봅시다.

 

[안녕하세요] - [안녕!] = ?

 

이렇게 될 경우 [안녕 - 안녕]은 빼기를 통해서 소멸될 수 있겠지만 [하세요 - !] 이건 어떻게 빼야할 까요?

명확하게 결과값을 예측할 수 없죠.

 

그래서 자바스크립트는 문자열 중 특정 문자를 뺄 수 있도록 함수를 지원합니다.

 

그것은 바로 substring() 함수죠

 

substring()함수는 아주 간단합니다. 문자열의 특정 위치의 문자열만 가져오는 함수죠.

쓰는 방식은 다음 사진에서 보실 수 있습니다.

 

myName에 있는 "개발 토끼"라는 이름 중에 개발만 가져오도록 하죠.

myName.substring(0,2)를 써보세요.

그래서 그 결과값 result를

document.getElementById를 통해 출력해보세요.

그러면 결과값은 다음과 같이 출력됩니다.

 

 

 

 

"개발"이라는 문자만 표시되도록 해주죠.

원리는 간단합니다.

substring(문자열 첫번째 번호, 특정 문자열까지 번호)로 문자를 잘라버리는 거죠.

앞서 "개발 토끼"라는 것은 총 길이가 5 입니다.

왜 길이가 5일까요?

한번 알아봅시다.

 

 

 

 

스크립트를 위와 같이 변경해봅시다.

그리고 출력을 해보면 답은 ???

 

 

 

 

 

답은 5 입니다.

"개발 토끼"라는 문자의 길이가 총 5이죠.

 표로 알아볼까요?

개	발	공백	토	끼
1번	2번	3번	4번	5번

이렇기 때문에 5라는 길이죠.

 

그럼 다시 돌아가서 substring(0,2)면

개	발	공백	토	끼
1번	2번	3번	4번	5번
인덱스 0	인덱스 1	인덱스 2	인덱스 3	인덱스 4

여기서 인덱스는 컴퓨터가 숫자를 셀때 순번을 뜻합니다.

컴퓨터는 항상 숫자를 0부터 시작해서 읽습니다.

그래서 substring(0,2)는 "개발"만 표현하게 되는 것 입니다.

 

 

그럼 여기서 의문점이 생기죠.

3번의 공백도 포함이 된건가요???

사실 포함되지 않았습니다.

substring(0,2)는 인덱스 0번은 포함하되 인덱스 2번은 포함하지 않습니다.

그래서 인덱스 2번이 공백이 아니라 그냥 "토"라는 문자가 있었더라도

표시가 되지 않겠죠. ㅎㅎㅎㅎ

 

프로그래밍을 처음 하시는 분들은 왜 이따위로 만들어놨을까 생각하실 겁니다.

하지만, 이걸 이해하신다면 컴퓨터와 좀 더 친숙하게 지내실 수 있죠.

프로그래머는 통역사와 같습니다.

컴퓨터가 사람들을 이해할 수 있게끔 해주고

반대로 사람들이 컴퓨터를 이해할 수 있도록 도와주는

매개체와 같은 역할이죠.

 

이러한 프로그래머의 특성은 아주 매력적입니다.

여러분들도 프로그래밍을 하면서 이러한 매력을 느껴보시길 바랍니다.

오늘은 여기까지 작성하도록 하겠습니다.

 

긴글 읽어주셔서 감사합니다.

다음 시간에 또 만나요.

안뇽~