즐기며 익히는 한자 게임

한자를 조금 더 재미있게 익힐 수 있도록 사이트에 게임을 하나 만들었습니다. 한자의 원리를 알고 익히는 것이 순서이지만, 아이들은 게임을 좋아하니 조금 더 쉽게 다가갈 수 있으리라 생각됩니다. 게임을 한 후 틀린 한자로 쓰기 노트를 만들 수 있도록 하였습니다. 눈으로 익히는 것보다 쓰는 것이 한자를 더 빨리 익힐 수 있고, 두뇌 발달에도 도움이 됩니다.

 

익스플로러로 접속하시면 아래처럼 화면이 깨지거나, 인쇄가 올바르지 않습니다. 크롬으로 접속해주세요~

크롬으로 접속하면 아래처럼 조금 더 깔끔하게 보입니다. 디자인이 구린건 어쩔 수 없군요.. 기능에 충실하려고 노력했습니다.

회원가입은 필요 없습니다. 다만 차이점은 회원가입을 하면 급수가 저장이 되어 다음번에 접속해도 자신의 급수에서 시작할 수 있습니다. 회원가입은 그냥 패스하시고 그러면 닉네임이 손님으로 나옵니다. 8급외에는 열쇠로 잠겨 있지만 각 단계에서 80점을 넘으면 열쇠가 없어지면 다음 단계에 도전할 수 있습니다.

8급을 해 보았습니다. 90점을 맞았네요. 80점을 넘으면 위 이미지 처럼 준 7급 열쇠모양이 사라지며 선택후 도전할 수 있습니다. 오른쪽에 게임 시간과 점수가 순위 별로 기록이 됩니다. 문제를 틀리면 위 그림처럼 하트가 뒤집어 지면서 틀린 한자가 기록이 되는데요, 7개의 하트가 모두 없어지면 아래 이미지 처럼 게임이 끝납니다. 하트가 있으면 다음 급수에 도전하면 됩니다.

 

하트가 모두 없어지면 GAME OVER 글씨 아래 틀린한자 공부하기 버튼을 누르시면 아래와 같은 쓰기 노트를 만들 수 있습니다. 크롬으로 인쇄해야지 아래처럼 깔끔합니다.

▶ 한자게임 바로 가기

 

위 링크를 클릭하면 연결이 됩니다.

오류 및 버그를 발견하신다면 덧글 달아 주시면 큰 도움이 될 것 같습니다.

 

다음에는 고사성어 게임을 만들어 볼 예정입니다. 이번엔 얼마나 걸릴런지...

 

어쨌든 모두들 즐거운 한자 공부 되시길 바랍니다~

愚公移山(우공이산)

먼 옛날 태행산(太行山)과 왕옥산(王玉山) 사이의 좁은 땅에 우공(愚公)이라는 90세 노인이 살고 있었다. 그런데 사방 700리에 높이가 만 길이나 되는 두 큰산이 집 앞뒤를 가로막고 있어 왕래에 장애가 되었다. 그래서 우공은 어느 날, 가족을 모아 놓고 이렇게 물었다. '나는 너희들이 저 두 산을 깎아 없애고, 예주(豫州)와 한수(漢水) 남 쪽까지 곧장 길을 내고 싶은데 너희들 생각은 어떠냐?' 모두 찬성했으나 그의 아내만은 무리라며 반대했다. '아니, 늙은 당신의 힘으로 어떻게 저 큰 산을 깎아 없앤단 말예요? 또 파낸 흙은 어디다 버리고?' '발해(渤海)에 갖다 버릴 거요.' 이튿날 아침부터 우공은 세 아들과 손자들을 데리고 돌을 깨고 흙을 파서 삼태기로 발해까지 갖다 버리기 시작했다. 한 번 갔다 돌아오는데 꼬박 1년이 걸렸다. 어느 날 지수라는 사람이 '죽을 날이 멀지 않은 노인이 정말 망녕'이라며 비웃자 우공은 태연히 말했다. '내가 죽으면 아들이 하고, 아들은 또 손자를 낳고 손자는 또 아들을…‥. 이렇게 자자손손(子子孫孫) 계속하면 언젠가는 저 두 산이 평평해질 날이 오겠지.' 이 말을 듣고 깜짝 놀란 것은 두 산을 지키는 사신(蛇神-산신령)이었다. 산이 없어지면 큰일이라고 생각한 사신(산신령)은 옥황 상제(玉皇上帝)에게 호소했다. 그러자 우공의 끈기에 감동한 옥황상제는 역신(力神) 과아의 두 아들에게 명하여 각각 두 산을 업어 태행산은 삭동(朔東) 땅에, 왕옥산은 옹남(雍南) 땅에 옮겨 놓게 했다. 그래서 두 산이 있었던 기주(冀州)와 한수(漢水) 남쪽에는 현재 작은 언덕조차 없다고 한다. [글출처 : 사이버백과 고사성어]

사자소학 쓰기 노트

 사자소학 쓰기노를 한달여를 거쳐 드디어 완성하였습니다. 8자를 하루 공부양으로 정하고 160일 분량으로 만들었습니다.

 사자소학은 조선시대에 서당에서 한문학습을 시작한 어린이들에게 한자를 가르치기 위해 만들어진 기초 한문학습 교재입니다. 사자소학 속에는 수신(修身), 처신(處身), 대인관계 및 예의 범절 등 기본 도리와 윤리, 생활 규범에 관한 내용이 주를 이루고 있습니다. 아이들이 한문을 통해 인성을 기르고 자연스럽게 한자를 익히게 하고자 사자소학 쓰기 노트를 만들었습니다. 물론 유교적인 사상이 담겨 있긴 하지만.. 

 다음 링크된 사이트에서 160일 분량을 모두 출력하실 수 있습니다. 아래 올려드린 이미지처럼 인쇄하실 수 있습니다. 크롬외 브라우저는 인쇄가 조금 깔끔하지 않게 나옵니다.

사자소학 쓰기 노트

http://www.hasol-ed.com/html/saja.html

위 사이트의 모든 자료는 무료이구요. 무료회원 가입 후 정회원(당연 무료)으로 등업 하시면 됩니다. 한문 공부에 도움되시길 바랍니다~ 

변수 타입 체크 typeof

결과

변수의 타입을 체크 하기 위해서 typeof 연산자를 이용할 수 있다. C언어는 변수를 선언할 때 데이터 타입을 지정하지만 자바스크립트는 변수의 타입을 지정하지 않는 느슨한 타입 체크 언어이다. 그렇기 때문에 변수의 타입을 따로 체크해야 할 때가 있다. 변수 타입의 종류는 number, string, boolean, object, undefined가 있다. 넘버 타입을 체크 해 보자.

HTML은 다음과 같이 코딩하였다. 확인 버튼을 누르면 결과에 타입을 표시한다.
<input onclick="myTypeOf()" type="button" value="확인" />

스크립트는 다음과 같이 코딩하였다. 결과란에 string을 출력한다. "문자"를 숫자로 바꿀 경우 number를 출력한다.
<script>
function myTypeOf(){
var x = "문자";
var x = typeof x;
document.getElementById("type_result").innerHTML=x;
}
</script>

주의할 점은 typeof 연산자를 input 태그로 사용자로 부터 입력 받은 값을 체크할 경우 숫자, 문자열 관계 없이 string을 출력한다.
<input type="text"> 또는 <input type="number"> 또는 <input type=""> 이와 같이 타입을 써주지 않아도 typeof로 사용자로부터 받은 입력 값을 체크하면 string를 출력한다.

사용자로부터 입력 받은 값이 문자인지, 숫자인지 체크하려면 다른 방법이 필요하다. 아니면 내가 잘 모르는 것일지도..

破釜沈舟(파부침주)

겉뜻 : 솥을 깨뜨리고 배를 가라앉히다. 속뜻 : 살아 돌아오지를 기약하지 않고 결사적 각오로 싸우다. 진(秦)나라 말기 영웅들이 천하를 다툴 때의 이야기이다. 급격히 추진된 진나라의 통일정책과 대국민 토목공사 등으로 백성들의 부담이 가중되면서 민심이 동요하기 시작하자, 진 시황제 말년에 극단적인 탄압정책이 시작되었다. 진나라의 폭정을 견디다 못한 백성들은 시황제의 죽음을 계기로 여기저기서 들고일어났다. 이에 진나라는 장군 장한(章邯)을 내세워 항량(項梁)을 정도(定陶)에서 대패시키고 그를 죽게 했다. 장한은 이 승세를 타고 조왕(趙王)을 크게 격파하고, 쥐루를 포위하였다. 그러자 이에 맞서 항량의 조카 항우는 영포(英布)를 보내 막게 했지만 역부족이었다. 다급해진 조왕의 대장 진여(陳餘)가 항우에게 구원병을 요청하기에 이르렀다. 항우는 진나라를 치기 위해 직접 출병하기로 했다. 항우의 군대가 막 장하를 건넜을 때였다. 항우는 갑자기 타고 왔던 배를 부수어 침몰시키라고 명령을 내리고, 뒤이어 싣고 온 솥마저도 깨뜨려 버리고 주위의 집들도 모두 불태워버리도록 했다. 그리고 병사들에게는 3일 분의 식량을 나누어 주도록 했다. 이제 돌아갈 배도 없고 밥을 지어 먹을 솥마저 없었으므로, 병사들은 결사적으로 싸우는 수밖에 달리 방법이 없었다. 과연 병사들은 출진하라는 명령이 떨어지기가 무섭게 적진을 향해 돌진하였다. 이렇게 아홉 번을 싸우는 동안 진나라의 주력부대는 궤멸되고, 이를 계기로 항우는 제장(諸將)의 맹주가 되었다. [글출처 : 사이버백과 고사성어] 출전 : [史記 - 항우본기] 유사성어 : 背水之陣

자바스크립트 getElementsByName 으로 속성 변경하기

이름에 현빈을 입력 후 확인 버튼을 누르시면 text박스 안의 값이 변경됩니다. 다른 이름을 입력하였을 때에는 placeholder값이 바뀌게 됩니다. 테스트 해 보세요.

이름 :
생년월일 :
신체사항 :

서버로 파일을 전송할 때 <form>태그를 사용하고 name 속성을 사용하여 값을 서버로 전달하게 됩니다. name 속성을 사용하여 선택하고 전달할 값을 동적으로 바꾸는 코딩을 시도해 보았습니다. 물론 ID 를 이용하여 선택할 수 있지만 name을 이용하면 따로 ID를 지정하지 않고 선택할 수 있으며, 특히 라디오(radio)버튼 - 라디오 버튼은 같은 name을 씁니다 -을 이용할 때 getElementsByNmae[n]처럼 사용할 수 있기 때문에 편리합니다.

우선 다음과 같이 HTML을 코딩합니다.

<form>
이름 : <input name="real_name" placeholder="이름을 입력하세요" type="text" /><input onclick="myFunctionA()" type="button" value="확인" /><br />
생년월일 : <input name="real_birth" placeholder="생년월일" type="text" value="" /><br />
신체사항 : <input name="real_physical" placeholder="신체사항" type="text" value="" /></form>

* placeholder 속성은 text(텍스트) 박스 안에 써야 할 사항에 대한 힌트를 보여줍니다.
확인 버튼을 클릭하면 myFunctionA()함수를 호출하도록 하였습니다. 함수에서는 '현빈'이라는 이름을 입력하게 되면 자동으로 생년월일과 신체사항란에 값이 자동으로 입력되게 할 수 있도록 코딩합니다. '현빈'외에 다른 이름이 입력되면 placeholder 값이 '입력하세요' 변경되도록 하겠습니다.
다음은 자바스크립트 소스입니다.

<script>
function myFunctionA(){
  var x= document.getElementsByName("real_name")[0].value;//이름에 입력된 value를 가져옵니다.
  if(x=="현빈"){
    document.getElementsByName("real_birth")[0].value="1982년 9월 25일";
    document.getElementsByName("real_physical")[0].value="184cm, 74kg";
  }else{
    document.getElementsByName("real_birth")[0].placeholder="입력하세요";
    document.getElementsByName("real_physical")[0].placeholder="입력하세요";
 }
}
</script>

자바스크립트 속성 동적으로 수정, 변경하기

위 그림을 클릭하면 배경색이 파란색으로 변경, 수정 된다.

다음은 HTML5 소스코드이다.
우선 가로,세로 100px, 배경은 빨간색을 가진 div를 만든다. 클릭하면 myFunction()함수를 호출한다.

<div id="myid" style="width:100px;height:100px;background:red;" onclick="myFunction()">

다음은 자바스크립트 코드이다. 아래처럼 속성을 변경 및 수정할 수 있다.
변수 x에 ID가 'myid'인 div를 할당한다.
다음은  getAttributeNode 를 사용하여 배경색을 바꾸면 끝.

<script>
function myFunction() {
    var x = document.getElementById("myid");
    x.getAttributeNode("style").value = "width:100px;height:100px;background:blue;";
}
</script>

위와 같은 방법으로 클릭하면 이미지 파일이 변경, 수정되는 코드를 작성 할 수 있다.