스파르타 웹개발 2주차

클릭시 홀수, 짝수 함수 만들기

    <script>
        let count =1;
        function hey(){
            if (count%2==0){
                alert('짝수입니다!')
            }
            else {
                alert('홀수입니다!')
            }
            count +=1;
        }
    </script>

JQuery
input 박스의 값을 가져와보기

<div class="posting-box">
    <div class="form-group">
        <label for="exampleInputEmail1">아티클 URL</label>
        <input id="post-url" type="email" class="form-control" aria-describedby="emailHelp"
            placeholder="">
    </div>
    <div class="form-group">
        <label for="exampleInputPassword1">간단 코멘트</label>
        <input type="password" class="form-control" placeholder="">
    </div>
    <button type="submit" class="btn btn-primary">기사 저장</button>
</div>

// 크롬 개발자도구 콘솔창에서 쳐보기
// id 값이 post-url인 곳을 가리키고, val()로 값을 가져온다.
$('#post-url').val();

div 보이기 / 숨기기

<div class="posting-box" id="post-box">
    <div class="form-group">
        <label for="exampleInputEmail1">아티클 URL</label>
        <input id="post-url" type="email" class="form-control" aria-describedby="emailHelp"
            placeholder="">
    </div>
    <div class="form-group">
        <label for="exampleInputPassword1">간단 코멘트</label>
        <input type="password" class="form-control" placeholder="">
    </div>
    <button type="submit" class="btn btn-primary">기사 저장</button>
</div>
// 크롬 개발자도구 콘솔창에 쳐보기
// id 값이 post-box인 곳을 가리키고, hide()로 안보이게 한다.(=css의 display 값을 none으로 바꾼다)
$('#post-box').hide();

// show()로 보이게 한다.(=css의 display 값을 block으로 바꾼다)
$('#post-box').show();

//css 속성 가져오기
$('#post-box').css('width');

//css속성 바꾸기
$('#post-box').css('width', '700px');

//display 값이 none이면 안보이는 상태
$('#post-box').css('display');
"none"

// 텍스트 바꾸기
$('#btnpostbox').text('랄라')

//백틱(`)사용해서 텍스트를 html에 적용시키기
let temp_html = '<button>나는 추가될 버튼이다!</button>';
//텍스트
$('#cards-box').append(temp_html);
//버튼

카드 추가하기

// 주의: 홑따옴표(')가 아닌 backtick(`)으로 감싸야 합니다.
// 숫자 1번 키 왼쪽의 버튼을 누르면 backtick(`)이 입력됩니다.
// backtick을 사용하면 문자 중간에 Javascript 변수를 삽입할 수 있습니다.
let img_url = 'https://www.eurail.com/content/dam/images/eurail/Italy%20OCP%20Promo%20Block.adaptive.767.1535627244182.jpg';
let link_url = 'https://naver.com/';
let title = '여기 기사 제목이 들어가죠';
let desc = '기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...';
let comment = '여기에 코멘트가 들어갑니다.';

let temp_html = `<div class="card">
                    <img class="card-img-top"
                        src="${img_url}"
                        alt="Card image cap">
                    <div class="card-body">
                        <a href="${link_url}" class="card-title">${title}</a>
//${}로 내용 추가
                        <p class="card-text">${desc}</p>
                        <p class="card-text comment">${comment}</p>
                    </div>
                </div>`;
//변경된 내용으로 카드 추가
$('#cards-box').append(temp_html);

포스팅 박스 열고 닫기

    <script>

        function openclose(){
        let status= $('#postbox').css('display');
      // console.log(status)
       //콘솔창에 뜨는 것으로 확인  
        if(status =='block'){
            $('#postbox').hide();
            $('#btn_postbox').text('포스팅박스 열기');
        }else{
            $('#postbox').show();
             $('#btn_postbox').text('포스팅박스 닫기');
        }
    }


    </script>

JQuery Quiz

    <script>
        function q1() {
            let txt= $('#input-q1').val();
           if(txt=='') {
              alert('입력하세요!');
            } else{
              alert(txt);
              }

            // 1. input-q1의 입력값을 가져온다. $('# .... ').val() 이렇게!
            // 2. 만약 입력값이 빈칸이면 if(입력값=='')
            // 3. alert('입력하세요!') 띄우기
            // 4. alert(입력값) 띄우기
        }

        function q2() {
          let txt2= $('#input-q2').val();
          if(txt2.includes('@')){
            let domain = txt2.split('@')[1].split('.')[0]
            alert(domain);
          }
          else{
            alert('이메일이 아닙니다!')
          }
            // 1. input-q2 값을 가져온다.
            // 2. 만약 가져온 값에 @가 있으면 (includes 이용하기 - 구글링!)
            // 3. info.spartacoding@gmail.com -> gmail 만 추출해서 ( .split('@') 을 이용하자!)
            // 4. alert(도메인 값);으로 띄우기
            // 5. 만약 이메일이 아니면 '이메일이 아닙니다.' 라는 얼럿 띄우기
        }

        function q3() {
            let txt_3= $('#input-q3').val();
            let temp_html = `<li>${txt_3}</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>

Ajax

$.ajax({
  type: "GET",
  url: "여기에URL을입력",
  data: {},
  success: function(response){
    console.log(response)
  }
})
//기본 골격

$.ajax({
  type: "GET",
  //get, post
  url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
  data: {},
//post에서만 사용, get에서는 안씀
  success: function(response){
    //response는 변수 이름
    //모든 값이 ()안에 들어옴
    console.log(response)
    // console.log(response['RealtimeCityAir']['row'][0])
    //중구 모든 내용이 나옴
  }
})
//jquery를 입력한 브라우저 페이지에서만 ajax 작동

$.ajax({
  type: "GET",
  url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
  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']
          if  (gu_mise >70){
          console.log(gu_name, gu_mise)
            //70이상일 때만 콘솔창에 출력
          }
      }
  }
})