[스파르타 코딩클럽]2주차 개발일지

반응형

👩🏻‍💻1주차 수업목표

1.  javascript문법 익히기

2. jQuery로 간단한 HTML 조작

3. Ajax로 서버 API(약속)에 데이터를 주고, 결과 받아오기

 

 

1.(javascript) 짝/홀수에 따라 다른 alert띄우는 onclick 함수 만들기

<script>

let count = 1;

function hey() {

   if (count % 2 == 0) {

        alert('짝수입니다');

      } else {

        alert('홀수입니다');} 

      count += 1;      <-- count = count + 1

}

</script>

 

2. 자주 쓰이는 jquery

*

태그 내 html입력 : 예를들면 포스팅되면 카드 추가하기

1) html 넣고 싶은 태그에 id 값 주기

<div id="cards-box" >....</div>

2) 버튼넣기

let temp_html = `<button>버튼추가</button>`;  <--backtick(`)

$('#cards=box').append(temp_html);

 

*

jquery quiz: 이메일 입력시 @ 없으면 이메일이 아닙니다, 있으면 도메인값 도출하기

1) input-q2 값 가져오기

   let email = $('#input-q2_.val();

2) 만약 가져온 값에 @가 있으면 (includes 이용)

  if (email.includes('@')) {

3) 도메인만 추출해서 , alert(도메인값) 띄우기

  let domainwithdot = email.split('@')[1];

  let onliydomain = domainwithdot.split('.')[0];

4) 만약 이메일 아니면 '이메일이 아닙니다' alert 띄우기

   } else {

alert('이메일이 아닙니다.');}

 

3.  Ajax 퀴즈 : 따릉이 5대 미만인 곳 빨간색으로 표시(구이름, 주차대수, 주차된자전거수)

<script>

function q1() {

  $('#names-q1').empty();

  $.ajax({

     type: "GET",

     url:"~",

     data {},

     success: function (response) {

         let rows = response["getstationlist"]["row"];

         for (let i = 0; i < rows.length; i++) {

               let rack_name = rows[i]['stationname'];

               let rack_cnt = rows[i]['racktotcnt'];

               let bike_cnt = rows[i]['parkingbiketotcnt'];

               let temp_html = ``

               if (bike_cnt<5) {

                     temp_html =   `<tr class="urgent">

                             <td>${rack_name}</td>

                              <td>${rack_cnt}</td>

                              <td>${bike_cnt}</td>

                           </tr>` }

                     else {

                            temp_html =   `<tr>

                             <td>${rack_name}</td>

                              <td>${rack_cnt}</td>

                              <td>${bike_cnt}</td>

                           </tr>` }

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

             }}}) </script>

 

 

 

복습👩🏻‍💻