📚 공부한 내용

일단 만드는 JavaScript

• 자바스크립트는 css와 동일하게 html 안에서 <script>로 묶어 작성할 수도 있다
• 또한 <scirpt src="파일경로"> 별개의 .js 파일에 작성하여 연결시킬 수 있다.
• 자바스크립트의 주석은 한줄일 경우 // document.write('안녕'); 여러 줄일 경우 /* document.write('안녕'); document.write('하세요'); */ 로 묶어주면 된다.
• 변수 선언은 var로 선언할 수 있고 ES6에서는 let과 const로 선언도 가능하다
• 변수의 형태에는 기본적으로 stign, number, boolean이 있다. type of 데이터를 이용해 데이터의 타입을 알 수 있다.

로또 번호 추첨기

임의의 수 출력하기

• Math.random() 함수로 임의의 숫자 출력할 수 있지만 0이상 1미안의 실수형 숫자가 나온다.
• Math.random() * 45와 같이 45를 곱해준다면 0이상 45 미안의의 숫자가 나오게 된다.
  따라서 Math.random() * 45 +1 1을 더해주어 1이상 46 미안의 숫자를 출력하자.

정수형 출력하기

• 이때 정수형의 숫자를 출력해야 하기 때문에 pareInt(Math.random() * 45 +1) 함수를 사용해 정수형으로 출력하자.

6개의 수 출력하기

• 로또 번호는 총 6개이기 때문에 6번의 변수를 선언해야 하지만 배열을 이용해 하나의 변수에 여러가지 값을 저장해 여러개의 변수를 선언할 필요가 없다.
• 배열에서 값을 불러올 때는 index의 번호를 이용해 불러온다.
  var lotto = [1, 2, 3, 4, 5, 6] 일때 3이라는 값은 lotto[2]이다.
• 배열의 마지막에 값을 추가하고 싶다면 lotto.push(7). push() 메소드를 이용해 추가할수 있다.
• 6개의 로또 번호를 let lotto = [] 안에 추가하려면 lotto.push(pareInt(Math.random() * 45 +1))를 6번 반복해야하지만 "DRY(Don't Reapeat Yourself)" for 반복문을 이용해 해결 할 수 있다.

반복되는 수 걸러내기1

• for문의 기본형은 for(시작; 끝; 증감식) { 반복하려는 코드 }이다.
• 로또 번호는 중복 값이 없기 때문에 if문을 이용해 중복값을 제외하고 출력할 수 있다.
  if문의 기본 형은 if (조건) { 조건이 참일 때 실행될 코드 }
• 또한 배열 안에서 중복값을 검사하는 방법은 .indexOf(배열의 값)을 이용해 찾을수 있다.
  중복값이 있다면 값의 index번호가 나오고 없을 경우 -1이 나온다.
  즉, .indexOf(배열의 값)의 값이 -1일 경우에만 lotto.push()하자
• 중간 결과

<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>

반복되는 수 걸러내기2

• 하지만 위의 경우에서 중복되는 값이 나오는 경우 조건문에서 걸러지기 때문에 총 push되는 값은 중복되는 값이 걸러지는 경우만큼 제외된다.
  이를 위해 값을 6번만 값을 뽑는것이 아닌 값이 6개가 될 때까지 반복해야한다.
• for문 보통 특정 횟수만큼, while은 특정 조건까지 반복한다.
  while의 기본형은 while (조건) { 반복하려는 코드 }
• 공이 6개인지 판단하기 위해서는 배열의 길이 즉, 배열 안의 값이 몇개인지 판단하기 위해서는 배열.length를 이용하면된다.
  따라서 위의 중간 결과를 while (lotto.length < 6) { 중간 결과 }로 조건을 걸어주자

오름차순 정렬하기

• 로또 번호를 보기 쉽게 순차적으로 만들고 싶다면 sort() 메소드를 이용하면 배열의 값을 정렬시킬 수 있다.
• [1, 2, 3, 33, 22, 11]일떄 sort()메소드를 사용한다면 사전순으로 정렬되기 때문에 [1, 11, 2, 22, 3, 33] 사전순으로 정렬되는데 이를 해결하기 위해서는 .sort((a, b) => a - b) 이와같이 정렬해서 오름차순으로 정렬할 수 있다. 내림차순은 .sort((a, b) => b - a) 이다.

최종 결과

<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>

자소서 글자수 계산하기

texarea 텍스트에 따라 글자수 체크하기

• DOM이란? Document Object Model의 약자로 웹화면을 구성하는 html에 쉽게 접근할 수 있는 모델이다.
  이를 이용해 자바스크립트를 통해 화면을 구성하는 코드를 원하는데로 변경할 수 있다.

• 예를 들어 html에서 <h1 id="title">일때 document.getElementById('title')를 이용해 불러올 수 있다. 이때 document.getElementById('title').innerHtml을 이용해 태그 안에 텍스트만 불러올 수도 있다.

• 중간결과

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

    <script>
        var content = document.getElementById('jasoseol').value;
        document.getElementById('count').innerHTML = '(' + content.length + '/200)';
    </script>

함수 사용하기

• 문제점은 글자를 입력할 때마다 갱신되는 것이아니기 때문에 함수를 이용해 글자를 입력할 때마다 textarea의 글자 즉, 값이 변경 될 때마다 변경해보도록 하자
  즉 키보드를 누를때 마다 글자수를 세는 함수가 실행되어야 한다.
  - 키보드를 누를 때마다: 이벤트
  - 글자수를 세는: 이벤트 핸들링
  - <textarea 이벤트=이벤트 핸들링>
• 중간결과

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

function counter() {
	var content = document.getElementById('jasoseol').value;
	document.getElementById('count').innerHTML = '(' + content.length + '/200)';
};
	counter();

글자수 200자로 제한하기

• .substring(0이상 ,200미만) 메소드를 이용해서 200글자 이상의 글씨는 잘라낼 수 있다.

• 최종결과

    <textarea class="form-control" rows="3" id="jasoseol" onkeydown="counter();">저는 인성 문제가 없습니다.</textarea>
    <span id="count">(0/200)</span>
    <script>
        function counter() {
            var content = document.getElementById('jasoseol').value;
            if (content.length > 200) {
                content = content.substring(0,200);
                document.getElementById('jasoseol').value = content;
            }
            document.getElementById('count').innerHTML = '(' + content.length + '/200)';
        }
        counter();
    </script>

스타크래프트

jQuery

• 자바스크립트보다 DOM을 제어하기가 쉽고 즉, 문법이 간단하고
• 편리한 API, 크로스 브라우징이 가능하다.
• 사용법 위의 링크로 접속해 최신 버전의 minified cdn <script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>을 이용
• 기본형 $(선택자).행위
• 함수를 호출하기 위해서는 정의를 해야하는데 익명 함수를 이용해 호출하면 따로 함수를 정의해줄 필요가 없다.

function hello() { console.log("hello"); }

$("#click").click(function() { console.log("hello"); })

드론 클릭시 침 나오게 하기 & 이동 시키기

$('#drone').click(function(){
  $('#spit').fadeIn();
  $('#spit').animate({left: '+=250'});
});

드론 클릭시 침 사라지게 하기

$('#drone').click(function(){
  $('#spit').fadeIn();
  $('#spit').animate({left: '+=250'});
  $('#spit').fadeOut();
});

• 이때 두번째 클릭을 하게되면 침이 사라진 위치 즉 (250위치) 사라진 위치에서 시작을 한다.

• 다시 드론 앞으로 원상복귀 시키기 위해서는 .css(변경할 css) 메소드를 이용해 다시 원래 위치로 변경하자
  $('#spit').css(left: "150px");

벙커가 침에 맞을 때마다 체력 달게하기

• 벙커 체력 정의하기 var hp = 3;
• .text() 메소드를 이용해 텍스트 변경하기

    <script>
        var hp = 3;
        $('#drone').click(function(){
            $('#spit').fadeIn();
            $('#spit').animate({left: '+=250'});
            $('#spit').fadeOut();
            $('#spit').css(left: '150px');
            hp = hp - 1;
            $('#hp').text('HP :' + hp);
        });
    </script>

• 이때 문제점이 발생하는데 벙커가 침에 맞은 이후 체력이 감소하는 것이 아니라 드론을 클릭할때 체력이 감소한다.
  이는 코드가 위에서 아래로 차례대로 실행되기 때문이다.
  즉, 체력이 감소하는 메소드가 이동하는 메소드보다 아래에 있어서 발생한다.
  

벙커가 침에 맞은 이후 체력이 감소하게 만들기

• fadeOut([duration [, complete]) complete이 끝난 이후에 실행되게 만들자.
• 결과

    <script>
        var hp = 3;
        $('#drone').click(function(){
            $('#spit').fadeIn();
            $('#spit').animate({left: '+=250'});
            $('#spit').fadeOut(function(){
                hp = hp - 1;
                $('#hp').text('HP :' + hp);
            });
            $('#spit').css({left: '150px'});
        });
    </script>

hp가 0이면 벙커가 사라지게 만들기

    <script>
        var hp = 3;
        $('#drone').click(function(){
            $('#spit').fadeIn();
            $('#spit').animate({left: '+=250'});
            $('#spit').fadeOut(function(){
                hp = hp - 1;
                $('#hp').text('HP: ' + hp);
                if(hp == 0) {
                    $('#bunker').fadeOut();
                }
            });
            $('#spit').css({left: '150px'});
        });
    </script>

기념일 계산기 만들기

객체(Object)

• 배열처럼 여러개의 값을 저장할 수있다.
• key: value value에는 배열, 객체, 함수도 가능하다.
  value값에 함수가 올 경우 method라 부른다.
• 값을 불러올 때는 person.name로 불러온다.
  값이 함수일때 불러오기 위해서는 person.sayHello()

let person = {
	name: "홍길동",
  	age: 20,
  	hobby: ["축구", "농구"],
  	money: {stock: 10, cash: 1},
  	sayHello: function() {console.log("hello")}
}

Date 객체
내장 객체: 미리 특정 기능을 가지고 있는 자바스크립트의 객체

//1. Date 객체 생성
var now = new Date();
//2. 연도를 가져오는 메서드 .getFullYear()
console.log(now.getFullYear());
//3. 월 정보를 가져오는 메서드 .getMonth() {0: 1월, 1: 2월, ... 10: 11월, 11: 12월}
console.log(now.getMonth());
//4. 일 정보를 가져오는 메서드 .getDate()
console.log(now.getDate());
//5. 1970년 1월 1일 00:00:00을 기준으로 흐른 시간을 밀리초로 표시하는 메서드 .getTime()
console.log(now.getTime());
//6. 특정 일의 Date 객체 생성
var christmas = new Date('2020-12-25');
console.log(christmas);
//7. 특정 ms의 Date 객체 생성
var ms = new Date(1000);
console.log(ms);

사귄날 계산하기

// 오늘 날짜
var now = new Date();
// 사귄 날짜
var start = new Date('2023-01-01');

// 오늘 날짜에서 사귄 날짜를 빼기
var timeDiff = now.getTime() - start.getTime();
// ms 단위로 나오기 때문에 1일로 계산하기 위한 계산
var day = Math.floor(timeDiff / (1000 * 60 * 60 * 24) + 1);
console.log(day);

기념을까지의 시간 계산하기

var now = new Date();
var start = new Date('2023-01-01');

var valentine = new Date('2024-02-14');
var timeDiff2 = valentine.getTime() - now.getTime();
var day2 = Math.floor(timeDiff2 / (1000 * 60 * 60 * 24) + 1);

1000일 되는 날짜는 언제인지 계산하기

var now = new Date();
var start = new Date('2023-01-01');

// 1000일에 해당하는 ms 만들기
var ms = start.getTime() + 999 * (1000 * 60 * 60 * 24);
var thousand = new Date(ms);
var thousandDate = thousand.getFullYear() + '.' + (thousand.getMonth()+1) + '.' + thousand.getDate();

오늘부터 1000일까는 얼마나 남았는지 계산하기

var now = new Date();
var start = new Date('2023-01-01');

var timeDiff3 = thousand.getTime() - now.getTime();
var day3 = Math.floor(timeDiff3 / (1000 * 60 * 60 * 24) + 1);

sns에 공유하기

다양한 sns 링크들을 추가할 수 있다: addtihs

광고 붙이기

애드 네트워크: kakao Addfit

사이트 검색되도록 만들기

1. 네이버 웹마스터 및 구글 서치 콘솔도구에 사이트 등록

2. 검색 관련 문서 제출

• 검색 봇 크롤러 사이트 정보를 수집하게되는데 rotots.txt에 크롤링이 가능한지 확인하고 정보를 가져온다
• sitemap.xml을 이용해 크롤러가 사이트를 잘 탐색할 수 있도록 도와준다.

SEO

검색엔진 최적화
1. 내부 요소 최적화(HTML, 컨텐츠, meata 태그 등)
2. 외부 요소 최적화(백링크 개수 등)