로또번호 추첨기

로또 번호 추첨기를 만들어 볼 건데, 가장 기본이되는 javascript의 문법을 알아보자.

자료형

문자열 String
숫자형 자료형 int float
불 자료형 bool - true false

확인하는 방법
Type of ‘변수’

Var name = ‘엄준식’;
document.write(typeof name);

배열

하나의 변수에 여러개를 넣을 수 있어서 편함.

Var lotto = [1,2,3,4,5,6];

여기서 1은 lotto[0]. 즉 0번째이다.
첫번째라해서 인덱스값이 1이 아님. 0임!

.push -> 마지막에 값 추가 가능
lotto.push(7); 이런식으로 끝에 7 추가 가능

Var lotto = []; // 빈 배열을 만들어주고 여기에 push를 통해 랜덤숫자 넣어줌

lotto.push(parseInt(Math.random() *45 +1));

반복문

여기서 6개의 숫자를 넣어줘야 하니까

For ( var i = 0; I<6;i++) {
    lotto.push(parseInt(Math.random() *45 +1));
}

반복문의 문법. 첫번째 var i = 0 이 시작.
0부터 시작을 해서 ,중간에 i<6 즉 5까지 반복을해준다.
i++은 i가 1씩 증가하면서 반복한다는 뜻이다.

조건문 중복제거

로또번호는 중복이 없기때문에, 같은 값이 나오는 경우를 제거해 줘야함.

조건 추가.
만약 중복이 아니라면 -> push
만약 중복이면? -> 푸쉬를 안해주고 다시돌림

조건문 기본구조

if(조건) {
	참일경우 실행
}

어떻게 구분할 것인가. .indexOf(값)
값이 있으면 위치 나타내주고, 없을때 -1이 나타남.
그렇다면 인덱스오브를 실행했을때, -1이 나오면 중복되는 숫자가 없다는 뜻이니까 실행.

Var num = parseInt(Math.random() *45 +1 );
If (lotto.indexOf(num) == -1) {
	lotto.push(num);
}

이렇게하면 안댐 반복문 6번돌고 끝이기때문에.

.length는 배열의 길이를 출력해주는 것인데,

for문을 지우고,
While (lotto.length < 6)
이 문을 입력하면, 6개가 들어가면 끝.

정렬

Lotto.sort((a,b) => a-b);

이러면 오름차순 정렬

끝

DOM

( Document Object Model )

웹 화면을 구성하는 html코드를 쉽게 접근하게 해주는 모델

<h1>안녕</h1>

안에 있는 안녕을 하이로 바꿔준다거나,
클래스를 추가해준다거나, p태그를 추가해준다거나, 즉 화면을 구성하는 모든것에 접근할 수 있고, 수정할 수 있는 것을 돔이라고 함

자소서 숫자 세기 프로그램

이건 js강의이기 때문에 이미 페이지는 만들어져 있어서,
만들어져 있는 구성품의 id를 가져오는 방식으로 진행이 되었다.

html문서 일부 중 문자를 쓰는 공간과, 밑에 글자수를 나타내주는 코드를 가져왔다.

<textarea class="form-control" rows="3" id="jasoseol" onkeydown="counter();">저는 인성 문제가 없습니다.</textarea>
<span id="count">(0/200)</span>

여기서 id값을 추출해주고, 글자수를 세는 counter 이라는 함수를 만들어보자.

<script>
function counter() {
var content = document.getElementById('jasoseol').value;

document.getElementById('count').innerHTML = '(' + content.length + '/200)';
}
counter();
</script>

위 함수로는 그러나 200자가 넘어도 계속계속 세어주게 된다.
때문에 조건문을 추가하여 200자가 넘으면 짤라주는 코드를 작성해보자.

if (content.length > 200) {
content = content.substring(0,200);
document.getElementById('jasoseol').value = content;
}

미니스타크래프트 게임 만들기

HP가 정해져있고, 공격할때마다 HP가 1씩 깎이고, 0에 다다르면 벙커를 파괴하는 게임이다.
이번에는 jquery를 이용해서 하는데, jquery는 다른 문법으로 조금 더 간단하게
id를 불러오거나, 등등 많은 코딩을 할 수 있도록 도와준다.

예를 들어

document.getElementById(‘content’).value 

를 제이쿼리를 이용하게되면

$(‘#content’).val(); 

이 문장하나면 똑같은 기능을 수행한다.

제이쿼리의 장점으로는

1. 간결한 문법
2. 편리한 API
3. 크로스 브라우징

모든 브라우저에서 동일한 동작을 수행할 수 있도록 해주는 크로스 브라우징 기능이 신기했다.

사용법

code.jquery.com 에 들어가서
최신버전 minified를 누르고, 코드를 복사한 후 내 html 코드 Body 부분에 붙혀준다.

jquery 기본문법

$(선택자).행위;

여기서 선택자는 css문법에서 가져오는 문법이랑 비슷하다. ‘ 따옴표 안쪽에 #뒤에 이름을 적어주면 된다.

이벤트

onclick과 같은 js 문법을 다르게 실행 하는 문법은 다음과 같다.

$(‘#click’).click(hello);

침 나타내기

Fading 함수들.

Query 홈페이지
https://api.jquery.com/

에서 API Documentation 에 들어가게 되면, 모든 사용방법이 나와있으니, 여길 참고하면 좋을 것 같다.

Fadein 나타나게하는 함수는
.fadein(duration, complete) 라고한다.

기념일 세기 만들기

객체

이사람은
이름은 조코딩이고
나이는 20살이다

이런 -는 -다 가 있을때, 코드로 표현해주는 것이다.
이걸 표현해주자면

Var person {
	name : ‘geocoding’,
	age: 20
}

가 된다. 이런식으로 앞에 name과 age는 key라고 한다.
뒤에는 값이 되고, 숫자뿐만 아니라 배열, 또다른 객체가 들어갈 수도 있다.
이떈 메소드라고 부른다.

호출할때는 객체.키;
Ex ) person.name;
함수일경우
person.hello()
즉
document.write(); 과 같은 것도 객체였던 것이다.

Var document {
	write : function(){출력해주는거}
	getElementById : function(){id따서 가져오는거}
}

이런식으로 등등 많은 것들이 라이브러리에 엄청나게 선언되어 있겠지..? 하는 생각이 들었다. 대단한 사람들..

Date() 객체 이용하기

• 선언방법

Var 변수이름 = new Date();

이걸 이용해 날짜 계산기 만들기 (d-day)

날짜를 6월 30일이라고 가정하고 지금까지 얼마나 지났는지 알아보자.
현재시간 - 예전시간 을 한다면 얼마나 지났는지 알 수 있다.
그러나 디데이는 사귄날부터 1일이고, getTime으로 얻은건 ms이기 때문에 1000을 곱해주고, 분,초 60,60 24시간 하루를 곱해준 걸로 나눠줘야 한다. 그 후 1을 더해야 정확한 D-day가 설정 가능하다.
그리고 마지막으로 Math.floor을 써서 소숫점을 버려줘야 정수로 나온다. 이때 parseInt가 생각났다.

올림 내림 반올림이 궁금하여 찾아봤는데

Math.round(); - 반올림
Math.floor(); - 내림
Math.ceil(); - 올림

이라고 한다. 어쨌든 날짜 구하기를 코딩해보면

var now = new Date();
var start = new Date('2020-06-30');

var timeDiff = now.getTime() - start.getTime();
var day = Math.floor(timeDiff / (1000 * 60 * 60 * 24) + 1);
$('#love').text(day + '일째');
console.log(day);

이렇게 된다.

이번엔 기념일까지 얼마나 남았는지 계산해보자.

계산법은

기념일 - 오늘 을 뺴주면 된다.

var valentine = new Date('2021-02-14');
var timeDiff2 = valentine.getTime() - now.getTime();
var day2 = Math.floor(timeDiff2 / (1000 * 60 * 60 * 24) + 1);
$('#valentine').text(day2 + '일 남음');

이 두개만 잘 이용해도 모든 기념일 계산기를 만들 수 있다.

Github push하기

// 시작하기: git init
// 유저 이름 설정: git config --global user.name "codelion-jocoding"
// 이메일 등록: git config --global user.email #####@gmail.com
// 파일 추가: git add .
// 메세지 입력: git commit -m "first commit"
// 보낼 곳 등록: git remote add origin https://github.com/codelion-jocoding/myrepo.git
// 보낼 곳으로 코드 전송: git push origin master

터미널에서 이것만 입력해줘도 완벽가능!

뭔가 오늘이 제일 강의도 많고 만들것도 많아서 엄청 유익했던 것 같다.
Javascript 와 jquery를 이용해 보며 비록 간단한 기능들이였지만
많은 것을 체험해 볼 수 있었던 강의였다! 감사합니다 조코딩님 :)