순서도 그리기
프로그래밍적으로 사고하지 못한다면 아무리 문법을 외워도 실제 프로그램을 만들 수 없다.
코드를 입력하기 전에 내가 만들 프로그램이 어떤 절차로 돌아갈지 미리 생각하자. (순서도 그리기 → 코드 작성)
※ 프로그램 절차는 상황에 따라 절차 갯수가 늘어났다 줄어드는 변동이 있으면 안된다. 프로그램은 고정된 절차로 돌아가야하므로 절차의 수가 같게 동작하는 프로그램을 만들어야 한다.
<프로그램 절차를 만들 때의 원칙>
- 프로그램 절차의 개수는 정해져 있어야 한다.
(프로그램 만들 때와 이용자가 프로그램을 이용할 때의 시점이 다르기 때문) - 각 절차는 항상 같은 내용이어야 한다.
(구체적인 예시가 아닌 일반(범용)적인 상황과 단어를 사용) - (최대한) 모든 가능성을 고려해야 한다.
- 예시는 절차를 검증하는데 사용한다.
<끝말잇기 절차>
- 게임에 몇 명이 참가할지를 선택한다.
- 참가자 순서를 정한다. (편의상 숫자로)
- 첫 번째 사람이 어떤 단어를 말한다.
- 다음 사람이 어떤 단어를 말한다.
- 절차 4에서 말한 단어가 올바른지 판단한다.
(앞 사람이 말한 단어의 끝 글자와 다음 사람이 말한 단어의 앞 글자 동일 여부) - 올바르다면 그 다음 사람이 어떤 단어를 말한다.
- 올바르지 않다면 틀렸다고 표시한다.
- 게임을 계속 진행(절차 4로 이동)한다.
상호보완적으로 순서도를 토대로 코드를 작성하고, 작성된 코드와 순서도를 비교하며 순서도를 보완한다. 코드를 검증하면서 부족하거나 모호한 점을 수정하는 작업을 거친다.
※ 순서도를 만들 때 사용자의 이벤트(버튼 클릭, 입력창 글자 입력 등)가 필요한 곳에서 순서도를 끊어줘야 한다!
➕ 단축키
Shift + Alt + ⇅ : 해당 줄 코드 복사
Shift + Alt + F : 코드 띄어쓰기 정리
대화창 함수(prompt, alert, confirm)
(실무에서 잘 사용하지 않음)
<script>
// 값을 저장하기 위해 변수를 생성해 값을 할당
// 두번째 인자는 십진법(default)으로 숫자형변환
const number = parseInt(prompt('참가 인원은?'), 10);
alert(number);
const yesOrNo = confirm('맞습니까?');
</script>prompt
브라우저가 사용자로부터 입력한 값을 전달받음
prompt 대화 상자에 사용자가 입력한 메세지가 문자열 형태로 전달되고, 입력하지 않고 취소를 누르면 null이 전달
숫자를 입력한 경우 문자열 형태이므로 'parseInt 또는 Number'를 이용해 숫자형으로 변환
alert
사용자에게 알림창을 띄어 경고 메시지를 표시
호출 시 확인 버튼을 누르기 전까지 다음 스크립트 실행 중단
confirm
브라우저가 사용자로부터 '예/아니오' 대답을 받아 사용자의 확인을 요구함
확인 버튼을 누르면 true가 전달되고 취소 버튼을 누르면 false가 전달됨
HTML 태그 선택하기(querySelector)
// 실제 배열
[1, 2, 3]
▶(3) [1, 2, 3]
// 유사 배열 객체
document.querySelectorAll('input')
▶ NodeList [input]'▶ NodeList [input]'은 배열은 아니지만 배열의 형태를 띄는 객체로 유사 배열 객체(Array-like Object) 라고 한다. 배열의 속성이나 메서드를 사용할 수 없는 경우가 있다.
유사 배열 객체는 0 이상의 정수값을 프로퍼티 이름으로 갖고, length 프로퍼티가 있는 객체이다.
(예. let abc = { 0:“A”, 1:“B”, 2:“C”, length:3 };)
- 함수의 인수를 저장하는 Arguments 객체
- DOM의 document.getElementById 등이 반환하는 NodeList 객체
document.querySelector('#아이디'); // 유일한 태그 한개 선택
document.querySelectorAll('.클래스'); // 동일한 태그 여러개 선택
document.querySelector('div span'); // div 태그의 자손인 span 태그 선택
document.querySelector('div>span'); // div 태그의 직계자식인 span 태그 선택이벤트 리스너(콜백 함수)
태그.addEventListener('이벤트 이름', 리스너 함수);
해당 이벤트가 일어남에 따라 리스너 함수가 호출되어 실행된다.
※ (첫번째 인수는 문자열이고,) 두번째 인수가 함수 자리로 함수 자체를 넣어야 한다. 리스너 함수에 '()'를 붙이면 이벤트 상관 없이 함수가 실행되므로 '()'를 붙여 함수를 실행해서는 안된다!
<script>
// 한번만 사용하는 경우 익명 함수, 변수 할당하는 방법 사용 가능
document.querySelector('input').addEventListener('input', function() {
console.log('글자 입력');
});
// 화살표 함수로 나타내기
document.querySelector('input').addEventListener('input', () => {
console.log('글자 입력');
});
/* -------------------------------------------- */
// 여러번 재사용될 때 콜백 함수를 변수로 저장
const onClick = function() {
console.log('버튼 클릭');
// return undefined;
}
document.querySelector('button').addEventListener('click', onClick);
// 화살표 함수로 나타내기
const onClick = () => {
console.log('버튼 클릭');
};
</script>🔽 사용자가 입력한 값 확인하기
document.querySelector('input').addEventListener('input', (event) => {
console.log('글자 입력', event.target.value);
});➕ 화살표 함수와 function으로 만든 함수는 동작 방식이 다르다! (this 파트에서 배움)
