열정 실천

CALLBACK FUNCTION : 함수의 매개변수에 함수를 넘겨주는 것 파라미터로 콜백함수를 전달받고 나중에 필요할 때 실행되는 함수이다. //더하기 함수 function add(a,b){ return a+b } //출력 함수 function printFunc(value){ console.log(value); } printFunc(add(3,4)); 이 코드는 add 함수에 a와 b 를 매개변수 값으로 넣어서 나온 결과값을 출력 함수의 매개변수로 전달해서 최종적으로 콘솔에 출력한다. 이 코드를 콜백함수로 구현하면 다음과 같다. function add(a, b, print){ print(a+b); } function printFunc(value){ console.log(value); } add(3, 4,..

동기와 비동기 📌 개념 🟢 동기식(Synchronous) 프로그램 ◽ 데이터의 요청 후 결과가 나올 때까지 기다리는 방식 (blocking : 답변을 기다리는 상태) ◽ 순차적으로 일을 수행한다. ◽ 현재 작업이 수행 중이면 뒤의 작업은 대기한다. 🟢 비동기식(Asynchronous) 프로그램 ◽ 데이터 요청 후 결과를 기다리지 않고 다른 일을 시작한다. (non-blocking : 답변을 기다리지 않음) ◽ 병렬적으로 일을 수행한다. ◽ 현재 작업과 무관하게 뒤의 작업이 실행된다. 비동기 방식은 결과를 기다리지 않기 때문에 잘 수행됐는지 결과를 확인할 수가 없다. 📌 장단점 동기 방식의 장단점 😄 설계가 간단하고 직관적이다. 🤔 결과가 주어질 때까지 다른 일을 못하고 기다려야한다. (작업 중단) 비동기..

현재 시간을 15:34:26 (시/분/초) 이렇게 디지털 형식으로 표시하기 위해서 다음과 같은 Date 객체의 메소드를 사용하면 된다. ⏰ getHours() // 시간(Hour) ⏰ getMinutes() // 분(Minute) ⏰ getSeconds() // 초(Second) ⏰ getMilliseconds() // 밀리초(Milliseconds) 더보기 Date 객체를 먼저 선언한 후 이 메소드를 실행하기만 시간을 가져올 수 있다. 이렇게 가져온 시간을 화면에 출력하게 되면 Date 객체를 선언했을 때의 시간이 출력이 되고 바뀌지 않는다. 진짜 디지털 시계처럼 매초마다 시간을 변경해주기 위해서 정해진 시간마다 실행되는 setInterval() 함수를 이용하자! 🎈 setInterval( ) 함수 사..

이벤트의 함수는 매개변수를 통해 이벤트 정보를 가져올 수 있다. button.addEventListenter('click', (event) => { console.log(event); }); ✔ 이벤트 객체는 이벤트가 발생한 요소와 참조 정보, 입력된 키 등의 정보를 포함한다. ✔ 발생한 요소는 target 속성을 이용해 확인할 수 있다. ✔ 보통 이벤트객체매개변수는 [event] 혹은 [e]라고 많이 쓴다. --수정중---

이벤트 웹 내에서 일어나는 사건을 뜻한다. (클릭, 키보드 등) 각각의 이벤트들은 이벤트가 실행되면 실행될 코드 블록인 이벤트 핸들러를 가진다. event handler register : 이벤트가 발생하면 어떤 함수를 호출할지 등록해놓는 것 📌 이벤트 핸들러 등록에는 두 가지 방법이 있다. 1. 타겟.on이벤트명 = 이벤트핸들러함수 2. 타겟.addEventListner = ('이벤트명', 이벤트핸들러함수); 예시) 1. button.onclick = handleClick 2. button.addEventListner = ("click", handleClick); 보통 2번 방법을 많이 사용하기 때문에 2번으로 공부해보자! 일반적인 사용 방법은 다음과 같다. const button = document...

DOM : Document Object Model 브라우저에서 자바스크립트가 html 요소를 제어할 수 있도록 제공하는 API이다. (API에 관한 설명은 아래에_) JavaScript는 html 요소를 추가하거나 변경과 같은 조작을 위해 만들어진 언어이다. 이러한 html파일을 javascript로 어떻게 제어할 수 있을까? 모든 브라우저에는 웹문서를 해석(parding)하는 웹 렌더링 엔진이 있다. 이 렌더링 엔진은 html 코드를 해석하여 모든 요소를 객체화하여 자바스크립트가 접근할 수 있게끔한다. 이렇게 문서를 객체화하였다하여 Document Object Model(문서 객체 모델)이라고 부른다. 이 DOM은 트리 형태로 되어있고 각각의 요소를 노드라고 부른다. 우리는 원하는 노드에 접근하여 변경..