예제로 보는 자바스크립트 기본 문법 pt.3

CODING/Javascript

by 피그말리온(PYGM) 2022. 5. 28. 01:48

자바스크립트 문법을 위한 예제(멋사 강의)

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>jQuery 기초</title>
</head>
<body>
    <h1>jQuery 기초</h1>
    <textarea id="content">jQuery를 배워보자</textarea>
    <button id="click">클릭</button>
  // JQuery CDN을 찾아서 복붙
    <script
    src="https://code.jquery.com/jquery-3.5.1.js"
    integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
    crossorigin="anonymous"></script>
    <script>
    // content 아이디의 값 -->지정은 CSS와 유사
        $('#content').val()
        // 클릭시 hello가 찍히는 이벤트 삽입
        $('#click').click(function(){
        console.log('hello');
        });
    </script>
</body>
</html>


이제부터 스타크래프트

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>스타크래프트</title>
    <style>
        .background {
            position: relative;
            background-image: url('background.png');
            background-size: 500px 330px;
            width: 500px;
            height: 330px;
        }
        #drone {
            position: absolute;
            width: 100px;
            height: 100px;
            top: 100px;
            left: 60px;
        }
        #bunker {
            position: absolute;
            width: 150px;
            height: 150px;
            top: 80px;
            right: 20px;
        }
        #spit {
            display: none;
            position: absolute;
            top: 140px;
            left: 150px;
            width: 50px;
            height: 30px;
            z-index: 2;
        }
    </style>
</head>
<body>
    <div class='background'>
        <img id='drone' src="drone.png" alt="drone">
        <img id='spit' src="spit.png" alt="spit">
        <img id='bunker' src="bunker.png" alt="bunker">
    </div>
    <script
  src="https://code.jquery.com/jquery-3.5.1.js"
  integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
  crossorigin="anonymous"></script>
    <script>
      var hp = 3;
        $('#drone').click(function(){
            $('#spit').fadeIn();
            $('#spit').animate({left: '+=250'});
            $('#spit').fadeOut(function(){
      			hp = hp -1;
      			$('#hp').text('HP :' + hp);      
      }); //callback기능
            $('#spit').css({left: '150px'}); // 침위치 원상복귀
      if(hp == 0) {
      	$('#bunker').fadeOut()
      }
        });
    </script>
</body>
</html>

공식문서에서
fadeIn: J쿼리 공식문서에서 참조
[]대괄호 내: 선택사항이라는 뜻임

저작자표시 비영리 변경금지

'CODING > Javascript' 카테고리의 다른 글

자바스크립트 배열, 객체 관련 자주 쓰이는 함수 정리(필독!) (0)	2022.05.29
예제로 보는 자바스크립트 기본 문법 pt.4 (0)	2022.05.28
예제로 보는 자바스크립트 기본 문법 pt.2 (0)	2022.05.28
예제로 보는 자바스크립트 기본 문법 pt.1 (0)	2022.05.28
vanilla JS #3 (0)	2020.06.09