반응형
만 나이 계산기입니당



생년월일 입력:
만 
<div>만 나이 계산기입니당</div>
<p data-ke-size="size16"><br /><br /></p>
<div>생년월일 입력: <input id="birthdate" type="date" value="1990-01-01" /> <br /><button id="btn">나이 계산</button>만&amp;nbsp<span></span></div>
<p data-ke-size="size16">&nbsp;</p>
<script>
  const myAge = function() {
		let date = new Date();
        let birth = new Date(document.getElementById( 'birthdate' ).value);
        let age = date.getFullYear() - birth.getFullYear();
        if (birth.setFullYear(birth.getFullYear()+age) > date ) {
            age -= 1;
        }
    
        document.getElementById("age").innerText = age + "세 입니다.";
  }
</script>
반응형
저작자표시
반응형

보안상 사용자와 client의 상호작용이 없으면 적용되지 않음

function noBack() {
    history.pushState('preventLocation', document.title, '#');

    if (typeof window.addEventListener != 'undefined') {
	    window.addEventListener('popstate', clearHistory);
    } else if (typeof window.attachEvent != 'undefined') {
	    window.attachEvent('popstate', clearHistory);
    } else {
	    window.onpopstate = clearHistory;
    }
};

function clearHistory() {
    history.pushState('popstateFunction', document.title, '#');
};
반응형
저작자표시
반응형

 

  Install the plugIn 

npm install --save v-tooltip

 

  Code

// Javascript
import Vue from 'vue'
import VTooltip from 'v-tooltip'

Vue.use(VTooltip)

new Vue({
  data: {
    msg: 'This is a button.'
  }
})

 

<!-- HTML -->
<button v-tooltip.top-center="msg">Hover me</button>

 

/* scss */
.tooltip {
  display: block !important;
  z-index: 10000;

  .tooltip-inner {
    background: black;
    color: white;
    border-radius: 16px;
    padding: 5px 10px 4px;
  }

  .tooltip-arrow {
    width: 0;
    height: 0;
    border-style: solid;
    position: absolute;
    margin: 5px;
    border-color: black;
  }

  &[x-placement^="top"] {
    margin-bottom: 5px;

    .tooltip-arrow {
      border-width: 5px 5px 0 5px;
      border-left-color: transparent !important;
      border-right-color: transparent !important;
      border-bottom-color: transparent !important;
      bottom: -5px;
      left: calc(50% - 5px);
      margin-top: 0;
      margin-bottom: 0;
    }
  }

  &[x-placement^="bottom"] {
    margin-top: 5px;

    .tooltip-arrow {
      border-width: 0 5px 5px 5px;
      border-left-color: transparent !important;
      border-right-color: transparent !important;
      border-top-color: transparent !important;
      top: -5px;
      left: calc(50% - 5px);
      margin-top: 0;
      margin-bottom: 0;
    }
  }

  &[x-placement^="right"] {
    margin-left: 5px;

    .tooltip-arrow {
      border-width: 5px 5px 5px 0;
      border-left-color: transparent !important;
      border-top-color: transparent !important;
      border-bottom-color: transparent !important;
      left: -5px;
      top: calc(50% - 5px);
      margin-left: 0;
      margin-right: 0;
    }
  }

  &[x-placement^="left"] {
    margin-right: 5px;

    .tooltip-arrow {
      border-width: 5px 0 5px 5px;
      border-top-color: transparent !important;
      border-right-color: transparent !important;
      border-bottom-color: transparent !important;
      right: -5px;
      top: calc(50% - 5px);
      margin-left: 0;
      margin-right: 0;
    }
  }

  &[aria-hidden='true'] {
    visibility: hidden;
    opacity: 0;
    transition: opacity .15s, visibility .15s;
  }

  &[aria-hidden='false'] {
    visibility: visible;
    opacity: 1;
    transition: opacity .15s;
  }
}

 

  실행 결과

 

반응형
저작자표시
반응형

  while문

while문은 조건이 참이면 일정한 처리를 계속 반복해서 실행합니다. 

 

  사용 방법

while(조건식) 문장

 

while문은 실행하면 가장 먼저 조건식을 확인하여

false면 다음 문장으로 이동,

true면 문장을 실행한 후 다시 조건식을 확인하며 반복합니다.

- while문 내에서 break를 만날경우 while문에서 빠져나옵니다.

- while문 내에서 continue를 만나면 while문의 시작 부분으로 되돌아갑니다.

 

  do/while문

while문은 시작 부분에서 조건을 확인한다면 do/while문은 반복을 마지막에 판단합니다.

 

  사용 방법

do 문장 while( 조건식 );

 

do/while 문 끝에는 세미콜론이 붙으며 조건식의 결과에 따라 반복/ 다음 문장으로 이동여부를 결정합니다.

- do/while문은 문장이 반드시 한 번 이상 실행됩니다.

 

 

반응형
저작자표시
반응형

web programming 이란?

인터넷 기반으로 홈페이지에 접속해서 서비스를 할수 있도록 개발하는 것

web 동작

      (request) 

client <--> web Server  

      (response)

 

백엔드

CGI(Comon Gateway Interface)

 

ASP(Active Server Page) - ms

Microsoft사에서 동적인 웹 페이지의 구현을 위해 Visual Basic 언어를 기반으로 만들어진 웹 프로그래밍 기술

 

단점

- 플랫폼에 독립적임

- 다른 언어에 비해 시스템 자원의 효율성과 확장성이 떯어짐

 

PHP(Hypertext Preprocesso) – 리눅스 협회

- ASP와 유사한 스크립트 기반의 언어이지만 ASP와는 다르게 C를 기반으로 만들어진 언어이기 때문에 빠른 속도를 가지고 있다.

 

단점

- 서버측의 지원이 부족하여 기업형의 복잡한 시스템 구조에 적응하기가 힘들다

- JSP에 비해 보안상의 약점을 가지고 있다.

 

JSP(Java Server Pages) – 오라클

- 자바를 이용하여 동적인 웹 페이지를 만들기 위해 Sun사가 개발한 기술

- 서버페이지를 쉽게 작성할 수 있고, 서블릿과 함께 구동함으로써 서블릿의 기능을 사용할 수 있고, 자바 빈즈, EJB같은 기술로 보다 강력한 객체 지향적 지원이 가능

- 대규모 프로젝트에 용이

 

스프링 프레임 웍(Spring Framework)

- JSP를 기반으로 월등하게 사용 가능할 수 있다

 

JSP

톰켓 lib의 Servlet-api.jar를 JDK의 lib로 넣어줌

 

src 자바파일 폴더

clesses 컴파일 한 결과를 저장하는 폴터

lib 위에 두개를 돌리기 위해 필요한 라이브러리 폴더

반응형
저작자표시
반응형

Math 객체

메서드

설명

메서드

설명

Abs

절대값

Max

가장 큰 값

Acos

아크 코사인 값

Min

가장 작은 값

Asin

아크 사인 값

Pow

숫자의 배수

Atan

아크 탄젠트 값

Random

0~1사이의 임의의 수

Atan2

위치에 대한 각도

Round

반올림값

Ceil

지정된 실수에서 가장 가까운 정수를 가져온다.

Sin

사인값

Cos

코사인 값

Sqrt

스퀘어 루트 값

Floor

작거나 같은 숫자 중 가장 큰 값을 가져온다

Tan

탄젠트 값

Log

로그 값

 

 

 

Array 객체

종류

이름

설명

속성

Length

배열에 저장된 원소의 개수를 가져옴

Concat

여러 개의 배열을 하나의 배열로 합침

Join

배열의 각 원소를 하나의 문자열로 연결

메서드

Pop

배열의 가장 마지막 원소를 가져오고, 삭제

Push

배열의 마지막에 새로운 원소 추가

Reverse

배열의 원소를 역순으로 다시 정렬

Shift

배열의 가장 첫번째 원소를 가져오면서 삭제

slice

배열의 일부 원소만 따로 떼어냄

sort

배열외 원소 정렬

 

// Array 객체
<script language = "javascript">
  var arr= new Array;
  function push(){ //push 함수
    arr.push(document.getElementById("text1").value); //text1의 값을 배열에 push
    //text1 공백 할당
    pr(); //arr을 span에 출력
  }
  function pop(){ //pop 함수
    arr.pop();
    pr();
  }
  function shift(){ //shift 함수
    arr.shift();
    pr();
  }
  function reverse(){ //reverse 함수
    arr.reverse();
    pr();
  }
  function sort(){ //sort 함수
    arr.sort(sortNumberAsc);
    pr();
  }
  function pr(){
    document.getElementById("text1").value ="";
    document.getElementById("result").innerHTML = arr;
  }
  function sortNumberAsc(a,b){ 
    //a 와 b는 비교할 두 수 이며 a와 b를 빼준다
    //만약 연산 값이 음수가 나오면 b가 더 큰 수를 의미하며 순서는 a다음 b가 오게 됨
    //만약 연산 값이 양수가 나오면 a>b가 되므로 원래 sort가 동작하는대로 동작하게 됨
    //alert(a-b);
  return a-b; 
  }

</script>

 

숫자 객체(Number)

이름

설명

MAX_VALUE

표현 가능한 가장 큰 수

MIN_VALUE

표현 가능한 가장 작은 수

NaN

숫자가 아닌 경우의 표기

PUSITIVE_INFINITY

무한대 수의 표기

NEGATIVE_INFINITY

음의 무한대 수 표기

 

반응형
저작자표시

+ Recent posts

티스토리툴바