[javascripts] 맛보기 - 로또 번호 추첨기
javascripts
자바스크립트
쉽고 재미있게 배울 수 있음. 직관적임.
활용 범위가 넓다. == 양질의 오픈코드소스가 많이 있다.
로또 번호 추첨기 만들어 보기
Javascripts 사용하는 방법
- html
- js 파일
- html 방법
html 의 body 테그 아랫부분에 js 를 작성한다.
document.write();
괄호 안에 쓰고 싶은 말을 쓰면 화면에 표시된다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript 사용 방법</title>
</head>
<body>
<h1>JavaScript 사용 방법</h1>
<script>
document.write('코드라이언 짱짱')
</script>
</body>
</html>- js 파일 방법
myScripts.js 파일에 작성
html과 연결 시켜줘야한다.
<scripts src="myScripts.js'></scripts>html 파일
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript 사용 방법</title>
</head>
<body>
<h1>JavaScript 사용 방법</h1>
<script src='myScripts.js'>
</script>
</body>
</html>js 파일
document.write('코딩 짱짱짱')세미콜론(;)과 주석
세미콜론 == 하나의 명령어가 끝났음.
자바 스크립트는 세미콜론이 없어도 알아듣는다.
코드가 한줄로 작성되어있다면 => 세미콜론이 필요하다.
주석
= 컴퓨터가 읽을 수 없는 글
- 코드를 설명 적어줄때
- 특정 코드를 동작시켜주기 싫을때
// == 안녕이라는 글씨를 나타내는 코드
주석 단축키 ==Ctr + / <- 한번 해보자!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body>
<h1>JavaScript 사용 방법</h1>
<script>
// document.write('안녕')
document.write('하이')
</script>
</body>
</html>데이터 상자 만들기
자바 스크립트에서 변수는 ==var
var 변수명 = 값 ;
자료형
1. 문자형 == string " " , ' '
2. 숫자 == 정수형, 실수형
3. 불 == true false
typeof 데이터 == 결과로 데이터의 타입을 알려줌
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>데이터 상자 만들기</title>
</head>
<body>
<h1>데이터 상자 만들기</h1>
<script>
var name = '엄준식';
document.write(name);
</script>
</body>
</html>로또 번호 추첨기1
1~45공중 6개 뽑기
공1개 부터 뽑 아보자
Math.random();== 0이상 1미만의 실수가나온다.
Math.random()*45 + 1== 1~ 46미만 실수
parseInt() ;== 소수점은 버리고 정수로 변환
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>로또 번호 추첨기 1</title>
</head>
<body>
<h1>로또 번호 추첨기 1</h1>
<script>
var num = Math.random()*45+1;
var ball1 = parseInt(num);
document.write(ball1);
</script>
</body>
</html>로또 번호 추첨기2
1~45 공중 6개 뽑기
-> 공 6개 뽑기
만약 수백 수천개라면 .. 힘들다
Array(배열)을 사용한다.
여러개의 변수를 만들 필요가 없다.
var lotto = [1,2,3,4,5,6];
index의 첫번째는 0번으로
lotto[0] =1 이다.
array에서
.push == 마지막 값 추가
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>로또 번호 추첨기 </title>
</head>
<body>
<h1>로또 번호 추첨기 </h1>
<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>
</body>
</html>로또 번호 추첨기3
똑같은 코드가 반복되면, 안된다!
그걸 고쳐보자!
for (시작; 끝; 증가){
반복하려는 코드
}
실습
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>로또 번호 추첨기 </title>
</head>
<body>
<h1>로또 번호 추첨기 </h1>
<script>
var lotto =[];
for(var i=0; i<6;i++){
lotto.push(parseInt(Math.random()*45+1));
}
document.write(lotto);
</script>
</body>
</html>로또 번호 추첨기4
중복값 제하기 위해
만약 중복이 아니라면 .push()
조건문 사용해보자
if (조건){
}
.indexOf(값)
== 값이 있으면 위치, 없으면 -1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>로또 번호 추첨기 </title>
</head>
<body>
<h1>로또 번호 추첨기 </h1>
<script>
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);
</script>
</body>
</html>로또 번호 추첨기5
중복이 되면 5개만 나올 수 있음.
공이 6개 일때까지 뽑도록 해보자
for, while
while(조건){
반복하려는 코드
}
.length
배열의 길이
실습
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>로또 번호 추첨기 </title>
</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);
}
}
document.write(lotto);
</script>
</body>
</html>로또 번호 추첨기 6
로또 번호 추첨기 완성 시켜보기
-> 오름차순 방법으로 정렬해보자
.sort()
배열의 값 정리
-> but 사전순으로 정리
숫자의 크기 순으로 정렬해보자
.sort((a,b)=> a-b)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>로또 번호 추첨기 </title>
</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(lotto);
</script>
</body>
</html>완성~!
Author And Source
이 문제에 관하여([javascripts] 맛보기 - 로또 번호 추첨기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@been_gam/javascripts-맛보기-로또-번호-추첨기저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
