1. JavaScript 사용방법
index.html에서 js쓰기
<script>
document.write("바보")
</script>myScript.js를 html과 연결
js에 아래 입력
document.write("바보")html로 넘어와서 아래 코드 쓰면 연결됨
<script src='myScript.js></script>2. 세미콜론(;)과 주석
세미콜론(;) : 하나의 명령어가 끝났음을 의미, 굳이 안 써도 인식하지만 코드가 연결되어있으면 중간에 써줘야 분리됨.
주석 : 코드 설명을 적어줄 때 / 코드를 동작시키고 싶지 않을 때
// : 한 줄 주석
/**/ : 블록형 주석
3. 데이터 상자 만들기
변수(variable) : 데이터 상자
ex) var 변수명 = 값;
var name = 'L';
var age = 3;
var eyesight = 2.0;
var single = true;
ES6 문법에서는 아래와 같이 변수 선언 가능
let 변수명 = 값;
const 변수명 = 값;
변수 안 데이터의 특징을 자료형이라고 함. 아래와 같음
문자열(String) : 이름이나 문장의 경우 문자열 자료형. "", ''로 감싸줘야 함
숫자(int, float) : 정수형(int) - 30 / 실수형(float) - 1.2
불(bool) : true / false
Typeof 데이터 : 데이터의 자료형을 알아보는 방법, 결과로 자료형 나오게 됨.
4. 로또 번호 추첨기 만들기
1~45 공 중 6개 뽑기
-1 공 하나 뽑기
Math.random(); => 0이상~1미만 실수(float)
var num = Math.random();
document.write(num);
Math.random() * 45 + 1; => 1이상~46미만 실수(float). 그냥 45면 0~45
실수(float)->정수(int) 변환해줘야 함
그러러면 parseInt(); 사용 => 소수점은 버리고 정수로 변환
var num = Math.random() * 45 + 1;
var ball1 = parseInt(num);
document.write(ball1);-2 공 6개 뽑기
배열(Array)
: [] 대괄호 / 서랍장처럼 하나의 변수 안에 여러 개의 값을 넣어줄 수 있음. 여러개의 변수 넣을 필요없어 효율적.
ex) var lotto = [1,2,3,4,5,6];
lotto.push(7); -> .push() : 마지막 값 추가
document.write(lotto[0]); -> 1
<script>
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);
</script>-3 반복문 for
: 특정 횟수 만큼 코드를 동작시킬 때 사용
DRY(Don't Repeat Yourself) : 코드 여러번 반복 지양하라는 코딩 은어
for (시작; 끝; 증가) {
반복하려는 코드
}ex)
for (var i = 0; i < 6; i++) {
document.write(i);
}i++ : i가 1씩 증가
0부터 5까지 찍힘
->
var lotto = [];
for (var i = 0; i < 6; i++){
lotto.push(parseInt(Math.random() * 45 + 1));
}
document.write(lotto);-4 조건문 if
if (조건) {
참일 경우
}
만약 중복이 아니라면 .push()
.indexOf(값) : 값이 있으면 위치 index, 없으면 -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);
// 중복된 값은 안 나오게 됨= : 값을 넣는다. 오른쪽 값을 왼쪽에 넣는다
== : 비교한다. 왼쪽과 오른쪽이 같냐? 묻는 것. 같으면 true, 다르면 false.
-5 반복문 while
: 특정 조건까지 계속 반복하는 코드를 작성할 때 사용
while (조건) {
반복하려는 코드
}
.length : 배열의 길이. 배열 안에 몇 개의 값이 들어가있는지 확인할 수 있음.
ex)
<script>
var lotto = [];
while (lotto.length < 6) {
var num = parseInt(Math.random() * 45 + 1);
if (lotto.indexOf(num) == -1) {
lotto.push(num);
}
}
document.write(lotto);
</script>
-6 숫자가 커지는 오름차순 방식 정렬
.sort() => 배열값 정렬
<script>
var lotto = [];
while (lotto.length < 6) {
var num = parseInt(Math.random() * 45 + 1);
if (lotto.indexOf(num) == -1) {
lotto.push(num);
}
}
var lotto = [1,2,3,33,22,11];
lotto.sort();
document.write(lotto);
</script>
// .sort(); 코드에서는 [1,11,2,22,3,33]처럼 사전순으로 정렬됨. .sort((a, b)=>a-b) : 오름차순 정렬, b-a -> 내림차순
// 이렇게 하면 오름차순 정렬돼서 나옴
정리
<!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>
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("<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>");
</script>
</body>
</html>