728x90
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jquery-3.6.1.min.js"></script>
</head>
<body>
<h1 id = "txt">너무 졸려요..</h1>
<script>
// 1. 아이디가 txt인 요소를 수집
// - 제이쿼리 문법은 $("선택자").함수()
// - 주의점 제이쿼리는 라이브러리이기 때문에 항상 외부방식으로 파일을 불러와야 한다
// - 임포트를 하지 않으면 "$is not defined"
let jstxt = document.getElementById("txt");
let jqtxt = $("#txt");
console.log("순수 문법 : ",jstxt)
console.log("제이쿼리문법 : ",jqtxt)
// 2. 요소의 컨텐츠 값을 출력, 수정
// - 제이쿼리에서 컨텐츠를 가지고 올려면 $("선택자").html() or .text()
// - 제이쿼리에서 컨텐츠를 수정하려면 $("선택자").html("수정할내용")
let inhtml = jstxt.innerHTML;
let inhtml2 = jqtxt.html();
console.log("순수 문법 : ",inhtml)
console.log("제이쿼리문법 : ",inhtml2)
jstxt.innerText = "수정하세요!"
jqtxt.text("수정했습니다!");
// 3. 스타일제어
document.getElementById("txt").style.color = "red";
$("#txt").css("color","blue");
// 4. 이벤트
document.getElementById("txt").addEventListener("click",function () { })
$("#txt").on("click",function () { })
</script>
</body>
</html>
비동기 통신 사용자가 요청한 부분만 바뀌는 것
동기 통신 전체부분만 바뀌는것
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
</head>
<body>
<button id="btn">영화정보 출력!</button>
<script>
// 버튼을 클릭했을때 영화 api데이터를 요청해서
// 콘솔창에 제목만 출력 ajax를 활용해서
$("#btn").on("click",function(){
//ajax를 활용해서 내가만든 url데이터를 요청
$.ajax({
url : "https://kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchWeeklyBoxOfficeList.json?key=26a2a192a448b147c570c09068e34109&targetDt=20221008",
type : "get",
success : function(res){
for(let i=0; i<res.boxOfficeResult.weeklyBoxOfficeList.length; i++){
console.log(res.boxOfficeResult.weeklyBoxOfficeList[i].movieNm);
}
},
error : function(){
}
})
})
</script>
</body>
</html>
728x90
'Study > JavaScript' 카테고리의 다른 글
| JavaScript기초 3일차 <함수, 선언방식, DOM> (0) | 2022.10.13 |
|---|---|
| JavaScript기초 3일차 <함수, 선언방식, DOM> (0) | 2022.10.12 |
| JavaScript기초 2일차 <배열, 객체, 조건문> (1) | 2022.10.11 |
| JavaScript기초 1일차 <자료형,연산자> (1) | 2022.10.08 |