02. 웹 개발 종합반 2주차

코이그·2023년 2월 18일

목록 보기

2/54

Javascript

head 내부에 script 태그를 만들어 코딩 가능.

예)

<script>
	function hey() {
    	alert('hello')
    }
</script>

Javascript에서의 반복문

forEach

let abc = ['a', 'b', 'c', 'd', 'e']

abc.forEach((letter) => { /* letter에는 abc의 요소들이 순서대로 들어감 */
	print(letter)
})

JQuery

Javascript를 쉽게 활용할 수 있도록 도와주는 오픈소스 기반의 Javascript 라이브러리.
오픈소스 라이브러리이기 때문에 사용 전 import 필수!

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

장점

웹 페이지 상의 엘리먼트를 쉽게 찾고 조작할 수 있음.
호환성이 매우 뛰어남.
네트워크, 애니메이션 등 다양한 기능 제공.
짧고 유지관리가 용이한 코드 작성 지원.
웹 상에 관련 플러그인들이 공개되어있음.
쉽게 접근 가능.

기본 문법

#(선택자).동작함수();

예)

document.getElementById("element").style.display = "none";

$('#element').hide();

위의 코드를 아래 코드로 대체 가능.

대표 함수

$('#q1').text(temp) /* temp의 텍스트로 대체 */
$('#q1').append(temp_html) /* 끝에 추가 */
$('#q1').empty() /* 초기화 */

사용 예시 코드)

<!DOCTYPE html>
<html>
    <head>
        <title>자바스크립트 문법 연습하기!</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    </head>
    <style>
        .button-part {
            display: flex;
            height: 50px;
        }
    </style>
    <script>
        function checkResult(){
            let a = ['사과','배','감','귤']
            $('#q1').text(a[1]) /* q1을 '배'(a[1])로 대체 */

            let b = {'name':'영수','age':30}
            $('#q2').text(b['name'])

            let c = [
                {'name':'영수','age':30},
                {'name':'철수','age':35}
            ]
            $('#q3').text(c[1]['age'])
        }
    </script>
    <body>
        <div class="top-part">
            <h1>자바스크립트 문법 연습하기!</h1>
        </div>
        <hr/>
        <br>
        <h2>1. 함수</h2>
        <div class="button-part">
            <button onclick="checkResult()">결과 확인하기!</button>
        </div>
        <div class="list-part">
            <h2>2. 리스트</h2>
            <div id="q1">테스트</div>
        </div>
        <div class="dict-part">
            <h2>3. 딕셔너리</h2>
            <div id="q2">테스트</div>
        </div>
        <div>
            <h2>4. 리스트 딕셔너리</h2>
            <div id="q3">테스트</div>
        </div>
    </body>
</html>

서버-클라이언트 통신

API

API (Application Programming Interface): 응용프로그램에서 사용할 수 있도록, 운영 체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스.

가장 큰 API 범주의 핵심은 애플리케이션을 서로 연결하여 통신할 수 있다는 점.

예시1)
레스토랑에서 손님에게 주문 가능한 (선택 가능한) 메뉴를 보여주고, 손님이 고른 음식을 주방에 전달 후, 음식이 나오면 고객에게 전달하는 '점원'이 API이다.

예시2)
은행에 가면 다양한 창구가 있다. 입출금 업무는 입출금 창구에 가서 신분증을 제시 후 입무를 본다. 창구의 역할이 API.

예시

https://movie.naver.com/movie/bi/mi/basic.naver?code=161967
1) movie.naver.com: 은행 지점
2) movie/bi/mi/basic.naver: 창구 이름
3) code=161967: 신분증

Fetch

사용 예시 코드)

<!doctype html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Fetch 시작하기</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> /* jQuery 사용 시 필요한 라이브러리 */
		<script>
			fetch("http://spartacodingclub.shop/sparta_api/seoulair").then(res => res.json()).then(data => {
            	console.log(data) /* data에는 url에 있는 데이터가 json (dictionary) 형식으로 저장되어 있음. dictionary이기 때문에 대괄호([])로 값에 접근 가능. */
			})
		</script>
</head>
<body>
    Fetch 연습을 위한 페이지
</body>
</html>

숙제

$(document).ready(function () {
    fetch("http://spartacodingclub.shop/sparta_api/weather/seoul")
        .then((res) => res.json())
        .then((data) => {
            $('#temp').text(`${data['temp']}`)
        });
    });
}