웹에플리케이션 만들기 – JS, PHP 프로그래밍 2 : JavaScript 실습

몇 가지를 좀 더 배워보죠 우리가 이전에 만들었던 예제는 이렇게 생겼었습니다

이렇게 생겼는데요 여기 밑에 있는 저 input을 그냥 지워 버릴게요 그리고 위로 올릴게요 뭐 굳이 위로 올릴 필요는 없었지만 input type은 text라고 하고, 이렇게 하겠습니다 제가 지금 뭘 하려고 하는 거냐면 여기에 다가 사용자가 어떤 정보를 입력했어요

그리고 이 white라고 하는 저 버튼을 누르면 사용자가 입력한 이 정보가 경고 창으로 뜨게 하고 싶은 거예요 그러면 어떻게 하면 될까요? 한 번 생각해보죠 그러기 위해서는 일단은 우리가 알아야 될 정보는 여기에 있는 onclick 이 부분에 있는 코드에서 즉 사용자가 이 버튼을 클릭했을 때 경고창이 뜨는 것까지는 맞는데 여기에 있는 Hello world라고 되어 있는 이 텍스트가 뜨는 것이 아니고 사용자가 이 텍스트 필드 태그 상으로는 여기 있는 이 태그에 입력한 그 정보가 바로 여기에 착 들어가도록 해야 된다는 거죠 그러기 위해서는 이 alert이라고 하는 저 괄호 안에 어떤 코드가 들어가야 되는지를 한글로 써볼게요 한글로 쓰기 전에 여기 있는 이 태그에 id 값을 줄 겁니다 id=“user_input”이라고 이렇게 할 게요

그러면 여기에 어떤 코드가 Hello world란 텍스트 대신에 들어가야 되냐면 id 값이 user_input인 태그의 입력 값이 여기에 들어가야 된다는 겁니다 그런데 이것은 사람의 언어니까 이것을 이 컴퓨터가 알아들 수 있는 말로 바꿔야 되겠죠 그러면 여기는 화면이 너무 좁으니까 제가 밑에 다가 그냥 넓직하게 쓰겠습니다 저기다가 원래 쓰면 안 되는 거예요 우선 id 값이 user_input인 저 태그를 가리키기 위해서 “user_input“이라고 적어줍니다

그런데 여기 큰 따옴표(“)는 작은 따옴표(‘)로 대체해도 아무문제가 없습니다 작은 따옴표는 이렇게 했어요 그리고 get 무엇인가를 가져온다는 뜻이죠 Element 엘리먼트란 것은 태그랑 똑같은 뜻입니다 즉 어떠한 태그를 가져 올 건데 어떤 정보를 바탕으로 가져올 거냐면 ById 값을 바탕으로 해서 어떠한 태그를 가져 오겠다는 뜻입니다

그리고 이 뒤를 이렇게 괄호로 묶어주면 이것은 뭐가 되나요 저 괄호를 보니까 이것은 함수입니다 그 함수의 입력 값으로 “user_input“을 주게 되면 우리는 이 함수가 실행된 결과로 바로 이 태그를 가리킬 수 있는 값을 얻게 됩니다 그런데 제가 이전 시간에 잠깐 언급한 적이 있는데 이 JavaScript에는 수많은 내장 함수들 좀 더 전문적인 이야기로는 수많은 API들이 존재합니다 그런데 그 API들을 그냥 무질서하게 해놓으면 어떤 API를 찾는 게 좀 어렵겠죠

그 성격이 비슷한 것들 끼리 방을 만들어서 말하자면 정리 정돈을 해놨는데 여기 있는 getElementById라고 하는 저 내장 함수는 어떤 방에 속해 있냐면 어떤 그룹에 속해있냐면 document 라는 그룹에 속해 있습니다 그러면 지금 우리가 힘들게 입력한 이 코드를 컷해서 여기 있는 Hello world 대신에 이렇게 입력해주겠습니다 그러면 이렇게 화면에 표시가 되죠 이렇게 되는 되요 제가 한번 실행을 시켜보겠습니다

white 버튼을 누르면 저 버튼을 눌렀을 때 onclick 이라는 저 속성 안에 들어 있는 저 문자를 JavaScript로 웹브라우저가 해석해서 실행하게 된다는 거죠 white를 누르니까 보시는 것처럼 경고창이 실행이 되었구요 경고창이 실행이 됐고, 그리고 그 경고창 안에 바로 이것에 해당되는 정보가 표시되고 있습니다 그러면 사용자가 여기 있는 이 텍스트 필드라고 하는 곳에 어떠한 정보를 입력하면 그 정보는 무엇을 통해서 알 수 있냐면 바로 value 라고 하는 값을 통해서 알 수가 있습니다 그러면 여기에다가 제가 이 끝에 다가 value라고 한 번 적을 게요

그리고 화면을 새로 고침하고 그 다음에 여기에 다가 Hello world라고 이렇게 입력하고요 white 버튼을 누르면 보시는 것 처럼 제가 입력한 바로 이 Hello world라고 하는 정보가 여기에 이렇게 표시되게 되는 것이죠 그것은 사용자가 여기 있는 white라는 버튼을 눌렀을 때 onclick이라고 하는 이 속성 안에 있는 이 코드가 실행이 되는데 그 중에서 괄호 안쪽에 있는 부분이 먼저 실행이 되겠죠 바로 이 부분이 일단 실행이 됩니다 이것은 id 값이 user_input인 이 element에 값을 가져와서 리턴 해주는데 바로 그 element를 가리키는 그 값에

value라고 하는 것을 이렇게 붙여주면 바로 여기에 입력된 이 Hello world라고 하는 값을 우리가 이리로 가져올 수 있게 되요 그러면 그 Hello world라는 값이 alert의 입력 값으로 들어 왔기 때문에 이렇게 Hello world라고 하는 텍스트가 화면에 출력될 수 있는 겁니다 이거 상당히 어려운 내용이고 어떻게 보면 우리 이 JavaScript 이 본 수업에서 굉장히 긴 시간 동안 설명 드리는 내용입니다 혹시 이해가 안 가셨더라도 너무 상심하지 마시고 우리 수업 이 후속 수업보시면 되고 혹시 이해가셨다면 너무 축하드립니다 예 한 번에 이해갔으면 제일 좋은 거죠

그런데 이거 한 번에 이해하기 어려운 거니까 잘 이해 안간다고 너무 어 막막해 하실 필요 없고 이거 이해 못한다고 뒤에 꺼 이해 못하는 거 아닙니다 아시겠죠 벌써 시간이 이렇게 많이 됐네요 여기서 또 한 번 끊고 우리 또 다음 시간에 나머지 얘기계속 진행해보죠