강의 들으면서 작성한 러프한 메모.
정리 필요.
[웹개발강의 2-1]
<script>
let count =0
function hey(){
count +=1
if(count % 2 ==0) {
alert('짝수입니다!')
} else {
alert('홀수입니다!')
}
}
</script>
반복시 수 증가시킬 때 +=1
==은 같다..?(나머지..?) =은 이미 변수에서 쓰기 때문이라고 함.
[웹개발강의 2-2]
HTML의 요소들을 조작하는, 편리한 Javascript를 미리 작성해둔 것. 라이브러리!
(미리 짜둔 CSS코드의 부트스트랩처럼)
[웹개발강의 2-3]
jQuery 먹이려면 id 설정을 해줘야함(style먹일 때 class설정해준 것처럼)
<script>안에
$('#post-box').show() =>나타나게
.hide() =>사라지게
.val()
console에서
let mytitle = '타이타닉'
let temp_html = `<div class="col">
<div class="card">
<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">${mytitle}</h5>
<p class="card-text">여기에 내용이 들어가지요</p>
<p>⭐⭐⭐</p>
<p class="mycomment">여기에 코멘트가 들어갑니다.</p>
</div>
</div>
</div>`
=>파이썬을 html로 바꿔준건가?
$('#cards-box').append(temp_html)
=>카드 추가됨
+$()와 ${}의 차이점은 뭘까..
이것 역시 외워서 쓰는 건 아니라고 한다.
개발자들도 당장하라고 해도 할 수도 없고 못한다고.
[웹개발강의 2-4]
<style>이하에
display: none;
하면 시작부터 숨기고 시작
let temp_html = `<li>txt</li>`
그냥 작은 따옴표 아니고 백틱!
[웹개발강의 2-5 JQuery적용하기(포스팅 박스)]
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>jQuery 연습하고 가기!</title>
<!-- JQuery를 import 합니다 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style type="text/css">
div.question-box {
margin: 10px 0 20px 0;
}
</style>
<script>
function q1() {
if($('#input-q1').val() =='') {
alert('입력하세요!')
} else{
alert($('#input-q1').val())
}
// 1. input-q1의 입력값을 가져온다. $('# .... ').val() 이렇게!
// 2. 만약 입력값이 빈칸이면 if(입력값=='')
// 3. alert('입력하세요!') 띄우기
// 4. alert(입력값) 띄우기
}
function q2(){
let email = $('#input-q2').val()
if(email.includes('@') == true) {
alert(email.split('@')[1].split('.')[0])
} else {
alert('이메일이 아닙니다.')
}
// 1. input-q2 값을 가져온다.
// 2. 만약 가져온 값에 @가 있으면 (includes 이용하기 - 구글링!)
// 3. info@gmail.com -> gmail 만 추출해서 ( .split('@') 을 이용하자!)
// 4. alert(도메인 값);으로 띄우기
// 5. 만약 이메일이 아니면 '이메일이 아닙니다.' 라는 얼럿 띄우기
}
function q3() {
let txt = $('#input-q3').val()
let temp_html = `<li>${txt}</li>`
$('#names-q3').append(temp_html)
// 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()를 이용하면 굿!)
}
</script>
</head>
<body>
<h1>jQuery + Javascript의 조합을 연습하자!</h1>
<div class="question-box">
<h2>1. 빈칸 체크 함수 만들기</h2>
<h5>1-1. 버튼을 눌렀을 때 입력한 글자로 얼럿 띄우기</h5>
<h5>[완성본]1-2. 버튼을 눌렀을 때 칸에 아무것도 없으면 "입력하세요!" 얼럿 띄우기</h5>
<input id="input-q1" type="text"/>
<button onclick="q1()">클릭</button>
</div>
<hr/>
<div class="question-box">
<h2>2. 이메일 판별 함수 만들기</h2>
<h5>2-1. 버튼을 눌렀을 때 입력받은 이메일로 얼럿 띄우기</h5>
<h5>2-2. 이메일이 아니면(@가 없으면) '이메일이 아닙니다'라는 얼럿 띄우기</h5>
<h5>[완성본]2-3. 이메일 도메인만 얼럿 띄우기</h5>
<input id="input-q2" type="text"/>
<button onclick="q2()">클릭</button>
</div>
<hr/>
<div class="question-box">
<h2>3. HTML 붙이기/지우기 연습</h2>
<h5>3-1. 이름을 입력하면 아래 나오게 하기</h5>
<h5>[완성본]3-2. 다지우기 버튼을 만들기</h5>
<input id="input-q3" type="text" placeholder="여기에 이름을 입력"/>
<button onclick="q3()">이름 붙이기</button>
<button onclick="q3_remove()">다지우기</button>
<ul id="names-q3">
<li>세종대왕</li>
<li>임꺽정</li>
</ul>
</div>
</body>
</html>
---------------------
if(조건 =아니고 ==!) {맞으면 할 것} else{틀리면 할것}
alert('...') : 팝업창 띄우기
$('#...').val : 입력된 값
.include('...') : ...포함시 true, 미포함 시 false겠지?
.split('...')[0] : ...으로 잘랐을 때 첫번째 값.
.split('...')[1].split('@')[0] : ...으로 잘랐을 때 2번째 값을 @로 쪼갰을 때 1번째 값
let temp_html = `<li>${txt}</li>`
=><li> 머리기호 달기 인데 백틱은 뭔지 모르겠어.. temp_html도 뭔가 명령언가? 그냥 이름 붙인거 아니고??????
$('#...').append(^^) : ...에 ^^ 한 줄 추가..?
$('#...').empty() : ... 내용 지우기
+ 이 때 empty() 배웠었구나..ㅎ 심지어 딱 그 계속 붙는 문제 해결을 위해서 쓰였어..ㅎ..ㅎㅎㅎ
(사전프로젝트 당시 에러났었음)
[웹개발강의 2-6 서버-클라이언트 통신 이해하기]
https://chrome.google.com/webstore/detail/jsonview/gmegofmjomhknnokphhckolhcffdaihd?hl=ko
서버 자료 예쁘게 보기위한 확장프로그램.
get방식 데이터 전달
값이 길 때는 &으로 연결해 준다.
[웹개발강의 2-7 Ajax 시작하기]
json 형식 리스트랑 딕셔너리가 합쳐진 형태
[웹개발강의 2-8]
open API..?
Open Application Programming Interface의 준말로,
공공 기관이 이용자에게 정보를 재활용하거나 상업적, 비영리적으로 이용할 권리를 부여함으로써 다양한 서비스와 데이터를 보다 쉽게 이용할 수 있도록 공개한 표준화된 인터페이스. 간이 객체 접속 프로토콜, 자바스크립트 따위가 대표적이다.
위 사전적 설명이 계속 긴가민가해서 이해가 잘 안됐는데,
"API는 미리 만들어 놓은 가져다 쓸 수 있는 기능"
얼마나 간단하고 좋아!! 조코딩 보고와서 추가함.
서울시 미세먼지
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>jQuery 연습하고 가기!</title>
<!-- jQuery를 import 합니다 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style type="text/css">
div.question-box {
margin: 10px 0 20px 0;
}
.bad {
color :red;
}
</style>
<script>
function q1() {
$('#names-q1').empty()
$.ajax({
type: "GET",
url: "http://spartacodingclub.shop/sparta_api/seoulair",
data: {},
success: function (response) {
let rows = response['RealtimeCityAir']['row']
for (let i=0; 1<rows.length; i++){
let gu_name = rows[i]['MSRSTE_NM']
let gu_mise = rows[i]['IDEX_MVL']
let temp_html = ``
if(gu_mise>40) {
temp_html = `<li class="bad">${gu_name} : ${gu_mise}</li>`
} else {
temp_html = `<li >${gu_name} : ${gu_mise}</li>`
}
$('#names-q1').append(temp_html)
}
}
})
}
</script>
</head>
<body>
<h1>jQuery+Ajax의 조합을 연습하자!</h1>
<hr />
<div class="question-box">
<h2>1. 서울시 OpenAPI(실시간 미세먼지 상태)를 이용하기</h2>
<p>모든 구의 미세먼지를 표기해주세요</p>
<p>업데이트 버튼을 누를 때마다 지웠다 새로 씌여져야 합니다.</p>
<button onclick="q1()">업데이트</button>
<ul id="names-q1">
</ul>
</div>
</body>
</html>
[웹개발강의 2-9]
서울시 따릉이 현황
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JQuery 연습하고 가기!</title>
<!-- JQuery를 import 합니다 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style type="text/css">
div.question-box {
margin: 10px 0 20px 0;
}
table {
border: 1px solid;
border-collapse: collapse;
}
td,
th {
padding: 10px;
border: 1px solid;
}
.urgent{
color: red;
}
</style>
<script>
function q1() {
$('#names-q1').empty();
$.ajax({
type: "GET",
url: "http://spartacodingclub.shop/sparta_api/seoulbike",
data: {},
success: function (response) {
let rows = response['getStationList']['row'];
for (let i=0; i< rows.length; i++) {
let name = rows[i]['stationName'];
let rack = rows[i]['rackTotCnt'];
let bike = rows[i]['parkingBikeTotCnt'];
let temp_html = ``;
if (bike<5){
temp_html =`<tr class = "urgent">
<td>${name}</td>
<td>${rack}</td>
<td>${bike}</td>
</tr>`
} else{
temp_html = `<tr>
<td>${name}</td>
<td>${rack}</td>
<td>${bike}</td>
</tr>`
}
$('#names-q1').append(temp_html)
}
}
})
}
</script>
</head>
<body>
<h1>jQuery + Ajax의 조합을 연습하자!</h1>
<hr />
<div class="question-box">
<h2>2. 서울시 OpenAPI(실시간 따릉기 현황)를 이용하기</h2>
<p>모든 위치의 따릉이 현황을 보여주세요</p>
<p>업데이트 버튼을 누를 때마다 지웠다 새로 씌여져야 합니다.</p>
<button onclick="q1()">업데이트</button>
<table>
<thead>
<tr>
<td>거치대 위치</td>
<td>거치대 수</td>
<td>현재 거치된 따릉이 수</td>
</tr>
</thead>
<tbody id="names-q1">
</tbody>
</table>
</div>
</body>
</html>
[웹개발강의 2-10]
- 이미지 바꾸기 : `$("#아이디값").attr("src", 이미지URL);`
- 텍스트 바꾸기 : `$("#아이디값").text("바꾸고 싶은 텍스트");`
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JQuery 연습하고 가기!</title>
<!-- JQuery를 import 합니다 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style type="text/css">
div.question-box {
margin: 10px 0 20px 0;
}
div.question-box > div {
margin-top: 30px;
}
</style>
<script>
function q1() {
$.ajax({
type: "GET",
url: "http://spartacodingclub.shop/sparta_api/rtan",
data: {},
success: function (response) {
let url = response['url']
let msg = response['msg']
$('#img-rtan').attr('src', url)
$('#text-rtan').text(msg)
}
})
// 여기에 코드를 입력하세요
}
</script>
</head>
<body>
<h1>JQuery+Ajax의 조합을 연습하자!</h1>
<hr/>
<div class="question-box">
<h2>3. 르탄이 API를 이용하기!</h2>
<p>아래를 르탄이 사진으로 바꿔주세요</p>
<p>업데이트 버튼을 누를 때마다 지웠다 새로 씌여져야 합니다.</p>
<button onclick="q1()">르탄이 나와</button>
<div>
<img id="img-rtan" width="300" src="http://spartacodingclub.shop/static/images/rtans/SpartaIcon11.png"/>
<h1 id="text-rtan">나는 ㅇㅇㅇ하는 르탄이!</h1>
</div>
</div>
</body>
</html>
참고: 강의자료
https://teamsparta.notion.site/2-21a967ffde614955a6aff1e9765b0c82
[스파르타코딩클럽] 웹개발 종합반 - 2주차
매 주차 강의자료 시작에 PDF파일을 올려두었어요!
teamsparta.notion.site