모~든 언어의 책들은 하나같이
설치 30%, 기초 50%, 실 개발 20%로 구성되어 있죠.
근데 이 기초에 맨날 똑같은게 50%씩 잡아먹어
변수, 함수, if문, 반복문 얘기를 백몇십 페이지를 합니다
그런데 그거 맨날 봐도 이해 안가시죠?
저도 그랬습니다 -_- 사전부터 수학책까지 다시 돌려봤을 정도..
게다가 사실 제이쿼리로 감춰진 함수를 쓰다보면
본인이 쓰면서도 함수를 이해를 못 합니다.
그래서 준비했습니다. 세가지 포인트로....
특히 비전공자라면 아무리 들어도 알아먹을수 없는 그 외계어!
1. 함수 선언과 실행
2. 매개변수(파라미터)
3. return
이렇게 3가지로 함수를 파헤쳐 보도록 하겠습니다.
1. 함수의 선언과 실행
<html>
<body>
<script>
function aa() {
alert('경고다');
}
</script>
</body>
</html>function 이라고 함수를 써 주시고요
aa는 함수의 이름입니다
()는 파라미터(매개변수)가 들어갈 수 있는 자리인데요 지금은 없는겁니다.
중괄호 { } 를 열고, 단순히 alert 내장함수를 이용해서 경고창을 띄워봅시다.
그리고 저장한뒤 브라우저로 열어보시면....
아무것도 안나오겠죠. 함수를 만들어만 놨지 쓰지는 않았으니까요.
<script>
function aa() {
alert('경고다');
}
aa();
</script>편의상 html과 body는 생략하겠습니다.
aa();라고 쓰면 이 aa함수가 실행됩니다.
저장하고 브라우저를 새로고침 해 보면 경고창이 바로 뜰 거에요.
이게 가장~기본적인 함수의 형태. 이제 하나씩 확장해 보겠습니다.
2. 매개변수(파라미터) 활용해보기
자 이제 이놈의 함수를 어떻게 실제로 html에서 갖다 쓰냐~!
<input type="text" id="juice" placeholder="음료">
<input type="button" onclick="eat(document.getElementById('juice').value)" value="버튼">
<script>
function eat(ddang) {
alert(ddang+" 이라고 입력했군");
}
</script>정말~! 처음이시면 이 코드도 복잡해 보일수 있습니다.
eat(ddang) 이라는 함수를 만들어줬는데요
ddang은 어떤 기능을 하는게 아닙니다.
제 이름이 딸기별땅이잖아요? 그런데 eat함수는 저를 너무 귀여워 한 나머지
쥬스마저도 땅~ 이라고 부르기로 약속한 것 뿐이죠.
그 다음에 html에서 input text에 juice라는 아이디를 지어줬고요
버튼도 하나 만들어서.. '클릭할때' 동작하도록 onclick이라는 속성을 추가해서
eat() 함수를 걸어줍니다.
이때 '누구의 값'을 받을건지 지정을 하는것이
document.getElementById('juice').value 이부분입니다.
쥬스라는 아이디의 텍스트 필드에있는 value를 받겠다라는 거거든요.
제이쿼리를 뺀 순수 자바스크립트(?)에서는 id의 값을 이렇게 불러옵니다.
제이쿼리였다면 $("#juice").val() 이라고 간단히 불러왔을텐데 ㅎㅎㅎ
딸기쥬스라고 입력한뒤 버튼을 클릭해보시면
juice라는 아이디에서 ddang으로 값을 받아서 경고창에서 '딸기쥬스' 라고 표기합니다.
<input type="text" id="meal" placeholder="식사">
<input type="text" id="juice" placeholder="음료">
<input type="button" onclick="eat(document.getElementById('juice').value, document.getElementById('meal').value)" value="버튼">
<script>
function eat(ddang, bab) {
alert("식사는 " + bab +", 음료는 "+ ddang +"이라고 입력했군")
}
</script>이렇게 매개변수를 여러개 넣어서
동시에 여러 input의 value를 받아올수도 있어요.
자 그런데, 위 코드를 다시 보시면... onclick의 매개변수가 너무~길어서 지저분하네요.
자바스크립트의 변수에 담아서 정리해보도록 하겠습니다.
<input type="text" id="meal" placeholder="식사">
<input type="text" id="juice" placeholder="음료">
<input type="button" onclick="eat(getJuice.value, getMeal.value)" value="버튼">
<script>
var getMeal = document.getElementById('meal');
var getJuice = document.getElementById('juice');
function eat(ddang, bab) {
alert("식사는 " + bab +", 음료는 "+ ddang +"이라고 입력했군")
}
</script>document부터 get~Id부분을 잘라와서
getJuice, getMeal라는 변수에 넣어주고
onclick에서도 getJuice, getMeal로 바꿔줍니다.
이때 주의해야할점 2가지.
1. 쥬스, 밀 순서대로 입력했다면 함수에서도 쥬스, 밀이라고 값을 '순서대로' 받아옵니다.
한마디로 getJuice = ddang, getMeal = bab 이라는 것이죠.
거꾸로 eat(getMeal.value, getJuice.value)라고 입력해버리시면
ddang에 Meal을 받고, bab에 Juice를 받아오게 됩니다.
2. getMeal = document.getElementById('meal').value 라고
value까지 한번에 변수에 넣지 않은 이유는
일단 도큐먼트가 뜰때의 값을 받아오기 때문에
맨처음에는 value에 값이 없잖아요? 그 없는 상태를 그대로 저장해버려서 빈값이 되는데
우리는 식사와 음료를 입력한 뒤에 -> 클릭했을때의 value를 받아와야 하거든요.
사실 자바스크립트는 여기까지만 함수를 다뤄도
프로그램을 다루는데는 딱히 문제가 없습니다.
아니 뭐 사실, 제이쿼리의 $("#id").click(function() { 내용 });
이것만 써도 웹 개발이 되긴 합니다 ㅋㅋ;
제이쿼리의 특장점이죠.. 직관적인 코드 덕분에 함수따위 몰라도 웹개발이 되는...
3. return 써보기
하지만...
개발자로 취업을 한다면... 제이쿼리를 안 쓰고 개발을 해야할 일이 많습니다...
자바스크립트여도 Vue.js와 Typescript를 쓰게 될 수 있고,
앱개발이나 java를 손 봐야 할때도 있기 때문이죠..
비전공자의 경우 리턴 리턴 말만 들어보고 정확한 의미를 모르는 경우도 많은데요.
(아니.. 사실 저도 초기엔 그랬습니다.. ㅠㅠ)
사전에 백날 반환한다 어쩐다 써있어도.. 뭔질 모르죠. ㅋㅋ
이번에는 코드를 싹 지우고 새로 써보도록 하겠습니다.
<div onclick="output()">거짓말탐지기</div>
<script>
var isMurderer = false;
//return 을 받아서 다른함수에서 호출해보자
function murder(result) {
if (result == true) {
return "살인마다";
}else {
return "살인마가 아닙니다";
}
}
function output() {
console.log( murder(isMurderer) )
}
</script>
이게 div 한개만 가지고 해봅시다.
예 그런데 꽤나 복잡하죠? ㅋㅋ 함수 두개나 사용했어요.
is Murderer라는 변수를 하나 '선언' 해주시고요
아직 사람을 안 죽였으니까 false로 지정하겠습니다.
그리고 살인 판독기인 murder라는 함수를 만들어주시고..
살인마인지 값을 '받아서' 확인을 해야되니까 result라는 매개변수 자리를 만들어줍니다.
이 murder함수를 실행 시킬때
result라는 매개변수로 들어온 값이 true라면 "살인마다" 라는 말을 뱉을것이구요
아닌 경우에는 "살인마가 아닙니다" 를 뱉을거에요.
그런데 이것은 return이라는 결과만 가지고 있는것이지
눈에 보이도록 출력을 할수있는게 아니거든요.
이때 alert, 다른 언어라면 뭐 print, echo 또는 console 등에서 이걸 출력할 도구가 필요한데요.
출력의 기능을 하는 output() 이라는 함수를 만들어 줍니다.
그동안 alert만 사용했으니 console.log에다가 murder함수를 사용해봅시다.
murder함수의 매개변수 자리에 아까 만들어둔 isMurderer라는 변수를 넣어보면
murder라는 함수에서 그것을 result라는 매개변수로 받고
if문에서 true인지 false인지 판별을 하겠죠?
실행 시켜 봅시다..
덩그러니 거짓말탐지기라는 글자가 있는데
우린 어차피 여기에 onclick이라는 속성을 넣어줬으니
클릭을 해보시면...
아무 변화가 없습니다. ㅋㅋ
당연하죠.. 콘솔에 넣었으니까 ㅎㅎㅎ
f12를 눌러서 (크롬 기준) 개발자도구가 뜨면 상단에 탭이 있습니다.
Elements..Console..Sources....
우린 콘솔에 찍힌것을 봐야하니 콘솔을 눌러주시면
isMurderer의 값이 false였기 때문에 '살인마가 아닙니다' 를 출력합니다.
자 이제 살인을 저질러 볼까요?
<div onclick="output()">거짓말탐지기</div>
<script>
var isMurderer = false;
//return 을 받아서 다른함수에서 호출해보자
isMurderer = true;
function murder(result) {
if (result == true) {
return "살인마다";
}else {
return "살인마가 아닙니다";
}
}
function output() {
console.log( murder(isMurderer) )
}
</script>isMurderer = true; 를 대입해줍니다.
살인이 이렇게 쉽습니다..(이해를 위해 과격한 설명을 -_-;;)
결과를 볼까요?
살인마다 가 출력됩니다.
하루 종일 걸려서 설명과 코드를 준비해 보았는데
사실 이것만 가지고 이해가 잘 갈까? 의문스럽긴 합니다..
프로그래밍이란것이 머리로 완전히 이해가 되기 전까지는
a가 b고 b가 c면 a=c다 이런식으로 이해해야 하는것이 많아서
어려울수도 있겠다 라는 생각이 들기도 하네요. ㅎㅎㅎ ㅠㅠ
그런데 이것보다 더 쉽게 설명할수 있을까? 싶기도 하고요.
이상 완전 초보자를 위한 프로그래밍 함수를 뽀개 봤습니다...
'개발관련' 카테고리의 다른 글
| mac vim image not found 에러 (0) | 2021.06.16 |
|---|---|
| Javascript ES6 적용하는법 + 크로스 브라우징 대처 (0) | 2021.05.24 |
| 맥os Bigsur 업데이트후 파이썬이 날아갔을때 (0) | 2021.05.02 |
| [Swift UI] 앱 배포시 필요한 설명모음 및 도구들 (0) | 2021.03.20 |
| [ios앱 배포] 개발자 등록하기, 돈부터 내자. (0) | 2021.03.18 |
댓글