JQuery
웹사이트에 자바스크립트를 쉽게 활용할 수 있도록 도와주는 오픈소스 기반의 자바스크립트 모음집의 형태
JQuery의 장점
1.코드의 가독성이 좋다.
2.웹 사이트 제작을 용이하게 해줍니다.
사용하는 방법
JQuery 사용을 선언하고 ⇒ 이름표 붙여주고 ⇒ 이름을 가리키고, 원하는 동작 입력하기
이름을 붙여준다 => id='name' 값을 부여
이름을 가리킨다 => $('#name').val()
원하는 동작입력 => $('#name').val().hide()
JQuery를 활용하여 HTML 붙이기
let name = $('#name').val()
let temp_html = `<li>${name}</li>`
$('#names').append(temp_html)
div 사라지고, 보이게 만들기
<div id="emailBox" class="email">
<p>이메일</p>
<input type="text" placeholder="이메일 주소를 입력해주세요">
<button>다음</button>
<span>이메일이 기억나지 않아요.</span>
</div>
div에 id값을 부여하고 동작수행 ='emailBox'
$('#emailBox').hide(); //이메일 창 숨기기
$('#emailBox').show(); //이메일 창 보여주기javascript와 함께 활용하기
이메일 형식의 id를 입력하는 공간에 @포함할 경우와 아닐 경우를 구분하여
alret창을 띄워보자
<script>
function login() {
let email = $('#emailLogin').val();
if (email == ''){
alert('이메일을 입력해 주세요')
} else {
if (email.includes('@') == true){
alert('로그인을 시도합니다')
} else {
alert('이메일 형식이 아닙나다')
}
}
}
</script>
<div id="emailBox" class="email">
<p>이메일</p>
<input id= "emailLogin" type="text" placeholder="이메일 주소를 입력해 주세요">
<button id='btnLogin'onclick="login()">로그인하기</button>
1) 로그인하기 버튼을 눌렀을 때 Login() 함수가 실행될 수 있게 설정
2) Login() 함수의 로직을 작성한다.
JQuery를 활용 이메일 작성하는 공간의 값을 가져온다.
조건문을 활용해 공란일 경우 alert('이메일을 입력해 주세요')
'@' 포함할 경우 alert('로그인을 시도합니다')
'@'를 포함하지 않은 경우 alert('이메일 형식이 아닙나다')
로그인하기를 눌렀을 때의 텍스트와 색깔을 바꿔보자
$('#btnLogin').text('로그인 중입니다.');
$('#btnLogin').css("background-color","gray");
간단한 코딩을 통해 글자와 색깔을 변경할 수 있다Fetch
서버와 통신하여 데이터를 주거나 받아오는 것 {key : value} 형태의 데이터를 가지고
연습해보자
let url = 'http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/
json/RealtimeCityAir/1/99 => 서울시의 실시간 미세먼지 정보가
key:value 형태로 이루어져있다.
<script>
function mise() {
fetch(url).then(res => res.json()).then((data) => {
let rows = data['RealtimeCityAir']['row']
for (let i = 0; i < rows.length; i++) {
let gu = rows[i]['MSRSTE_NM'];
let mise = rows[i]['IDEX_MVL'];
let temp_html = `<li>${gu} : ${value}(${status})</li>`;
if (mise > 70) {
$('#city').append(temp_html);
}
});
}
</script>
<body>
<div>
<button>미세먼지 정보</button>
<div class="client">지역별</div>
<ul id="city">
<li>용산구 : 80</li>
<li>동작구 : 29</li>
<li>도봉구 : 58</li>
</ul>
</div>
</body>
fetch를 활용해 서울시 미세먼지 API의 데이터를 가져와
구별 미세먼지 수치를 확인하고 미세먼지 수치가 70 이상인 경우만 나타내보자
.
1) 미세먼지 API의 row값에 해당하는 변수를 선언하고 반복문을 활용
2) 구와, 미세먼지 수치에 해당하는 변수를 선언하고
JQuery를 활용해 temp_html을 만든다.
3) 조건문을 활용하여 미세먼지가 70보다 큰 경우만 temp_html을 붙여준다
