상세 컨텐츠

본문 제목

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

CODING/Javascript

by 뚜뚜 DDUDDU 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쿼리 공식문서에서 참조
[]대괄호 내: 선택사항이라는 뜻임

 

관련글 더보기

댓글 영역