목차
- JavaScript 사용 방법
- 세미콜론(;)과 주석
- 데이터 상자 만들기
- 로또 번호 추첨기
로또 번호 추첨기 만들기
자바스크립트로 로또 번호 추첨기를 만들면서 자바스크립트의 기본 개념을 공부해보도록 하겠다.
이 내용은 코드라이언 '일단 만드는 javascript'를 기반으로 정리한 것이다.
JavaScript 사용 방법
자바스크립트를 작성할 때에는 두 가지 방법이 있다.
1. html 파일 안에 작성
2. 별도의 js 파일
html 파일에 작성하는 경우 <body> 태그 안에서 뒷부분에 <script> 태그 안에 입력한다.
자바스크립트로 브라우저 화면에 텍스트를 출력하려면 document.write() 함수를 이용하면 된다.
document.write('브라우저 화면에 출력됩니다');
세미콜론(;)과 주석
세미콜론(;)은 하나의 명령어가 끝났다는 의미이다.
자바스크립트에서는 하나의 명령어가 끝나고 줄바꿈을 해주면 세미콜론을 사용하지 않아도 된다.
그러나 두 개 이상의 명령어를 한 줄에 적는 경우에는 한 명령어가 끝날 때마다 세미콜론(;)을 반드시 붙여줘야 정상적으로 작동한다.
[주석의 용도]
1. 코드 설명을 적어줄 때
2. 코드를 동작시키고 싶지 않을 때
주석으로 표시한 부분은 실행되지 않는다. 표시 방식은 다음과 같다.
//한줄 주석
/*여러 줄 주석*/
데이터 상자 만들기
변수를 설정할 때에는 var을 이용한다.
var 변수명 = 값;
<자료형>
- 문자열(String)
- 숫자(int, float)
- 부울(bool): true, false
자료형을 알아내는 법: typeof 데이터
(ES6)
let 변수명 = 값;
const 변수명 = 값;
로또 번호 추첨기
1. 랜덤으로 숫자 뽑기
Math.random();
▶ 0이상~1미만 실수(float)를 랜덤으로 뽑는다.
var num = Math.random();
document.write(num);
Math.random()*45+1;
▶ 1이상 46미만의 실수
parseInt();
▶소수점은 버리고 정수로 변환
parseInt(Math.random() * 45 + 1);
▶ 1이상~45이하 정수(int)
var num = parseInt(Math.random()*45+1);
document.write(num);
2. 배열에 저장하기
배열은 다음과 같이 사용하면 된다. 대괄호[] 안에 원소를 적어주면 된다.
var lotto = [1, 2, 3, 4, 5, 6];lotto[0] 처럼 인덱스를 이용해서 배열의 원소를 뽑아올 수 있다.
배열이름.push(원소)
▶ 배열의 마지막 값으로 원소를 추가한다.
var lotto = [];
lotto.push(parseInt(Math.random() * 45 + 1));
lotto.push(parseInt(Math.random() * 45 + 1));
lotto.push(parseInt(Math.random() * 45 + 1));
lotto.push(parseInt(Math.random() * 45 + 1));
lotto.push(parseInt(Math.random() * 45 + 1));
lotto.push(parseInt(Math.random() * 45 + 1));
document.write(lotto);
3. 반복문 사용하기
DRY: Don't Repeat Yourself
위의 코드를 보면 불필요하게 반복되는 코드가 너무 많다. 이런 코드는 반복문을 사용하여 간단하게 만들어주는 것이 바람직하다.
반복문은 대표적으로 for문과 while문을 사용할 수 있다.
① for문
for (시작; 끝; 증가) {
반복하려는 코드
}
var lotto = [];
for (var i = 0; i < 6; i++){
lotto.push(parseInt(Math.random() * 45 + 1));
}
document.write(lotto);로또에서는 앞에서 나온 번호와 중복되지 않는다.
만약 중복이 아니라면 .push() 하도록 조건문을 추가해보겠다.
배열.indexOf(값); //값이 있으면 위치, 없으면 -1
var lotto = [];
for (var i = 0; i < 6; i++){
var num = parseInt(Math.random() * 45 + 1);
if (lotto.indexOf(num) == -1) {
lotto.push(num);
}
}
document.write(lotto);중복되지 않는 경우에만 push를 했기 때문에 공이 6개가 되지 않을 수도 있다.
따라서 공이 6개가 될 때까지 반복하도록 수정해야 한다.
② while 반복문 이용
배열.length; //배열의 길이 반환
var lotto = [];
while (lotto.length < 6)
var num = parseInt(Math.random() * 45 + 1);
if (lotto.indexOf(num) == -1) {
lotto.push(num);
}
}
document.write(lotto);
4. 오름차순으로 정렬하기
배열.sort(); //배열 값 정렬
.sort((a, b) =>a-b); //오름차순으로 정렬하기
var lotto = [];
while (lotto.length < 6) {
var num = parseInt(Math.random() * 45 + 1);
if (lotto.indexOf(num) == -1) {
lotto.push(num);
}
}
lotto.sort((a,b)=>a-b);
document.write(lotto);
5. 출력하기
배열에 있는 값을 하나씩 출력해준다.
document.write("<div class='ball ball1'>" + lotto[0] + "</div>");
document.write("<div class='ball ball2'>" + lotto[1] + "</div>");
document.write("<div class='ball ball3'>" + lotto[2] + "</div>");
document.write("<div class='ball ball4'>" + lotto[3] + "</div>");
document.write("<div class='ball ball5'>" + lotto[4] + "</div>");
document.write("<div class='ball ball6'>" + lotto[5] + "</div>");참고) 코드라이언 '일단 만드는 Javascript' 강의