JS/[codeit] jQuery (완)

[ codeit ] jQuery - jQuery 시작하기(1)

web_seul 2021. 6. 3. 21:55
반응형

 HTML, CSS와의 콜라보레이션 

1강. 환경설정

<!DOCTYPE html>
  <html>
  <head>
  <title>JavaScript Intro</title>
  </head>
  <body>
  </body>
</html>

F12 - console 에서 임시적용 가능

 

2강. HTML의 해결사, 자바스크립트

<div id="menu">
   <a href="index.html">Home</a>
   <a href="index.html">Home</a>
   <a href="index.html">Home</a>
</div>

//▽

<div id="menu">
   <a onclick="alert('hello');">Home</a>
   <a onclick="document.getElementByID('photo').src= 'images/seoul.png';">Home</a>
   //photo라는 id값을 가진 요소 가져오기
   //src 변경
   <a href="index.html">Home</a>
</div>

<img id = "photo" src="images/home.png" width="90%">

 

3강. 코드를 함수로 빼기

<div id="menu">
   <a onclick="alert('hello');">Home</a>
   <a onclick="document.getElementByID('photo').src= 'images/seoul.png';">Home</a>
   //photo라는 id값을 가진 요소 가져오기
   //src 변경
   
   <a onclick="clickSeoul();">Home</a>
   //clickSeoul이라는 함수 호출
</div>

<img id = "photo" src="images/home.png" width="90%">

<script>
  //사진을 바꿔주는 함수
  function clickSeoul(){
  	document. getElementById('photo').src = 'images/seoul.png';
  }
</script>
//간략히 하기
<div id="menu">
   <a onclick="clickSeoul();">Home</a>
   <a onclick="clickTokyo();">Home</a>
</div>

<img id = "photo" src="images/home.png" width="90%">

<script>
  function clickSeoul(){
  	document. getElementById('photo').src = 'images/seoul.png';
  }
  function clickTokyo(){
  	document. getElementById('photo').src = 'images/tokyo.png';
  }
</script>
//하나의 함수로 남기기     .......??
<div id="menu">
   <a onclick="clickImage('images/seoul.png');">seoul</a>
   <a onclick="clickImage('images/tokyo.png');">tokyo</a>
</div>

<img id = "photo" src="images/home.png" width="90%">

<script>
  function clickImage(image){
  	document. getElementById('photo').src = image;   //...?? 여기서 image가 의미하는것?
  }
</script>

 

4강. 폰트 굵기 바꾸기

5강. jQuery

jquery cdn 최신버전, minified

<div id="menu">
   <a onclick="clickSeoul();">Home</a>
   <a onclick="clickTokyo();">Home</a>
</div>

<img id = "photo" src="images/home.png" width="90%">

<script>
  function clickSeoul(){
  	document. getElementById('photo').src = 'images/seoul.png';
  }
  function clickTokyo(){
  	document. getElementById('photo').src = 'images/tokyo.png';
  }
</script>

//▽

<script>
  function clickSeoul(){
  	$('#photo').attr('src','images/seoul.png');
    //attr 해당 메소드의 속성을 바꿈
  }
  function clickTokyo(){
  	$('#photo').attr('src','images/tokyo.png');
  }
</script>

 

6강. jQuery 설치 정리 노트

1. 링크 사용하기 _ jQuery CDN   더 빠른편

2. jQuery 코드 다운받기 _ jquery.js

 

7강. 이벤트

Event(이벤트) : HTML요소들에게 일어날 수 있는 일들

ex) 사용자가 요소를 클릭한다, 페이지 로딩이 끝난다, 마우스가 요소위로 올라온다.

Event Handling(이벤트 핸들링)

ex) 키보드에서 'q'를 누르면(이벤트) 게임이 끝난다(이벤트 핸들링)

//사진에 그림자
<div id="menu">
   <a id="home" onclick="clickHome();">
   <a id="seoul" onclick="clickSeoul();">
</div>

<img id="photo" src="images/home.png" width=90%" onmouseenter="mouseEnter();" onmouseleave="mouseLeave();">


function mouseEnter(){
   $('#photo').css('box-shadow','5px 10px');
}
function mouseLeave(){
   $('#photo').css('box-shadow','none');
}

 

cf) 텍스트변경 .textContent

 

8강. 이벤트 핸들링

<div id="menu">
   <a id="home" onclick="clickHome();">
   <a id="seoul" onclick="clickSeoul();">
</div>

<img id="photo" src="images/home.png" width="90%" onmouseenter="mouseEnter();"
onmouseleave="mouseLeave();">


function mouseEnter(){
   $('#photo').css('box-shadow','5px 10px');
}
function mouseLeave(){
   $('#photo').css('box-shadow','none');
}

//▽ HTML을 깔끔히하기

<div id="menu">
   <a id="home">
   <a id="seoul">
</div>

<img id="photo" src="images/home.png" width="90%">

//id가 home인 요소를 찾아서
//on의 첫번째 파라미터 click (= onclick)
//clickHome 실행
$('#home').on('click',clickHome);
$('#seoul').on('click',clickSeoul);

$('#photo').on('mouseenter', mouseEnter);
$('#photo').on('mouseleave', mouseLeave);

function mouseEnter(){
   $('#photo').css('box-shadow','5px 10px');
}
function mouseLeave(){
   $('#photo').css('box-shadow','none');
}

 

9강. 이벤트 핸들링( jQuery vs 순수 자바스크립트 )

$('#home').on('click', clickHome);
$('#seoul').on('click', clickSeoul);
document.getElementById('home').addEventListener('click', clickHome);
document.getElementById('seoul').addEventListener('click', clickSeoul);

 

10강. 키보드 이벤트

$(document).on('keydown', processKeyEvent);
//페이지 전체 , 키보드를 누르는 이벤트 의미 , 실행함수

//키보드이벤트 핸들링
function processKeyEvent(){
   //clickHome();
   //console.log(event);
   if(event['key'] === '1'){
      clickHome();
   }else if(event['key'] === '2'{
      clickSeoul();
   }
}

//event['key'] = event.key

 

11강. 아이디 비밀번호 검사

<!DOCTYPE html>
<html>
<head>
  <title>로그인</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="styles.css">
  <link href="https://fonts.googleapis.com/earlyaccess/notosanskr.css" rel="stylesheet">
</head>
<body>
  <div class="login-form">
    <form>
      <input type="text" name="email" id="email-input" class="text-field" placeholder="아이디"><br>
      <input type="password" name="password" id="password-input" class="text-field" placeholder="비밀번호"><br>
      <input type="submit" value="로그인" id="submit-btn">
    </form>

    <div class="links">
      <a href="#">비밀번호를 잊어버리셨나요?</a>
    </div>
  </div>

  <script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>
  <script>
    
  </script>
</body>
</html>
//내코드...
let ID =$('#email-input').val
let PW =$('#password-input').val
let BTN = $('#submit-btn')
if( ID !==0 && PW !==0 ){
   BTN.css('background-color','#1BBC9B');
}


//답
$('#email-input').on('input', checkInput); 
    $('#password-input').on('input', checkInput);
    //input에 변화가 생길 경우
    //checkInput이라는 이벤트 핸들러 실행
    
    function checkInput(){
      //console.log('hello');
      
      var email = $('#email-input').val(); 
      var pw = $('#password-input').val();
      //입력된 값 받아오기
      
      if(email === '' || pw === ''){
        //비활성화
        $('#submit-btn').css('background-color', '#9b9b9b');
      }else{
        //활성화
        $('#submit-btn').css('background-color', '#1BBC9B');
      }
    }

 

 

 

 

 

 

 

 

 

 

 

반응형
저작자표시

'JS > [codeit] jQuery (완)' 카테고리의 다른 글

[ codeit ] jQuery - jQuery 활용하기(2)  (0) 2021.07.01
[ codeit ] jQuery - jQuery 활용하기(1)  (0) 2021.06.13
[ codeit ] jQuery - jQuery 시작하기(2)  (0) 2021.06.08

'JS/[codeit] jQuery (완)'의 다른글

  • 현재글[ codeit ] jQuery - jQuery 시작하기(1)

관련글

댓글

티스토리툴바