티스토리 뷰

JavaScript

[JavaScript] 버튼에 따라 알림창 내용 다르게 보여주기

helen2ye! 2022. 10. 2. 17:52
Alert

알림창임

<!DOCTYPE html>
<html>
<head>    
    <meta charset="utf-8">
    <title>Alert</title>
    <link rel="stylesheet" href="main.css">
</head>
<style>
    .alert-box{
    background-color: skyblue;
    padding: 20px;
    color: white;
    border-radius: 5px;
    display: none; 
    }
</style>
<body>

    <div class="alert-box" id="alert">
        <p id="pTag">알림창임</p>
        <button onclick="alert('none');">닫기1</button>

        <button id="close">닫기2</button>
    </div>

    <button onclick="alert('block','아이디입력하세요');">버튼1</button>
    <button onclick="alert('block','비번입력하세요');">버튼2</button>

    <button onclick="idAlert();">버튼3</button>
    <button onclick="pwAlert();">버튼4</button>

</body>

<script>
    function alert(parameter, parameter2){
        document.getElementById('alert').style.display=parameter;
        document.getElementById('pTag').innerText=parameter2;
    }

    function idAlert(){
        document.getElementById('pTag').innerHTML = '아이디를 입력하세요';
        document.getElementById('alert').style.display='block';
    }

    function pwAlert(){
        document.getElementById('pTag').innerHTML = '비번을 입력하세요';
        document.getElementById('alert').style.display='block';
    }

    // close를 클릭하면 function을 실행해줌
    document.getElementById('close').addEventListener('click', function(){
        document.getElementById('alert').style.display = 'none';
    });
</script>
</html>

위에서 두 방법 모두 같은 결과를 가져옴(버튼1,2 or 버튼 3,4)

 

innerText vs. innerHTML

  1. innerText: element 내부에 있는 text 값들을 말함
  2. innerHTML: element 내부에 있는 HTML이나 XML 모두를 말함

 

셀렉터

  1. class명은 사이트 내에서 여러개가 존재 할 수 있으나, id는 중복을 허용하지 않음.
  2. 따라서, id가 없더라도 class를 getElementsByclassName('  ')로 사용할 수 있으나 정확히 하기 위하여 인덱스 번호(위에서부터 순서대로 인덱스가 붙음, 0번부터 시작~)까지 붙여주는 것이 좋음
    e.g. getElementsByclassName('   ')[0]

 

addEventListener('이벤트명', function(){ 실행될 함수 내용~ });

  1. 이벤트란? 
    클릭/키입력/스크롤/드래그/마우스오버 등 유저들이 웹페이지에 조작을 가하는 것.
  2. addEventListener는 일종의 감시..? 이벤트가 일어나길 기다리고 있음!
    이벤트가 일어나면 내부코드를 실행해주는 기본 문법임
  3. function에 대한 작명은 생략가능하며, 함수의 파라미터에 들어가는 함수를 콜백함수라고 부름
    콜백함수는 순차적으로 실행하고 싶을 대 많이 보이는 함수 형태임

 

** 참고강의

https://codingapple.com/ JavaScript 입문과 웹 UI개발

'JavaScript' 카테고리의 다른 글

[JavaScript] Bootstrap 활용하기  (0) 2022.10.02
[JavaScript] Bootstrap 시작하기  (0) 2022.10.02
[JavaScript] 동적 UI 만드는 스텝(Alert box)  (0) 2022.10.02
[JavaScript] 기본  (0) 2022.10.02
댓글