자바스크립트 기초 2 (prompt, alert, confirm, querySelector, callback함수)

대화창 (prompt, alert, confirm)

const number = parseInt(prompt("put the number"));

prompt는 팝업형태로 창을 하나 띄워주며, 문자열 데이터로 사용자의 입력에 따른 값을 리턴해준다.

위처럼 변수를 선언했을 경우 변수에 저장되므로 undefined를 리턴한다.

 

prompt창

저장되었어용 뿌잉

alert(number);

마잔가지로 이전과 동일하게 팝업형태로 창을 띄워주지만 사용자에게 경고 표시를 하는 느낌으로 그냥 뙇! 끝

 

let TorF = confirm("check");
console.log(TorF); // return 확인 누르면 true 취소 누르면 false

 

 

HTML Tag 선택하기(querySelector)

document.querySelector('tagName'); // 해당 이름의 tag 가장 첫번째 태그 선택
document.querySelector('#idName'); // 해당 이름의 tag의 아이디 가장 첫번째 태그 선택
document.querySelectorAll('tagName.className');
// 해당 이름의 tag에서 className이라는 이름을 가진 클래스의 태그들 모두 선택
document.querySelectorAll('.className');
// className이라는 이름을 가진 클래스의 태그들 모두 선택
document.querySelector('div span'); // div 밑에 가장 첫번째 span 선택
// 해당 코드는 자손을 모두 찾기에 div 밑에 p 밑에 span이 있더라도 그것을 찾아냄.
document.querySelector('div #target span'); // 이런식으로 응용 가능
document.querySelector('div>span'); // div 바로 밑에 가장 첫번째 span 선택

//tip인데 querySelector을 받는 변수는 $를 붙혀서 표현하면 나중에 알아보기 쉽다
// conset $tagName = document.querySelector('tagName');
// conset $$tagNames = document.querySelectorAll('tagName');

그래서 이 querySelector은 tag 혹은 tag안에 있는 특정 영역을 지정하여 변동을 감지하거나 그 값을 바꾸거나 등등의 행위를 하기 위해 사용한다.

 

이벤트 리스너(콜백 함수)

const onClickButton = () => {
	console.log('button click');
};

const $button = document.querySelector('button');
$button.addEventListener('click', onClickButton);
// 버튼이 클릭되었을때 button click을 출력하는 함수.

// 이벤트리스너 사용 방식
tag.addEventListener('event Name', listenerfunction);

listener function : 리스너 함수, 콜백함수라고도 불린다. 함수가 연이어서 실행되므로 콜백함수라고 한다.

꼭 콜백함수 생각할 때는 return값으로 치환해보자. 함수()는 특정한 return이 주어지지 않았다면 return undefined 라는 것을 꼭 기억하자.

 

const onInput = (e) => {
	console.log('글자 입력', e.target.value);
};

만일 상단코드에서 사용자가 입력한 값을 변수로 받아오고 싶다면 변수를 함수에 정의해서 사용하자.

e.target.value에는 사용자가 입력한 값을 저장하게된다.

const $word = document.querySelector('input');
let word;
let newWord;
word = newWord;

$word.textContent = word; //<id = 'word'> 내부의 문자를 word로 변경된다.
$input.value = ''; // <input>에 해당하는 값을 공백으로 변환한다.
// input, select, textarea에 해당하는 영역의 변환은 .value로 적는다.

$input.focus(); //빈 프롬프트에 커서를 두게 한다.