*55일차

@Interaction

• 사용자와 상호작용

 

ex) 

• alert : 사용자알림
• console : 객체

  function test1(){
    // alert('좋은 아침입니다.');
    
    console.log('좋은 아침입니다.'); // 개발용
    console.error('오류입니다.');
    console.dir({id: 'honggd'}); // 객체를 계층구조로 확인
    console.time('abcde');
    for(let i = 0; i < 1_000_000; i++){

    }
    console.timeEnd('abcde');
  }

 

*confirm

• 사용자로부터 boolean형 입력을 받을 수 있는 메소드
• 확인/취소 버튼으로부터 각각 true/false를 반환

ex)

  function test2(){
    const bool = confirm('정말 삭제하시겠습니까?');
    console.log(typeof bool, bool);

    if(bool){
      // 삭제 프로세스...
      alert('파일이 삭제되었습니다.');
    }
  }

 

 

*prompt

• 사용자로부터 한줄짜리 입력값을 받는 메소드
• 텍스트필드, 확인/취소 버튼을 제어
• 확인시 입력값(string)이 리턴, 취소시 null이 리턴

ex)

  function test3(){
    const name = prompt('이름을 입력하세요');
    console.log(typeof name, name);

    // 값을 논리값을 자동형변환
    // - 값("hello", 123, 34.56)이 있으면 true
    // - 값("", null, undefined)이 없으면 false
    if(name){
      // area.innerHTML = "<h2>" + name + "님, 반갑습니다.</h2>";
      
      // template string(ES6)
      area.innerHTML = `<h2>${name}님, 반갑습니다.</h2>`;
    }
    else {
      alert(`이름을 
입
력
  해주세요.`);
      alert("이름을\n입\n력\n 해주세요.");
    }

  }

 

*innerHTML

• getter : 자식 html요소를 포함
• setter : html요소 표현

ex)

  function test4(){
    console.dir(foo.innerHTML); // getter (자식 html요소를 포함)
    
    const html = foo.innerHTML;
    area.innerHTML = html; // setter (html요소 표현)
  }

 

 

*innerText

• getter : 자식 html요소는 제거
• setter : html요소를 text 처리

ex)

  function test5(){
    console.log(foo.innerText); // getter (자식 html요소는 제거)
    // 안녕하세요. 저는 박혁거세입니다.

    const html = foo.innerHTML;
    area.innerText = html; // setter (html요소를 text처리)
  }

 

*outerText

• getter : 태그 자신을 포함한 html 반환
• setter : 태그 자신을 대체

ex)

  function test6(){
    console.log(foo.outerHTML);
    // <div id="foo">안녕하세요. 저는 <mark>박혁거세</mark>입니다.</div>
    foo.outerHTML = '<div id="bar">안녕하세요. 저는 <mark>정현동</mark>입니다.</div>';
  }

 

---

 

 

@api_string_math_date

 

*string

• string타입 변수/값은 string 프로토타입의 메소드를 사용할 수 있다.
• 정규표현식

function test1(){
    const str = "Apple Samsung PineApple";

    console.log("toUpperCase : ", str.toUpperCase());
    console.log("toLowerCase : ", str.toLowerCase());

    console.log("indexOf : ", str.indexOf("Sam")); // 6
    console.log("indexOf : ", str.indexOf("SSSSSSS")); // -1

    console.log("charAt : ", str.charAt(6)); // S
    console.log("str[index] : ", str[6]); // S

    // substring(start, end) - start(inclusive), end(exclusive)
    console.log("substring : ", str.substring(6, 9)); // Sam
    console.log("substring : ", str.substring(6)); // Samsung PineApple

    // substr(start, length)
    console.log("substr : ", str.substr(6, 3)); // Sam
    console.log("substr : ", str.substr(6)); // Samsung PineApple

    console.log("replace : ", str.replace('Apple', '사과'));
    console.log("replace : ", str.replace('Apple', ''));
    console.log("replace : ", str.replace(/Apple/g, '')); // 정규표현식
    
    // let result = str;
    // while(result.indexOf('Apple') > -1){
    //   result = result.replace('Apple', '');
    // }
    // console.log(result);

  }

ex) str에서 대문자 A/소문자 a의 개수를 조회

    let cnt = 0;
    for(let i = 0; i < str.length; i++){
      if(str[i] == 'A' || str[i] == 'a')
        cnt++;
    }
    console.log('A, a의 개수 : ', cnt);

 

 

*Math static api

• Math.ceil : 소수점 이하 올림
• Math.round : 소수점 이하 반올림
• Math.floor | Math.trunc : 어떤 수 보다 크지않은 최대의 정수 반환 | 소수부분 제거 후 정수부분 반환
• Math.random : 난수 생성

  function test2(){
    console.log(Math.ceil(123.45));
    console.log(Math.round(123.45));
    console.log(Math.floor(123.45));

    const n = 1234.565432;
    console.log(Math.round(n * 100) / 100); // 123456.5432 -> 123457 -> 1234.57
    
    // 0.0 이상 1.0미만의 난수 생성
    const rnd = Math.random();
    console.log(rnd);
    // 1 ~ 10 사이의 정수형 난수 : 버림(난수 * 경우의 수) + 최소값 
    console.log(Math.floor(rnd * 10) + 1);
  }

 

ex) ul#test li태그에 1~1000사이의 난수를 대입하고 짝수인 경우 color를 변경하는 함수

→매 실행시 마다 초기화되어야 함

<style>
  .even {
    color: hotpink;
  }
</style>
<script>

function test3(){
    const list = document.querySelectorAll("ul#test li");
    for(let i = 0; i < list.length; i++){
      const li = list[i];
      li.classList.remove('even');
      const n = Math.floor(Math.random() * 1000) + 1;
      li.innerText = n;
      if(n % 2 == 0){
        li.classList.add('even');
      }
    }
  }

 

 

 

*Date

• 날짜,시각정보를 관리하는 객체
• date,prototype이 제공하는 메소드 사용

ex)

function test4(){
    const now = new Date(); // new 생성자함수 호출!
    console.log(typeof now, now.toString());
    console.dir(now);
    
    console.log("getFullYear : ", now.getFullYear());
    console.log("getMonth + 1: ", now.getMonth() + 1); // 0 ~ 11 인덱스로 처리
    console.log("getDate : ", now.getDate());

    const days = ['일', '월', '화', '수', '목', '금', '토'];
    console.log("getDay : ", now.getDay()); // 일요일(0) ~ 토요일(6)
    console.log("요일 : ", days[now.getDay()]);

    console.log("getHours : ", now.getHours());
    console.log("getMinutes : ", now.getMinutes());
    console.log("getSeconds : ", now.getSeconds());

    console.log("unix time : ", now.getTime());
    console.log("unix time : ", Date.now());

    // 특정날짜시각 정보를 가진 Date객체 생성
    console.log(new Date('2022/01/01'));
    console.log(new Date('2022/01/01 15:00:20'));
    console.log(new Date(2022, 1 - 1, 1));
    console.log(new Date(2022, 1 - 1, 1, 15, 0, 20));

    const millis = new Date(2022, 1 - 1, 1).getTime();
    console.log(new Date(millis));

    // 두 날짜 차이 구하기
    const tomorrow = new Date(2022, 4 - 1, 15, 18, 0);
    const diff = (tomorrow - now) / 1000 / 60 / 60 / 24; // Date - Date = millis
    console.log(diff); // 일단위
  }

 

ex)시계

  function displayClock(date){
    const f = function(n){
      return (n < 10) ? "0" + n : n;
    };

    const yyyy = date.getFullYear();
    const MM = f(date.getMonth() + 1);
    const dd = f(date.getDate());
    const hh = f(date.getHours());
    const mm = f(date.getMinutes());
    const ss = f(date.getSeconds());

    const str = `${yyyy}/${MM}/${dd} ${hh}:${mm}:${ss}`;
    clock.innerHTML = str;

    // 1초후에 다시 호출
    // 1 * 1000 ms
    setTimeout(function(){
      displayClock(new Date());
    }, 1000); 
    
  }

  displayClock(new Date());
  </script>

---

 

 

@scope

 

*변수 유효범위

• 전역변수 : 모든 함수에서 사용가능
• 지역변수 : 함수/블럭 안에 선언된 변수

✔var로 선언된 전역변수는 Window전역객체의 속성으로 등록된다.

<h1>변수 유효범위</h1>
  <button onclick="test1();">확인</button>
  <script>
  // 전역변수 : 모든 함수에서 사용가능
  const a = 100;
  let b = '안녕';

  // var로 선언된 전역변수는 Window전역객체의 속성으로 등록된다.
  var x = true; 

  function test1(){
    console.log("a : ", a);
    console.log("b : ", b);
    console.log("x : ", x);

    // 지역변수 : 함수/블럭 안에 선언된 변수
    const c = 333;
    console.log("c : ", c);
  }
  
  // 전역에서 지역변수 호출
  // console.log("c : ", c); // Uncaught ReferenceError: c is not defined

  if(true) {
    const d = 999;
  }
  // console.log("d : ", d); // Uncaught ReferenceError: d is not defined
  
  </script>

 

---

 

@Casting

 

*형변환

 

 

ex)산술연산,비교연산간의 형변환

function test1(){
    console.log(typeof(3 + "3"), 3 + "3"); // string 33
    
    console.log(typeof(3 - "3"), 3 - "3"); // number 0 
    console.log(typeof(3 * "3"), 3 * "3"); // number 9 
    console.log(typeof(3 / "3"), 3 / "3"); // number 1 
    console.log(typeof(3 % "3"), 3 % "3"); // number 0 

    console.log(typeof(3 - "a"), 3 - "a"); // number NaN -> Not a Number 

    console.log(typeof(3 == "3"), 3 == "3"); // boolean true
    console.log(typeof(3 != "3"), 3 != "3"); // boolean false

 

 

✔엄격비교연산자

• === 타입과 값이 모두 일치해야 true
• !== 타입 or 값이 달라야 true

    console.log(typeof(3 === "3"), 3 === "3"); // boolean false
    console.log(typeof(3 !== "3"), 3 !== "3"); // boolean true

 

 

 

*숫자로 형변환

• Number() : 숫자로 형변환 / 반환불가한 문자가 있는경우 NaN리턴
• parseInt() : 정수로 형변환 / 변환불가한 문자전까지 변환후 정수 리턴
• parseFloat() : 실수로 형변환 / 변환불가한 문자전까지 변환후 실수 리턴
• NaN : Not a Number

  function test2(){
    const n = "123.456";
    console.log(typeof n, n);

    console.log(typeof Number(n), Number(n)); // number 123.456
    console.log(typeof parseInt(n), parseInt(n)); // number 123
    console.log(typeof parseFloat(n), parseFloat(n)); // number 123.456

    const m = "123.456원";
    console.log(typeof Number(m), Number(m)); // number NaN
    console.log(typeof parseInt(m), parseInt(m)); // number 123
    console.log(typeof parseFloat(m), parseFloat(m)); // number 123.456

    // input#x
    console.log(typeof x.value, x.value);

  }

 

 

ex) #num1 #num2 사용자 입력값의 합을 경고창에 출력

• 두 input태그에 모두 값이 입력되지 않은 경우 → 알림처리 "수를 먼저 입력하세요."
• 계산후 입력값을 삭제처리함

<fieldset>
    <legend>두수의 합 구하기</legend>
    <!-- input:number#num$[placeholder=num$]*2 -->
    <input type="number" name="nums" id="num1" placeholder="num1">
    <input type="number" name="nums" id="num2" placeholder="num2">
    <input type="button" value="계산" onclick="test3();">
  </fieldset>
  
  <script>

  function test3(){
    const num1Val = num1.value;
    const num2Val = num2.value;

    // 유효성 검사
    if(!num1Val || !num2Val){
      alert("수를 먼저 입력하세요.");
      return; // 조기리턴 - 이하코드는 실행하지 않고, 중단
    }
    
    alert(`입력하신 두 수의 합은 ${Number(num1Val) + Number(num2Val)} 입니다.`);

    // 초기화
    num1.value = "";
    num2.value = "";

  }

 

 

*논리형으로 형변환

• 값이 있는 것은 true
• 값이 없는 것은 false
• Boolean() , !!(변수/값) 확인

  function test4(){
    // 값이 있는 것
    console.log(Boolean(123));
    console.log(Boolean(-123));
    console.log(Boolean(5.5));
    console.log(Boolean("헤이"));
    console.log(!!123);
    console.log(!!{});
    console.log(!![]);

    // 값이 없는 것
    console.log(Boolean(0));
    console.log(Boolean(0.0));
    console.log(Boolean(""));
    console.log(Boolean(''));
    console.log(Boolean(undefined));
    console.log(Boolean(null));
    console.log(Boolean(NaN));
    console.log(Boolean([].length)); // 0

    const arr = [];
    if(arr.length){
      // 배열의 요소가 있을때
    }
    else {
      // 배열의 요소가 없을때
    }

  }