javajaket’s Blog

function

2018-12-13T00:00:00+00:00

함수정의 방법

// 1.함수 선언문으로 정의
function square(x) {return x*x};
// 2.함수 리터럴로 정의
let square = function(x) {return x*x};
// 3.Function 생성자로 정의
let square = new Function('x','return x*x')
// 4.화살표 함수
let square = x => x*x;

자바스크립트 엔진은 함수 선언문을 프로그램의 첫머리 또는 함수의 첫머리로 끌러올린다. 따라서 함수 선언문으로 정의한 함수는 호출문이 그보다 앞에 위치해도 호출할 수 있다. 그러나 함수 리터럴,Function 생성자,화살표 함수 표현식으로 정의한 함수는 변수에 그 함수의 참조를 할당해야 비로소 사용할 수 있는 상태가 된다.

중첩함수

특정 함수의 내부에 선언된 함수를 가리켜 그 함수의 중첩함수라고 부른다.
중첩 함수의 참조는 그 중첩 함수를 둘러싼 외부 함수의 지역 변수에 저장되므로 외부 함수의 바깥에서는 읽거나 쓸 수 없다.
자신을 둘러싼 외부 함수의 인수와 지역 변수에 접근할 수 있다.

function norm(x) {
  let sum2 = sumSquare();
  return Math.sqrt(sum2);
  function sumSquare() {
    let sum = 0;
    for(let i=0;i<x.length;i++) sum += x[i]*x[i];
    return sum;
  }
}
const a = [2,1,3,5,7]
console.log(norm(a))// 9.234234234234;

함수 호출하기

// 1.함수호출 - 함수의 참조가 저장된 변수 뒤에 그룹 연산자인 ()를 붙여서 함수를 호출
let s = square(5);
// 2.메서드 호출 - 메서드를 호출할 때는 그룹 연산자인 ()를 붙여서 호출
// 객체의 프로퍼티에 저장된 값이 함수 타입일 때는 그 프로퍼티를 메서드라고 부른다.
obj.m = function(){...};
obj.m();
// 3.생성자 호출 - 함수 또느 메서드를 호출할 때 함수의 참조를 저장한 변수 앞에 new 키워드를 추가하면 함수가 생성자로 동작
let obj = new Object()

[Codility] Encryptor

2018-12-11T00:00:00+00:00

// 원판 암호기의 바깥쪽 원판에 적힐 문자 결정

function Encryptor() {
    let obj = {}
    let extraCharactors = [" ",".","?","!","%","#","'","&","$","@",":","/"];
    // 특수문자 추가
    let N_ALPHABET = 26;
    // 알파벳 갯수
    obj.chars = [];
    // 바깥쪽 원판의 문자집합은 chars 프로퍼티에 배열로 저장

    //원판배열에 소문자,대문자 추가
    for(let b='a'.charCodeAt(0);b<='z'.charCodeAt(0);b++) {
        obj.chars.push(String.fromCharCode(b));
    }
    for(let c='A'.charCodeAt(0);c<='Z'.charCodeAt(0);c++) {
        obj.chars.push(String.fromCharCode(c));
    }
    //숫자 추가
    for(let d=0;d<=9;d++) {
        obj.chars.push(d.toString())
    }    
    //특수문자 추가
    for(let j=0;j<extraCharactors.length;j++) {
        obj.chars.push(extraCharactors[j]);
    }

    //chars 배열의 길이
    obj.nchars = obj.chars.length;

    obj.numberOf = function(ch) {
        let code = ch.charCodeAt(0);
        if(code>='a'.charCodeAt(0) && code<='z'.charCodeAt(0)) {
            return code - 'a'.charCodeAt(0);
        } else if(code>='A'.charCodeAt(0) && code<='Z'.charCodeAt(0)) {
            return N_ALPHABET + code - 'A'.charCodeAt(0);
        } else if(code>='0'.charCodeAt(0) && code<='9'.charCodeAt(0)) {
            return 2*N_ALPHABET + code - '0'.charCodeAt(0);
        } else {
            for(let f=0;f<extraCharactors.length;f++) {
                if( ch == extraCharactors[f]) {
                    return 2*N_ALPHABET + 10 + f;
                }
            }
            return null;
        }
    }
}    

[Codility] 망델브로 집합

2018-12-08T00:00:00+00:00

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>망델브로 집합</title>
    <script>
        window.onload = function() {
            var canvas = document.getElementById("mycanvas");
            var ctx    = canvas.getContext("2d");
            var width  = canvas.width;
            var height = canvas.height;
            // 중심점을 설정하고 그린다
            var xc = -0.6, yc = 0;
            draw();
            // 그리기 버튼을 클릭하면 그리기 시작
            document.getElementById("button").onclick = draw;
            // Canvas 위의 마우스로 클릭한 지점을 중심 좌표로 설정한다
            document.getElementById("mycanvas").onclick = function(event) {
                var ix = event.offsetX;
                var iy = event.offsetY;
                var mag  = parseFloat(document.getElementById("magnification").value);
                xc += (2*ix/width - 1)/mag;
                yc += (2*iy-height)/mag/width;
                draw();
            };
            // 설정에 따라 그리는 함수
            function draw() {
                // 배율
                var mag   = document.getElementById("magnification").value;
                // 최대 반복 횟수
                var maxit = document.getElementById("maxit").value;
                // 중심 좌표를 표시
                displayCenter(xc,yc);
                // 망델브로 집합을 그린다
                mandelbrot(ctx,xc,yc,mag,maxit);
            }
        };
        // 중심 좌표를 표시하는 함수
        function displayCenter(xc,yc) {
            document.getElementById("xc").innerHTML = xc.toFixed(3);
            document.getElementById("yc").innerHTML = yc.toFixed(3);
        }
        // 망델브로 집합을 그리는 함수
        // c : canvas의 랜더링 컨텍스트
        // xc,yc : 중심 좌표
        // mag : 확대 배율
        // maxit : 최대 반복 횟수
        function mandelbrot(c,xc,yc,mag,maxit) {
            var w    = c.canvas.width;
            var h    = c.canvas.height;
            var xmin = xc - 1/mag;
            var xmax = xc + 1/mag;
            var ymin = yc - (xmax-xmin)*h/w/2;
            var ymax = yc + (xmax-xmin)*h/w/2;
            var dx   = (xmax-xmin)/w;
            var dy   = (ymax-ymin)/h;
            // 색상 구분용 색상 (반지름 2안에 있던 횟수로 색을 구분한다)
            var color = [];
            color[0] = "black";	// 망델브로 집합의 점의 색상은 검은색으로 함
            var L=255, dL = 255/maxit;
            for(var i=maxit; i>0; i--) {
                color[i] = "rgb(255,"+Math.floor(L)+",255)"; L-=dL;
            }
            // X축 방향의 픽셀을 검사
            for(var i=0; i<w; i++) {
                var x = xmin + i*dx;
                // Y축 방향의 픽셀을 검사
                for(var j=0; j<h; j++) {
                    var y = ymin + j*dy;
                    // z1=x+iy
                    var a = x, b = y;
                    var a2 = a*a, b2 = b*b;
                    // 반지름 2안에 maxit 번 이내이면 반복한다
                    for(var count=maxit; a2+b2<=4 && count; count--) {
                        // z_n+1 = z_n^2 +x+iy
                        b = 2*a*b + y; a = a2 - b2 + x;
                        a2 = a*a; b2 = b*b;
                    }
                    // count 값에 따라 색을 구분하여 점을 그린다
                    c.fillStyle = color[count];
                    c.fillRect(i,j,1,1);
                }
            }
        }
    </script>
    <style>
        #mycanvas { border: 1px solid gray; }
        input { margin: 0 10px; width: 60px; text-align: center; }
        div { font-size: small; margin-bottom: 5px; }
    </style>
</head>
<body>
    <canvas id="mycanvas" width="800" height="640"></canvas>
    <div>중심 좌표(<span id="xc"></span>,<span id="yc"></span>) ← 마우스로 클릭하면 바뀝니다</div>
    <div>
        <label>확대 배율 : <input id="magnification" type="number" value="0.65"></label>
        <label>최대 반복 횟수 : <input id="maxit" type="number" value="60"></label>
        <input id="button" type="button" value="그리기">
    </div>
</body>
</html>

Big-O 표기밥

2018-12-04T00:00:00+00:00

알고리즘은 무엇인가

알고리즘은 어떤 목적을 달성하거나 결과물을 만들어내기 위해 거쳐야 하는 일련의 과정들을 의미

예를 들어 할머니가 케이크를 만드는 과정을 알고리즘으로 표현하면,

function BakeCake(flavor,icing) {
// 1.Heat Oven to 350 F
// 2. Mix flour, baking powder, salt
// 3. Beat butter and sugar until fluffy
// 4. Add eggs.
// 5. Mix in flour, baking powder, salt
// 6. Add milk and " + flavor + "
// 7. Mix further
// 8. Pur in pan
// 9. Bake for 30 minutes
// 10. " + if(icing === true) return 'add icing'
// 11. Stuff your face
}
BakeCake('vanilla', true) => deliciousness

시간복잡도를 분석하는 것은 input n에 대하여 알고리즘이 문제를 해결하는데에 얼마나 오랜 시간이 걸리는 지를 분석하는 것과 같다. 이는 Big-O 표기를 이용하여 정의할 수 있다.

Big-O

Regular     Big-O
2           O(1)    --> It's just a constamt number
2n + 10     O(n)    --> n has the largest effect
5n^2        O(n^2)  --> n^2 has the largest effect

시간복잡도에서 중요한 것은 정해진 표현식에 가장 큰 영향을 미치는 n의 단위이다.

O(1) - 상수 시간: 입력값 n이 주어졌을 때, 알고리즘이 문제를 해결하는데 오직 한 단계만 거친다.
O(log n) - 로그 시간: 입력값 n이 주어졌을 때, 문제를 해결하는데 필요한 단계들이 연산마다 특정 요인에 의해 줄어든다.
O(n) - 직선적 시간: 문제를 해결하기 위한 단계의 수와 입력값 n이 1:1관계를 가진다.
O(n^2) - 2차 시간: 문제를 해결하기 위한 단계의 수는 입력값 n의 제곱
O(C^n) - 지수 시간: 문제를 해결하기 위한 단계의 수는 주어진 상수값 C의 n제곱

시간복잡도 적용해보자면,

const friends = {
  'Mark': true,
  'Carl' : false,
  'Ray' :  true,
  'Laura' : false,
}
const sortedAges = [22, 24, 27, 29, 31]
}
// O(1) - constant time(상수 시간)
// If I know the persons name, I only have to take one step to check
function isFriend(name) { //similar to knowing the index in an Array
  return friends[name];
}
isFriend('Mark') // returns True and only took on step
function add(num1,num2) {
// I have two numbers, takes one step to return the value
  return num1 + num2;
} 
// O(LOG N) - logarithmic time(로그 시간)
// You decrease the amount of work you have to do with each step
function thisOld(num,array) {
  const midPoint = Math.floor(array.length /2)
  if(array[midPoint] === num) return true;
  if(array[midPoint] only look at second half of the array)
  if(array[midPoint] > num) --> only look at first half of the array
  // recursively repeat until you arrive at your solution
}
thisOld(29, sortedAges) //returns true

[Codility] highpressure

2018-11-30T00:00:00+00:00

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>highpressure confirm</title>
  <script>
    window.onload = function() {
      document.getElementById('button').onclick = function() {
        const hp = parseFloat(document.getElementById('highpressure').value)
        const lp = parseFloat(document.getElementById('lowpressure').value)
        const judgement = document.getElementById('judgement')
        if(hp<120 && lp<80) {
          judgement.innerHTML = '정상';
        } else if(139>hp && 89>lp) {
          judgement.innerHTML = '불안';
        } else {
          judgement.innerHTML = '비정상';
        }
      }
    }
  </script>
</head>
<body>
  <p>수축기 혈압(최고 혈압)<input type="number" value='hp' id='highpressure'></p>
  <p>이완기 혈압(최저 혈압)<input type="number" value='lp' id='lowpressure'></p>
  <p id="judgement">이곳에 판정 결과가 표시됩니다.</p>
  <input type="button" value="확인하기" id="button">
</body>
</html>

Control statement

2018-11-30T00:00:00+00:00

조건문

조건식의 값에 따라 실행 흐름을 분기한다.

if/else문

조건에 따라 특정 영역의 코드를 실행시키거나 실행시키지 않을 수 있다.

if(num == 1) {
  console.log('one')
} else if(num == 2) {
  console.log('two')
} else {
  console.log('Other')
}

// 고혈압 여부 확인하기
if(hp<120 && lp<80) {
  judgement.innerHTML = '정상';
} else if(139>hp && 89>lp) {
  judgement.innerHTML = '불안';
} else {
  judgement.innerHTML = '비정상';
}

switch

switch문을 사용하면 분기점 여러 개를 간결하게 표현할 수 있다.

function translateColor(english) {
  let result;
  switch(english) {
    case 'red':
      result = '빨강색';
      break;
    case 'blue':
      result = '파랑색';
      break;
    case 'purple':
      result = '보라색';
      break;
    case 'violet':
      result = '보라색';
      break;
    default:
      result = '일치하는 색깔이 없습니다.'
  }
  return result;
}

switch 문이 실행되면 먼저 괄호 안에 들어 있는 표현식을 평가하고 평가한 값과 일치하는 case 라벨의 값을 위에서부터 아래 방향으로 찾는다. break 문이 실행되면 블록 문장에서 빠져나와 다음 작업을 시작한다.

반복문

일정한 처리를 한 다음 원래 위치로 돌아가 똑같은 처리를 반복하는 처리를 표현

while문

조건만 맞아떨어지면 일정한 처리를 계속 반복해서 실행.

let i = 0;
while(i<5) {
  //위 괄호의 값이 'true'인 동안에는 안쪽의 코드를 반복해서 실행한다.
  console.log(`i의 값: ${i}`)
  i++; //갱신
}

Big-O 표기법과 시간 복잡도

function binarySearch(x,a) {
  let n = a.length;
  let left = 0, right = n-1;
  while(left<right) {
    let middle = Math.floor((left+right)/2)
    if(x<=a[middle]) {
      right = middle;
      console.log(right)
    } else {
      left = middle + 1
      console.log(left)
    }
  }
  if(x == a[right]) return right;
  return null;
}
let a = [2,4,7,12,15,21,34,35,46,57,70,82,86,92,99]
console.log(binarySearch(46,a))

do/while 문

do/while 문은 반복해서 실행할지를 마지막 부분에서 판단한다.
while문 안에 있는 문장은 한 번도 실행되지 않을 수 있지만 do/while문 안에 있는 문장은 반드시 한 번 이상 실행된다.
while 문과 마찬가지로 do/while 문 안에서는 break문과 contineu문을 사용할 수 있다.

function fact(n) {
  let k = 1, i=n;
  do {
    k*= i--;
  } while(i>0)
  return k;
}

fact(5);

for 문

for(초기화식, 조건식, 반복식) 문장

for 문을 실행하면 반복문을 시작하기 전에 초기화식을 단 한번 실행
그 후에 반복 작업을 시작하는데 이때 조건식을 먼저 평가
조건식을 평가한 결과가 true면 문장을 실행한 후에 반복식을 실행
그리고 다시 한번 for문의 시작 부분으로 돌아가서 조건식을 평가

for(let i=0;i<10;i++) {
  console.log(i);
}

먼저 변수 i를 선언하고 0으로 초기화
그 후에 반복문을 시작. i<10을 만족하면 반복해서 실행
반복문 안의 console.log(i)가 실행되어 콘솔에는 i값이 출력
반복문 끝의 i++가 실행되어 i값이 1증가
i = 10이면 반복문에서 빠져나오고 for 문의 처리가 끝난다.

for(let i =0,j=10; i<11;i++,j--) {
  console.log(i,j)
}
// (0,10),(1,9),(2,8),(3,7),(4,6),(5,5),(6,4),(7,3),(8,2),(9,1),(10,0),(11,-1)

배열 요소 합계

function sumArray(a) {
  const sum = 0
  for(let i=0;i<a.length;i++) {
    sum += a[i]
  }
  return sum;
}
const a = [1,2,3,4,5]
console.log(sumArray(a))

피타고라스의 수 구하기

const n = 20;
for(let a = 1;a<=n;a++) {
  for(let b = 1;b<=n;b++) {
    for(let c = 1;c<=n;c++) {
      if(a*a + b*b == c*c) {
        console.log(`${a}^2 + ${b}^2 = ${c}^2`)
      }
    }
  }
}

for/in문

객체 안의 프로퍼티를 순회하는 반복문.
for/in 문이 실행되면 객체 표현식을 평가
객체 표현식이 null 또는 undefined로 평가되면 for/in 문을 빠져나와 다음 작업으로 이동
객체 표현식이 객체로 평가되면 객체의 프로퍼티 이름이 차례대로 변수에 할당되고 각각의 프로퍼티에 대해서 문장이 한 번씩 실행

const obj = {a:1,b:2,c:3}
for(let p in obj) {
  console.log(`p= ${p}`)
}
// p= a,p= b,p= c

for/in문은 프로퍼티 이름만 꺼내 변수에 할당

const obj = {a:1,b:2,c:3}
for(let p in obj) {
  console.log(`obj.${p}= ${obj[p]}`)
}

반복문 안에서 프로퍼티 값을 가져오려면 괄호 연산자를 사용해야 한다.

점프문

프로그램의 다른 위치로 이동하는 제어구문.

라벨문

라벨 이름에는 모든 식별자를 사용할 수 있다. 자바스크립트에서 라벨로 점프할 수 있는 문장은 break문과 continue문 뿐이다. 실제로 라벨을 붙여서 사용할 수 있는 문장은 switch문과 반복문뿐이다.

break 문

break 라벨 이름;

라벨을 지정한 break 문을 실행하면 라벨이 붙은 문장 끝으로 점프한다.

const a = [2,4,6,8,10], b = [1,3,5,6,9,11] 
loop: for(let i=0;i<a.length;i++){
    for(let j=0;j<b.length;j++) {
      if(a[i] == b[j]) 
      console.log("a["+i+"] = b["+j+"]")
    }
}

continue 문

continue 라벨이름;

continue 문을 실행하면 반복문 실행을 멈추고 반복을 새로 시작되며 동작이 반복문에 따라 달라진다.

while 문 : 반복문의 처음으로 되돌아가서 조건식을 다시 평가. 그결과가 true면 반복문을 처음부터 실행
do/while 문 : 중간을 건너뛰고 반복문의 마지막 조건식을 평가. 그 결과가 true면 반복문을 처음부터 실행
for 문 : 반복식을 실행한 후에 조건식을 평가. 그 결과가 true면 반복문을 이어서 실행
for/in 문 : 반복문의 처음으로 되돌아간다. 지정한 변수에 할당되어 있는 프로퍼티의 다음 프로퍼티를 대상으로 작업을 시작

// 배열 a안에서 값이 0 이상인 요소의 값을 모두 더한다.
let a = [2,5,-1,7,-3,6,9]
for(let i=0,sum=0;i<a.length;i++){
  if(a[i]<0)continue;
  sum += a[i];
}
console.log(sum);

[Codility] BMI

2018-11-29T00:00:00+00:00

<!DOCTYPE html>
<html lang="kr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>BMI</title>
  <script>
    window.onload = function() {
      document.getElementById('button').onclick = function(){
      let h = parseFloat(document.getElementById('height').value)
      let w = parseFloat(document.getElementById('weight').value)
      let bmi = document.getElementById('bmi')
      bmi.innerHTML = (w/h/h).toFixed(1)
      }
    }
  </script>
</head>
<body>
  <p>키: <input type='number' id='height'>m</p>
  <p>몸무게 <input type='number' id='weight'>kg</p>
  <p>당신의 체질량지수는 <output id='bmi'></output>입니다.</p>
  <input type="button" id='button' value="계산">
</body>
</html>

[Codility] stop watch

2018-11-29T00:00:00+00:00

스톱워치

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>stop watch</title>
  <script>
    window.onload = function() {
      let startButton = document.getElementById('start')
      let stopButton = document.getElementById('stop')
      let display = document.getElementById('display')
      let startTime,timer

      startButton.onclick = start;
      function start() {
        startButton.onclick = null
        stopButton.onclick = stop
        startTime = new Date()
        timer = setInterval(function() {
          let now = new Date()
          display.innerHTML = ((now - startTime)/1000).toFixed(2)
        },10)    
      }
      function stop() {
        clearInterval(timer);
        startButton.onclick = start;
      }
    };
  </script>
</head>
<body>
  <p id="display">0.00</p>
  <input type="button" value="start" id="start">
  <input type="button" value="stop" id="stop">
</body>
</html>

web I/O

2018-11-24T00:00:00+00:00

대화상자

웹브라우저의 전역 객체인 window객체에는 대화상자를 표시하기 위한 메서드가 세개 있다.

window.alert    // 경고 대화상자를 표시
window.prompt   // 사용자의 문자열 입력을 받는 대화상자를 표시
window.confirm  //[확인]버튼과 [취소]버튼이 있는 대화상자를 표시

prompt가 반환하는 값은 문자열. 숫자 값을 구하려면 parseInt나 parseFloat 메서드를 활용해서 숫자로 바꾸어 주어야 한다.

let age = parseInt(prompt('나이를 입력하시오'));
let height = parseFloat(prompt('키를 입력하십시오'))

console

console 객체는 웹 브라우저와 Node.js를 포함한 다양한 자바스크립트 실행 환겅에서 사용할 수 있다. 콘솔 출력을 돕는 다양한 기능을 제공

콘솔에 텍스트 출력

//문자열이나 변수 값을 콘솔에 로그로 출력

console.log
console.info
console.warn
console.error

객체의 프로퍼티를 목록으로 표시

// console.dir 메서드는 객체의 프로퍼티를 나열

let p = {a: 1, b: 2}
console.dir(p)

타이머(1)

//특정 코드의 실행 시간을 측정할 수 있다.실행 시간을 측정하는 작업이 끝난 후에 console.timeEmd메서드에 타이머 이름을 인수로 넘겨서 호출하면 처리에 소요된 시간이 밀리초 단위로 표시

console.time('answer_time')
alert('확인 버튼을 누르십시오')       //실행 시간을 측정하는 작업
console.timeEnd('answer_time')  //answer_time: 1216.106ms

이벤트 처리기

이벤트가 발생했을 때 실행되는 함수를 말한다.

이벤트 : 사용자가 버튼을 클릭하는 행위처럼 단말기와 애플리케이션이 처리할 수 있는 동작이나 사건을 뜻한다.
이벤트 주도형 프로그램 : 이벤트가 발생할 때까지 기다렸다가 이벤트가 발생했을 때 미리 등록해 둔 작업을 수행하는 프로그램

<!DOCTYPE html>
<html lang="kr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script>
    function displayTime() {
      let d = new Date();
      console.log("현재 시각은 " + d.toLocaleString() + "입니다.")
    }
    // toLocalString() 메서드는 배열의 요소를 나타내는 문자열을 반환
  </script>
</head>
<body>
  <input type="button" value="click" onclick="displayTime()">
<!-- input 요소를 클릭 했을 때 함수 displayTime이 실행 -->
<!-- onlick: '마우스로 클릭했음'을 뜻하는 이벤트-->
</body>
</html>

DOM에서 가져온 HTML요소에 이벤트 처리기 지정하기

DOM(Document Object Model)은 자바스크립트 등의 프로그램이 HTML요소를 조작할 수 있게 하는 인터페이스.

DOM에서 이벤트 처리기를 등록하는 가장 큰 목적은 HTML코드와 자바스크립트 코드를 분리하기 위해서이다. 코드를 분리하면 프로그램의 가독성과 유지 보수성이 높아진다.

DOM객체

DOM의 주요 객체

window: window객체라고 부르며 웹 브라우저 윈도우 하나 또는 챕 하나를 가리킨다.
document: Document 객체라고 부르며 HTML문서 전체를 가리킨다.HTML문서에서 HTML 요소 객체를 가져오거나 HTML요소를 새로 만드는 등 HTML문서 전반에 걸친 기능을 제공
요소 객체: HTML문서의 요소를 가리키는 객체

<!DOCTYPE html>
<html lang="kr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script>
    function displayTime() {
      let d = new Date();
      console.log("현재 시각은 " + d.toLocaleString() + "입니다.")
    }
    // 이벤트 처리기를 등록하는 작업의 실행 시점을 HTML문서 전체를 읽어 들인 이후로 미룬다. 이를 위해 window 객체의 onload 프로퍼티에 이벤트 처리기를 등록하는 작업을 수행하는 초기 설정 함수를 정의
    // 이 코드 덕분에 웹 브라우저가 HTML문서 전체를 모두 읽어 들인 후에 우변의 함수를 실행시킬 수 있다.
    window.onload = function(){
      let button = document.getElementById('button')
      button.onclick = displayTime;
    }
    // document.getElementById는 전달받은 인수를 id 속성의 값으로 가지고 있는 HTML요소의 요소 객체를 반환.만약 HTML 요소를 찾지 못하면 null을 반환. 
    // 요소 객체의 onclick 프로퍼티 값으로 함수 displayTime의 참조를 대입
  </script>
</head>
<body>
  <input type="button" value="click" id='button'>
</body>
</html>

타이머(2)

window 객체에는 setTimeout과 setInterval 메서드가 있다. 이들 메서드를 활용하면 지정된 시간이 흐른 후에 함수를 실행하거나 일정한 시간 간격에 따라 함수를 반복 실행할 수 있다.

let timer = setTimeout(function(){
  console.log(new Date())
},2000);
// 콘솔에 2초 후에 날짜가 표시
clearTimeout(timer)
// setTimeout()으로 실행 한 함수를 멈출 때 사용

setTimeout 메서드의 첫 번째 인수로 ‘실행하고자 하는 함수의 참조’, 두 번째 인수로는 ‘지연 시간’을 밀리초 단위로 지정

let timer = setInterval(function() {
  console.log(new Date())
},1000)
// 1초마다 날짜가 콘솔에 표시
clearInterval(timer)
// setInterval()으로 실행 한 함수를 멈출 때 사용

setInterval 메서드를 활용하면 일정한 시간 간격에 따라 반복해서 실행할 함수를 등록할 수 있다.

innerHTML 프로퍼티

요소 객체의 innerHTML 프로퍼티는 그 HTML요쇼의 내용을 가리키며, 이로써 HTML요소의 내용을 읽거나 쓸 수 있다.

    window.onload = function() {
      let startButton = document.getElementById('start')
      let stopButton = document.getElementById('stop')
      let display = document.getElementById('display')
      let startTime,timer

      startButton.onclick = start;
      function start() {
        startButton.onclick = null
        stopButton.onclick = stop
        startTime = new Date()
        timer = setInterval(function() {
          let now = new Date()
          display.innerHTML = ((now - startTime)/1000).toFixed(2)
        },10)    
      }
      // id 속성 값이 display인 HTML 요소의 모든 자식 요소를 삭제하고, 우변의 표현식을 평가한 내용을 HTML코드로 바꾸어 대입
      function stop() {
        clearInterval(timer);
        startButton.onclick = start;
      }
    };

  <p id="display">0.00</p>
  <input type="button" value="start" id="start">
  <input type="button" value="stop" id="stop">

document.write

현재는 DOM을 사용하여 HTML 요소를 생성하거나 처리 결과를 HTML문서로 출력하는 것이 일반적. 따라서 document.write를 사용하는 경우 매우 드물다. document.write 메서드는 인수로 받은 문자열을 HTML문서의 body 요소 안에 출력한다. 이렇게 되면 HTML 문서의 내용이 바꾸게 되고 웹 브라우저는 수정된 HTML문서를 표시하게 되며 동적으로 HTML문서를 변경하기에는 적합하지 않다.

expression & operator

2018-11-14T00:00:00+00:00

표현식 and 연산자
Math객체
부동소수점&정확도

표현식 and 연산자

표현식이란 결과적으로 어떤 값으로 평가(evaluation)되는 것.변수, 프로퍼티, 배열 요소, 함수 호출, 메서드 호출도 표현식이다. 이를 연산자를 사용하면 표현식을 조합하여 더욱 복잡한 표현식을 만들어 낼 수 있다.

2 + 3 // 2와 3을 피연산자라고 부른다.(operand)

연산자 우선순위

한 구문에 여러 개의 연산자를 이어서 쓴 경우, 어떤 연산자는 먼저 계산되고 어떤 연산자는 나중에 계산된다. MDN참조

산술 연산자

정수끼리 나누어도 결과가 부동소수점이 된다.
나머지 연산자 %의 피연산자는 부동소수점이 될 수 있다.
- 연산자는 피연산자 중 하나가 문자열이면 나머지 피연산자를 문자열로 만든다.
계산할 수 없는 경우에는 NaN으로 평가, 산술 연산자의 피연산자가 true면 1, false와 null이면 0으로 평가, undefined이면 NaN으로 평가

0/0 // NaN
"number" * 1 // NaN 
true + true // 2
1 + null // 1
1 + undefined // NaN

증가 감소 연산자

let a = 1;
++a // a에 1을 더한 다음에 a값을 평가
a++ // a를 평가한 다음에 a에 1을 더한다.
--a // a에 1을 뺀 다음에 a값을 평가
a-- // a를 평가한 다음에 adp 1을 뺀다.

a = 1;
b = ++a; // a에 1을 더하고 a를 b에 대입한다.(b는 2,a는 2)
c = a++ + 2; //a + 2를 c에 대입하고 a에 1을 더한다.(c는 4,a는 3)

Math 객체

JavaScript에 내장된 Math 객체에는 수 연산을 위한 메서드와 프로퍼티가 있다. MDN참고

부동소수점 및 정확도

산술 연산을 할 때는 숫자에 유효한 자릿수가 있으므로 계산할 때 오차가 발생한다는 점을 염두하기

자바스크립트의 숫자는 IEEE754로 규정된 64비트 부동소수점이며, 64자릿수의 2진수 부동소수점을 표현

1.ddd..d 부분중 ddd..d가 52비트를 차지한다. 즉 2진수 53자리이므로 2^53 = 10^15.95로 약 16자리가 된다.숫자를 자릿수가 정해진 부동소수점으로 표현하여 계산하면 오차가 발생하는데 이것을 정확도 문제라고 한다.

let a = Math.sqrt(100001);
let b = Math.sqrt(100000);

console.log(a,b); //316.2293471517152 316.22776601683796
//일반적으로 값이 가까운 두 수를 뺄셈할 때 정확도 문제가 발생한다. 이것을 정밀도 손실이라고 한다.
console.log(a-b); //0.001581134877255863
//정확한 계산한 값은 다음과 같다. 
console.log(1/(a+b)); //0.0015811348772568783

문자열

'Hello' + 'World!' // 'Hello World!
'1' + '2' // '12'
1 + 'number' // 1 number
true + (new Date()) // trueWed Nov 14 2018 10:02:56 GMT+0900 (KST)

’+’연산자는 피연산자가 모두 문자열이면 문자열로 연결한다.
피연산자 중 하나가 문자열 또는 문자열로 변환할 수 있는 객체라면 다른 피연산자의 타입을 문자열로 바꾼 다음 연결

문자열 메서드

문자열을 String 객체로 변환하려면 String생성자를 사용한다.

let msgObj = new String('Hi nice to meet you');

이처럼 원시 값을 객체로 변환하는 행위를 가리켜 원시 값을 객체로 래핑(wrapping)한다고 한다.

String 객체에는 문자열을 처리하기 위한 다양한 프로퍼티와 메서드가 마련되어 있다.MDN참고

String 생성자의 메서드

String생성자 또한 일종의 함수이며 프로퍼티를 갖고 있다.

프로퍼티	설명	비고
String.length	항상 1
String.fromCharCode()	인수로 넘긴 문자 코드 목록으로 문자열을 만들어 반환
String.fromCodePoint()	인수로 넘긴 코드 포인트 목록으로 문자열을 만들어 반환	ES6
String.prototype	String의 프로토타입 객체
String.raw()	템플릿 문자열의 원지 문자열 형식을 반환	ES6

String.fromCharCode(0xAE38); // 길
String.fromCharCode(65,66,67); //ABC
// 문자코드(UTF-16 인코딩 값)을 문자열로 변환.쉼표로 구분한 문자 코드 여러 개를 인수로 넘기면 각 문자 코드가 뜻하는 문자를 문자열로 연결

let msg = 'New message"
console.log(msg[2]); //w 
// 문자열을 읽을 때는 charAt메서드 대신 대괄호 연산자를 사용할 수 있다.

관계 연산자

연산자	예제	뜻
==	a == b	a 값과 b 값이 같으면 true, 그 외에는 false
!=	a != b	a 값과 b 값이 다르면 true, 그 외에는 false
===	a === b	a 와 b의 `값과 타입`이 같으면 true, 그 외에는 false
!==	a !== b	a 와 b의 `값과 타입`이 다르면 true, 그외에는 false

일치(===)연산자는 피연산자를 평가한 후에 타입을 변환하지 않은 상태의 두 값을 엄격하게 비교,동일(==)연산자는 내부적으로 좌우 피연산자의 타입을 변환한 다음에 좌변과 우변이 같은지를 느슨하게 비교

논리 연산자

연산자	예제	뜻	예제의 뜻
&&	a && b	논리 곱	a와 b가 모두 true면 true, 그 외에는 false
::	a :: b	논리 합	a와 b중 하나라도 true면 true, 모두가 false면 false
!	!a	부정	a가 true면 false, false면 true

피연산자의 평가

논리 연산자의 피연산자는 논리 값이 아니어도 된다. 논리값이 아니면 필요에 따라 타입을 변환한다.

0, -0,빈문자열(""),NaN,null,undefinde -> false
0을 제외한 숫자, 빈 문자열을 제외한 문자열, 모든 객체,심벌 -> true

논리곱(&&)연산자와 논리합(::)연산자는 단락 평가(short-circuit evalution)를 한다. 단락 평가란 첫 번쨰 피연산자 값이 표현식을 결졍하면 두 번쨰 피연산자을 평가하지 않는 것을 말한다. 또한 논리곱 연산자와 논리합 연산자는 논리값(true,false)대신에 마지막으로 평가한 피연산자 값을 반환한다.

// 논리합
true || true // true
true || false // false
false || true // true 
false || false // false
// 논리곱
true && true // true
true && false // false
false && false // false
false && false // false

:: 연산자는 여러 개의 값 후보 중에서 null 또는 undefined가 아닌 값을 선택하고자 할 때 유용하세 사용된다.

let time = time_interval || animationSettings.time || 33;
// time_interval이 정의되어 있을 대는 time_interval 값을 사용, 정의되지 않았을 때는 animationSettings객체의 time 프로퍼티를 사용,그것또한 정의되어 있지 않았을 때는 정수(33)을 사용

조건 연산자

let num = (a%2 == 0)? '짝수' : '홀수';

이때 우변 값은 a % 2가 0일 때(즉,a가 짝수일 때)는 ‘짝수’가 되고, 그렇지 않을 때(즉,a가 홀수일 때)는 ‘홀수’가 된다. 조건 연산자는 삼항 연산자이며 첫 번째 피연산자를 조건식으로 평가한 후에 그결과가 true면 두 번째 피연산즐 값으로 삼고, false면 세 번째 피연산자를 값을 삼는다.

쉼표 연산자

이항 연산자로 왼쪽 이연산자를 평가하고 오른쪽 피연산자를 평가한 이후에 마지막으로 오른쪽 끝 피연산자의 값을 반환한다.이를 활용하면 여러 문장을 한 문장으로 표현할 수 있다.

// for문에서 자주 사용
for(let i = 0,i<=10,i++){

}

명시적 타입 변환

숫자의 타입을 문자열로 바꿀 수 있다.

10 + 'number' // '10number'
10 + '' // '10' 숫자에 빈 문자열을 더해 숫자 타입을 문자열로 바꿀 수 있다.
('0000'+12).slice(-4) // '0012' 앞부분에 0을 넣어 네 자릿수 정수를 표현하는 문자열로 만들 수 있다.

Number 객체의 메서드를 활용

let n = 15
n.toString()     //인수를 지정하지 않으면 10진수 문자열로 변환
n.toString(2)    // '1111' 2진수 문자열로 변환
n.toString(16)   // 'f' 16진수 문자열로 변환
(15).toString(16)// 'f' 숫자에서 바로 메서드를 사용하고자 할 때는 소괄호로 묶는다.

let x = 1234.567
x.toString()
x.toString(16)
x.toFixed(0)     // '1235'숫자의 소수점 아래 자릿수를 지정한 문자열로 변환
x.toFixed(2)     // '1234.57'
x.toFixed(4)     // '1234.5670'
x.toExponetial(3) // '1.235e+3' 숫자의 소수점 아래 자릿수를 지정한 문자열로 변환하되 지수를 함께 표시
x.toPrecision(3)  // '1.23e+3' 숫자를 유효 숫자가 지정된 문자열로 변환한다. 단, 유효 숫자가 정수부의 자릿수보다 작을 때는 지수로 표시
x.toPrecision(6)  // '1234.57' 

String 함수를 활용
String 생성자 앞에 new 연산자를 붙이면 String객체를 생성하는 함수로 사용할 수 있지만, new 연산자를 붙이지 않으면 일반적인 함수로 활용할 수 있다. 이때 String함수의 반환값은 String객체가 아닌 문자열

String(1234.567) // '1234.567'
String(0x1a)     // '26'  

문자열을 숫자로 변환

수식 안에서 묵지석으로 변환

let s  = '2';
s - 0 // 2;
+s    // 2;

parseInt와 parseFloat 함수를 활용
문자열을 해석해서 숫자로 바꾸는 함수.parseInt함수는 문자열을 정수로 바꾸고 parseFloat 함수는 문자열을 부동소수점으로 바꾼다.

parseInt('3.14')          // 3
parseFloat('3.14')        // 3.14
parseInt('3.14 meters')   // 3    숫자 다음에 등장하는 문자열은 무시
parseFloat('3.14 meters') // 3.14 
parseInt('0xFF')          // 255  문자열 앞부분에 0x가 있으므로 16진수로 해석
parseInt('0.5')           // 0
parseInt('.5')            // NaN 문자열 앞부분에 '.'이 있으므로 해석하지 않음   
parseInt('abc')           // NaN 숫자로 해석할 수 없음

Number 함수를 활용하는 방법
Number 생성자 앞에 new 연산자를 붙이면 Number객체를 생성하는 함수로 사용할 수 있지만, new 연산자를 붙이지 않으면 일반 함수로 활용할 수 있다.이때 Number함수의 반환값은 Number객체가 아닌 숫자이다.

Number('2.12314')   // 2.12314
Number(123)         // 123
Number(true)        // 1      모든 데이터 타입을 숫자 타입으로 바꾸는 기능이 있다.
Number(false)       // 0
Number(NaN)         // NaN
Number(undefined)   // NaN