자바스크립트 - 오늘 날짜 구하기 getFullYear(), getMonth(), getDate(), getDay()

자바스크립트에서 오늘 날짜 구하기 아래와 같이 date 객체를 선언하게 되면 현재 시간이 출력됩니다. data 함수 중에 getFullYear(), getMonth(), getDate(), getDay()를 이용하면 오늘 날짜의 연도, 월, 일을 알 수 있습니다. var date = new Date(); // Wed Mar 27 2019 20:21:44 GMT+0900 (한국 표준시) 이제 날짜 함수와 관련된 메서드를 알아보겠습니다. ex) 2019년 3월 27일 (수) 기준 getFullYear() 년도를 출력하는 함수입니다. console.log(date.getFullYear()); //2019 getMonth() 월을 출력하는 함수입니다. 단, 0부터 시작합니다. 1월 -> 0 그래서 +1 해줘야 ..

• format_list_bulleted Develop/JavaScript
• · 2019. 3. 27.
• textsms

자바스크립트 - 배열 객체 선언 하는 방법 초기화 하기

배열이란 ? Java나 다른 프로그래밍 언어에서의 배열은 같은 자료형의 자료만 담을 수 있지만, 자바스크립트 배열의 다른 자료형의 자료도 담을 수가 있습니다. 배열 만드는 방법 생성자 방법과 객체 방법으로 배열을 만들 수 있습니다. 1. 배열 생성자 방법 var arr = new Array('대한민국', '일본', '중국'); var arr = new Array('대한민국', '일본', '중국'); 2. 배열 객체 방법 var arr = ['대한민국', '일본', '중국']; var arr1 = new Array(1, 2, 3); var arr2 = [1, 2, 3] console.log(arr1.length === arr2.length) //true; console.log(arr1[0]) // 1 co..

• format_list_bulleted Develop/JavaScript
• · 2019. 3. 25.
• textsms

자바스크립트 - split 특정 문자를 기준으로 자르기

split 특정 문자를 기준으로 문자열을 잘라 배열에 넣어 return 합니다. 강남구/용산구/마포구 위의 구들을 '/' 기준으로 문자로 잘라서 사용하고 싶을 때 사용합니다. 문법 문자열.split('특정 문자') 사용 예시 var pNum = 010-1111-2222 var arr = pNum.split('-') for(var i=0 i

• format_list_bulleted Develop/JavaScript
• · 2019. 3. 22.
• textsms

자바스크립트 | 조건문 switch문

조건문 - switch문 조건문에는 두 가지 종류가 있습니다. if문과 switch문 if문과 switch문은 비슷하지만, 각각의 특징에 맞게 사용할 수가 있습니다. switch문은 코드를 좀더 간결하고 빠르게 사용할 수 있습니다. switch문은 뭔가 집에 있는 전등의 스위치라고 생각하시면 됩니다. 거실 화장실 부엌 3가지 버튼이 있다면 거실이 맞으면 거실 불이 켜지게 되고, 화장실이 맞으면 화장실 불이 켜지게 되고, 위와 같이 집에 있는 스위치와 같다고 생각하면 뭔가 이해하기 쉬운것 같습니다. switch 문 문법 switch ( 변수 ){ case 변수:; 실행문 break; } switch문의 변수가 case 변수와 같으면 실행문이 실행이 되고 break; 를 만나게 되면 switch문을 나가게 ..

• format_list_bulleted Develop/JavaScript
• · 2019. 3. 21.
• textsms

자바스크립트 if문을 이용한 학점 계산기 만들기

자바스크립트에서 if문을 이용하여 학점을 출력하는 코드입니다. input 텍스트 창에 점수를 입력하면, 아래의 div 패널에 각 점수에 맞는 A,B,C 학점이 출력됩니다. 입력 function score(){ const inputScore = document.querySelector('.score'), result = document.querySelector('.result'); const score = inputScore.value; if(score > 90){ result.innerHTML = 'A학점 입니다.'; }else if(score > 80){ result.innerHTML = 'B학점 입니다.'; }else if(score > 70){ result.innerHTML = 'C학점 입니다.';..

• format_list_bulleted Develop/JavaScript
• · 2019. 3. 20.
• textsms

자바스크립트 | if문 if~else문

조건문 if문과 if~else문 if문 문법 if ( 조건문 ){ 실행문; } 조건문이 참이면, 실행문을 실행하고 거짓이면, 실행문을 실행 시키지 않습니다. var i = 20; if( i > 10){ console.log('10보다 큰 수 입니다.'); } if~else문 문법 if ( 조건문 ){ 실행문1; }else { 실행문2; } 조건문이 참이면 실행문1을 실행하고 거짓이면, else { } 안에 있는 실행문 2를 실행 시킵니다. var i = 5; if( i > 10){ console.log('10보다 큰 수 입니다.'); }else{ console.log('10보다 작은 수 입니다.); } if~else if문 if ( 조건문 ){ 실행문1; }else if( 조건문2 ) { 실행문2; } ..

• format_list_bulleted Develop/JavaScript
• · 2019. 3. 19.
• textsms

CSS - 가운데 정렬 하는 방법

1. flex 이용하여 가운데 정렬 display: flex 설정 justify-content: center 설정 내부 엘리먼트 크기가 바깥 엘리먼트 크기보다 작아야합니다. .box3 { display: flex; justify-content: center; border: 1px solid black; } .box3 span { text-align: center; width: 50%; } 예시 HTML 삽입 미리보기할 수 없는 소스 2. div 엘리먼트 가운데 정렬하기 margin: auto 사용하기 Hello 예시 HTML 삽입 미리보기할 수 없는 소스 3. 글자 가운데 정렬하기 text-align: center 사용 Hello 예시 HTML 삽입 미리보기할 수 없는 소스

• format_list_bulleted Develop/CSS
• · 2019. 3. 18.
• textsms

자바스크립트 - closest() 엘리먼트에 가장 가까운 조상 찾기

closest(position, text) 현재 엘리멘트에서 가장 가까운 조상을 반환합니다. 만약 조상이 없다면 null값을 반환 합니다. 문법 const closestElement = element.closest(selectors); 파라미터 매개변수 (selector) : 찾고 싶은 조상의 CSS 선택자를 입력 하면 됩니다. ex) '.className' '#id' 등 결과값 가장 가까운 조상의 Element를 반환 없다면 null 예시 const me = document.querySelector('.me'); const hi = me.closest('.hi'); const hello = me.closest('#hello'); console.log(hi); console.log(hello); 선택자 ..

• format_list_bulleted Develop/JavaScript
• · 2019. 3. 15.
• textsms

자바스크립트 - insertAdjacentElement() 엘리먼트에서 특정 위치에 노드 삽입

insertAdjacentElement(position, text) 특정 위치에 노드를 추가합니다. 매개변수 position 4가지가 들어갈 수 있습니다 beforebegin element 앞에 afterbegin element 안에 가장 첫번째 child beforeend element 안에 가장 마지막 child afterend element 뒤에 ※ afterbegin / beforeend는 꼭 부모가 있어야 합니다. text 삽입하고 싶은 노드 or xml 문법 element.insertAdjacentElement(position, newElement); 예시 title ​ let title = document.querySelector('.abc'); let beforebegin = documen..

• format_list_bulleted Develop/JavaScript
• · 2019. 3. 15.
• textsms

자바스크립트 - insertBefore() 특정 위치에 앞에 노드 삽입

insertBefore() 부모노드의 기준 점 노드 앞에 삽입 할 노드를 삽입합니다. 내가 원하는 위치에 삽입 할 수 있습니다. 문법 부모노드.insertBefore(삽입 할 노드, 기준 점 노드); 기존 부모 노드에서도 굳이 삭제 할 필요 없이 자동으로 이동하게 됩니다. ex) 부모노드 1번에 위치하고 있을 때, 3번으로 옮기고 싶을 때 삭제하고 옮기지 않아도 됩니다. 노드는 자동적으로 기존 노드에서 삭제되고, 새로운 부모 밑에 삽입됩니다 기준 점 노드를 null로 하게 되면, 자식 노드의 끝에 삽입 됩니다. 반환값 삽입 된 노드 예시 + button button button button const ele = document.querySelector('.newEle'); const parent = do..

• format_list_bulleted Develop/JavaScript
• · 2019. 3. 15.
• textsms