✨ Front-end/자바스크립트(JS)29 [JavaScript] 클로저(closure) 클로저란? 자바스크립트 고유의 개념이 아니라 함수를 일급 객체로 취급하는 함수형 프로그래밍 언어에서 사용되는 중요한 특성이다 자바스크립트의 중요한 개념 중 하나로, 함수와 그 함수가 선언된 렉시컬 스코프(lexical scope) 사이의 관계를 나타낸다. outerFunction 함수를 보면, alert창이 함수 안에 또 함수를 실행시켰을때 출력되는 코드를 확인할 수 있다. Click1 버튼을 누르면, 아무런 변화가 없다. Click2를 눌렀을 때야 말로, 'test innerFunction'이 알림창으로 뜨는것을 확인할 수 있는데, outerFunction으로 함수 내에 한번 접근한 후, 그곳에서 innerFunc라는 변수에 outerFunction을 이미 한번 접근한 상태에서 다시 한번 함수 내의 코.. 2023. 8. 21. [JavaScript] 화면 캡쳐 라이브러리(html2canvas) https://html2canvas.hertzen.com html2canvas - Screenshots with JavaScript Try out html2canvas Test out html2canvas by rendering the viewport from the current page. Capture html2canvas.hertzen.com html HTML 삽입 미리보기할 수 없는 소스 참고한 소스 코드 html, js 위 코드 두 줄은 캡처를 하기 위한 라이브러리니 추가해주어야 한다. 버튼을 생성하여 screen shot 버튼을 누르게 되면, 오른쪽과 같이 사진이 캡처된다. 다운로드 된 폴더에 들어가 사진을 눌러보면, capture에 감싼 id 태그 모두 사진 png로 저장되어 있는 것을 확인.. 2023. 6. 7. [JavaScript] 자바스크립트 문제해결 시나리오 '평균나이계산' 버튼 클릭 시 평균 나이를 계산해 TABLE에 나타내세요. 첫번째 js코드 두번째 js코드 행과 열을 입력할 수 있는 input 태그에 행과 열을 입력후 '표 생성' 버튼 클릭 시 제시된 영역에 입력한 행과 열을 가진 표를 생성해라. 단, 행과 열 입력시 잘못된 데이터나 공백 문자는 입력안된다고 가정. 첫번째 js코드 이벤트 호출을 나는 btn.addEventListener('click', function(){ } 이렇게 했는데 document.querySelector('#btn').addEventListener('click', function(){ } 도 가능함. 테이블 지울때 나는 const spanElement = document.querySelector('span'); const .. 2023. 5. 4. [Javascript - Ajax] 동기(Synchronous)와 비동기(Asynchronous) 동기(Synchronous)와 비동기(Asynchronous) 비동기 방식 - 하나의 작업 종료까지 기다리지 않고 다음 작업을 진행하는 비순차적 처리 방식 동기 방식 - 하나의 작업이 끝난 뒤 다음 작업을 진행하는 순차적 처리 방식 비동기 처리의 장점 비동기 처리를 요청하고 그 처리 시간 동안 다른 작업을 할 수 있기 때문에 동기 처리 프로그램보다 자원을 좀 더 효율적으로 사용가능하다. 비동기 처리의 단점 -동기 처리 방식 프로그램보다는 개발이 복잡해진다. ajax에서 async를 false로 주었을 때, 이때 alert가 뜨는 순서는 1 2 3 4 '사용 가능한 id입니다.' 5 6 aa(10) 으로 해석할 수 있다. 즉, ajax는 실행될 때 시작부터 일반적인 코드와 나뉘게 되면서 따로 실행이 되는데.. 2023. 3. 27. 이전 1 2 3 4 5 6 7 8 다음
