변수(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 + "세 입니다.")

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

[javascript] in 연산자  (0) 2021.08.10
[javascript] 객체(object), 속성(property)  (0) 2021.07.21
[javascrpt] 클래스(Class), 인스턴스(Instance)  (0) 2021.07.03
[javascript] 리턴(Return)  (0) 2021.07.03

 

▶생활코딩 WEB2 CSS 5 - 혁명적 변화

 

▶선택자

· 선택자(Selector)

 

· 선언문(Declaration)

 

· 속성(Property)

 

· 속성값(Value)

'1-2 css' 카테고리의 다른 글

[css] Block level element, Inline element_박스 기본 영역  (0) 2021.07.08
[css] id, class속성  (0) 2021.07.07
[css] 속성 간략하게 쓰기  (0) 2021.07.05
[css] html문서에서 css 연결하기  (0) 2021.05.13
[css] css 시작하기  (0) 2021.05.10
 

highlight.js

Version 10.3.2 Tiny tiny release, just to fix the website incorrectly not listing Javascript in the list of languages you could choose for a custom build. There are no other changes.

highlightjs.org

코드 하이라이트를 이용해 코드블럭 가시성을 높일 수 있다.

적용 전에는 육안으로 빠르게 구분하기가 힘들었는데, 적용 후인 지금은 한결 나아짐.

여러 테마를 적용시킬 수 있는데,

나는 현재 사용중인 VS코드와 같은 테마를 적용시켰다. 근데 색이 완전 같지는 않음.

'3 > ect' 카테고리의 다른 글

근황  (0) 2021.08.03
구글 검색 팁  (0) 2021.07.12
우분투 설치  (0) 2021.05.10

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연산자
· 부정하고 싶은 값 앞에 입력한다
· !!을 쓸 경우 → 부정의 부정(반대의 반대)이므로 긍정(원래값)이 됨

 

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

'1-3 java_script' 카테고리의 다른 글

[javascript] html문서에서 자바스크립트 연결하기  (0) 2021.06.07
[javascript] JavaScript 시작하기  (0) 2021.05.12

+ Recent posts

티스토리툴바