자 우리는 저기 보이는 fddd가 입력된 input박스 안에 입력된 내용이 '이름 붙이기'버튼을 클릭하면 저 아래에 $(txt)처럼 추가되게 만들고자 합니다.
꼭 이런 순서로 생각해야하는 건 아닙니다. 정답은 없습니다!
1. button을 클릭했을 때 작동하게 하자
<button onclick="functionName()"> <button> 태그 안쪽에 "onclick" 이라는 속성을 추가함으로써, 이 <button>태그는 비로소 '클릭'이라는 이벤트를 통해 뭔가 동작을 하는 녀석으로 진화(포켓몬)하게 됩니다.
근데, 그러면 그 버튼을 클릭했을 때는 무슨 일이 벌어지는 건가요? 바로 ="functionName()" 이라는 일이 벌어지게 됩니다.
2. 무슨 일이 벌어지는지 정의하기
HTML button태그 안에 넣었지만 function은 javascript 코드입니다. 이렇게 뭔가 '동작'하고 사용자의 클릭과 같은 '이벤트'를 통해 사용자와 '상호작용'하는 것은 거의 다 javascript의 일입니다.
function functionName(){
//무슨 일이 벌어지게 하고 싶으신가요? 그걸 이 안에 javascript코드로 짜서 넣어봅시다!
}
그럼 우린 무슨 일이 일어나게 하고 싶나요?
1) input 박스 안에 입력된 값을 가져와서
let txt = $("#id").val()2) 아래쪽에 붙일 수 있는 적당한 HTML코드로 만들어서
let temp_html = `<li>${txt}</li>`3) 적당한 곳에다 HTML코드를 덧붙이자
$("#tagName").append(temp_html)이 밑으로는 TMI입니다
1) input 박스 안의 값을 가져오자
일단 저기 안에 누군가가 어떤 값을 입력했다면, 그 값이 뭔지를 알아야겠죠? 다음과 같은 jQuery 코드를 통해 알아내봅시다.
let txt = $("#idName").val()여기서 #idName은 input박스에 <input id='idName'>처럼 idName이라는 id를 갖고 있다고 가정한 것입니다. 코드를 자세히 살펴보죠.
1) let - 지금부터 javascript 변수를 만들겠다(선언하겠다)는 의미입니다.
(TMI: var와 const로 선언할 수도 있다는 소문이 있습니다. 궁금하면 검색!)
2) txt - 선언할 변수의 이름입니다. 원하시는 아무 단어로 하셔도 되지만, 나와 남이 뭘 위한 변수인지 알아보기 쉽도록 변수명을 설정하는 습관을 들이는 것이 좋습니다.
3) = - 오른쪽의 값을 왼쪽의 변수에 넣겠다(저장하겠다, 대입하겠다)는 의미입니다. 수학에서의 "같다"는 의미와는 좀 다릅니다.(프로그래밍에선 같은지 검사하기 위해 보통 == 를 씁니다.)
4) $ - 순수(바닐라) javascript가 아니라 jQuery를 이용할 때의 규칙입니다. $ 대신 jQuery라고 써도 동일하게 작동합니다.
5) ("#idName") - 선택자라고 합니다. 더 엄밀히 따지면 #idName만 선택자라고 해야하려나요? 어쨌든, 이 부분이 현재 우리가 있는 웹페이지(HTML문서)에서 idName이라는 id를 갖고 있는 태그를 '선택'(지정)합니다.
6) .val() - 앞에서 지정한 바로 그 녀석의 value, 값을 가져옵니다.
$("#idName").val() 은 이게 실행되는 순간 바로 저 input박스 안에 있는 "fddd"라는 값이 됩니다. 그럼 "fddd"가 txt라는 변수에 값으로 저장되겠죠?
2) 아래쪽에 붙일 수 있는 적당한 HTML코드로 만들자
<ul id="tagName">
<li> 세종대왕 </li>
<li> 임꺽정 </li>
<li> 3번 </li>
</ul>let temp_html = `<li>${txt}</li>`temp_html안에 들어갈 내용을 적을 때, 작은 따옴표(')가 아닌 백틱(`)을 쓰셔야 변수를 인식해서, txt가 아닌 그 변수 안에 담긴 내용이 출력되도록 해줄 수 있답니다.
HTML에는 리스트를 만드는 위와 같은 태그가 있습니다. ul태그 안에 li태그를 여러 개 넣으면 li태그 하나마다 앞에 점이 찍히면서 예쁜(?) 리스트형태로 보여줍니다. 지금 우리가 넣으려는 곳을 보니 li태그를 이용하고 있네요.(소스코드를 직접 보거나, 개발자도구에서 찍어보면 알 수 있겠죠?)
따라서 우리가 밑에다 새로 넣으려는 값도 <li>태그로 감싸줘야겠네요!
3) 적당한 곳에다 HTML코드를 덧붙이자
$("#tagName").append(temp_html)선택자를 통해 위에서 만든 HTML코드가 들어가야할 곳(<ul>태그 안쪽에 들어가야겠죠?)을 선택해주고,
.append 를 통해 그 선택한 녀석의 안쪽에다가 어떤 코드를 넣는 동작을 합니다.
무엇을 넣는지는 () 괄호 안에 들어있죠! 바로 위에서 만든 teml_html(이라는 이름의 변수 안에 넣어둔 HTML코드)입니다.
이 밑으로는 진짜 진짜 TMI입니다.
(스파르타 기초 강의는 이론을 최소한만 가르치는 것이 매력입니다. 이론보다는 실제로 동작하는 코드를 짜보게 하고 '익숙해지게' 하는 데 중점을 두고 있죠. 그래서 재밌고요! 그러므로 안 보셔도 됩니다ㅎㅎ 계속 하신다면 나중엔 자연스럽게 알게 됩니다.)
번외(TMI). 함수이름 뒤에 ()는 뭐에요?
function sum(a1, a2){
return a1+a2
}
let a = 5
let b = 7
let c = sum(a,b)
console.log(c)위와 같은 코드를 보신 적 있으실까요? 콘솔엔 뭐라고 나올까요? 12가 나올 것 같지 않나요?
함수를 정의할 때 함수이름() 라고 쓴 것은 이 함수를 실행함에 있어 아무 값도 필요 없다는 의미입니다.
반면 위처럼 sum(a1, a2)라고 썼다면 이 sum이라는 함수를 쓰기 위해 a1과 a2라는 2개의 값을 갖고 오라는 의미가 됩니다.(은행에서 통장 만드시려면 신분증 가져오세요, 하는 것처럼요)
sum() 이라고 하면 에러납니다.(에러내용: 함수를 실행하기 위한 값이 없어 함수를 실행할 수 없습니다.)
이 함수는 a1과 a2에 해당하는 (위 코드에선 a와 b가 각각 a1와 a2의 역할을 하고 있죠) 역할을 해줄 어떤 값들과 함께가 아니면 쓸 수 없는 함수인 것입니다. 함수내용을 보세요, a1과 a2가 어떤 값인지 모른다면 이 함수가 어떻게 실행되겠어요?ㅎㅎ
