티스토리 뷰
JavaScript는 홈페이지에 동작을 더해준다.
= 은 변수를 선언할 때 사용.
let count = 0
function hey(){
count += 1
if(count % 2 == 0)
==은 같다는 의미로 사용
JQuery란?
HTML 요소를 조작하는 편리한 Javascript를 미리 작성해둔 라이브러리.
(부트스트랩도 CSS코드를 우리가 이용한 것)
부트스트랩 링크.
JavaScript VS JQuery 문법 비교
CSS에서는 무언가 지칭할 때 Class를 썼지만
JQuery는 ID를 쓴다.
똑같은 행동을 했는데도 3줄이나 쓰는 코딩과, 한줄로 요약되는 코딩..
split 함수를 제대로 쓰는 방법 기억해둘것.
특정 단어로 자르면 배열 형태로 떨어짐.
123@naver.com
split('@') = 123[0], naver.com[1]
split('@')[1] = naver.com
split('@')[1].split('.') = naver[0], com[1]
split('@')[1].split('.')[0] = naver
let email = $('#input-q2').val()
if (email.includes('@') == true) {
// let mail = email.split('@')
// let domain = mail[1].split('.')
// alert(domain[0])
alert(email.split('@')[1].split('.')[0])
} else {
alert('이메일이 아닙니다.')
}
3번째 함수는 ``(백틱)을 활용해서 li 추가되도록 할것.
append는 붙여주는 명령어 인듯.
function q3() {
// 1. input-q3 값을 가져온다. let txt = ... q1, q2에서 했던 걸 참고!
// 2. 가져온 값을 이용해 names-q3에 붙일 태그를 만든다. (let temp_html = `<li>${txt}</li>`) 요렇게!
// 3. 만들어둔 temp_html을 names-q3에 붙인다.(jQuery의 $('...').append(temp_html)을 이용하면 굿!)
let txt = $('#input-q3').val()
let temp_html = `<li>${txt}</li>`
$('#names-q3').append(temp_html)
}
착각한 것. (UL 리스트 자체를 없애는 것으로 착각. ID값이 있는 names-q3만 없애면 됨.
function q3_remove() {
// 1. names-q3의 내부 태그를 모두 비운다.(jQuery의 $('....').empty()를 이용하면 굿!)
$('#names-q3').empty()
}
JSON이란?
Key:Value로 이루어져있음.
딕셔너리형 :아이디와 값이 뭉친 하나의 정보 뭉탱이 (정말 사전처럼 정의되어 있는것)
리스트형 : row 아래 여러개의 딕셔너리가 뭉쳐있는 느낌.
https://chrome.google.com/webstore/detail/jsonview/gmegofmjomhknnokphhckolhcffdaihd?hl=ko
Ajax를 써보는 법을 배워야함.
Ajax의 기본 골격.
$.ajax({
type: "GET",
url: "http://spartacodingclub.shop/sparta_api/seoulair",
data: {},
success: function (response) {
let rows = response['RealtimeCityAir']['row']
for (let i = 0; i < rows.length; i++) {
let gu_name = rows[i]['MSRSTE_NM']
let gu_mise = rows[i]['IDEX_MVL']
console.log(gu_name, gu_mise)
}
}
})
위 방식이 무엇이냐?
URL에 들어가서 반응한 정보(API 뭉치)중에 RealtimeCityAir에서 row를 가져온 것. (Rows에는 25개의 Row정보가 있음.)
나중에 특정한 리스트를 아래에 붙이고 싶으면 쓰는 방법.
``(백틱)을 이용해서 문자화로 돌리고, 나중에 append를 통해서 html화 시키는 과정. (여기에 html 코드만 알고 있으면 됨)
<중요 코드 나중에 자주 써먹을 듯>
let temp_html = `<li>${gu_name} : ${gu_mise}</li>`
$('#names-q1').append(temp_html)
특수한 글자만 붉게 표시하고 싶을때 조건을 거는 방법. (빈 공란은 ``로 만들고, if문을 이용해서 조건을 걸고, CSS에서 새로운 클래스를 만들어 표시를 바꿔주는 것)
<style type="text/css">
div.question-box {
margin: 10px 0 20px 0;
}
.bad{
color : red;
}
</style>
let temp_html=``
if (gu_mise > 30){
temp_html = `<li class="bad">${gu_name} : ${gu_mise}</li>`
} else {
temp_html = `<li>${gu_name} : ${gu_mise}</li>`
}
Ajax를 통해 (API)에서 정보를 가져오는 순서.
1) Ajax에서 URL을 바꾼다.
2) response시 list이름과 row를 가져온다.
3) for문을 돌려서 길이만큼 반복을 해서 rows[i]번째 데이터를 가져온다.
4)이때 rows[i]번째 데이터중 자신이 원하는 데이터는 let 변수 = rows[i]['이름=station name']처럼 세트로 묶인다.
이후에 작업을 할 때 원하는 것들을 변경한다.
(
가져온 데이터의 조건이 다를 경우 다른 색으로 칠한다.
새로 불러올 때 기존의 데이터는 다시 삭제한다 (empty 이용)
$('#names-q1').empty()
이미지 바꾸는 코드와 텍스트 바꾸는 코드.
- 이미지 바꾸기 : $("#아이디값").attr("src", 이미지URL);
- 텍스트 바꾸기 : $("#아이디값").text("바꾸고 싶은 텍스트");
2주차 과제
제출한 답.
let cel = response['temp']
$('#temp').text(cel)
실제 모범 답안
$('#temp').text(response['temp'])
굳이 let을 안하더라도 똑같은 동작하는 코드가 있다면 바로 써도 된다.
'개발 전용' 카테고리의 다른 글
고양이 모래 종류 및 선택 기준? (우드필렛, 두부, 카사바 ,벤토나이트) (0) | 2023.09.01 |
---|---|
스파르타 코딩 클럽 5주차 (실제 서버에 올려보기) (0) | 2022.08.18 |
스파트라 코딩 클럽 1주차 교육 HTML, CSS, JAVASCRIPT란? (네이버 해킹하며 해보기) (0) | 2022.08.04 |