HTML/JavaScript 로 로또번호 생성 프로그램 만들기
"로또번호 생성 프로그램 만들기" 포스팅에서의 프로그램 소스에 대하여 포스팅 하도록 하겠습니다
소스는 크게 두 가지 언어로 나누어 집니다.
웹 화면을 구성(디자인)하는 HTML 코드와, 웹페이지의 동작을 담당하는 JavaScript 입니다
먼저 HTML 코드 부분을 보도록 하겠습니다
<CENTER> ☞ 화면 가운데 정렬 시작 부분 이죠 </CENTER> 부분까지의 모든 내용들은 화면 가운데 정렬 됩니다.
<A onclick=randomNum();> ☞ </A> 까지 영역에서 클릭하면, 자바스크립트 코드에서 randomNum() 을 호출 합니다.
즉 클릭 글자 클릭 시..
<DIV style="cursor:pointer; font-size=20px;">클릭</DIV> ☞ 클릭 문구를 화면에 표시합니다.
☞ style 는 글자의 형태를 지정합니다. 커서모양 손 모양으로,
글 사이즈 20 으로 설정 합니다.
</A>
<br/>☞ 한줄 띄우죠~!!
<DIV id=ViewArea style="color:blue; font-size=20px; font-weight:bold;"></DIV> ☞ 로또 번호가 표시 될 영역입니다.
</CENTER>
여기까지 HTML 코드 입니다
"클릭" 문구를 웹 화면에 표시하도록 하고, 클릭했을 경우 JavaScript를 호출 하는 부분들이 있습니다
그리고 자바스크립트에서 동작하여 추출한 로또 번호를 표시 해 줄 영역이 코딩되어 있습니다
이제 자바스크립트 소스 입니다
<SCRIPT> ☞ 스크립트 시작
function randomNum() ☞ ranDomNum() 함수 시작
{
var randomNum = ""; ☞ 변수 선언
var tempRanddomNum = ""; ☞ 변수 선언
for(i=0; i<6; ) ☞ 반복문 설정
{
tempRanddomNum = Math.floor(Math.random() * 45) + 1; ☞ 랜덤 숫자 생성 하여 변수에 담는다(45까지 정수 중 하나)
if(randomNum.indexOf(tempRanddomNum + " ") == -1) ☞ 이미 생성 되었는지 판단(생성안되었으면 안 코드를 읽는다)
{
randomNum += tempRanddomNum + " "; ☞ 화면출력할 변수에 값 저장
i++; ☞ 반복문을 빠져 나오기 위해 변수 값을 플러스 1 해준다
}
if(i == 6) ☞ 변수 값이 6이면 반복문을 빠져 나온다.
break;
}
document.getElementById("ViewArea").innerText = "★ 이번 주 행운의 숫자는 : " + randomNum;
☞ 화면에 출력(HTML코드 중 아이디가 ViewArea 인 부분에 뿌려준다)
}
</SCRIPT>
여기까지 자바스크립트 코드 였습니다
웹화면에 표시 해 줄 로또 번호를 추출하는 기능을 담당하고 있습니다
JavaScript의 랜덤 숫자 생성하는 기능을 이용하는 것입니다
랜덤 숫자 생성 기능은 자바스크립트 언어 뿐 아니라 다른 언어들에도 포함되어 있습니다
어린이 코딩 연습을 위한 스크래치에도 기느이 있으며, MS-SQL에도 기능을 가지고 있습니다
즉, 다른 언어로도, MSSQL 쿼리로도 로또번호자동 생성 기능을 만들 수 있는 것이지요
이렇게 하여 HTML/JavaScript로 로또번호 자동생성 프로그램 소스에 대항 설명을 마치도록 하겠습니다
'프로그래밍 > HTML, CSS, JavaScript' 카테고리의 다른 글
[티스토리] 상단 가로 메뉴 만드는 법 (0) | 2017.09.15 |
---|---|
[티스토리] HTML / CSS 를 활용한 상단 꾸미기 - 메뉴 (0) | 2017.09.08 |
[HTML/JavaScript] 로또번호 생성 프로그램 만들기 (0) | 2017.09.06 |
[티스토리 스킨만들기] 두번째 치환자 적용하기 (4) | 2017.09.01 |
[티스토리 스킨만들기] 로 배워가는 웹 디자인 첫번째 시간 (4) | 2017.09.01 |