[내일배움단] 웹개발 종합반 - 2주차 - 배운 내용 정리

javacript

<script></script> 태그 사이에 넣어서 사용한다.

함수를 선언해 놓으면, 함수이름으로 호출 할 수 있다.

<script>
    function 함수이름() {
       alert('경고창 팝업');
    }
</script>

jQuery

<script>
	$('태그')
</script>

jQuery는 다른 사람이 작성해놓은 javascript 코드이다.

사용하기 위해서는 jQuery 코드를 붙여넣어야 한다.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script src="jquery-3.6.0.min.js"></script>

HTML 코드를 문자열로 관리할 때는 ` ( backtick )으로 문자열을 감싸서 사용한다.

특정 항목 하위로 항목을 추가하는 경우 append 함수를 사용한다. ( hi id를 가진 태그에 temp_html HTML 코드를 추가하는 예시 )

<script>
	let temp_html = `<p>안녕하세요</p>`
	$("#hi").append(temp_html);
</script>

이미지 url 소스 변경하는 코드 ( img-cat class를 가진 태그의 src 어트리뷰트를 imgUrl로 변경하는 예시 )

<script>
	$(".img-cat").attr("src", imgUrl);
</script>

ajax

<script>
    $.ajax({
        type: "GET",
        url: "url 입력",
        data: {},
        success: function (response) {
            console.log(response)
        }
    })
</script>

ajax 기본형을 가져다가 복사해서 사용하면 된다.

type으로 GET, POST 등 여러 타입이 있다.

GET은 일반적으로 데이터를 읽어 올 때 사용한다.

POST는 일반적으로 데이터를 생성, 수정, 삭제 할 때 사용한다.

data는 post 방식에서 사용한다. GET 방식일 때는 비워두면 된다.

 

페이지 새로고침 할 때, 실행되는 코드

<script>
    $(document).ready(function () {
        loadExchangeRate()
    });
</script>

Json 형식 데이터 다루기

리스트(배열)는 대괄호( [ ] ) 안에 숫자를 넣어 접근한다.

딕셔너리는 대괄호( [ ] ) 안에 키 값을 문자열로 넣어 접근한다.