본문 바로가기
개발관련

개발 쌩초보도 30분만에 배우는 제이쿼리-상

by 딸기별땅 2019. 10. 8.

이번시간에는 강좌에 앞서서 미리! 말씀드리지만. 

이것을 보고 욕하는 분 있을지도 모릅니다 ㅠㅠ

어디 기초도 안된걸, 자바스크립트도 똑바로 못하면서 제이쿼리냐!<예상 가능

 

그런데 저의 신입시절에 이 프로그래밍이라는 영역이 너무 어려워서

책으로 보고 강좌를 따라해도 도무지 실무에 써먹지를 못하고 고생한일이 많았기 때문에

고충을 누구보다 잘 알기 때문에 계속해서 누구나 의지만 있으면 배울 수 있는 쉬운 강좌를 지향하는 거거든여.

 

그리고 실제로 이 방법으로 퍼블리셔에게 단 30분만 설명하고 바로 실무에 투입했던 기적이..

그러니 제이쿼리 초보자님들은 안심하고~ 따라오세여.

 

이번 강좌에서는 아주 기본적이고 진부한 변수, if문과 for문까지만 설명할겁니다.

다음 강좌에서 바로 제이쿼리 이벤트로 넘어갈 거에요.

 

이 강좌에서 사전지식으로 필요한것은 html과 css인데, 지식이 전무하시다면

강좌 맨 하단에 첨부하는 링크 먼저 보고 오셔야 됩니다. 

---------------------------------------------------------------------------------------

 

<!doctype html>
<html>
    <head>

    </head>
    <body>
        
    </body>
</html>

자아 가장 기본적인 틀 아시져? 만듭니다. 간단한 내용인데 파일을 오가면 괜히 복잡해지니까,

한개의 파일에 다 넣고 진행하도록 하겠습니다. 저는 이름을 jquery.html로 저장했어요.

<!doctype html>
<html>
    <head>
        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    </head>
    <body>

    </body>
</html>

그런다음에 구글에 jquery latest라고 검색하시면 최신버전의 링크를 구해오실수 있습니다.

<script src=""></script>의  src안에 주소를 넣어줍시다.

이건 강좌용이니 간단히 자동 최신버전용으로 퍼왔는데, 실무에서 이렇게 쓰시면 절대 안되고요

jquery 공식 사이트에서 정해진 버전의 파일을 내려받아서 연결하셔야 합니다.

만일 협업하는 사내 개발자가 있을경우 개발자님에게 제이쿼리 어떻게 연동할지 꼭 물어보세요.

 

1. 변수와 변수의 타입

변수란 문장으로 풀이하면 "변수 변수이름 = 값" 이라고 정리할 수 있습니다. 

"딸기별땅은 블로거다" 이정도의 뉘앙스에요.

<!doctype html>
<html>
    <head>
        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script>
            var charType = "1";
            var numberType = 1;

            alert(charType+numberType);
        </script>
    </head>
    <body>

    </body>
</html>

헤드안에 script를 열어서 자바스크립트 코드를 다음과 같이 작성해줍니다.

여기서 var(변수)란, 어떤 데이터타입에 이름표를 붙여서 담아두는 역할을 합니다.

그리고 내용이 끝났다는 뜻으로 ;(세미콜론)을 사용합니다. 

그리고 아까 만들어둔 html파일에 대고 마우스 우클릭을 해서 웹 브라우저로 연결해 열어줍니다.

 

일단 자바스크립트는 동작을 하네요. 

<!doctype html>
<html>
    <head>
        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script>
            var charType = "1";
            var numberType = 1;

            alert(charType+numberType);
        </script>
    </head>
    <body>

    </body>
</html>

위 코드를 다시 복사해서 가져왔습니다. 해석하면

첫번째줄은 변수 charType은 "1"이다.

두번째줄은 변수 numberType은 1이다.

이런 뜻이 되겠죠. 

 

둘의 차이는, 자바스크립트같은 경우 c언어나 java등과 다르게 따옴표만 가지고 문자/숫자만 구분합니다.

"1"은 문자 1이고, 1은 숫자 1입니다.

 

그러니까 위 alert(경고창) 에서 11을 출력한거죠. 얘한테는 문자 1 더하기 숫자 1인 셈이까요.

<!doctype html>
<html>
    <head>
        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script>
            var charType = "1";
            var numberType = 1;

            alert(numberType+numberType);
        </script>
    </head>
    <body>

    </body>
</html>

코드를 살짝 바꿔볼까요? 숫자 1과, 숫자 1을 더해보는겁니다.

숫자 1과 숫자 1을 더하니 정상적으로 2가 출력되네요. 

하나만 더해보죠 ㅋㅋㅋ 위에서 제가 변수를 뉘앙스로 설명할때 딸기별땅은 블로거다~ 라고 이야기했었죠?

<!doctype html>
<html>
    <head>
        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script>
            var strawberryStar = "블로거다";
            alert(strawberryStar);
        </script>
    </head>
    <body>

    </body>
</html>

변수이름에 딸기별 까지만 영어로 써봤습니다. 땅이 영어로 뭔지 생각이 안 납니다. -ㅅ-;

그리고 문자니까 "블로거다" 라고 썼고요,

*변수명을 지을때는 단어 단위로 저렇게 대문자로 구분하거나 언더바(_)로 보기 좋게 지어주는게 좋습니다.

 

alert안에다가 딸기별이라는 변수를 적어주면....

네 블로거다 라고 잘 나오는군요 ㅡㅡㅋ 변수는 여기까지 입니다.

 

2. if문과 else

이것도 이론은 아주 간단한것인데, 책을보면 너무 설명이 많아서 뉘앙스가 감이 안 잡힙니다.

이프문은 영어 그대로 "만약 ~ 이라면" 입니다.

<!doctype html>
<html>
    <head>
        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script>
            var strawberryStar = "블로거";

            if(strawberryStar=="블로거"){
                alert("딸기별땅은 블로거다");
            }
        </script>
    </head>
    <body>

    </body>
</html>

아까 그 변수 그대로 활용하겠습니다. 딸기별땅은 "블로거" 라고 박제해놓고

if문을 열어서 (조건)을 넣고 {조건에 부합할시 취할 행동}을 작성해주는 겁니다.

그니까 지금상황은, 만약에 딸기별땅이 블로거면 경고창에 "딸기별땅은 블로거다" 라고 알려주는 프로그램인 셈입니다.

이 if문에서는 =가 아닌 ==가 들어갔는데요, =같은 경우, 1+1=2다 이렇게 정의하는데에 사용된다면,

==은 '일치하다' 정도의 뉘앙스로 보시면 됩니다. 블로거라는 문자열과 일치하는지 검사하는겁니다.

 

사실 if문만 쓰기도 하는데, 아닌경우를 굳이 프로그래밍 처리해야하는 경우가 있습니다.

이럴때는 if문 뒤에 else if, else if, .... else까지 입력하기도 하고,

switch문, try catch등 더 많은 if문이 있지만 저는 if와 else까지만 설명하겠습니다. 다 설명하면 책이랑 다를게 없잖아요 ㅋㅋ

<!doctype html>
<html>
    <head>
        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script>
            var strawberryStar = "블로거";

            if(strawberryStar=="직장인"){
                alert("딸기별땅은 백수가 아니다");
            }else{
                alert("딸기별땅은 백수다");
            }
        </script>
    </head>
    <body>

    </body>
</html>

딸기별땅이 직장인인지 아닌지 구분해보는 겁니다.

딸기별땅의 값이 "직장인" 이라면 , 백수가 아니다 라고 경고창이 뜰거고

딸기별땅의 값이 "직장인"이 아니라면 백수다 라고 출력될겁니다.

 

이..이자식이..?? 지가 만들고 화내고 본격 북치고 장구치기

현재 강좌에서는 문자열이 일치하는지만 검사하였는데, 곧이어 for문에서 부등호 연산자 까지만 설명하겠습니다.

 

3. for문

for문을 또 문장으로 정리하자면, else가 될때까지 if를 반복수행해라 요런 느낌적인 느낌이 되겠습니다.

 

while도 있는데 사실 프론트엔드서 어지간한 상황에서는 for문만 가지고 처리할 수 있습니다 -_- 

둘이 사용법과 뉘앙스가 미묘하게 다른데, 저조차도 안본지 반년이 다 되서 까먹었습니다.(ㅈㅅ)

아마 while은 백엔드까지 가시게 되면 데이터베이스 불러올때 주로 쓰게 될겁니다. 지금은 패스라는 소리 ㅋㅋ

 

<!doctype html>
<html>
    <head>
        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script>
            document.write("야이야");
        </script>
    </head>
    <body>

    </body>
</html>

script 안에 코드를 비우고 새로운 기능을 써봅시다...

지금까지는 alert 경고창으로 값을 띄웠는데,

님들 컴퓨터에 반복문 100번 돌렸다가 경고창 100번 끄고싶진 않으실거 아니에여...

이건 그냥 html document 안에 값을입력하는 명령어에요. 엣헴 고마워 하시라고요! 

야이야가 잘 나오네여. 왜 한방에 코드 안 올리고 귀찮게 글자 테스트를 하느냐 하면,

프로그래밍을 하는데 이 습관이 굉장히 중요합니다. 한줄 써서 그 한줄이 제대로 동작하는지 일일히 확인하는 습관이여.

자바스크립트가 잘 동작하는지, 제이쿼리가 되는지, 오타가 난게 없는지, 요소를 제대로 선택한건지, 버전의 문제인지, 

문법이 틀린건지, 값이 제대로 들어있는건지.....기타 등등..... 에러를 일으키는 원인은 수도 없이 많거든여.

 

<!doctype html>
<html>
    <head>
        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script>
            for(var i=0; i<=5; i++){
                document.write("야이야<br>");
            }
        </script>
    </head>
    <body>

    </body>
</html>

아주 가장 기본적인 형태의 for문 입니다.for(조건){출력} 형태입니다.

 

변수 i는 0이다;

5가 i보다 크거나 같아질때까지만;

i를 1씩 더해주자

 

조금더 프로그래밍적으로 이야기 하면, 처음의 i는 0이죠?

i가 0일때는 트루인겁니다. 5보다 작으니까요. 트루니까 for문 안의 내용이 동작하는거죠.

i가 1일때도, 2일때도, .....5일때까지는 i가 같거나 작은게 맞으니까 트루인겁니다.

i가 6이 되버리면 틀린식이 되니까 for문이 멈춥니다.

 

솔직히 어렵죠?ㅋㅋ 한마디로 저 야이야를 다섯번 반복하라는 소립니다.

어?? 야이야가 여섯개네요! 당연합니다. ㅋㅋ 숫자를 0부터 세었잖아요. 그리고 보통 프로그래밍은 0부터 시작합니다.

0 1 2 3 4 5번째 반복된거니까 여섯번 반복된거죠. 연산자는 이외에도 <, >, ==, <=, >=, and, OR 등등 여러가지가 있는데

하나만 제대로 알아도 다른 연산자는 검색해서 필요할때 찾아 쓰면 그만이니 걱정하실 필요는 없습니다.

 

응용 한번만 더 갈까요? 아주아주 쉬운 구구단 2단 한단만 출력하도록 하겠습니다.

<!doctype html>
<html>
    <head>
        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script>
            for(var dan2=1; dan2<=9; dan2++){
                document.write("2 곱하기"+dan2+"는 "+ dan2*2 +"입니다<br>");
            }
        </script>
    </head>
    <body>

    </body>
</html>

이번엔 변수이름을 dan2로 짓고, 0이 아닌 1부터 9가 될때까지 반복하는 코드입니다.

document.write 출력부분이 조금 복잡해졌죠? 아까 숫자와 문자 타입을 구분할때 잠깐 설명드렸던 방법입니다.

변수부분을 보시면 1이라는 값에 따옴표를 치지 않았습니다. 숫자로써의 역할을 할 거라는 이야기이죠.

 

"2곱하기" 라는 문자와 dan2라는 숫자에 "는 " 이라는 문자를 더해나가고,

2단이니까 곱하기 2를 해서 제값이 나온것이죠.

그와중에 for문이 반복되면서 dan2라는 변수의 값은 1개씩 늘어나면서 출력하는것이고요.

결과값입니다

이렇게 해서 우선 자바스크립트의 아주 기초적인 부분들만 간단히 짚어보았습니다.

이게 끝입니다(ㄹㅇ?)

 

 

이건 오히려 상편이 어렵고, 하편으로 가면 아주 재미지고 쉬울겁니다. 

하편에서 뵙도록 해용 ㅋㅋ 

 

'개발관련' 카테고리의 다른 글

애드센스를 달고나서 티스토리 본문내 버튼이 안눌릴때  (0) 2020.08.09
node.js homebrew 설치후 node-v가 안 보일때  (0) 2020.07.31
JIRA 알림 메일 수신 거부, 지메일 필터(차단)하기  (0) 2020.07.12
[CSS, JS] 뒤로가기 스와이프 방지하는 두가지 방법  (0) 2020.06.19
개발 쌩초보도 30분만에 배우는 제이쿼리-하  (0) 2019.10.16

관련글

댓글

티스토리툴바