<!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>
<script>
const number = parseInt(prompt("몇 명이 참가하나요?"), 10); // 10 생략해도 10진법으로 인식함
const $button = document.querySelector('button');
const $input = document.querySelector('input');
const $word = document.querySelector('#word');
const $order = document.querySelector('#order');
let word; //제시어
let newWord; //새로 입력한 단어
const onClickButton = function(){
console.log("버튼 클릭")
if(!word || word[word.length -1] === newWord[0]){ //제시어가 빈값인지 확인
word = newWord;
$word.textContent = word;
const order = parseInt($order.textContent); //현재 순서
if(order + 1 > number){
$order.textContent = 1;
} else{
$order.textContent = order + 1;
}
}else{
alert('올바르지 않은 단어입니다!');
}
$input.value = '';
$input.focus();
};
const onInput = (event) => {
newWord = event.target.value;
};
/*
alert(number);
const yesOrNo = confirm("맞나요?") ;
document.querySelector("input").addEventListener('input', (event) => { // 키보드 입력 모두 이벤트로 인식(backspace도 인식, 키 하나하나를 이벤트 하나로 인식)
console.log("입력", event.target.value);
});
*/
$button.addEventListener('click', onClickButton);
$input.addEventListener('input', onInput);
</script>
</body>
</html>
대화창(prompt, alert, confirm)
- 브라우저 환경에서 사용되는 최소한의 사용자 인터페이스 기능
1) alert("hello")
사용자가 [확인]을 누르기 전까지 계속 떠있는 메세지창
** 메시지가 있는 작은 창은 모달 창(modal window) 이라고 한다.
'모달’이란 단어엔 페이지의 나머지 부분과 상호 작용이 불가능하다는 의미가 내포되어 있다.
2) result = prompt(title, [default]);
텍스트 메시지와 입력 필드(input field), 확인(OK) 및 취소(Cancel) 버튼이 있는 모달 창
title : 사용자에게 보여줄 문자열 (ex prompt("참여할 인원은 몇 명인가요?"))
default(선택값) : 입력 필드의 초기값
사용자가 입력 필드에 기재한 문자열을 반환한다, 만약 사용자가 입력을 취소한 경우는 null이 반환된다.
3) result = confirm(question);
매개변수로 받은 question(질문)과 확인 및 취소 버튼이 있는 모달 창
사용자가 확인버튼를 누르면 true, 그 외의 경우는 false를 반환한다.
>> const number = parseInt(prompt("참여할 인원은 몇 명인가요?"));
// prompt는 취소를 누르면 null >> Number / parseInt로 형변환시 NaN이 반환된다.
HTML 태그 선택하기(querySelector)
querySelector
elem.querySelector(css)는 주어진 CSS 선택자에 대응하는 요소 중 첫 번째 요소를 반환한다.
** document 노드에서만 호출 가능하다
이벤트 리스너 달기(콜백함수)
addEventListener
document 특정요소의 event를 등록할때 사용한다.
[ 자주 사용하는 이벤트의 종류 ]
click – 마우스버튼을 클릭하고 버튼에서 손가락을 떼면 발생한다.
mouseover – 마우스를 HTML요소 위에 올리면 발생한다.
mouseout – 마우스가 HTML요소 밖으로 벗어날 때 발생한다.
mousedown – 클릭을 하기 위해 마우스버튼을 누르고 아직 떼기 전인 그 순간, HTML요소를 드래그할 때 사용할 수 있다.
mouseup – 마우스버튼을 떼는 그 순간, 드래그한 HTML요소를 어딘가에 놓을 때 사용할 수 있다.
mousemove – 마우스가 움직일때마다 발생한다. 마우스커서의 현재 위치를 계속 기록하는 것에 사용할 수 있다.
focus – HTML요소에 포커스가 갔을때 발생한다.
blur – HTML요소가 포커스에서 벗어났을때 발생한다.
keypress – 키를 누르는 순간에 발생하고 키를 누르고 있는 동안 계속해서 발생한다.
keydown – 키를 누를 때 발생한다.
keyup – 키를 눌렀다가 떼는 순간에 발생한다.
load – 웹페이지에서 사용할 모든 파일의 다운로드가 완료되었을때 발생한다.
resize – 브라우저 창의 크기를 조절할때 발생한다.
scroll – 스크롤바를 드래그하거나 키보드(up, down)를 사용하거나 마우스 휠을 사용해서 웹페이지를 스크롤할 때 발생한다.
페이지에 스크롤바가 없다면 이벤트는 발생하지 않다.
unload – 링크를 클릭해서 다른 페이지로 이동하거나 브라우저 탭을 닫을 때 혹은 브라우저 창을 닫을 때 이벤트가 발생한다.
change – 폼 필드의 상태가 변경되었을 때 발생한다.
라디오 버튼을 클릭하거나 셀렉트 박스에서 값을 선택하는 경우를 예로 들수 있다.
셀프체크 쿵쿵따 👇👇👇
<!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>
<div>제시어 : <span id="word"></span></div>
<input type = "text" maxlength = "3" >
<button>입력</button>
</div>
<script>
const number = parseInt(prompt("참여할 인원은 몇 명인가요?"));
// prompt는 취소를 누르면 null >> Number / parseInt로 형변환시 NaN
console.log(number)
if(number){
const $button = document.querySelector('button');
const $input = document.querySelector('input');
const $order = document.querySelector('#order');
const $word = document.querySelector('#word');
let word; //제시어
let newWord;
const inputText = (event) => {
newWord = event.target.value;
console.log(newWord)
}
const btnClick = () => {
console.log("클릭")
if(!word || (word[word.length -1] === newWord[0] && newWord.length === 3)){
word = newWord;
$word.textContent = word;
if(parseInt($order.textContent) < number){
$order.textContent = parseInt($order.textContent) + 1;
}else{
$order.textContent = 1;
}
}else {
alert("Booooommmmm!");
}
$input.value = '';
$input.focus();
}
$button.addEventListener('click', btnClick);
$input.addEventListener('input', inputText);
}
</script>
</body>
</html>
처음에 스크립트 부분을 head 태그 안에 넣었다가 내용이 적용되지 않는 것을 확인하고
load시 먼저 실행하도록 했다가 뭔가 잘못되었는지 안되길래 다시 body 안에 넣었다.
순서도를 그리지 않고 바로 코드를 작성했더니 중간중간 의도하지 않은 결과가 도출되어 끝말잇기 코드를 다시보고
수정을 조금했다.
원래 addEventListener 대신 해당 요소에 onClick, oninput 을 넣고, 함수변수로 지정했었는데
왜인지 실행이 되지않았다.
코드 작성할때 테스팅해서 원인과 결과를 재도출했어야하는데 그냥 넘어가버려서 지금은 문제되었던 코드상태를 몰라서 못한다..
최대의 패착
원인을 찾지 못했지만 추후 더 공부하다보면 알수 있지 않을까한다.
제로초 강사님의 신간 레츠기릿 자바스크립트를 기반으로한 무료강의로
초반 1강은 es6 기본 문법을 설명해준다
(앞부분은 자바스크립트를 조금이라도 깔짝여봤다면 추후 복습용으로 봐도 무관할 정도의 내용)
세심한 부분까지 설명해주기 때문에 타 강의에서 궁금했거나 들었는데 지났쳤을법한 내용도 나오기도 한다
본 강의는 자바스크립트 입문자를 대상으로 하기 때문에 정말 쉽게 설명되어있고,
프로그래밍 입문자를 대상으로 하기 때문에 코드를 짤 때의 사고방식에 대해 훈련하는 법을 알려준다
순서도를 그리는 내용은 입사하고 나서 고민해왔던 코드를 작성하고 테스트(구동하여 오류가 없는지 확인)하는 과정에서 계속된 코드 수정의 원인을 해결하려고 생각했던 방안(요구사항 분석 후 코딩)과 일맥상통하는 것 같았다.
vscode의 단축키와 각종 꿀팁이 난무하는 강의, 아직 강의 초반이지만 수강 만족도는 별다섯개
강의정보 👇👇👇
플랫폼 : 인프런
강의 : 레츠기릿 자바스크립트
강사 : 제로초
개발환경 : vscode, es6
포스팅 내용 출처 👇👇👇
'Programming > JavaScript' 카테고리의 다른 글
| [React / Node.js] 유튜브 사이트 클론코딩 - 에러 해결, React, ES6 문법 알아보기 (0) | 2021.07.18 |
|---|---|
| [React / Node.js] react-router 리액트 라우터 알아보기 (0) | 2021.07.04 |
| [React / Node.js] 영화사이트 클론코딩 - 에러 해결, React, ES6 문법 알아보기 (0) | 2021.06.23 |
| [인프런] 모던 자바스크립트(javascript) 개발을 위한 ES6 강좌 / 미니프로젝트 (0) | 2021.06.22 |
| [인프런] 모던 자바스크립트(javascript) 개발을 위한 ES6 강좌 / 실습예제 2 - Destructuring 과 Set 을 활용한 로또 번호 생성기 (0) | 2021.06.21 |