멋쟁이사자처럼 프론트엔드 스쿨 7기 학습내용 정리 및 복습
멋사 테킷 강의는 강의 화면에서 바로 실습해볼 수 있는 점이 굉장히 신기했고, 자체 미니 브라우저와 콘솔 창을 통해 결과도 바로 확인할 수 있어서 편리했다.
[JS기초 클래스]
1. JavaScript 사용 방법
2. 로또 번호 추첨기
3. 글자수 계산기
4. 기념일 계산기
<body>
<h1>JavaScript 사용 방법</h1>
<script>
document.write('자바스크립트 연결')
// document.wirte() 웹 문서에 콘텐츠를 출력하는 방법
</script>
</body>
<body>
<h1>JavaScript 사용 방법</h1>
<script src="myScript.js"></script>
</body>
var 변수명 = 값;
var name = '홍길동';
var age = 30;
var eyesight = 1.2;
var single = true;
// 각 데이터 마다 특징이 다른데, 이것을 '자료형' 이라고 함
// 문자열(String) : "홍길동", '홍길동'
// 숫자(int, float) : 정수형(int) - 30 , 실수형(float) - 1.2
// 불(bool) : true, false (진실인지 거짓인지)
// typeof 를 통해 해당 데이터의 자료형이 무엇인지 확인할 수 있음
(ES6 최신문법)
let 변수명 = 값;
const 변수명 = 값;
// for문 기본 문법
for (시작; 끝; 증가) {
반복하려는 코드
}
/* i가 0부터 반복하려는 코드를 한번씩 실행할때마다 i가 1씩 증가하게 되고,
계속 코드가 실행되고 증가하고 반복하다가 i가 6이 되면, '끝' 조건이 깨지면서 반복문 종료 */
for (var i = 0; i < 6; 1++) {
반복하려는 코드
}
var lotto = [];
for (var i = 0; i < 6; i++) {
lotto.push(parseInt(Math.random() * 45 + 1));
}
document.write(lotto);
// if 조건문 기본문법
if (조건) {
참 일 경우
}
//만약 중복이 아니라면 .push()
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);
.length
: 배열의 길이// while문 기본 문법
while (언제까지 반복할지 조건) {
반복하려는 코드
}
var lotto = [];
while (lotto.length < 6) {
var num = parseInt(Math.random() * 45 + 1);
if (lotto.indexOf(num) == -1) {
lotto.push(num)
}
}
document.write(lotto);
.sort() //배열 값 정렬
var lotto = [1,2,3,33,22,11];
lotto.sort(); //사전 순으로 정렬되기때문에 결과가 1,11,2,22,3,33 으로 나옴
document.write(lotto);
var lotto = [1,2,3,33,22,11];
.sort((a, b)=>a-b) //숫자 오름차순 정렬 (b-a)는 내림차순
document.write(lotto);
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);
DOM
.length
: 문자열의 길이를 나타냄<h1>자기소개</h1>
<textarea class="form-control" rows="3" id="jasoseol">안녕하세요.</textarea>
<script>
var content = document.getElementById('jasoseol').value;
console.log(content.length);
</script>
<h1>자기소개</h1>
<textarea class="form-control" rows="3" id="jasoseol">안녕하세요.</textarea>
<span id="count">(0/200)</span>
</textarea>
<script>
var content = document.getElementById('jasoseol').value;
document.getElementById('count').innerHTML = '(' + content.length + '/200)';
</script>
// function 기본식
function 함수이름() {
명령어1;
명령어2;
}
<h1>자기소개</h1>
<textarea class="form-control" rows="3" id="jasoseol">안녕하세요.</textarea>
<span id="count">(0/200)</span>
</textarea>
<script>
function counter() {
var content = document.getElementById('jasoseol').value;
document.getElementById('count').innerHTML = '(' + content.length + '/200)';
};
counter();
</script>
// 기본 문법: 사용할 태그 안에 이벤트=이벤트핸들링 작성
<textarea 이벤트=이벤트핸들링></textarea>
<h1>자기소개</h1>
<textarea onkeydown='counter()' class="form-control" rows="3" id="jasoseol">안녕하세요.</textarea>
<span id="count">(0/200)</span>
</textarea>
<script>
function counter() {
var content = document.getElementById('jasoseol').value;
document.getElementById('count').innerHTML = '(' + content.length + '/200)';
};
counter();
</script>
<h1>자기소개</h1>
<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>
/* 함수 counter선언
변수 content = id jasoseol 안의 값
만약, content가 200글자가 넘어가면
content 안의 글자를 200글자까지 잘라줘
200글자까지 자른 content는 id jasoseol의 content가 될거야
id count에는 content의 입력한 글자수와 200글자 제한 이라는 표시가 나타나게 해줘
counter();
*/
객체(Object) 알아보기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>객체(Object)</title>
</head>
<body>
<h1>객체(Object)</h1>
<script>
var person = {
name: '홍길동',
age: 20,
hobby: ['코딩','건강식 만들어 먹기','예능 보기'],
sayFighting: function() { console.log('다이어트 화이팅'); },
}
console.log(person.name);
console.log(person.age);
console.log(person.hobby[1]);
person.sayFighting();
</script>
</body>
</html>
// var now = new Date();
<h1>Date 객체</h1>
<script>
//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('2023-12-25');
console.log(christmas);
//7. 특정 ms의 Date 객체 생성
var ms = new Date(1000);
console.log(ms);
</script>
<div class='container d-flex flex-column justify-content-center align-items-center mt-3'>
<h3>갑돌♥갑순</h3>
<h3 id='love'>0일째</h3>
<h4 class="date">2022.6.30</h4>
</div>
<script
src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous"></script>
<script>
var now = new Date();
var start = new Date('2022-06-30');
var timeDiff = now.getTime() - start.getTime();
var day = Math.floor(timeDiff / (1000 * 60 * 60 * 24) + 1);
$('#love').text(day + '일째');
</script>
<h3>갑돌♥갑순</h3>
<h3 id='love'>0일째</h3>
<h4 class="date">2022.6.30</h4>
</div>
<hr/>
<section class='special-day'>
<h3 class='title'>발렌타인 데이</h3>
<div class='date-box'>
<p id='valentine' class='days-left'>0일 남음</p>
<p class='date'>2024.2.14</p>
</div>
</section>
<hr/>
<script
src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous"></script>
<script>
var now = new Date();
var start = new Date('2022-06-30');
var timeDiff = now.getTime() - start.getTime();
var day = Math.floor(timeDiff / (1000 * 60 * 60 * 24) + 1);
$('#love').text(day + '일째');
var valentine = new Date('2024-02-14');
var timeDiff2 = valentine.getTime() - now.getTime();
var day2 = Math.floor(timeDiff2 / (1000 * 60 * 60 * 24) + 1);
$('valentine').text(day2 + '일 남음');
console.log(timeDiff2)
</script>
<h3>갑돌♥갑순</h3>
<h3 id='love'>0일째</h3>
<h4 class="date">2022.6.30</h4>
</div>
<hr/>
<section class='special-day'>
<h3 class='title'>발렌타인 데이</h3>
<div class='date-box'>
<p id='valentine' class='days-left'>0일 남음</p>
<p class='date'>2024.2.14</p>
</div>
</section>
<hr/>
<section class='special-day'>
<h3 class='title'>1000일</h3>
<div class='date-box'>
<p id='thousand' class='days-left'>0일 남음</p>
<p id='thousand-date' class='date'>0000.00.00</p>
</div>
</section>
<hr/>
<script
src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous"></script>
<script>
var now = new Date();
var start = new Date('2022-06-30');
var timeDiff = now.getTime() - start.getTime();
var day = Math.floor(timeDiff / (1000 * 60 * 60 * 24) + 1);
$('#love').text(day + '일째');
var valentine = new Date('2024-02-14');
var timeDiff2 = valentine.getTime() - now.getTime();
var day2 = Math.floor(timeDiff2 / (1000 * 60 * 60 * 24) + 1);
$('#valentine').text(day2 + '일 남음');
var ms = start.getTime() + 999 * (1000 * 60 * 60 * 24);
var thousand = new Date(ms);
var thousandDate = thousand.getFullYear() + '.' + (thousand.getMonth()+1) + '.' + thousand.getDate();
$('#thousand-date').text(thousandDate);
</script>
<div class='container d-flex flex-column justify-content-center align-items-center mt-3'>
<h3>갑돌♥갑순</h3>
<h3 id='love'>0일째</h3>
<h4 class="date">2022.6.30</h4>
</div>
<hr/>
<section class='special-day'>
<h3 class='title'>발렌타인 데이</h3>
<div class='date-box'>
<p id='valentine' class='days-left'>0일 남음</p>
<p class='date'>2024.2.14</p>
</div>
</section>
<hr/>
<section class='special-day'>
<h3 class='title'>1000일</h3>
<div class='date-box'>
<p id='thousand' class='days-left'>0일 남음</p>
<p id='thousand-date' class='date'>0000.00.00</p>
</div>
</section>
<hr/>
<script
src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous"></script>
<script>
var now = new Date();
var start = new Date('2022-06-30');
//우리 몇 일째?
var timeDiff = now.getTime() - start.getTime();
var day = Math.floor(timeDiff / (1000 * 60 * 60 * 24) + 1);
$('#love').text(day + '일째');
//기념일까지 남은 날짜는?
var valentine = new Date('2024-02-14');
var timeDiff2 = valentine.getTime() - now.getTime();
var day2 = Math.floor(timeDiff2 / (1000 * 60 * 60 * 24) + 1);
$('#valentine').text(day2 + '일 남음');
//천일은 언제인가?
var thousand = new Date(start.getTime() + 999 * (1000 * 60 * 60 * 24));
var thousandDate = thousand.getFullYear() + '.' + (thousand.getMonth()+1) + '.' + thousand.getDate();
$('#thousand-date').text(thousandDate);
//기념일까지 남은 날짜는?
var timeDiff3 = thousand.getTime() - now.getTime();
var day3 = Math.floor(timeDiff3 / (1000 * 60 * 60 * 24) + 1);
$('#thousand').text(day3 + '일 남음');
</script>