똑같이 생긴 화면. 그런데 한쪽은 눌러도 죽어 있고, 한쪽은 진짜로 반응해요.
지금 이 하트, 한번 눌러보세요. …아무 일도 안 일어나죠? 백화점 마네킹이랑 똑같아요. 예쁜데, 살아있진 않은 거예요.
우리가 매일 누르는 좋아요·수량·다크모드·장바구니 — 전부 자바스크립트의 작품.
전부 진짜로 작동해요. 직접 눌러보세요 — 이게 '살아있는 화면'입니다.
거창한 거 아니에요. 누르면 화면이 반응하는 이 손맛, 이게 전부 자바스크립트의 작품이에요.
무서운 영어 단어 5개? 사실 우리 동네에 다 있는 것들이에요. 짝만 맞추면 끝.
왼쪽 비유를 먼저 누르고, 오른쪽 진짜 용어를 누르세요. 맞으면 같은 색으로 연결되고 설명이 펼쳐집니다.
한 글자 칠 때마다 위 인사말이 바로 따라와요. 멈춤과 살아있음의 차이.
한 글자 칠 때마다 위 인사말이 바로 따라오죠? 이게 '실시간 반응'이에요. 검색창에 글자 치면 바로 뜨는 추천어, 그게 다 이 원리예요.
차이는 단 하나 — 화면에 '움직임(자바스크립트)'을 넣으라고 시킬 줄 아느냐.
※ '버튼·숫자·하트' 자리에 여러분이 만들고 싶은 걸 넣으면 그대로 응용돼요. 핵심은 '눌렀을 때 뭐가 일어나는지'를 같이 적는 것.
가운데 마네킹 🧍을 눌러보세요. 복사 버튼은 수업 직후 학생이 바로 채팅에 붙여넣게.