JS 연결하기
- html 파일 내부에 작성하기
- body태그가 끝나는 지점, body태그 안쪽에 script로 작성. /script로 닫는 태그 필수!
- 외부 js 파일에 작성하기
- script에 src=""속성으로 파일경로를 입력하여 연결
JS 입력하기
document.write();로 화면에 ()안의 말을 출력하여 잘 작동되는지 확인합니다!
;과 //주석주석
- 하나의 명령어가 끝났다면
;를 붙여 끝났다는 것을 명시해준다.;을 붙였다면 줄바꿈을 해주어 가독성을 좋게 해줍니다. - 코드에 설명을 쓰고 싶을 때
//주석을 이용하여 주석을 달아줍니다.//주석은 한 줄을 모두 주석처리하며, 일부 혹은 여러 줄을 하고 싶을 때는/*주석*/을 이용합니다.
JS 변수(variable)
. 변수
let변수를 선언할 때 가장 많이 사용하는 키워드. ES6 이후로 나왔으며, 한 번 선언하면 전역으로 ㄷ등록되는var보단let을 추천!const상수. 한 번 선언하면 데이터를 바꿀 수 없습니다. 따라서 선언할 때 미리 값을 주지 않으면 그 뒤로 추가할 수 없습니다! 단, 배열, 객체 등은 예외...var전역변수 선언
. 자료형
- 문자열 string:
"" '' ``를 사용합니다. - 숫자 number
-1.123123 0 1 -1등등 - 불 boolean
truefalse
JS 랜덤한 숫자
let randomNumber = parseInt(Math.random() * 45 + 1;)
-
Math.random()임의의 숫자를 뽑습니다. ex) 0.123124 -
Math.random() * 450~45까지의 실수를 뽑습니다. -
Math.random() * 45 + 11~45 사이의 실수를 뽑습니다. -
parseInt()()안의 수를 정수로 바꿔준다.
안에 식을 직접 써주어도 되지만, 의미파악이 잘 안되기 때문에 둘로 나누었습니다.
let randomNumber = Math.random() * 45 + 1;
let parsedRandomNumber = parseInt(RandomNumber);배열 자료구조
하나의 변수안에 여러 개의 값을 넣을 수 있습니다. 여러 개의 변수를 만들 필요가 없습니다!
배열의 형태 [ ]안에 여러 값을 넣습니다.
const arr = [1,2,3,4,4,6];
arr 배열에서 1은 배열의 0번째 인덱스입니다. 즉, 0번째 인덱스의 값이 1이라는 것. 또한 여기에서 배열의 마지막 인덱스는 5이며, 값은 6입니다.
배열 마지막에 값을 추가하는 방법 arr.push(8)
반복문
DON'T REPEAT YOURSELF
for, while 두 가지 방법
for(시작; 끝; 증가){
반복하려는 코드
}
while(조건){
반복하려는 코드
}for (var i = 0; i < 6; i++){
document.write(i);
}조건문
if(조건){ 참일 경우 }중복되지 않는 랜덤한 숫자
indexof(값) 값이 있으면 위치, 없으면 -1
배열에서 인덱스는 0부터시작하므로 -1의 인덱스 번호를 가질 수 없습니다!
const lotto = [];
for (var i = 0; i < 6; i++){
const num = parseInt(Math.random() * 45 + 1);
//for문이 반복되면서 새로운 변수가 되기 때문에 const를 쓴다.
if(lotto.indexOf(num) === -1) lotto.push(num);
//if문안에 코드가 한 줄이라면 {} 생략 가능
}
document.write(lotto);이렇게 쓴다면 랜덤한 숫자가 중복되는 경우는 무시되고 반복되는 횟수가 한 번 버려지기 때문에 횟수보다는 특정 조건만 사용하는 while()를 사용해서 바꿔봅시다.
const lotto = [];
while(lotto.length<6){
const num = parseInt(Math.random() * 45 + 1);
if (lotto.indexOf(num) == -1) lotto.push(num);
}
document.write(lotto);length 배열의 길이를 알려줍니다. 배열의 길이가 6보다 작을 때까지만 while내의 코드가 반복된다. 즉, 배열의 길이가 다 채워지지 않는다면 무한반복이 됩니다.
정렬하기
sort()배열이 사전 순으로 정렬됩니다.
사전 순이란 '가', '가나', '나', '나가'... 이런식으로 맨 앞자리를 기준으로 정렬됩니다. 숫자를 사전순이 아닌 오름차순으로 정렬하기 위해 다음처럼 익명함수를 sort()내부에 써줍니다.
lotto.push(num);
lotto.sort((a,b)=>a-b);로또 번호 추첨기
위에서 나온 메서드들을 활용하여 로또 번호 추첨하는 javascript 코드를 만들어보았습니다.
index.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>로또 번호 추첨기</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>로또 번호 추첨기</h1>
<script>
let lotto = [];
while(lotto/length<6){
const randomNumber = Math.random() * 45 + 1;
const parsedRandomNumber = parseInt(randomNumber);
if(lotto.indexOf(parsedRandomNumber) === -1) lotto.push(parsedRandomNumber);
}
lotto.sort((a,b)=>a-b);
for(let i = 0; i<lotto.length; i++){
document.write(`<div class='ball ball${i+1}'>${lotto[i]}</div>`);
//`백틱`내부에 ${}을 쓰면 변수를 쓸 수 있다.
}
</script>
</body>
</html>style.css
.ball {
float: left;
width: 60px;
height: 60px;
line-height: 60px;
font-size: 28px;
border-radius: 100%;
text-align: center;
vertical-align: middle;
color: #fff;
font-weight: 500;
text-shadow: 0px 0px 3px rgba(73, 57, 0, .8);
margin-right: 6px;
}
.ball1 {
background: #fbc400;
}
.ball2 {
background: #69c8f2;
}
.ball3 {
background: #ff7272;
}
.ball4 {
background: #aaa;
}
.ball5 {
background: #b0d840;
}
.ball6 {
background: #c7c7c7;
}