Jquery
jquery를 통해서 motto.html에서 정적으로 표현되어있는 웹 요소들을
실시간으로 변경되도록 할 수 있다.
<body>
<h1 id="myNumber">0</h1>
<button id="myButton">숫자 증가</button>
<script>
// step1. HTML 요소 바꾸기
// HTML 요소를 선택합니다.
// const myElement = document.querySelector('#myElement');
// 선택한 요소의 텍스트 내용을 변경합니다.
// myElement.textContent = '새로운 내용';
// step2. 버튼 클릭시 숫자 커지기
function plus() {
// 숫자를 증가시킵니다.
const currentNumber = parseInt(myNumber.textContent);
myNumber.textContent = currentNumber + 1;
}
// HTML 요소를 선택합니다.
const myNumber = document.querySelector("#myNumber");
const myButton = document.querySelector("#myButton");
// 버튼 클릭 이벤트 리스너를 추가합니다.
myButton.addEventListener("click", plus);
</script>
</body>
body 태그 내에 선언된 태그의 id로 접근하여 값을 참조하거나 변경할 수 있고, addEventListener 함수를 통해서 콜백 처리할수 있다.
위의 두 사진 처럼 js코드로 console.log를 찍으면 좌측 화면의 개발자 모드에서 콘솔창에 찍혀있다.
그리고 좀 유쾌하지 않은 js의 모습을 알아버렸는데
- 정수였던 num에다가 ‘문자열’ 문자열을 대입했는데 컴파일 오류, 런타임 오류 둘다 없다. 문법상 문제가 없는듯
- 1 / 2 가 정수의 나누기 연산으로 인한 0이 나오는게 아니라 0.5로 계산된다.
문자열 + 숫자는 문자열로 알아서 처리된다( java와 같다)
// 딕셔너리의 리스트도 생성 가능
// 자바로 치면 ArrayList<HashMap<String, String>>
let distList = [{ key: "value", key2: "value2" }, { key22: "value22" }];
반복문의 형태는 그래도 java와 똑같아서 다행이였다.
- for 반복문
for( let i = 0 ; i < 100; i++){
console.log("i : " + i);
}
- forEach 반복문
let array = [];
for (let i = 0; i < 100; i++) {
array.push(i);
}
array.forEach((e) => console.log(e));
JQuery는
c++ 의 stl, html의 부트스트랩과 같은 존재인 js 라이브러리 이다.
JQuery의 선택자
Jquery의 중요한 문법으로 선택자 라는게 있는데,
$("#태그id") 와 같이 사용하면 해당 태그를 참조하여 조회, 변경할 수 있게 된다.
$ () 는 괄호안이 나타내는 id의 태그를 참조하겠다라는 의미이고,
$(”#q1”).text(word) 는 $참조의 태그의 text를 word로 변경하겠다는 의미가 된다.
<button onclick="checkResult()">결과 확인하기!</button>
<div id="q1">q1텍스트</div>
<script>
function checkResult() {
let word = "사과";
$("#q1").text(word);
}
</script>
function checkResult() {
let fruits = ["1", "2", "3", "4", "5"];
fruits.forEach((element) => {
let tempHtml = `<p>${element}</p>`;
$("#q1").append(tempHtml);
});
}
위 코드는 friuits의 모든 원소들에 대해서 `` 안에 정의된 html태그를 q1 id의 태그 안에 추가하는 코드이다.
js의 변수로 새로운 html 태그를 생성하고 싶다면, 그러니까 동적으로 html태그를 생성하여 html에 추가하고싶다면
``(` grave) 로 감싸주면 js가 알아듣는다.
openAPI를 활용하려고 크롬 브라우저 url에 주소를 입력하면 보기 버거운 자료들이 나와있다.
예를 들면 아래와 같이
이를 좀 편하게 보기 위해 크롬에서 jsonviewer extention을 설치(jsonviewer 설치 링크 https://chrome.google.com/webstore/detail/json-viewer/gbmdgpbipfallnflgajpaliibnhdgobh?utm_source=ext_sidebar&hl=ko)해서 확인하면 json형식으로 보기좋게 indent처리된다. 아래처럼
GET : 데이터 조회(Read)를 요청할 때 POST : 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청할 때,
Fetch 예제 강의중 제공해준 예시 코드 html을 크롬에 켜서 콘솔창을 확인해보면
위와 같은 형식으로 확인할 수 있는데,
키 : row 값 : Array(25) 의 딕셔너리 오브젝트가 콘솔창에 찍혀있음을 확인할 수 있다.
가공하여 화면에 보여줄 자료는 어차피 Array안에 있으므로, 딕셔너리 형태로 존재할 필요가 없음 →
console.log(data["RealtimeCityAir"]);
// 위 코드로 찍던 콘솔 로그를
console.log(data["RealtimeCityAir"]["row"]);
//아래처럼 찍으면 애초에 Array Object가 콘솔 로그에 찍힌다.
ALT + SHIFT + ARROW : 현재 줄 복사
Jquery 선택자를 활용하여 html 태그 요소 변경
JQuery 선택자를 사용하여 태그 text 변경
$("#tagID").text(newText);
이미지의 경우 src를 변경해야하는데, 딱히 src 함수가 있는 건 아니고 attr (attribute겠지?) 함수를 활용해서 변경할 수 있다.\
