개발공부일지/JavaScript25 JavaScript - setTimeout , setInterval 에 관하여 안녕하세요. Hynn 입니다. 이번 포스팅에서는 setTimeout, setInterval 두개의 method 에 대해서 학습해보도록 하겠습니다. 보통 웹 페이지에서 여러분들이 보시는 컨텐츠들 중에 일부 컨텐츠들은, 몇초마다 화면이 바뀌거나, 내용이 새로고침 되는듯한, 그러한 컨텐츠들은, 대다수가 위 두가지의 Method 에 의해 동작될 확률이 높습니다. 하지만 두개로 나뉘어진 만큼, 각각의 차이가 존재합니다. 그 차이와 사용법에 대해서 설명해보도록 하겠습니다. ========== 1. setTimeout 2. setInterval 3. 예제 작성해보기 ========== 1. setTimeout 먼저 이 Method 는 말그대로 일정시간 이후에 동작하도록 하는 기능을 가지고 있습니다. 이 함수의 구성은.. 2022. 11. 14. JavaScript - 삼항연산자에 대하여 안녕하세요. Hynn 입니다. 이번 포스팅과, 다음 포스팅에서는 이전에 동기/비동기 설명에서 잠시 다루었던, 삼항연산자와 setTimeout, setInterval 에 대해서 설명드리도록 하겠습니다. 간단한 내용일수도 있지만, 복잡한 내용이 될 수도 있는 두개의 항목인지라, 이번 포스팅에서는 삼항 연산자부터 다루도록 하겠습니다. ============ 1. 삼항연산자란? 2. If 문과 삼항연산자 작성의 차이 ============ 1. 삼항연산자란? 삼항연산자, 조건부 연산자라고도 불리우며, 이 삼항연산자의 기본적인 사용틀은 "If" 문의 그것과 거의 동일합니다. 하지만 If문과 삼항연산자는 상황에 따라서 분명히 쓰임이 좋은 방향이 분명히 별도로 존재하기 때문에, 개별적으로 나뉘어 있다고 할 수 있습니.. 2022. 11. 14. JavaScript - Callback 함수와 동기/비동기 안녕하세요. Hynn 입니다. 이번 포스팅에서는 이미 저의 JavaScript 포스팅을 보시면서 넘어오신분들이라면, 무의식적으로 이 Callback 의 대한 개념을 사용하고 계시리라 생각합니다. 이번 포스팅에서는 실제 함수의 작성보다는, JavaScript 의 개념적인 부분을 포스팅하도록 하겠습니다. 개념이 이해가 되면 당연히 이에 대한 실제 작성에도 이해에 도움이 될 것이라고 생각합니다. ============== 1. Callback 함수의 설명 2. 동기(Synchronous) , 비동기 (asynchronous) 3. Background, TaskQ, EventLoop ============== 1. Callback 함수의 설명 먼저 Callback 함수라고 하는 단어적 의미를 이해하시면 조금 더.. 2022. 11. 11. JavaScript - appEventListener(이벤트생성) 안녕하세요. Hynn 입니다. 이번 포스팅에서는 지난 실습예제에서 다루었던 Lotto 번호 생성웹 페이지에서 잠시 소개되었던, appEventListner 에 대해서 설명드리고자 합니다. 이 appEventListner 는 JavaScript 에서 자주 사용되는 기능이고, 이를 위해서 함수를 배웠다고 해도 과언이 아닐수도 있습니다. 근본적으로 이벤트를 생성하면, 함수를 호출해야하고, 그 호출되는 함수를 생각하는 대로 구현하려면, 결과적으로 함수를 잘 다루어야 하기 때문입니다. =========== 1. appEventListner 이해하기 2. 주요 Method 알아보기 3. 예제 작성해보기 =========== 1. appEventListener 이해하기 appEventListener 는 JavaScr.. 2022. 11. 11. JavaScript 실습예제 - Lotto JavaScript 코드 효율화 안녕하세요. Hynn 입니다. 이전 포스팅에서 코드의 효율성을 위해 JavaScript 를 효율적으로 작성하기 위한 예제를 게시한 바 있습니다. 이번 포스팅에서는 효율적으로 작성한 JavaScript 코드를 작성하는 방식에 대해서 해설이 있다면, 저도 기억하기가 좋고, 다른 분들께서도 좋은 참고자료가 되었으면 합니다. 그럼 시작해보겠습니다. ============== 1. JavaScript 작성 2. 해설본 ============== 1. JavaScript 작성 const btn = document.querySelector('#submit') const LottoDisplay = document.querySelector('#lottonum') const LottoBox = document.queryS.. 2022. 11. 10. JavaScript 실습예제 - Lotto 번호 생생 웹 페이지 만들기 안녕하세요. 이전 포스팅에서 작성한 여러개의 기능을 사용하여, 이제 Lotto 번호 생성기를 만드는 예제를 작성해보겠습니다. 각 페이지 단계별로 설명을 첨부하였으니, 참고하시면 도움이 될 것이라고 생각합니다. 그리고, 코드를 조금 더 간추린 버전을 설정하여, 페이지 하단에 기재했으니, 참고하시면 좋을 거 같습니다. 이에 대해서는 별도의 설명을 하지 않겠습니다. ========================== 1. Lotto 번호 만들기 - HTML 2. Lotto 번호 만들기 - CSS 3. Lotto 번호 만들기 - JavaScript 4. 코드 정리하기 ========================== 1. Lotto 번호 만들기 - HTML 먼저 HTML은 간촐하게 작성합니다. 먼저 영역을 설정하기 .. 2022. 11. 10. 이전 1 2 3 4 5 다음
