비밀번호 일치 확인 구상
다음 기획서에 쓰인 바와 같이 기능을 구현하려 했으나, 암호를 맞추면 유튜브로 접속이 되도록 기능을 추가하는 것이 재밌을 것 같았습니다.
해당 홈페이지의 비디오가 Hype Boy 하니 버전 뮤직비디오였기에
- 홈페이지 내에 작성된 Hype Boy 가사를 보고 (가사 = 힌트)
- 입력 필드에 다음 가사를 입력한 후 (다음 가사 = 비밀번호)
- 확인 버튼을 누르면
- 뉴진스 공식 유튜브로 접속
다음과 같은 기능을 기획하게 되었습니다.
비밀번호 일치 확인 구현
이와 같은 비밀번호 일치 확인을 구현한 내용은 다음과 같습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>[HTML, JavaScript] 비밀번호 일치 확인</title>
</head>
<body>
<h3>너 없이는 매일 매일이</h3>
<div>
<input type="text" id="password" />
<button id="password_button">확인</button>
</div>
<script>
var b1 = document.querySelector("#password_button");
b1.addEventListener("click", function () {
var bt = document.getElementById("password").value;
// input 값 가져오기
if (bt == "재미없어 어쩌지") {
// intput 값 일치 확인
window.open(
"https://www.youtube.com/channel/UCMki_UkHb4qSc0qyEcOHHJw", "_blank");
}
});
</script>
</body>
</html>
앞선 코드에서 사용된 window.open의 구성입니다.
window.open(url, name);
name 인수에서는 팝업 창의 속성을 지정할 수 있는데, 사용할 수 있는 속성은 다음 같습니다. name 인수를 설정하지 않으면, 기본 값은 _blank 속성이 됩니다.
- _blank : 새 창에서 열기 (기본)
- _self : 현재 창에서 열기