클래스(Class)

 

· classification의 약자

· 클래스를 통해 이루어지는 코딩을

'객체지향형 프로그래밍(Object Oriented Programming)'이라고 한다. 객체(하나의 묶음)을 지향한다는 의미.

· 구성원이 되는 작은 요소(객체)를 의미

 

▶예시

class 과일바구니 {
  int 사과;
  int 배;
  int 참외;
}

 

인스턴스(Instance)

 

클래스이름 인스턴스 = new 클래스이름

· 양쪽에 위치한 클래스이름은 서로 같아야 한다.

 

클래스선언 + 인스턴스선언

 

· 클래스선언으로 먼저 정의한 후 이를 토대로 인스턴스선언이 이루어진다.

· 주의! 클래스선언인스턴스선언각각 다른 파일에서 작업해야 한다.

객체지향 프로래밍 특성상, 별도의 파일로 각각 다루어야 하기 때문.

· 클래스이름이 담긴 자바스크립트 파일 이름은 클래스이름과 같아야 한다

즉, 클래스이름 = (선언이 담긴)파일이름

 

▶분류

클래스선언이 담긴 파일 · 여기서 클래스 정의를 설정함
인스턴스선언이 담긴 파일 · 클래스선언을 토대로 어떻게 구성할지 설정함

 

▶클래스선언 예시 (파일명: 과일바구니.js)

//이하 클래스선언
class 과일바구니 {
  int 사과;
  int 배;
  int 참외;
}

 

▶인스턴스선언 예시 (파일명: 뭘담을까.js)

//이하 인스턴스선언
class 뭘담을까 {

과일바구니 바구니1호 = new 과일바구니(); //'바구니1호'라는 인스턴스 생성
  바구니1호.사과 = 3; //사과를 3개 담음
  바구니1호.배 = 2; //배를 2개 담음
  바구니1호.참외 = 5; //참외를 5개 담음

과일바구니 바구니7호 = new 과일바구니(); //'바구니7호'라는 인스턴스 생성
  바구니1호.사과 = 8; //사과를 8개 담음
  바구니1호.배 = 0; //배를 0개 담음
  바구니1호.참외 = 4; //참외를 4개 담음
  
}

 

▶클래스에 소유권붙이기

· public, private, protected, (없음)

'1-3 java_script > 미분류' 카테고리의 다른 글

[javascript] in 연산자  (0) 2021.08.10
[javascript] 객체(object), 속성(property)  (0) 2021.07.21
[javascript] 리턴(Return)  (0) 2021.07.03
[javascript] 변수(Variable)  (0) 2021.06.25


 

▶리턴(Return)

· 자료형에 속함

· 함수에 부여시킨 파라미터(매개변수)를 가져옴(반환시킴)

· 함수 종료시 리턴 선언으로 끝남

 

▶예시1

//이하 함수선언
function getTwice() {
  return 2;
}

//이하 함수호출
console.log(getTwice());

console.log(2)와 결과가 같다.

 

▶예시2

//이하 함수선언
function getTwice(number) {
  return number*2;
}

//이하 함수호출
console.log(getTwice(5));

console.log(2*5)와 결과가 같다.

 

▶예시3

//이하 함수선언
function getTwice(number) {
  return number*2;
}

let x = getTwice(5);
let y = getTwice(2);

//이하 함수호출
console.log(x*y);

 

▶예시4

//이하 함수선언
function hello(name) {
  return '안녕하세요, ' + name + '님!';
}

function sum(a, b) {
  return a+b;
}

let a = hello('홍길동');
let b = sum(10, 5);

//이하 함수호출
console.log(a);
console.log(b);

 

리턴... 진심 정말 헷갈림.

결과가 자꾸 오류로 떠서... 이거 하나에 온종일을 보낸 듯... 허어어.


 

변수(Variable)

 

변수유형 변수이름 = '변숫값';

· 어떤 값(조건, 상황)에 이름을 붙이는 것

 

▶console창에서, (1~3번을 순서대로 진행할 것)

1. 변수선언(변수 만들기)

변수유형 변수이름;

2. 변수에 값 지정시키기

수이름; = 변숫;

3. 결과! 1, 2번이 제대로 적용되었다면,

console.log(변수이름); 입력시  지정시킨 변숫값이 출력됨

다만 출력에 반드시 console.log();가 사용되는 것은 아님

 

▶위 예시의 1, 2번을 한번에 할 수도 있음!

변수유형 변수이름; = 변숫값;

· 변수유형

- 어떤 변수인지

- 예시: let, char,  int, string, double 등

· 변수이름 =변수로 사용할 이름 

· 변숫값

- 예시: 숫자

 

변수이름(=변수로 사용할 이름) 만들기

 

▶변수이름(=변수로 사용할 이름) 만들 때 지켜야 할 것

1. 자바스크립트의 식별자는 다음 3개 중 하나여야 함

문자 A~Z, a~z
언더바(밑줄) _
달러기호 $

2. 대문자와 소문자를 구별할 것

· 대문자≠소문자 (서로 다르게 인식한다)

3. '예약어' 사용금지!

· 예시: let, if, for 등

 

▶변수이름(=변수로 사용할 이름) 만들 때 tip

· camelCase를 사용할 것

- 변수 이름에는 띄어쓰기를 사용할 수 없기 때문에,

첫글자는  소문자로,

띄어쓰기 위치의 바로 뒤에 있는 단어의 첫글자는  대문자로 표기하면 좋다.

- 예시

goodVariableName (O)

good_variable_name (X)

 

기타

 

▶변숫값에 작은따옴표(', ') 사용)

char 이름 = '홍길동';
int 나이 = 1000;

 

▶문자열일 때(변숫값에 큰따옴표(", ") 사용)

string 인사 = "안녕하세요";

 

▶예시

올해(2021) 나이 계산하기

//이하 올해(2021) 나이 계산
var currentYear = 2021; //올해 연도 변수선언
var birthYear; //태어난 연도 변수선언
var age; //결과로 출력될 나이 변수선언

birthYear = prompt("태어난 연도는?")
age = currentYear - birthYear + 1; //1=상수(고정값), 우리나라 나이를 기준으로 계산할거라 +1을 상수로 설정함
document.write(currentYear + "년 현재,<br>")
document.write(birthYear + "년에 태어난 사람은 " + age + "세 입니다.")


html, css, javasacript

기념일 계산기

 

▶자바스크립트의 날짜, 시간 입력

YYYY 연도 (4자리)
MM 월 (2자리)
DD 일 (2자리)
HH  (2자리)
MM  (2자리)
SS  (2자리)
ISO형식(YYYY-MM-DDTHH:MM:SS)  
긴 날짜 형식(MMM DD YYYY) · 월, 일, 연도 순
· 월은 숫자가 아닌, 영문으로 작성해야 함(January, Jan과 같은)
짧은 날짜 형식(MM/DD/YYYY) · 월, 일, 연도 순

 

▶자바스크립트 시간 단위

1밀리초 = 1/1,000초
1초 = 1,000밀리초
1분 = 60초 (= 1,000 * 60 = 60,000밀리초)
1시간 = 60분 (= 1,000 * 60 * 60 = 3,600,000밀리초)
1일 = 24시간 (= 1,000 * 60 * 60 * 24 = 86,400,000밀리초)

 

▶getTime() 함수가 바로 시, 분, 초 단위로 나오지 않고

밀리초로 나오기 때문에 

밀리초를 통해  다른 단위로 변환시켜야 한다. (위 '자바스크립트 시간 단위' 참조)

 

▶javascript/ date객체

console창에 new Date()를 입력하면

바로 지금 나우 이 순간의 날짜와 시간이 결과로 나타난다.

 

Date객체의 인스턴스를 now변수에 저장함

저장시킨 이후에는(이 말인 즉, var now = new Date를 적은 이후)

now객체는 Date객체의 속성과 함수를 사용할 수 있다.

두번째 줄의 now는 이를 이용해 오늘 날짜와 시간을 결과로 소환한 것.

 

▶javascript/ 자바스크립트의

document.querySelector('#accent').innerText = passedDay + "일"; 

요 부분을 통해 '얼마나'가 '182일'로 변환된다.

브라우저 창에서 확인하면,

요 부분이 없을 때는 '얼마나' 요 부분을 넣으면 '182일' 

 

▶javascript/ 번거로운 계산

var future = toFirst + 100 * (100*60*60*24);
var someday = new Date(future);
var year = someday.getFullYear();
var month = someday.getMonth();
var date = someday.getDate();
Document.querySelector("#date100").innerText = year + " 년 " + month + " 월 " + date + " 일 ";

var future = toFirst + 365 * (100*60*60*24);
var someday = new Date(future);
var year = someday.getFullYear();
var month = someday.getMonth();
var date = someday.getDate();
Document.querySelector("#date365").innerText = year + " 년 " + month + " 월 " + date + " 일 ";
future = toFirst + 100 * (100*60*60*24);
someday = new Date(future);
year = someday.getFullYear();
month = someday.getMonth();
date = someday.getDate();
Document.querySelector("#date100").innerText = year + " 년 " + month + " 월 " + date + " 일 ";

future = toFirst + 365 * (100*60*60*24);
someday = new Date(future);
year = someday.getFullYear();
month = someday.getMonth();
date = someday.getDate();
Document.querySelector("#date365").innerText = year + " 년 " + month + " 월 " + date + " 일 ";

위의 두 방식대로 하면

100일 기념일, 365일 기념일... 등등 기념일 마다 매번 계산식을 작성해야 함

 

▶javascript/ 이 때 calcDate()함수를 이용하면,

function calcDate(days) {
  var future = toFirst + days * (100*60*60*24);
  var someday = new Date(future);
  var year = someday.getFullYear();
  var month = someday.getMonth();
  var date = someday.getDate();
  Document.querySelector("#date" + days).innerText = year + " 년 " + month + " 월 " + date + " 일 ";
}

calcDate(100); //100일 기념일
calcDate(365); //365일 기념일
calcDate(500); //500일 기념일
calcDate(1000); //1000일 기념일

function calcDate(days) {} 함수선언을 통해

일일이 계산할 필요가 없어진다.

 

javascript/ 아래의 함수호출 부분은

calcDate(100); //100일 기념일
calcDate(365); //365일 기념일
calcDate(500); //500일 기념일
calcDate(1000); //1000일 기념일

function calcDate(days) {} 함수의 앞, 뒤 어느 부분에 넣어도 상관 없음.

 

결과

 

▶html

<!DOCTYPE html>
<html lang="ko">
<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>aniversary calclulator</title>
  <link href="anniversary-calculator.css" rel="stylesheet">
</head>
<body>

  <div class="container">

    <div class="day1">
      <h5>처음 만난 날로부터</h5>
      <p id="accent" class="accent">
        <span style="font-size:0.9em; font-style:italic">얼마나...</span>
      </p>
    </div>

    <div class="bar">만난 지</div>

    <div class="day2">
      <ul>
        <li class="item-title">100일</li>         
        <li class="item-date" id="date100"></li>
      </ul>
      <ul>
        <li class="item-title">365일</li>
        <li class="item-date" id="date365"></li>
      </ul>     
      <ul>
          <li class="item-title">500일</li>
          <li class="item-date" id="date500"></li>
        </ul>      
      <ul>
        <li class="item-title">1000일</li>
        <li class="item-date" id="date1000"></li>
      </ul>      									     
      </div>
      
  </div>
  
  <script src="anniversary-calculator.js"></script>
    
</body>
</html>

 

▶css

* {
  box-sizing: border-box;
}
.container{
  width:500px;
  margin:0 auto;
  border:10px solid rgb(253, 208, 111);
  border-radius:2%;
  box-shadow:2px 2px 2px rgb(97, 97, 97, 0.5);
}
.day1 {
  padding-top:40px;
  text-align:center;  
  font-family: '배달의민족 한나';
  font-size:1em;
}
.day1 h5 {
  font-size:0.8em;
  color:rgb(145, 145, 145);
}
.accent {
  margin-left:10px;
  margin-right:10px;
  margin-top:10px;
  font-family: '배달의민족 주아';
  font-weight: normal;
  font-size:4em;
  color:rgb(20, 124, 98);
}
.bar {
  width:100%;
  margin:60px auto 0 auto;
  padding-left:80px;
  height:50px;	
  background:rgb(20, 124, 98);
  font-family: '배달의민족 한나';
  font-size:1em;
  color:#fff;
  line-height:55px;
}
.day2 {
  font-family: '배달의민족 주아';
  font-size:1em;
  letter-spacing:-1.2pt;
  width:420px; 
  margin:20px auto 20px auto;
}
.day2 ul {
  list-style: none;
  border-bottom:1px dashed #ccc;
  height:70px;
}
.day2 ul:last-child {
  border-bottom:none;
}
.item-title {
  float:left;
  width:160px;        
  font-weight:bold;
  font-size:1.5em;
  line-height:60px;
}
.item-date {
  float:left;
  margin-left:60px;
  font-size:1.2em;
  color:#222;
  text-align:right;
  line-height:60px;
}

 

▶javascript

var now = new Date();
var firstDay = new Date("2020-12-25")

var toNow = now.getTime();
var toFirst = firstDay.getTime();
var passedTime = toNow - toFirst;

var passedDay = Math.round(passedTime/(1000*60*60*24));

document.querySelector('#accent').innerText = passedDay + "일";  

function calcDate(days) {
  var future = toFirst + days * (1000*60*60*24);
  var someday = new Date(future);
  var year = someday.getFullYear();
  var month = someday.getMonth();
  var date = someday.getDate();
  document.querySelector("#date" + days).innerText = year + " 년 " + month + " 월 " + date + " 일 ";
}

calcDate(100); //100일 기념일
calcDate(365); //365일 기념일
calcDate(500); //500일 기념일
calcDate(1000); //1000일 기념일

 

document.querySelector 에서 

document의 소문자d를 대문자D로 쓴 줄도 모르고 화면에 아무 것도 안 떠서 몇 시간이나 헤맸다.

예상치 못한 실수였는데, 

그렇다고 설마 저거 하나 때문에 브라우저에 결과값이 보이지 않을 거라고는 생각지도 못했다.

 


 

자료형(Data type)

 

· 자료형에 속하는 예시: 숫자, 문자열, 불린... 등

 

숫자(Number)

 

구성

구성 정수(Integer)
소수(Floating point)

· 정수: 0, 양수, 음수

· 소수: 소숫점 있는 그 소수...를 의미

 

사칙연상(+, - , ×, ÷) 가능

 

문자열(String)

 

구성

구성 큰 따옴표(", ")
작은 따옴표(', ')

더하기(+) 가능

 

예시

"Hello"+"Code"

 

불린(Boolean)

 

▶구성

구성 참(true)
거짓(false)

▶위의 숫자, 문자열은 값을 구하는 과정에서 많이 사용되나,

불린은 주로 (어떤 조건에 의해 실행된) 결과값으로 사용된다.

 

정리해보면,

· 불린에 속하는 값(2가지): 참, 거짓

· 불린에 속하는 연산자(3가지, =불린 연산자)

&& · and연산자
|| · or연산자
· (shift키 + 역슬래쉬키)x2
· 역슬래쉬는 보통 엔터키 위에 위치해 있음(\키)
! · not연산자
· 부정하고 싶은 값 앞에 입력한다
· !!을 쓸 경우  부정의 부정(반대의 반대)이므로 긍정(원래값)이 됨

 

▶불린에 속하는 연산자는, =자바스크립트 연산에 속한다.

+ Recent posts