10개 가이드 실습으로 browser-side JavaScript의 핵심 구성 요소를 배웁니다. HTML page에 script를 추가하고 browser에서 출력을 확인하며 value와 control flow에서 page content 변경과 user action 대응으로 나아갑니다.
각 랩은 짧은 coding step으로 하나의 기초 주제에 집중합니다. language와 DOM을 처음 실습하고 더 큰 application이나 modern JavaScript tooling 전에 필요한 syntax를 익힙니다.
학습 내용
과정을 마치면 다음을 할 수 있습니다.
- HTML에 JavaScript를 삽입하고 external script를 연결하며 console과 alert로 출력합니다.
let으로 variable을 선언하고 string, number, boolean을 저장하며typeof로 값을 확인합니다.- arithmetic과 string expression을 만들고 increment와 modulus operator를 사용합니다.
if,else if,else로 실행을 제어하고 loose equality와 strict equality를 비교합니다.for,while,do...while로 작업을 반복하고break로 loop를 종료합니다.- parameter와 return value가 있는 function을 정의하고 argument를 전달해 호출합니다.
- array를 생성, 접근, 수정, 순회하고 object property를 만들고 변경합니다.
- DOM element를 선택·업데이트하고 element를 생성·추가하며 listener와 event object로 browser event를 처리합니다.
추천 대상
JavaScript를 처음 배우는 사람, 페이지에 behavior를 추가할 준비가 된 HTML 학습자, browser scripting 기초를 짧게 복습하려는 사람을 위한 과정입니다. 독립 문제 해결 챌린지보다 단계별 실습을 선호합니다.
선수 지식: JavaScript 경험은 필요하지 않습니다. script를 page에 삽입하고 마지막 랩에서 HTML element를 수정하므로 기본 HTML을 권장합니다. text file도 편집할 수 있어야 합니다.
학습 환경: 10개 가이드 랩 모두 Ubuntu 22.04 WebIDE에서 실행합니다. HTML과 JavaScript file을 편집하고 browser preview를 새로 고쳐 console output, alert, DOM change, event를 확인합니다. 외부 account나 deployment service는 필요하지 않습니다.
자주 묻는 질문
browser JavaScript인가요, Node.js인가요?
browser-side JavaScript입니다. HTML page, DOM, alert, browser event를 사용하며 Node.js, npm, server-side API, command-line package tooling은 포함하지 않습니다.
HTML을 먼저 알아야 하나요?
고급 HTML은 필요 없지만 기본 element와 attribute를 알면 도움이 됩니다. 첫 랩에서 HTML page를 만들고 DOM과 event 랩에서 page element를 조작합니다.
챌린지나 final application project가 있나요?
아닙니다. 10개 가이드 랩만 있고 challenge나 capstone은 없습니다. 완전한 production application이 아니라 개별 기초를 연습합니다.
modern asynchronous JavaScript나 framework도 다루나요?
아닙니다. Promise, async/await, fetch, module, class, testing, build tool, TypeScript, React나 Vue 같은 framework는 범위 밖입니다.
