자바스크립트를 이용해 만든 끝말잇기 게임이다.
1. 순서도 그리기
입문자는 프로그래밍 전에는 순서도를 그려보는 것이 좋다.
순서도 그리는게 아직은 어렵지만 꾸준히 연습해서 익숙해지도록 하자!
📃 프로그램 절차를 만들 때의 원칙
- 프로그램 절차의 개수는 정해져 있어야 한다.
- 각 절차는 항상 같은 내용이어야 한다.
- 모든 가능성을 고려해야 한다.
- 예시는 절차를 검증하는 데 사용한다.
2. 끝말잇기 코드
<!DOCTYPE html> <html lang="ko"> <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>끝말잇기</title> </head> <body> <div><span id="order">1</span>번째 참가자</div> <div>제시어: <span id="word"></span></div> <input type="text"> <button>입력</button> </body> <script> const number = Number(prompt('참가자 수를 입력하세요.')); const $button = document.querySelector('button'); const $input = document.querySelector('input'); const $word = document.querySelector('#word'); const $order = document.querySelector('#order'); let word; // 제시어 let neWord; // 새로 입력한 단어 const onClickButton = () => { if (!word || word[word.length - 1] === newWord[0]) { // 제시어가 비어 있는가? or 끝말잇기가 올바른가? // 비어 있다. word = newWord; // 입력한 단어가 제시어가 된다. $word.textContent = word; const order = Number($order.textContent); // 현재 순서 if (order === number) { $order.textContent = 1; } else { $order.textContent = order + 1; } } else { // 올바른 값이 아닌가? alert('틀렸습니다! 다시 입력하세요'); } $input.value = ''; $input.focus(); }; const onInput = (event) => { newWord = event.target.value; }; $button.addEventListener('click', onClickButton); $input.addEventListener('input', onInput); </script> </html>
3. 새로 배운 것 정리
텍스트 상자 띄우기
• prompt - 사용자가 입력한 메시지가 문자열 형태로 전달되고, 입력하지 않고 취소를 누르면 null이 전달.
• alert - 단순한 알림창으로, 호출하면 확인을 누르기 전까지 다음 스크립트 실행이 중단.
• confirm - 사용자에게 확인을 받을 때 사용. 확인을 누르면 true가 전달되고, 취소를 누르면 false가 전달.
prompt('사용자에게 표시할 메시지'); alert('사용자에게 표시할 메시지'); confirm('사용자에게 표시할 메시지')
HTML 태그 선택하기
document.querySelector - 하나의 태그만 선택.
document.querySelectorAll - 여러 개의 태그를 선택.
document.querySelector('선택자') document.querySelectorAll('선택자') document.querySelector('#아이디') document.querySelectorAll('.클래스') document.querySelector('선택자 내부선택자 내부선택자...');
이벤트 함수
- addEventListener - 태그를 선택한 후에 addEventListener 메서드를 사용해 이벤트를 연결. 첫 번째 인수로 이벤트 이름을 넣고, 두 번째 인수로 리스너 함수를 넣는다. 리스너 함수는 이벤트가 발생할 때 실행되는 함수.
태그.addEventListener('이벤트 이름', 리스너함수);
- 리스너 함수의 매개변수로 event 객체를 제공해서 이벤트와 관련된 정보를 얻을 수 있다. 예를 들어, input 태그에 입력된 값을 가져오려면 event.target.value를 넣으면 된다. 여기서 event.target은 이벤트가 발생한 대상 태그를 가리킨다.
+) 이벤트 자체가 필요할 때는 event객체 생략가능, 이벤트와 관련된 정보(텍스트, 좌표값) 등이 필요할때는 event객체를 넣어준다. (이름은 아무거나 가능하나, e 또는 event 를 주로 씀)
const 리스너함수 = (event) => { console.log(event.target.value); };
- 입력창에 입력된 값은 value 속성으로 가져온다. value에 값을 대입하면 대입한 값으로 변경된다.
입력창.value // 입력창의 값을 가져옴 입력창.value = 값 // 입력창에 값을 넣음
- 입력 태그(input, select, textarea 등)가 아닌 일반 태그들의 내부 값을 가져올 때는 value가 아니라 textContent 속성을 사용한다.
태그.textContent // 태그내부의문자를가져옴 태그.textContent = 값 // 태그 내부의 문자를 해당 값으로 설정함
- 입력창이나 버튼의 경우 focus 메서드를 호출하면 해당 태그가 하이라이트된다.
입력창.focus() // 입력창을하이라이트
12/23 +) 팀장님이 주신 메모...📃
함수 선언방법
1. 일반형
function 함수이름() {
}
2. 일반형 + 전달값 추가 // 좀전에 얘기했던 event가 사실 전달값인거에요.
function 함수이름(전달값) {
}
3. 콜백(callback) 형
함수이름 = function() {
}; // 끝에 세미콜론 추가해야 돼요.
4. 콜백 + 전달값 추가
함수이름 = function(전달값) {
};
* 함수 호출방법
함수이름();
함수이름(전달값);
element.addEventListener(이벤트명, function(전달값 or 수신값) {
});출처 - 이 포스트는 제로초님의 youtube - ES2021 자바스크립트 강좌를 참고하여 작성하였습니다.
프론트엔드 공부 정리