웹개발 종합반 2주차 일지

frontend - index.html 

 

객체 공부.

************************************************************************************************************

var alist = [

    {'name': '김민수', 'age': 28},

    {'name': '김민wn', 'age': 20},

    {'name': '김민qq', 'age': 58}

];

console.log(alist[0]['name']);   => ‘김민수’

console.log(alist[0].name);   => ‘김민수’

 

즉, 객체의 키를 불러올 때 그 키가 ‘name’ 이면 [‘name’] 이라 불러올 수도 있고, .name 이라 불러올 수도 있다는 뜻.

단, 객체의 키의 이름이 ‘name type’ 처럼 띄어쓰기가 들어가 있을 경우, [‘name type’] 이렇게 []를 사용하여 불러올 수 있어.

 

추가로, 

alist[0].jod = “student”     이런 식으로 나중에 선언해서 객체 안에 키와 벨류를 추가할 수도 있어.

 

배열의 경우 반복문을 사용하는데, 객체의 반복문은 어떻게? For in 문으로.

 

var obj = {

    'name' : '김민수',

    'age' : 28,

    para : 200

};

for(var i in obj) {

    console.log(i + ' : ' + obj[i]);

}

 

For in 문으로 객체의 키와 키값들을 불러올 때. 이때는 키가 담긴 ‘i’ 를 obj.i 가 아닌 obj[i] 라고 써야 해. 헷갈리네….

 

추가로, 객체에는 함수를 넣을 수도 있어. 객체에 들어가 있는 함수를 메소드라고 하지.

 

obj.showAll = function () {

for(var i in this) {

        console.log(i + ' : ' + this[I]);

}

}

객체에 소속된 함수의 경우, 객체 변수의 이름을 this로 받아올 수 있어.

 

객체에 소속된 함수는 메소드라고, 객체에 소속된 변수는 프로퍼티 라고 불러. 여기서 변수란 키를 의미.

************************************************************************************************************

 

 

홀짝 구분 함수 만들어보기.

——

let button_count = 0;

 

function hey () {

    button_count += 1;  // 버튼 누를 때마다 1씩 증가

    if (button_count % 2 == 0) {

        alert('짝수 입니다');

    } else {

        alert('홀수 입니다');

    }

}

——

해당 주소를 새로고침 할 시 button_count 변수의 값은 다시 0으로 돌아온다.

왜? 처음 html을 브라우자가 읽은 시점에서 해당 변수의 값은 0이고, 함수 안의 이벤트는 아직 일어나지 않은 시점이니까.

 

 

 

 

Jquery. 제이쿼리 사용해보기.

제이쿼리는 html에서 요소들이 자바스크립트가 쉽게 조작할 수 있도록 도와주는 자바스크립트 라이브러리. 오픈 소스이기에 마음대로 사용해도 문제 없다.

——

——

해당 스크립트 src로 링크만 가져와도 문제 없이 제이쿼리를 구사할 수 있다.

참고로 해당 링크를 가져올 수 있는 공식 사이트는 https://www.w3schools.com/jquery/jquery_get_started.asp

 

이번에 제이쿼리를 구사하여 이루어내볼 기능은 다음과 같다.

1. Input 박스의 값을 가져오기
2. Div 숨기기
3. 태그 내 html 입력하기

 

• Css 처럼 제이쿼리 또한 ‘특정한’ 동작을 실행했을 때 이벤트가 발생하는 구조.

즉, 제이쿼리로 이벤트를 작성 시 그 이벤트를 발생시킬 수 있는 고유의 태그가 있어야 한다. 

예를 들어 특정 버튼을 누를 경우 이벤트를 발생시키고 싶다면, 그 버튼에 id(#)를 지정하여야 해.

 

 

——

<input type="email" class="form-control" id="url" placeholder="name@example.com">

——

해당 input태그의 id는  url. <script> 에서 다음과 같이 제이쿼리 명령을 기록해 볼 수 있다.

——

$('#url').val(‘가나다라마바사);

——

이 경우 해당 인풋 텍스트 박스에 value 값으로서 ‘가나다라마바사’ 의 내용이 기입된다.

즉 바꿔 말하면, <input type=“email” value=“가나다라마바사”> 라고 html을 작성한 것과 동일한 효과를 얻을 수 있다.

반대로 input에 입력된 value 를 가져오고 싶다면?

——

$('#url').val();

——

이 경우 #url 아이디가 붙은 태그의 value 값인 ‘가나다라마바사’ 라는 값을 가져올 수 있다.

 

 

• **** 제이쿼리 실행 시 id를 가르키는 방법. $(‘’) -> 괄호 안 따옴표 안에 #id이름 을 입력하면 된다. ****

              물론, 고유한 대상 뿐 아니라 $(‘a’) 혹은 $(‘li’) 이런 식으로 범위성을 가진 특정 태그를 가리킬 수도 있어.

 

 

다음은 div 숨기기.

——

$(‘#post_box’).hide();

——

해당 제이쿼리가 실행될 경우, #post_box  라는 id를 가진 태그는 hide 속성을 가지게 되며 화면 상에서 사라진다.

반대로 show(); 메소드를 실행할 경우 다시 나타난다.

index.html 의 경우, ‘영화 기록하기’ 버튼을 누르면 post 박스가 나타나고, ‘닫기’ 버튼을 누르면 post 박스가 사라지는, 그런 기능을 구현할 수 있지.

 

 

이번에는 제이쿼리로 html에 코드를 추가하는 제이쿼리 기능이다.

——

Let temp_html = `<button>나는 버튼이다</button>`;        * 따옴표가 아닌 백틱.

$('#card_box').append(temp_html); 

——

#card_box 라는 아이디를 가진 박스 속성의 태그 안에 temp_html 의 값인 html 코드가 추가된 것.

예시에서는 <button>태그이지만, index.html 파일의 카드 div 들을 통째로 복사해서 append 기능으로 추가한다면?

간단한 제이쿼리 한 줄 만으로 div 박스를 복사해낼 수 있어.

영화 목록 카드를 새롭게 등록하거나 할 때 사용할 수 있는거지.

 

 

참고로, string 안에 변수를 삽입하고 싶을 경우

——

Let name = ‘타이타닉’

Let title = ‘다음으로 우리가 볼 영화의 제목은 ${name}이다’;

——

string의 나열 중간에 ${} 코드를 삽입하고, 중괄호 안에 삽입하고 싶은 변수의 이름을 입력하면 

string 안에서도 변수의 값을 입력할 수 있어.

 

 

중요한 것.

——

$(‘#name’).hide();

$(‘#name’).show();

$(‘#name’).append(`<button>나는 버튼이다</butoon>`);

——

===>>> 제이쿼리는 이런 식으로 사용한다.

 

 

 

frontend - jquery01.html

제이쿼리 퀴즈 연습해보기.

Input 타입에 입력된 text 들을 가져와서 변수에 저장한 뒤, 그것의 값이 개발자가 상정했던 종류의 ㅏ이 맞는지 확인한 후,

그 값을 alert로 띄워주거나, $(‘#name’).append 기능을 사용하여 html에 추가해주거나.

혹은 그렇게 html에 추가된 코드를 $(‘#name’).empty(); 기능을 사용하여 없애주거나.

* 해당 id를 가진 태그의 내용물을 모두 지워주는 기능이 .empty();.

 

 

 

 

 

 

 

Frontend - index.html. /. ajax01.html

 

 

서버-클라이언트 통신 이해하기 (Ajax) 연습.

예제. 서울시 미세먼지 오픈 API.  => http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99

+ 크롬 익스텐션 JSONView => https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihckbnefhakgolnmc?hl=ko

(JSON 데이터를 브라우저에서 좀 더 간편히 볼 수 있도록 도와주는 앱)

+ http://spartacodingclub.shop/sparta_api/seoulair

미세먼지 오픈 API의 데이터를 스파르타 코딩클럽이 보여줌.

 

       => JSON 방식으로 데이터를 주고받음.

 

클라이언트가 서버에 데이터를 보내달라 요청할 때 크게 Get 방식, post 방식이 있어.

get은 주로 select 문. post는 delete 나 update, create 등. 

 

***** Ajax는 Jquery가 import 되어있는 페이지에서만 동작 가능. 주소에 따라선 

그 주소를 구성하는 html에 제이쿼리가 rink나 파일로 임포트 되어 있지 않을 경우 Ajax는 기능하지 않아.

 

 

 

frontend - index.html.      (영화 카드 연습했던 파일)

 

수업에서 제공해존 Ajax의 기본 골격은 다음과 같다.

——

$.ajax({

  type: "GET", // GET 방식으로 요청한다.

  url: "http://spartacodingclub.shop/sparta_api/seoulair",  // API 데이터를 가져오고 싶은 곳의 주소.

  data: {}, // 요청하면서 함께 줄 데이터 (GET 요청시엔 비워두세요)

  success: function(response){ // 서버에서 준 결과를 response라는 변수에 담음

    console.log(response) // 서버에서 준 결과를 이용해서 나머지 코드를 작성

  }

})

——

 

 

 

 

 

 

frontend - ajax01.html       ====> Ajax 연습하기.

서울시 미세먼지 데이터를 가져와서 for문을 돌려서 제이쿼리 $(‘#name).append(temp_html); 로 html에 목록을 만들건데,

미세먼지 수치가 120이 넘을 경우 해당 데이터는 빨간색 글자로 나타내기.

 

 

 

frontend - ajax02.html =====> Ajax 연습. 서울시 자전거 현황 데이터.

자전거 갯수 현황 오픈 API. http://spartacodingclub.shop/sparta_api/seoulbike

 

 

 

frontend - ajax03.html =======> Ajax 연습. 랜덤 르탄이 이미지. 르탄이 이미지 API 를 이용.

——

$(“#idname).attr("src", 이미지URL);

$(“#idname).text("바꾸고 싶은 텍스트");

——

해당 id의 태그 안의 이미지나 텍스트를 변경하고 싶은 경우.

 

 

 

frontend -homework_Week2.html =====> 1주차 숙제였던 homework_Week1.html 의 코드를 가져와서,

상단 배너 부분에 실시간 현재 기온 API 정보를 가져와서 보여주는 것.

날씨 API 에서 가져온 데이터를 스파르타에서 보여줌 -> http://spartacodingclub.shop/sparta_api/weather/seoul

* 뒤에 지역명만 바꾸면 그 지역의 날씨를 보여줌.

——

$(document).ready(function(){    // 페이지가 로딩이 된 직후 바로 실행

    

});

——

-> 페이지가 로딩 된 직후에 실행되는 구문.$(document).ready(function () {});