프로그램에는 프로그램 절차의 갯수가 고정되어야 한다.
프로그램은 고정된 절차로 들어가야 한다. 또한 항상 내용이 같아야한다.
절차를 세울 때는 모든 가능성을 고려해야한다.
절차 중에 올바른 경우도 있겠지만, 틀린 경ㅇ에는 어떻게 설명할지도 절차에서 언급해야한다.
다만 처음부터 모든 가능성을 고려하기는 어렵다.
이런 경우에는 절차를 생각나는대로 만들어 놓고 차차 보완해나가는것이 좋다.
프로그램 절차를 만들 때의 원칙
1. 프로그램 절차의 개수는 정해져 있어야한다.
2. 각 절차는 항상 같은 내용이어야한다.
3. 모든 가능성을 고려해야한다.
4. 예시는 절차를 검증하는 데 사용한다.
끝말잇기 만들기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>끝말잇기</title>
</head>
<body>
<div><span id="order">1</span>번째 참가자</div>
<div>제시어 :<span id="word"> </span></div>
<input type="text" />
<button>입력</button>
<script>
// prompt : 사용자로부터 값을 전달받음
const number = parseInt(prompt("몇 명이 참가하나요?"), 10);
//const realNumber = Number(number);
console.log("number", number);
// alert : 사용자에게 경고메시지를 표시
alert(number);
// conform : 사용자의 확인을 요구 (예, 아니오)
const yesOrNo = confirm("맞나요?");
// 자료형 확인
console.log(typeof number);
</script>
</body>
</html>
HTML 태그 선택하기(querySelector)
몇명이 참가할 지를 전달했고, 그 값을 변수에 저장했으니 이제 다음 절차인 '첫 번째 사람이 어떤 단어를 말한다'를
프로그래밍 해보자.
이전에는 값을 prompt 함수로 입력으 받았다면 이번에는 입력창(input태그)으로 입력을 받는다.
다만, 입력창은 HTML태그이므로 자바스크립트에서 이 입력창을 가져와야한다.
보통 자바스크립트에서 HTML 태그를 가져오는 것을 선택이라고 표현한다.
선택하기 위해서는 특별한 함수와 특별한 방법을 사용한다.
- document.querySelector
document.querySelector('선택자');
선택자: HTML 태그를 선택할 수 있게 도와주는 문자열이다.
<script>
const $Input = document.querySelector('input');
console.log($Input);
</script>
const $button = document.querySelector('button');
console.log($button);
- document.querySelectorAll : 태그가 여러 개 일 때
document.querySeletorAll(".target");
이벤트 리스너 달기(콜백함수)
addEventListener
사용법
태그.addEventListener('이벤트 이름', 리스너함수);
// input - 글 입력 가능
document.querySelector("input").addEventListener("input", function () {
console.log("글자 입력");
});
// button 입력 기능
document.querySelector("button").addEventListener("click", function () {
console.log("버튼 클릭");
});
아래와 형식으로 변수를 따로 만들어서 사용 가능하다.
여기서는 태그를 document.qeurySelector('button')으로 선택했다.
이 태그에 addEventListener를 붙여 이벤트를 연결할 수 있다.
클릭 이벤트의 이름은 click 이다.
버튼을 클릭하면 addClickButton 함수가 실행된다. 이 때 onClickButton 대신 onClickbutton()을 넣으면 안된다.
()를 붙이면 클릭과 상관없이 함수가 실행된다.
함수 자체를 넣어야하고 ()를 붙여 함수를 실행해서는 안된다는 점 주의하자!
이때 onClickButton 같은 함수를 콜백 함수(callback function)이라고 한다.
콜백함수는 특정 동작이 실행되고 난 뒤에 추가로 실행되는 함수이다.
버튼을 클릭한 후에 onClickButton이 추가적으로 실행되므로 콜백함수라고 볼 수 있다.
const onClickButton = () => {
console.log('버튼 클릭');
}
const $button = document.querySelect('button');
$button.addEventListener('click', onClickButton);
input에 글자를 입력할 때 사용자가 입력한 값을 확인할 수 있다.
// input - 글 입력 가능
document
.querySelector("input")
.addEventListener("input", function (event) {
console.log("글자 입력", event.target.value);
});
'☭DEVELOPER > #4 자바스크립트' 카테고리의 다른 글
| 자바스크립트 | 레츠기릿 자바스크립트 17 끝말잇기 | 첫번째 사람인지 판단하기 (0) | 2024.05.28 |
|---|---|
| 자바스크립트 | 레츠기릿 자바스크립트 15 객체 리터럴 (0) | 2024.04.30 |
| 자바스크립트 | 레츠기릿 자바스크립트 14 함수 (0) | 2024.04.29 |
| 자바스크립트 | 레츠기릿 자바스크립트 13 배열 (0) | 2024.03.18 |
| 자바스크립트 | 레츠기릿 자바스크립트 12 (0) | 2024.02.17 |