이번 글에서는 JS (javascript) 에 대해서 알아볼 것이다.
앞에서 배운대로 HTML 과 CSS를 사용해서 로그인 페이지를 뼈대만 구현해냈다.
그럼 로그인 기능을 구현하기 위해 동작을 담당하는 JS를 사용한다.
기본 구조
JS의 기본 구조이다.
<!DOCTYPE html>
<html>
<head>
<title>JavaScript 기본 구조</title>
</head>
<body>
<!-- HTML 내용 -->
<script>
// JavaScript 코드를 이 곳에 작성합니다.
// 변수 선언
var myVariable = 42;
// 함수 정의
function myFunction() {
alert('안녕하세요!');
}
// 이벤트 리스너 등록
document.getElementById('myButton').addEventListener('click', function() {
alert('버튼이 클릭되었습니다.');
});
</script>
</body>
</html>head나 body에 스크립트를 정의하던가 JS 확장자로 파일을 만들어 HTML 에 연동시킬수 있다.
C언어나 파이썬과 비슷하게 사용된다.
사용자가 웹 페이지에서 어떠한 행동을 해서 이벤트를 발생시켰을때 어떤 결과를 반환시킬지 만들수 있다.
지난글에서 HMTL 문서 내에서 어떠한 요소에 id를 주었었는데 이 id를 찾아와 행동을 줄 수 있다.
document.getElementById('myButton') - id가 'myButton'인 요소를 찾아온다.
.addEventListener('click', function() { ... }) - 찾아온 요소에 클릭 이벤트를 발생시키면 함수(function) 내의 동작을 실행한다.
여기서는 alert (알림) 기능으로 "버튼이 클릭되었습니다" 메세지를 띄운다.
입력값 대조
다음 예시로 입력폼을 만들어 사용자의 입력을 받아내 해당 데이터를 가지고 동작을 실행시켜보자.
<!DOCTYPE html>
<html>
<head>
<title>입력 대조</title>
</head>
<body>
<p>정답을 입력하세요:<input type="text" id="userinput"></p>
<button id="button">제출하기</button>
<script>
const answer=1234;
document.getElementById("button").addEventListener('click',function() {
const userinput = document.getElementById("userinput").value;
if (userinput == answer)
{
alert("정답입니다!");
}
else
{
alert("오답입니다. 다시 시도해보세요.");
}
});
</script>
</body>
</html>여기서 주의해야할건 js는 끝에 세미콜론 ( ; ) 을 써줘야한다. (C언어와 유사)
먼저 const (상수 정의) 로 answer 에 1234를 정의해주었고.
document.getElementById("button") = html 내의 id가 button인 요소를 가져온다.
.addEventListener('click',function() { . . . } = 해당 요소가 'click' , 즉 클릭되면 함수내의 동작을 수행하는 이벤트를 추가한다.
document.getElementById("userinput").value; = html 내의 id가 userinput인 요소를 가져와 .value 이 요소를 값으로 지정
const userinput = 뒤에 지정된 값을 userinput 라는 상수안에 정의
즉 const userinput = document.getElementById("userinput").value; 이 문장은 html내의 id가 userinput인 데이터를
js 에서 사용하기위해 새로운 상수공간인 userinput 에 새롭게 넣어주는것이다.
결과물
정답을 입력하세요:
느낀점
HTML에서 지정되는 요소들은 추후에 CSS나 JS에서 찾아와 사용되어야하기때문에
id 이름을 잘 지정해주어야 할 것 같다. 한눈에 어떤 요소를 가르키는것인지, 언제든지 사용가능하게끔 id를 잘 부여해야 할 것 같다.
또한 오늘 배운 사용자의 입력을 찾아와 대조하는 기능을 가지고
사용자의 입력을 가져와 서버의 데이터와 비교해 일치하면 로그인 시켜주는 로그인 기능도 구현 할 수 있을 것만 같단 생각이 들었다.
'과제' 카테고리의 다른 글
| VMC 패턴 (0) | 2023.09.30 |
|---|---|
| 코드펜 (codepen) 활용 (0) | 2023.09.11 |
| HTML , CSS 로 메인 페이지와 로그인 페이지 만들기 (0) | 2023.09.09 |
| HTML 로그인 페이지 문서 작성 (0) | 2023.09.06 |
| HTML 문서 작성 연습 (0) | 2023.09.06 |