JavaScript 5

JavaScript ■ 비동기

◈  비동기 ◈   • 동기적(Synchronus)동기적은 하나의 작업이 모두 수행될 때 까지 다른 작업을 수행 하지 못함  • 비동기적(Asynchronous)비동기는 작업의 결과를 기다리는 동안 다른 작업을 미리 수행하는 것 오래 걸리는 작업들에 대해 백그라운드에서 처리되며 그동안 다른 작업을 계속 수행할 수 있도록 함  • 비동기 작업의 대표적인 예시와 함수/문법1. Ajax, setTimeout2. Callback 함수, Promise, async/await • 비동기 확인하기예상했던 코드의 동작과 콘솔 로그에 찍히는 로그의 차이점 확인하기-> 비동기적  ◈  setTimeout 흐름 파악하기 ◈     ◈  setTimeout 흐름 파악하기 -2◈  • 상황  setTimeout이 0초로 설정되..

JavaScript ■ 이벤트

◈ 이벤트, 이벤트 핸들러, 이벤트 리스너 ◈  • 이벤트사용자의 동작이나 브라우저의 상태 변화와 관련하여 발생하는 사건을 의미 • 이벤트 핸들러특정 이벤트가 발생했을 때 실행되는 함수 • 이벤트 리스너JavaScript에서 지원하는 addEventListener() 메소드를 의미함 ◈ 이벤트의 종류 ◈  • 이벤트의 종류  ◈ 이벤트 핸들러 예시 ◈ • 이벤트 핸들러 예시 ◈ 이벤트 리스너 예시 ◈ • 이벤트 리스너 예시 ◈ 클릭 이벤트 ◈ • 클릭 이벤트사용자가 요소를 클릭할 때 발생하는 이벤트 • 클릭 이벤트 예시(이벤트 리스너 – 콜백 함수)  • 클릭 이벤트 예시(이벤트 리스너 – 일반 함수)  ◈ 마우스 이벤트 ◈ • 마우스 이벤트마우스와 관련된 동작에 대한 이벤트로써 여러가지가 있지만, 클릭..

JavaScript ■ 함수

◈ 함수 ◈  • 함수(Function)특정 동작을 수행하거나 코드를 재사용하기 위해 사용 • 함수의 종류1. 일반 함수2. 익명 함수3. 화살표 함수4. 생성자 함수5. 내부 함수6. 재귀 함수7. 콜백 함수8. …  • 일반 함수일반적으로 사용되는 함수로써 return문을 사용하여 값을 반환함 * 호이스팅 가능  • 익명 함수익명 함수는 일반적으로 한번만 사용하는 기능이 필요할 경우에 쓰임 -> 메모리 관리에 대한 방안으로, 일반 함수는 호이스팅 되어 불필요한 메모리를차지하게 되지만 익명 함수는 실행 후 사라짐  • 화살표 함수코드의 라인을 줄이기 위해 사용  • 생성자 함수객체를 생성하여 재사용 하기 위해 사용됨-> 코드의 재사용이 아닌, 객체의 재사용-> 관례적으로 생성자 함수는 앞 글자를 대문자..

JavaScript ■ HTML 태그 접근과 데이터 입출력

◈ getElement ◈  • getElementHTML 요소의 Class, Name, Id, Tag 값을 이용하여 요소에 접근 • querySelectorCSS 선택자를 사용하여 요소에 접근 • getElement vs querySelector일반적으로 getElement가 더 많은 브라우저에서 지원되며 *속도가 빠르기 때문에 더 많이 사용되나, 성능보다는 개발의 편의성을 위해 querySelector를 사용하는 개발자도 있음 * HTML Collection vs NodeList ◈ getElement의 종류 ◈ • getElement의 종류id는 동일한 값을 가질 수 없기 때문에 getElement Tag, Class, Name은동일한 값을 여러 태그에서 가질 수 있기 때문에 getElements ..

JavaScript ■ 개요 및 변수

◈ JavaScript ◈  • JavaScriptJavaScript는 브라우저에서 실행되는 언어로써 인터프리터 방식의 객체지향 프로그래밍 언어이다. • ES6ES란 JavaScript의 표준 규격을 의미 하는데, 이는 ECMA에서 정하게 된다. ES6은 가장 최근의 표준 규격으로써 JavaScript 개발 시 ES6 이상의 버전을 사용하는것이 권고됨 ◈ JavaScript 작성 방식 ◈ • inline자바스크립트의 코드가 매우 짧거나 간단한 용도로 사용해야할 때 HTML 태그 안에 직접 코드를 작성하는 방식  • internalHTML 태그 내에 직접 작성하는 것이 아니라, 를 별도로 작성하여 사용하는 방식. 자바스크립트 코드의 위치는 head, body 안에 작성 하거나 이후에 작성할 수 있음  • ..