개발 노트

[자바스크립트] 알림창코드, 함수연습코드 본문

JavaScript

[자바스크립트] 알림창코드, 함수연습코드

알 수 없는 사용자 2021. 12. 31. 14:34
  • [자바스크립트]알림 창 열고 닫기
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="main.css" />
    <script src="main.js"></script>
  </head>
  <body>
    <div class="alert-box" id="alert">
      <p id="title">Alert 박스</p>
      <button id="close">닫기</button>
    </div>
    <button onclick="알림창1열기('아이디를 입력해라')">버튼1</button>
    <button onclick="알림창1열기('비번입력해라')">버튼2</button>

    <!-- onclick 안쓰고 이벤트리스너로 닫기 -->
    <script>
      document
        .getElementById("close")
        .addEventListener("mouseover", function () {
          document.getElementById("alert").style.display = "none";
        });
    </script>
  </body>
</html>

.alert-box {
  background: rgb(207, 207, 241);
  color: blue;
  padding: 10px;
  border-radius: 5px;
  display: none;
}
/* 
ui 숨김 - display:none 치면 숨겨집니다.
*/

function 알림창1열기(구멍) {
  document.getElementById("title").innerHTML = 구멍;
  document.getElementById("alert").style.display = "block";
}
// function 알림창2열기() {
//   document.getElementById("title").innerHTML = "비번입력하세요";
//   document.getElementById("alert").style.display = "block";
// }

 

 

 

 

// const는 상수이다. 상수는 변경불가능하다.

// let은 변수이다. 변수는 변경가능하다.

 

 

- 함수연습코드

const sum = function (limit) {
  let output = 0;
  for (let i = 1; i <= limit; i++) {
    output += i;
  }
  return output;
};

console.log(`합은 ${sum(10)}`);
console.log(`합은 ${sum(20)}`);
console.log(`합은 ${sum(30)}`);

const isLeapYear = function (연도) {
  return (연도 % 4 === 0 && 연도 % 100 !== 0) || 연도 % 400 === 0;
};

// 함수연습문제

const 테스트 = function (배열, 콜백함수) {
  for (const 값 of 배열) {
    콜백함수(값);
  }
};

const 함수 = function (콜백함수의_매개변수) {
  console.log(`${콜백함수의_매개변수}번째 안녕하세요`);
};
테스트([52, 273, 103, 32], 함수);
// 콜백함수의_매개변수
저작자표시

'JavaScript' 카테고리의 다른 글

투두리스트 html,css,js  (0) 2022.01.03
DOM은 무엇인가  (0) 2022.01.02
자바스크립트 객체  (0) 2022.01.01
[자바스크립트]반복문,배열,객체  (0) 2021.12.29
[자바스크립트]변수,타입,함수,조건문,문자열  (0) 2021.12.29
'JavaScript' Related Articles more