LIKELION at 인하대

#4

인하대학교 운영진 한정

오늘 할 것은
JavaScript + jQuery

간단하게 목차를 정리해보면

• JavaScript
  • variables
  • Control flows
  • Functions
  • Scope
  • Arrays
  • Loops
  • DOM
• jQuery
  • Selector
  • Events
• 그 외 많이 쓰는 것들..

갈길이 멀군요...

Why study JavaScript

   1. HTML to define the content of web pages

   2. CSS to specify the layout of web pages

   3. JavaScript to program the behavior of web pages

근데 요즘은 프로그램도 뚝딱 만들 수 있는 언어가 되어버림..

참조 : https://www.w3schools.com/js/default.asp

이번 시간에는 ES6내용을

제외한 내용만

아쉬우면 따로 연락주세요 알려드리겠습니다

Live Coding

1. C9.io -> ROR 프로젝트 생성

2. public -> index.html 만들기

3. 따라치고 실행해보기

4. 실행화면이 이렇게 나오면 성공

5. 살짝 보면...

이 부분이 자바스크립트 코드

잠시 크롬 개발자 도구를
이용해서 몇가지 예제를 해보겠습니다.

variables

데이터를 저장하는 부분

Control Flows

경우를 다르게 해서

다른 일을 하고 싶다

var a = 10;
var b = 20;
var c = a + b;
console.log("a: " + a);
console.log("b: " + b);
console.log("c: " + c);

1. 양동이를 만들고

이름을 a로 정하자

2. a 양동이에

10을 넣자

var a = 10;
var b = 20;
var c = a + b;


if( c == 30 ) {
    console.log("c는 30이다");
} else if( c == 40) {
    console.log("c는 30이 아니다! 40이다!");
} else {
    console.log("c는 30도 40도 아니다!");
}

Function

어떤 일을 하는 코드의 집합

Arrays

변수의 집합을 만들어보자

# case 1
function name(){
    console.log("hanjung");
}

>> name()
=> "hanjung"

# case 2
function name2(name){
    console.log(name);
}

>> n = "hanjungv"
>> name(n)
=> "hanjungv"
>> name("tmdghks")
=> "tmdghks"

var cars = ["Saab", "Volvo", "BMW"];
>> cars[0]
=> "Saab"

var person = {
    firstName:"John",
    lastName:"Doe",
    age:46
};
>> person.firstName
=> "John"
>> person["firstName"]
=> "John"

Loops

어떤 일을 하는 코드의 집합

Scope

변수의 집합을 만들어보자

# case 1
var arr = ["BMW","BENZ","KIA","Hyundae"];
for(i = 0; i < arr.length; i++){
   console.log(arr[i]);
}
// 처음부터 가보기

# case 2
for(i = arr.length - 1; i >= 0; i--){
    console.log(arr[i]);
}
// 역순으로 가보기

헷갈릴수 있는데
인덱스는 0부터 시작
length는 4
그러면 어떻게 필요한 만큼 출력할 지

var globalVar = "I'm global";

function local(){
    var localVar = "I'm local";
    console.log("local:"+localVar);
    console.log("global:"+globalVar);
}

// 위에만 먼저 수행해보기
>>local()
=> local: I'm local
   global: I'm global

>>console.log("global:"+globalVar);
=> global: I'm global
>>console.log("local:"+localVar); 
=> Uncaught ReferenceError: localVar 
is not defined at <anonymous>:1:22
// 에러발생. 왜? 함수 내에서 선언해서 함수 
// 내에서만 쓸 수 있다.

다시 아까 만들어놓은
코드로 돌아가서
저희들이 진짜 쓸만한 것을 해보겠습니다.

Event 발생 시키기

onclick => 그 Element를 클릭하면 함수를 실행
onmouseover => 그 Element에 마우스를 올리면 실행
등등 있는데 링크에서 확인하세요(https://www.w3schools.com/js/js_events.asp)

<meta charset = "UTF-8">

<div class = 'container'>
    <button onclick = "func()">클릭 ! </button>
    <button onmouseover = "func2()">마우스 올리기!</button>
    <p id = 'ans'>클릭 : 0</p>
    <p id = 'ans2'>마우스올리기 : 0</p>
</div>

<script>
    var value = 0;
    var value2 = 0;
    function func(){
        value = value + 1;
        document.getElementById('ans').innerHTML = value;
    }
    function func2(){
        value2 = value2 + 1;
        document.getElementById('ans2').innerHTML = value2;
    }
</script>

결과화면

여기 까지 되었다면
함수를 만들고 실행 시킬수 있는 단계까지 된 것!

그런데 좀 거슬리는것..

코드가 좀 길다..

여기서 등장하는 jQuery!

"write less, do more"의 모토를 가진

JavaScript library.

• HTML/DOM manipulation
• CSS manipulation
• HTML event methods
• Effects and animations
• AJAX
• Utilities

jQuery Basic

을 시작하기 전에 먼저 불러와야 하는구나

1. 구글에 jquery 검색

2. 들어간 뒤 조금 내려보면 이런 코드가

jQuery Basic

을 시작하기 전에

3. 맨위에 복붙

4. 다시 사이트 들어가서 Network 확인해보면 포함됨

jQuery Basic

가장 기본이 되는 구조

$(selector).action(function(){});

어떤 요소에

어떤 액션이 되면

이 함수가 실행된다.

jQuery Selector

JS의

getElementById

 getElementsByClassName

jQuery의

$("#id")

$(".className")

간결해졌다!

Event 발생 시키기

var value = 0;
var value2 = 0;
function func(){
    value = value + 1;
    $('#ans').text(value);
}
function func2(){
    value2 = value2 + 1;
    $('#ans2').text(value2);
}

JS만

var value = 0;
var value2 = 0;
function func(){
    value = value + 1;
    document.getElementById('ans').innerHTML = value;
}
function func2(){
    value2 = value2 + 1;
    document.getElementById('ans2').innerHTML = value2;
}

selector와 method를 jQuery로

jQuery Selector

selector를 다시한번 정리해보면

// css selector과 비슷

// Element 선택
$("p").text('hello');

// id로 선택
$("#ans").text('hello');

// class로 선택
$(".ans").text('hello');

// 모든 요소를 선택할때
$("*").text('hello');

그 외에 편하고 무궁무진한 selector는

https://www.w3schools.com/jquery/jquery_selectors.asp

jQuery action

event trigger

JS의 onclick과 onmouseover 등등 처럼

<div class = 'container'>
    <button id = 'btn1'>클릭 ! </button> <!--onclick 삭제, id 주기-->
    <button id = 'btn2'>마우스 올리기!</button> <!--onmouseover 삭제, id주기-->
    <p id = 'ans'>클릭 : 0</p>
    <p id = 'ans2'>마우스올리기 : 0</p>
</div>

<script>
    var value = 0;
    var value2 = 0;

    $('#btn1').click(function(){
         value = value + 1;
        $('#ans').text(value);
    });

    $("#btn2").mouseenter(function(){
        value2 = value2 + 1;
        $('#ans2').text(value2);
    });
</script>

jQuery action

다시한번 정리를 하면

1. Element를 selector로 선택하고
2. action을 정해 trigger 시점을 정해주면
3. 정해준 함수대로 작동한다!

더 궁금하면 https://www.w3schools.com/jquery/jquery_events.asp

몇가지 예제를 해보죠!

jQuery API 사용하기

1. 먼저 이 사이트에 들어가 봅시다!

http://api.jquery.com/

2. 몇가지를 뽑아봤는데..

사용법만 익히시고 나머지는 필요할 때 찾아가면서 써봐요!

jQuery API 사용하기

<style>
    //이전 스타일 그대로
    #bg{
        height:50px;
    }
    .red-bg{
        background-color:red;
    }
</style>

<div class = 'container'>
    <!--이전 코드 그대로-->
    <button id = 'btn3'>Toggle class</button>
    <button id = 'btn4'>HideShowToggle</button>
    <!--이전 코드 그대로-->
    <div id = 'bg'></div>
</div>

<script>
    //이전 코드 그대로
    $("#btn3").click(function(){
       $("#bg").toggleClass("red-bg"); 
    });
    
    $('#btn4').click(function(){
       $("#ans").fadeToggle();
    });
</script>

그리고 좀 더 나가서..

<script>
    //이전 코드 그대로
    $(document).ready(function(){
       $('#ans').css('color','#c83636'); 
        //$(selector).css('css이름','해당되는속성');
    });
    
    
    $('button').click(function(){
       $(this).toggleClass('red-bg');
        //this는 그 중 클릭한 그 요소를 의미
    });
</script>

오늘 정말 많은 것을 했습니다!
마지막으로 정리해야 할 것

1. 우리는 JS와 jQuery를 이용하여

페이지에 효과를 줄것이다.

2. 다시 공부해보고 이건 꼭 기억하자!

3. 필요한건 구글링 하면서

$(selector).action(function(){});

어떤 요소에

어떤 액션이 되면

이 함수가 실행된다.

주말간 숙제

좀 더 이쁘게 만들어 보기 + 우분투 깔기

끝

하 힘들다..