#자바스크립트
“자바스크립트” 태그 앱
사람들이 대화로 만든 “자바스크립트” 태그 앱 17개를 둘러보세요. 마음에 드는 앱을 실행해 보고, 리믹스해 내 것으로 만드세요.
부딪혔다!
‘부딪혔다!’는 좌표, 움직임, 충돌 판정을 게임처럼 익히는 코딩 기초 학습 앱입니다. x와 y로 상자의 자리를 정하고, 한 걸음마다 좌표에 값을 더해 움직인 뒤, 부등호 네 개로 두 상자가 겹치는지 판단하는 규칙을 만듭니다.
기다렸다 하기
‘기다렸다 하기’는 코드에 적힌 순서와 실제 실행 순서가 달라질 수 있음을 체험하는 코딩 학습 놀이터입니다. ‘나중에 하기’에서 즉시 실행과 지연 예약을 비교하고, ‘순서 맞히기’에서 예약된 줄을 고려해 출력 순서를 예측할 수 있습니다.
어디 숨었을까
‘어디 숨었을까’는 목록에서 원하는 항목을 찾는 세 가지 방법을 체험하며 코딩 기초를 배우는 인터랙티브 교육 앱입니다. 하나씩 훑기, 정렬된 목록을 반씩 줄이는 이진 탐색 방식, 이름표를 이용한 직접 찾기를 단계별로 비교할 수 있습니다.
나를 다시 부르기
‘나를 다시 부르기’는 재귀 함수의 기초를 직접 조작하며 배우는 코딩 교육 앱입니다. 인형 속의 인형 활동에서는 멈추는 조건에 도달하는 호출 과정을 살펴보고, 차곡차곡 활동에서는 재귀 호출이 돌아오며 덧셈과 곱셈 값을 만드는 과정을 펼쳐 봅니다.
상자를 글자로
‘상자를 글자로’는 자바스크립트 객체를 JSON 글자로 바꾸고, JSON 글자를 다시 객체로 읽는 과정을 배우는 코딩 기초 학습 앱입니다. ‘글자로 바꾸기’에서는 값을 바꿔 원하는 JSON 결과를 만들고, ‘글자를 읽기’에서는 잘못된 따옴표와 쉼표를 찾아 오류를 확인합니다.
작은 것부터
‘작은 것부터’는 정렬 알고리즘과 자바스크립트 비교 기준을 체험으로 배우는 코딩 교육 앱입니다. 손으로 바꾸기에서는 막대를 바로 옆 항목과만 교환해 작은 순서로 정렬하고, 최소 교환 횟수와 현재 횟수를 확인합니다.
0과 1로 세기
‘0과 1로 세기’는 이진수, 비트, 문자 표현, 비트 시프트를 직접 조작하며 배우는 코딩 기초 학습 앱입니다. 8칸의 전구를 켜고 꺼 목표 숫자를 만들고, 비트로부터 숨은 단어를 해독하며, 제한된 횟수 안에 왼쪽·오른쪽 시프트로 목표값에 도달하는 세 가지 활동을 제공합니다.
자르고 붙이고
‘자르고 붙이고’는 자바스크립트 문자열의 기본 개념을 체험으로 배우는 코딩 학습 앱입니다. 글자를 0부터 세는 인덱스와 slice 범위를 연습하고, +가 숫자를 더할 때와 글자를 이어 붙일 때의 차이를 확인할 수 있습니다.
이름표 붙은 상자
이름표 붙은 상자는 자바스크립트 객체, 배열, 중첩 객체, 반복문을 처음 배우는 사람을 위한 인터랙티브 코딩 학습 앱입니다. hero.hp처럼 이름으로 값을 꺼내는 방법과 hero[1]처럼 번호로 접근하는 방법을 비교하고, 상자 속 상자의 경로를 따라가며 값을 확인할 수 있습니다.
그리고 · 또는 · 아니면
「그리고 · 또는 · 아니면」은 자바스크립트의 불리언 연산자 &&, ||, !를 사용해 여러 조건을 연결하는 방법을 배우는 인터랙티브 코딩 학습 앱입니다. 스위치와 전구 회로로 연산 결과를 시각적으로 확인하고, 놀이공원 입장 규칙을 직접 만들며, 진리표를 비교해 부정과 드모르간 법칙을 익힐 수 있습니다.
코드로 그림 그리기
‘코드로 그림 그리기’는 거북이가 명령을 따라 이동하며 SVG 화면에 선을 그리는 코딩 입문 학습 앱입니다. forward·right·left 명령을 쌓아 실행하고, 출발점으로 돌아와 도형이 닫히는 과정을 확인할 수 있습니다.
나만의 함수 만들기
‘나만의 함수 만들기’는 자바스크립트 함수의 기초를 직접 실행하며 배우는 인터랙티브 학습 앱입니다. 반복되는 코드를 함수로 묶으면 수정 횟수가 줄어드는 과정을 비교한 뒤, 매개변수와 return을 사용하는 여러 코드 퍼즐을 풀어 봅니다.
글자를 치면
‘글자를 치면’은 자바스크립트 입력 이벤트와 간단한 문자열 처리를 체험하는 코딩 기초 학습 앱입니다. input 이벤트와 change 이벤트의 반응 시점을 직접 비교하고, 짧은 코드를 읽어 어떤 값을 입력해야 하는지 맞혀 볼 수 있습니다. 여러 입력값을 한 번에 검사하며 기본적인 입력 검증 규칙도 연습합니다.
상자 줄 세우기
상자 줄 세우기는 자바스크립트 배열과 반복문의 기초를 직접 조작하며 배우는 인터랙티브 학습 앱입니다. push·pop·unshift·shift로 값을 앞뒤에 넣고 빼면서 0부터 시작하는 인덱스와 위치 변화를 확인할 수 있습니다.
버튼을 누르면
「버튼을 누르면」은 자바스크립트의 버튼 이벤트, 상태, 이벤트 핸들러를 직접 눌러 보며 배우는 코딩 입문 학습 앱입니다. 언제 동작할지와 무엇이 바뀔지를 고른 뒤 실제 버튼에서 규칙을 실행해 볼 수 있습니다. 변수로 값을 기억하는 방법과 버튼마다 서로 다른 동작을 연결하는 리모컨 만들기도 단계별로 연습합니다.
버그 사냥꾼
버그 사냥꾼은 초보자를 위한 인터랙티브 자바스크립트 디버깅 퍼즐입니다. 나와야 하는 값과 현재 나오는 값을 비교하고, 버그가 있는 줄을 누른 뒤 수정 방법을 선택해 고친 코드의 결과를 확인할 수 있습니다. 7문제 사냥 코스, 무작위 무한 사냥, 자주 나오는 코딩 실수를 설명하는 버그 도감을 제공합니다.
오늘의 코드 퀴즈
오늘의 코드 퀴즈는 짧은 JavaScript 코드를 읽고 실행 결과를 맞혀 보는 초보자용 코딩 학습 앱입니다. 매일 전 세계에 같은 문제 3개가 제공되며, 대입, 문자열 연결, 반복문, 조건문, 배열, 함수, 증감 등 기초에서 자주 헷갈리는 개념을 다룹니다.
아이디어가 있나요? 말로 설명하면 Collabby가 실행·공유할 수 있는 웹앱을 만들어 줍니다.
내 앱 만들기