[스크래치] - 초등코딩의 출발 동작 스크립트 익히기

스크래치 코딩의 출발~!!

 

초등학생들의 코딩교육은 부모님들이 충분히 가르쳐 줄 수 있습니다

저와 함께 스크래치 코딩을 출발해 봅시다~!!

 

스크래치란?

MIT 공과대학 미디어랩 연구소가 개발한 어린이 코딩 프로그램으로 보다 쉽고 재미있게 코딩의 핵심 원리를 배울 수 있도록 만든 프로그램입니다.

스크래치를 이용하면 게임, 애니메이션등을 만들 수 있고, 코딩 개념을 익힐 수 있습니다.

 

실습환경

인터넷이 된다면 웹에서 아무런 설치 없이 가능하며, 인터넷이 안될 경우 프로그램을 설치 후 실습 하실 수가 있습니다. 

실습을 위해서 이동 해 주세요 https://scratch.mit.edu/projects/editor/?tip_bar=home

스크래치 코딩이 가능한 웹 화면이 나타납니다.

인터넷 연결 없는 작업환경에서는 스크래치 에디터를 다운받아 설치 후 사용 가능합니다.[다운]

 

 

코딩방법

코딩방법은 간단합니다

움직이기 블록을 스크립트 영역으로 드래그하면 됩니다 그렇게 하여 원하는 기능으로 블록을 조립하면 됩니다

그리고 블록 안의 설정 값을 더블클릭하여, 수정 할 수 있다는 것을 알고 계시면 됩니다

 

  

이제 스크립트 영역으로 옮긴 블록을 더블클릭 해 보세요

왼쪽 고양이가 블록 명령되로 20만큼 움직이는 것을 확인 할 수 있습니다

 

 

스크래치가 아닌 웹 화경 코딩에서는

document.getElementById("moveTarget").style.left = 20;

다양한 방법들이 있지만 예를 들어 이런 방식으로 코딩을 하게 됩니다 예)자바스크립트

아래 X, Y좌표 값을 설정하고 이동을 클릭 해 보세요
 

☞ 이동 X좌표 값 설정 : 이동 Y좌표 값 설정 :

 

움직이는 고양이

 

※ 자바스크립트 소스를 올려 드립니다

function moveAction()

{

  document.getElementById("moveTarget").style.left = Number(document.getElementById("moveTarget").style.left.replace("px","")) + Number(document.getElementById("X").value) + "px";

  document.getElementById("moveTarget").style.top = Number(document.getElementById("moveTarget").style.top.replace("px","")) + Number(document.getElementById("Y").value) + "px";

}

이동 버튼을 클릭하면 moveAction() 함수가 호출되고 고양이의 x축 y축 위치를 입력한 값만큰 더하도록 되어 있습니다

마이너스 값을 입력하게 되면 반대로 움직이겠죠

마무리

스크래치 코딩 첫 시간을 가져 보았습니다

간단하게 고양이 움직이기, 동작 기능에 대하여 알아 보았습니다

그리고 일반 웹 코딩시에는 어떻게 하는지 간단하게 알아 보았습니다

스크래치를 하면서 일반 웹 코딩도 조금씩 알아가도록 하겠습니다

스크래치 코딩만 하는 곳들은 다른 곳들도 있으니, 스크래치 코딩 구현을 하면서 동일한 기능의 웹 코딩에 대하여도 알아가 보도록 하겠습니다

 

그럼 수고하셨습니다