[자바스크립트] 이벤트 리스너 달기(콜백함수)

값을 입력하고 버튼을 클릭하는 것 등은 태그에 이벤트를 발생시킨다. 예를 들어, input 태그에는 키보드를 치는 이벤트 또는 값을 입력하는 이벤트를 발생시키고, button 태그는 클릭하는 이벤트를 발생시킨다. 이벤트를 달아주기 위해 태그.addEventListener('해당이벤트', function() {}) 를 사용한다. : '해당 이벤트'가 실행 될때마다 function 부분이 실행된다. 여기서 function은 콜백함수 또는 리스너함수라고 한다. 이 콜백함수는 어떤 동작이 실행되고 난 다음에 연이어 실행되는 함수를 의미한다. 아래와 같이 함수를 바깥쪽으로 뺄 수도 있다. Q. 만일, click_event의 위치에 click_event가 아닌, click_event() 로 작성해주면? click_event()는 함수 호출의 의미로, 리턴값을 반환한다는 뜻이다. 따라서 click_event 함수는 맨마지막 줄에 return undefined; 를 생략하고 있는 것이므로 다음과 같이 click_event() 위치에 undefined가 들어간 것과 동일하게 된다. input 태그에 입력한 글자를 출력하고자 할 때는 아래와 같이 작성한다. event.target.value에 사용자가 입력한 값이 들어있다.

[자바스크립트] 대화창(prompt, alert, confirm)

const number = parseInt(prompt('몇 명이 참가하나요?'), 10); alert(number); const yesOrNo = confirm('맞나요?'); // boolean true or false prompt : 사용자로부터 값을 전달받는다. 입력되는 것은 문자열이기 때문에 숫자로 인식하려면 숫자로 바꿔줘야 한다. const number = parseInt(prompt('몇 명이 참가하나요?'), 10); alert : 사용자에게 경고 메시지를 표시한다. confirm : 사용자의 확인을 요구한다.

[자바스크립트] 배열 push, pop, shift, unshift

그룹으로 묶어질 수 있는 것은 배열이나 객체를 사용하여 묶어준다. 배열 안에 들어있는 메서드로 push, pop, shift, unshift 가 있다. push : 마지막에 추가 pop : 마지막 것 뽑기 shift : 처음 것 뽑기 unshift : 처음에 추가

[자바스크립트] 비동기

이벤트 리스너는 위에서 아래로 실행되는 코드에 대한 예외이다. 처음에 이벤트 리스너의 코드 전부가 실행되는 것이 아닌, 'submit' 부분까지만 실행된다. 그 뒤의 콜백 함수는 실행은 하지 않고, 컴퓨터가 기억만 하고 있다. 사용자가 submit 하는 순간, 콜백 함수가 실행된다. 이러한 콜백 함수를 비동기라고 한다. 자바스크립트에서 비동기는 코드 상의 순서대로 실행되지 않는 코드를 의미한다. 동기는 위에서부터 순서대로 실행되는 코드를 의미한다. if문이나 for문이 코드를 건너뛰거나 반복한다고 한들, 결국 위에서부터 순서대로 실행되기 때문에 동기로 취급한다.

[자바스크립트] 이벤트 리스너 맛보기

입력창에 입력하고, 입력 버튼을 눌렀을 때 자동으로 입력창에 포커스되도록(커서가 깜빡이도록) 만들어준다. -> focus() 를 추가해준다. 버튼 클릭 후, 입력창을 따로 클릭해주지 않아도 포커스되있음을 확인할 수 있다. 입력창에서 엔터를 누르면, 입력 버튼을 누르도록 만들어준다. -> input과 button 태그를 form 태그로 감싸준다. form 태그를 만들어주고, input과 button 태그를 form 태그 안에 넣어준다. 이벤트 리스너도 button이 아닌, form으로 바꿔준다. 또한 'click'에서 'submit'으로 바꿔주고, 콜백함수의 매개변수를 추가해준다. (매개변수 이름은 상관없다. 호출할 때 넣은 값(인수)과 1대1 매칭된다.) 함수 안에 이벤트.preventDefault() 메서드를 추가해주면 된다. -> form에서 엔터를 치면 기본적으로 다른 페이지로 넘어가게 되어있다. 따라서 엔터를 누르면 페이지가 새로고침이 되는 것이 form의 기본 동작이다. -> 이 기본 동작을 바꿔주는 것이 이벤트.preventDefault() 이다.

[자바스크립트] 끝말잇기 화면에 표시하기

addEventListener 를 사용하여, '입력' 버튼을 클릭할 때마다 수행될 내용을 만들어준다. 클릭될 때마다 반복될 내용을 function 로 선언해준다. 이 function 을 '콜백 함수'라고 한다. 태그 안에 들어가는 글자는 textContent이고, 에 들어가는 글자는 value이다. c언어 등에서 문자와 문자열을 구별해서 사용하지만, 자바스크립트는 문자와 문자열의 구분이 없다.

[자바스크립트] JS로 HTML 태그 만들기

자바스크립트에서 document.body 를 하면, html의 body 부분이 선택된다. document.createElement() 메서드를 사용해 html 태그를 만들 수 있다. document.body.append() 를 사용해야, 만들어낸 html 태그를 body에 추가해준다. textContent 로 태그 안에 들어가는 글자를 넣어준다.

[자바스크립트] window 객체

window : 브라우저 전체를 담당한다. window.document : window 객체 안에 들어있는 객체이다. 화면(페이지, 탭)을 담당한다. window는 생략할 수 있다. window는 전역 객체이기 때문이다. window는 자바스크립트 문법에서 지원하는 것이 아니라, 브라우저가 window 객체를 만들어서 넣어둔 것이다. -> window는 자바스크립트 고유의 기능이 아니다. (자바스크립트를 실행시켜주는 NODE의 경우는 window가 없다. 그러나 브라우저는 window가 존재한다. 브라우저가 넣어주기 때문이다.) 전역 변수는 전역 객체의 속성이 된다. 즉, 함수 바깥에서 선언한 변수에 해당한다. 함수 안에서 선언한 변수는 해당하지 않는다. 전역 변수와 함수 안의 변수가 다른 이유는 함수의 특수성(함수 스코프) 때문이다.