프론트 엔드 (Javascript, JQuery, Ajax)

-자바스크립트-

 

단순 지칭

중요

 

*빈칸 채워서 그거 알림 띄우기*
function q1() {
//입력값 지정하기
let 아무이름 = $('#input-q1(빈칸id임)').val();
//비어있다면
if (value == '') {
//알림 띄우기
alert('입력하세요!')}
//아니면 임의 값 띄우기
else {
alert(value)}
}


*빈칸에 입력한 yhhnnmm@gmail.com에서 gmail만 띄우기*
function q2() {
//입력값 지정하기
let 아무이름 = $('#input-q2(빈칸 id임)').val();
//만약 입력값에 @가 있다면
if (email.includes("@") == true) {
//@로 나누고, .으로 다시 나눠서 띄우기
alert(email.split('@')[1].split('.')[0])
//아니면
else {
alert('이메일이 아닙니다.')}
}


*빈칸에 입력한 값 <li>임꺽정</li>란에다가 추가하기*
=function q3() {
//입력값 지정하기
let 아무이름 = $('#input-q3(빈칸 id임)').val();
//추가한다.
let temp_html = `(백팁)<li>${name}</li>`;
$('#names-q3(임꺽정란 id임)').append(붙이기)(temp_html);
}
*지우기 버튼으로 임꺽정 란 id칸의 것들을 모두 지운다.*
function q3_remove() {
$('#names-q3(임꺽정 란 id임)').empty(지우기)();
}

 

 

 

-Ajax-

딕셔너리 하고 리스트가 조금 합쳐진 형태 내려오는 걸 JSON이라고 한다.

 

3-2강으로 복습

*자전거*

1. Ajax를 복사해와서 success 아래로 지운다. (묶음 잘 확인하고 지우기)

2. Ajax의 url의 주소를 바꾼다.

3. let url = response['url']

4. API 지정해서 반복문 작성

let rows = response['getStationList']['row']
for (let i = 0; i < rows.length; i++) {

5. 거치대 위치, 거치대 수, 거치된 자전거 수 지정

let name = rows[i]['stationName']
let rack = rows[i]['rackTotCnt']
let bike = rows[i]['parkingBikeTotCnt']

6. temp_html로 지정해서 id위치에 붙이기

let temp_html = `<tr>(들어갈 자리)
                              <td>${name}</td>
                              <td>${rack}</td>
                              <td>${bike}</td>
                           </tr>`

$('#names-q1(id)').append(temp_html)

7. 지워주기. $('#names-q1').empty()

8. 거치된 자전거 수가 5보다 작으면 빨간색

8-1. 클래스 잡아주기.

6번에 <tr>를  <tr class="urgent">로 수정해준 뒤 스타일에 urgent 컬러 레드로 잡음

8-2. 6번 위에 줄에 let temp_html = `` 추가

8-3. if문 작성 한 뒤 6번에 let을 지워주기

if (bike < 5) {

8.4. else문 작성

8-3번의 let지운 문장을 복붙 한 뒤 class="urgent" 삭제

9. 원래 붙어있던 <tr> 친구들은 id만 남겨준 뒤 지운다.

 

 

*이미지 바꾸기*
$('#id값').attr('src', 이미지url)
*텍스트 바꾸기*
$('#id값').text(바꾸고싶은 텍스트)