티스토리 뷰
2-5. Quiz_Jquery
1.
function q1() {
var i = $('#input-q1').val();
if(i==''){
alert('입력하세요')
}else{
alert(i)
}
}
// 1. input-q1의 입력값을 가져온다. $('# .... ').val() 이렇게!
// 2. 만약 입력값이 빈칸이면 if(입력값=='')
// 3. alert('입력하세요!') 띄우기
// 4. alert(입력값) 띄우기
2.
2-1. 내가 이해한 풀이
function q2() {
var a = $('#input-q2').val();
if(a.includes('@')){
let b = a.split('@')[1]
//.split()은 괄호 안의 것으로 문자열을 나눔 [] 인덱스 순서
let c = b.split('.')[0]
alert(c)
}else{
alert('이메일이 아닙니다')
}
}
// 1. input-q2 값을 가져온다.
// 2. 만약 가져온 값에 @가 있으면 (includes 이용하기 - 구글링!)
// 3. info@gmail.com -> gmail 만 추출해서 ( .split('@') 을 이용하자!)
// 4. alert(도메인 값);으로 띄우기
// 5. 만약 이메일이 아니면 '이메일이 아닙니다.' 라는 얼럿 띄우기★ 문자열. split('특정 문자')
: 특정 문자를 기준으로 앞의 문자열을 나눈다.
ex) cholog56@naver.com 이 문자열, @가 특정 문자인 경우,
[cholong56, naver.com] 이렇게 2개로 나뉨.
+ 문자열.split('특정 문자')[순서]
: ~ 나뉘어진 결괏값의 순서에 맞는 값을 보여준다.
*Index 순서 [0,1,2,3,...]
ex) 여기서 [0]은 [cholong56]이고 [1]은 [naver.com] 임
2-2. 해설
가. includes 구글링 '자바스크립트 문자열 확인하기 includes'
나. includes 이해하기
fuction q2() {
let txt = $('#input-q2').val()
console.log(txt.includes('@'))
}
//input 에 입력하는 값에 @ 가 있으면 true / 없으면 false다. if 조건문에 includes 적용하기
fuction q2() {
let txt = $('#input-q2').val()
if (txt.includes('@') == true){
alert(txt.split('@')[1].split('.')[0])
}else{
alert('이메일이 아닙니다.')
}
}★ txt.split('@')[1].split('.')[0] 이렇게 한 번에 쓸 수 있음!
3.
3-1. 내가 이해한 풀이
function q3() {
let d = $('#input-q3').val();
if(d == ''){
alert('이름을 입력하세요');
return;
//return 명령문은 함수 실행을 종료하고, 주어진 값을 함수 호출 지점으로 반환
}
let e = `<li>${d}</li>`;
$('#names-q3').append(e);
//id 이름을 잘못 썼음...input 이 아니라 names
}
// 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)을 이용하면 굿!)
function q3_remove() {
$('#names-q3').empty();
// 1. names-q3의 내부 태그를 모두 비운다.(jQuery의 $('....').empty()를 이용하면 굿!)
}★ return 명령문은 함수 실행을 종료하고, 주어진 값을 함수 호출 지점으로 반환함
☆ 실수 : id 이름을 잘못 썼음(input 이 아니라 결괏값을 표시할 names)
3-2. 해설
function q3(){
let txt = $('#input-q3').val()
let temp_html = <li>${txt}</li>
$('#names-q3').append(temp_html)
}
2-8. JQuery + Ajax 조합 연습
function q1() {
$('#names-q1').empty()
//처음에 값을 비워주기 -이게 없으면 업데이트된 값이 계속 생성됨
$.ajax({
type: "GET",
url: "<a href=http://spartacodingclub.shop/sparta_api/seoulair>http://spartacodingclub.shop/sparta_api/seoulair</a>",
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']
let temp_html = ''
//일단 빈 문자열을 만들고
if(gu_mise < 20) {
temp_html = `<li class="bad">${gu_name} : ${gu_mise}</li>`
}else{
temp_html = `<li>${gu_name} : ${gu_mise}</li>`
}
//for 구문 쓰기 class 써서 bad 에 red 색상 주기
$('#names-q1').append(temp_html)
// ul 의 li 로 값 보여주기
}
}
})
}
2주 차 숙제
팬명록에 날씨 정보 추가
$(document).ready(function(){
$.ajax({
type: "GET",
url: "http://spartacodingclub.shop/sparta_api/weather/busan",
data: {},
success: function(response){
let temp = response['temp']
$('#temp').text(temp)
}
})
});
// <p>현재기온 : <span id="temp">00.0</span>도</p> id 명 부여함
Ajax 기본 폼?
function(){
$.ajax({
type: "GET",
url: "//url입력",
data: {},
success: function(response){
let a = response['해당 url 상 내가 가져올 값 명칭']
$('#부여한 id명칭').text(a)
}
})
}☆ 이미지 바꾸기 : $('#아이디값').attr('src',이미지 url)
☆ 텍스트 바꾸기 : $('#아이디값').text('바꾸고싶은 텍스트')
걸음마 떼듯 하나씩 따라 하기 :)