이번에는 그동안 배운것을 모두 활용해서 추측게임을 완성시켜 보겠습니다. 변수와 루프, If문을 사용해서 앱과 웹사이트, 게임을 만들 수 있습니다. 그럼 간단한 추측게임을 만들어 보겠습니다. 이 게임은 컴퓨터가 선택한 숫자를 추측하는 게임입니다  part 2 나머지내용보기  추측게임 개념설명  개념은 다음과 같습니다.  페이지를 로드하면 사용자는 1부터 10사이의 난수를 예측하라는 요청을 받게 됩니다. 잘못된 숫자를 입력하면 너무 높거나 낮다는 메시지가 출력됩니다. 올바른 숫자를 입력하면 정답이라는 메시지가 출력되고 게임을 다시 할 수 있습니다.  이 게임은 지금까지 우리가 배운 모든 것들이 필요합니다. 구성요소들간의 상호작용, 스타일 바꾸기, 변수와 If문 등 입니다. 아직 어렵다면 각 단계별로 작은 예..

앞의 part 1의 내용에 바로 이어서 이어나가 보겠습니다. 앞에서 입력창에 숫자를 입력하고 버튼을 누르면 바로 아래줄에 그 숫자가 똑같이 출력되는 것까지 했습니다.  이제 이제 난수생성기를 추가하고 사용자의 추측숫자를 생성된 난수와 비교하고 그다음 적절한 메시지를 보여주는 기능까지 구현해 보겠습니다. 난수생성기 추가 & 적절한 메시지보여주기 다음은 모두 자바스크립트 코드이므로 앞의 html코드를 손댈 필요가 없이 그냥 앞전 코드에 몇줄의  코드를 추가만 하면 됩니다.        윗 코드를 실행해 보면 아래처럼 결과가 나옵니다            정답여부에 따라 텍스트컬러 바꾸기 & 다시 시작하는 옵션주기  정답의 여부에 따라 텍스트색깔을 변하게 하는 기능을 만들어 봅시다. 아래 코드를 사용합니다 do..

자바스크립트 난수만들기에 대해 알아봅니다 일명 추측게임이라고도 합니다. 추측게임을 만들기 위해서는 1과 10사이의 전체 난수가 필요하므로 아래 함수를 이용합니다. document.getElementById("my-div").innetHTML = Math.random()   메인리스트로 가기      추측게임이란 ? 어떤 수가 나올지 추측한다는 의미에서 '추측게임'이라고 부른다 이 코드를 실행하면 0부터 10까지의 숫자가 무작위로 하나씩 출력됩니다. 그야말로 복불복 게임이나 복권추첨시 이용할 수 있습니다.  이 코드는 어려워 보이지만 해석하면 쉽습니다. ' *10은  10으로 곱셈하라'는 의미입니다. 그래서 0과 10사이의  난수를 얻게 됩니다.  Math.floor 부분의 'floor'는 소수점 이하의 ..

이제 여기까지 내용을 소화했다면 자바스크립트로 간단한 추측게임을 만들 수 있는 수준까지 근접하셨습니다. 그러나 그전에 난수를 생성할 줄 알아야 합니다. 난수는 아래 코드를 이용해 만들 수 있습니다. Math.random()  아래 코드를 이용해 실행할 수 있습니다. document.getElementById("my-div").innerHTML = Math.random()    위 코딩을 작성해서 실행해 보겠습니다        결과값입니다    세번을 연속실행해봤는데 무작위로 매번 각각 다른 결과가 나왔습니다.  온라인복권추첨도 이 난수기능을 이용해서 실행된다고 합니다.   메인리스트로 가기

while 문도 중요하지만 for문도 많이 사용됩니다. 같은 기능을 하지만 구조가 약간 다릅니다. 아래 코딩은 for문으로 코딩한 예입니다.       밑줄친 부분은 while문에서 for문으로 바뀐 모습입니다. while 루프와 달리 for문에서는 루프관련 모든 정보가 한 줄에 들어갑니다.  이번 경우 숫자 변수는 'i'라고 설정되었습니다. 그리고 이 변수는 보시는 것처럼 1에서 부터 시작됩니다.  한번에 1씩 증가하고 i가 50보다 작거나 같은 한도에서는 계속 반복됩니다. 효과는 while루프와 똑같이 일치합니다. 어떤 것을 사용할지는 문법에 대한 개인 기호에 달려 있습니다.  위 루프의 결과는 아래와 같습니다             메인리스트로 가기

자바스크립트 반복문 루프에 대해서 연습해 보겠습니다 루프는 동일한 행위에 대해서 반복하는 것입니다 (여기서는 while문을 이용합니다) 구글은 검색결과를 보여주기 위해 '루프'를 사용합니다. 소프트웨어 중 루프기능이 들어 있지 않은 것은 없다고 봐도 됩니다.  이제 루프반복문을 이용한 코드를 작성해 보겠습니다. 기존의 모든 코드를 삭제하고 ' numbers'를 아이디로 비어있는 div를 넣습니다.  웹페이지에 1부터 50까지의 숫자를 출력하는 간단한 루프를 만들어 보겠습니다.  루프를 돌리게 되면 해당숫자의 값이 일정범위 내에서 바뀌면서 입력되는 '변수'가 필요합니다. 변수라는 것은 숫자나 일정한 문자를 담는 도구라고 보시면 됩니다. 변수는  'var'로 표시합니다.   var   number = 1  ..

'what is your name?' 이라는 텍스트와 텍스트 입력박스, submit버튼을 웹페이지에 만듭니다. 그런 다음에 사용자가 자신의 이름을 입력하면 'Hello [이름]!'이라는 텍스트가  페이지에 출력되도록 구성요소를 추가합니다. (이 내용을 수행하려면 사용자의 이름과 자신이 설정한 텍스트를 결합해야 합니다 아래처럼 할 수 있습니다) "Hello" + document.getElementById("name").value + "!"   + 기호는 앞과 뒤의 요소를 사슬과 같이 연결시켜줍니다.  Hello와 텍스트 박스의 값 그리고 !를 함께 결합합니다. 그러면 이내용을 코딩으로 구현해 보겠습니다.      항상 코딩의 논리적인 흐름을 반복해서 연습하세요  이 코딩을 실행하면 결과는 아래처럼 됩니다 ..

지금까지 사용자에게 정보를 알려주고 소통하기 위해 팝업창을 이용했습니다. 그러나 이제 페이지 자체 빈문단에서 메시지를 보여 주는 기능을 구현해 보겠습니다. 웹페이지에서 모든 코드를 삭제하고 아래의 내용대로 코딩을 작성합니다.  'my-paragraph'라는 아이디로 빈문단을 넣고 클릭했을때 'that was easy'라는 내용을 보여주는 팝업창이 뜨도록 버튼을 추가하라 이제 이정도는 쉽게 느껴져야 합니다. 아직도 어려우시다면 앞의 내용들을 반복해서 숙지하시기 바랍니다.  위 상자안의 내용을 코딩해 보겠습니다.    'my-paragraph' 만든다는 것은 글자가 들어갈 공간을 미리 정의해 놓은 것(만들어 놓은 것)이고 여기에는 아무것도 아직 입력하지 말고 버튼을 만들어 그 버튼을 클릭했을때 팝업창에 위의..

자바스크립트를 소개합니다. 자바스크립트는  사용자와 상호작용할 수 있도록 돕는기능을 합니다. 자바스크립트는 독립적인 컴퓨터 프로그램이라는 점에서 '완전한' 프로그램언어입니다.  코더가 원하는 대부분의 일들을 수행하는 소프트웨어입니다.   자바스크립트란 무엇인가  자바스크립트는 이책에서 배우는 첫번째 '제대로 된' 코딩언어입니다. 루프, 변수, IF문같은 프로그래밍툴을 사용할 수 있습니다. 특정한 텍스트를 클릭하면 사라지는 기능부터 구글문서를 위한 오피스 프로그램 같은 완전한 응용프로그램을 생성하는 것까지 전반적인 업무에 사용할 수 있습니다. 페이지 자체를 새로 띄우지 않으면서 쌍방향 기능을 제공하는 모든 웹사이트는 자바스크립트를 사용합니다.   자바스크립트의 특징  자바스크립트는 서버가 아니라 사용자의 ..