Ⅰ. 📚 오늘 배운 내용
- javascript 홀짝 판별 함수
- JQuery
1) input 박스의 값 가져오기
2) div 보이기 / 숨기기
3) 태그 내 thml 입력하기- [prac] 포스팅박스 여닫기
- [prac] JQuery 연습
- 서버-클라이언트 통신 이해
1) API
2) Ajax- [prac] JQuery + Ajax 조합 연습
- [prac] Ajax 연습 2
- [prac] Ajax 연습 3
- Develop playlist.ver 웹페이지
javascript 홀짝 판별 함수
👉 output
👉 input
- count 함수
- 나누기 기호 '%'
- 등호 '=='
JQuery
- javascript를 미리 짜둔 라이브러리
- javascript에서
<div class="">로 이름을 정해줬던 것처럼 JQuery에서는<id= "">로 대상 지칭
ex)<div id="box" class="mybutn">
1) input 박스의 값 활용
(1) id="url"에다가 '입력을 하고 싶다'라는 값 넣기
👉 output
(2) id="url"에 있는 값을 가져오기
👉 output
2) div 보이기 / 숨기기
ex) id="postbox" 가리기
👉 output
📍 hide() ↔︎ show()
3) 태그 내 thml 입력하기
📍 붙일 내용을 ``(백틱)안에 써야는 점 유의
let temp_html = ``
$('#붙일 곳 id name').append(temp_html)
ex) id="cardsbox"에 버튼 코드 html화 하기
👉 output
ex) post card 추가하기
👉 output
🔥 [prac] 포스팅박스 여닫기
👉 output
👉 input
show()와hide()활용display: none;추가
🔥 [prac] JQuery 연습
👉 output
👉 input
1) 빈칸 체크 함수 만들기
- if로 공백 판별
2) 이메일 판별 함수 만들기
- inclues('@') 함수로 '@' 포함 판별
- split로 메일 단위 쪼개기
function q2() {
let email = $('#input-q2').val()
if (email.includes('@')) {
alert (email.split('@')[1].split('.')[0])
}else {
alert ('이메일이 아닙니다')
}
}<body>
<div class="question-box">
<input id="input-q2" type="text" /> <button onclick="q2()">클릭</button>
</div>❓ if 쓸 때 if (email.includes('@') == true)처럼 true를 적지 않았는데 실행됨
3) HTML 붙이기/지우기 연습
👇 오류 코드
<script>
function q3() {
let txt = $('#input-q3').val()
let temp_html = `<li>${txt}</li>`
txt.append(temp_html)
}
function q3_remove() {
$('#names-q3').empty()
}
</script>👇 정상 코드
<script>
function q3() {
let txt = $('#input-q3').val()
let temp_html = `<li>${txt}</li>`
$('#names-q3').append(temp_html)
}
function q3_remove() {
$('#names-q3').empty()
}
</script><body>
<div class="question-box">
<input id="input-q3" type="text" placeholder="여기에 이름을 입력" />
<button onclick="q3()">이름 붙이기</button>
<button onclick="q3_remove()">다지우기</button>
<ul id="names-q3">
</div>
</body>
📍 오류난 이유
append 대상을 'txt'로 했는데, txt는 추가될 값이고, append 앞에는 추가될 영역의 id값을 넣어야 함
📍 id 값을 let할 때는 $('#id이름').val()으로 (, ', #이 붙는데, let 값을 다른 태그에서 다시 let 할 때는 ${let이름}으로 {만 붙는다.
서버-클라이언트 통신 이해
1) API
- get : 조회
- post : 생성, 변경, 삭제
2) Ajax
Json 형식 (dict과 list의 합쳐진 형태)
- response에서 불러올 리스트명을``(백틱)으로 적어야 함
🔥 [prac] JQuery + Ajax 조합 연습
- 미세먼지 수치 업데이트 및 40 이상인 수치 빨간 글씨 표시
👉 output
👉 input
- empty 사용하여 새로고침할 때마다 새로 씌어지는 형식
- 반복문 사용
- if 함수 시작 전
let temp_html = ``을 빈 문자열로 만들고 if절에서는 let 생략temp_html만 기입 - 빨간 글씨
<style>추가
🔥 [prac] Ajax 연습 2
- 따릉이 수치 업데이트 및 5대 미만인 데이터 빨간 글씨 표시
👉 output
👉 input
- empty 사용하여 새로고침할 때마다 새로 씌어지는 형식
- 반복문 사용
- if 함수 시작 전
let temp_html = ``을 빈 문자열로 만들고 if절에서는 let 생략temp_html만 기입 - 빨간 글씨
<style>추가
⚠️ 이상한 점
[prac] JQuery + Ajax 조합 연습할 때는 let rows = response[RealtimeCityAir][`row`] 리스트명을 백틱으로 적어야 적용되었는데,[prac] Ajax 연습 2할 때는 let rows = response['getStationList']['row'] 이렇게 작은따옴표('')로 적어도 실행되었다. 왜 일까?
🔥 [prac] Ajax 연습 3
- 이미지와 텍스트 업데이트
👉 output
👉 input
- 이미지 바꾸기 :
$('#아이디값').attr('src', 이미지 let이름);- 텍스트 바꾸기 :
$('#아이디값').text(바꾸고 싶은 텍스트 let이름);
Develop playlist.ver 웹페이지
👉 output
👉 input
- input 박스의 값 가져오기
- 태그 내 html 입력하기
🔎 추가 서칭한 내용
if 조건문 만들때 and는&&or은||로 나타냄
오늘 배운 input 박스의 값 가져오기, 태그 내 html 입력하기를 활용해서 playlist 텍스트를 적어서 추가하는 페이지를 만들었다.
너무 허무한 실수 때문에 계속 애를 먹었는데, input 박스 값 가져올 때 let artist = $('#idname').val()에서 뒤에 .val()을 안 붙여서 계속 값 불러오기가 실패했다...........
깨닫고 나니 허무, 당황, 허탈했다.🤣
그리고 아직도 이유를 모르겠는데, script 작성 시 function 이름을 new()라고 했었는데, 이것도 오류가 났다. new()에서 add() 바꾸니까 됐다. (아직도 이유를 모르겠음)
Ⅱ. 📝 회고
오늘 배운 input 박스의 값 가져오기와 태그 내 html 입력하기, ajax는 여러모로 유용하게 사용할 것 같다. 특히 ajax에는 반복문이 자주 붙어서 좀 헷갈린다.
구글링을 해보니까 javascript 등에 사용되는 함수에 대해서 잘 설명되어 있는 포스팅들이 많았다. if 조건문 다중 조건 만드는 것도 포스팅을 보고 하니까 충분히 따라할 수 있었다. 구글링하는 습관 갖기!
Ⅲ. ☑️ TO DO
- 2주차 homework
