---

JavaScript basic

JS event

onkeydown
: input tag에서 키보트에서 글자가 입력될 때 event 발생함.
=> 알림창 발생 후 웹브라우저에 입력문자 display됨.

onkeyup
: input tag에서 키보트에서 글자가 입력될 때 event 발생함.
=> 웹브라우저에 입력문자 display된 후 알림창 발생.

onload
: 웹브라우저가 발생시키는 event
=> JS엔진이 html문서 안에 있는 모든 html element들을 객체로 만든 후
웹브라우저에 html element들을 display하기 전 자동 호출함.

event handler
: event가 발생할 때 처리되는 함수(function)

---

JS String

length
: 문자 전체 갯수 출력.

• JS에서 new + function(함수)Constructor(생성자)를 생성하면 object가 생성됨.

<script>
let x = "John"; // -> string
let y = new String("John") // -> object
// => String 기능을 하는 object 생성함.   
//      이렇게 사용 가능하지만, 사용하지 않는 것을 권장함.

document.getElementById("demo1").innerHTML = 
  	"x의 데이터타입 : " + typeof x + "<br>" + "y의 데이터타입 : " + typeof y;

// a == b를 실행할 때, a와 b의 데이터 타입을 자동형변환해 비교함.
//  object인 y를 String으로 자동형변환해 true 값을 리턴함.
document.getElementById("demo2").innerHTML = "x == y의 결과값 : " + (x == y);
</script>

slice(A,B)
: 문자열 A번부터 B번까지 출력함.

replace(A,B)
: 문자열에서 A문자를 B문자로 대치.
=> 찾으려문 문자가 문자열에 한 번 이상 나오는 경우, 첫번째 문자만 대치함.

+)
/문자/ : regular expression.
ex) /MICROSOFT/

i : ignore, 대소문자를 무시함.
ex) /MICROSOFT/i 로 찾은 문자
--> microsoft MIcrOSoFt MICROSOFT

`` back-tick

<script>
// 1. string문자열에서 사용 가능(''  "" ``).
let text = `Hello world!`;
</script>

<script>
// 2. ' " 둘 다 사용 가능함.
let text = `He's often called "Johnny"`;
</script>

<script>
// 3. 멀티 line에 적용 가능함. 
// (""을 사용할 경우 + <br> 를 사용해야함.)
let text =
     `The quick
      brown fox
      jumps over
      the lazy dog`;
</script>

<script>
// 4. ${변수명}으로 변수 값을 읽어올 수 있음.
      => 이 기능을 사용하기 위해 ``을 사용하는 것.
 let firstName = "John";
 let lastName  = "Doe";
 let text 
  = `Wellcome ${firstName}, ${lastName} :-)`
</script>

<script>
// 5. 변수들로 ``안에서 ${수식}을 넣어 연산 가능함.
 let price = 10;
 let VAT = 0.25;
 let total 
  = `Total: ${(price * (1 + VAT)).toFixed(2)}`;
</script>

<script>
// 6. ``안에 ${변수명 or 수식}을 넣어 html코드 작성 가능함.
let header = "Templates Literals";
let tags = ["template literals", "javascript", "es6"];
       
let html = `<h2>${header}</h2><ul>`; // 변수 header를 h2 태그에 넣고 unordered lIst(ul) tag 열기..
for (const x of tags) { // 변수 x에 tag[0]부터 tag[2]까지 입력함.
html += `<li>${x}</li>`; // x를 리스트(li)로 html에 차례로 넣음.
        }
html += `</ul>`; // ul 태그 닫기.
document.getElementById("demo").innerHTML = html;
</script>

---

JS type : Number

<script>
let x = "100";
let y = "10";

// 문자열 / 문자열 
//=> 나누기 연산자에서는 문자열을 숫자로 자동 형변환해 숫자로 계산해 리턴함.
//=> 문자열이 숫자로 변환되지 않으면 NaN(Not a Number)를 리턴함.
// ex) NaN / 10 ==> NaN

  let z = x / y;
let z = x * y; 
let z = x - y; 
// ==> 나누기(/), 곱하기(*), 빼기(-) 모두 자동 형변환 가능함.

//'+'는 형변환 하지 않음
let z = x + y;
</script>

isNaN(A)
: A가 Not a Number 이면 true, 아니면 false 리턴.

<script>
// NaN의 type은 number.
document.getElementById("demo2").innerHTML 
  = typeof a; // => number 출력.         
</script>

.toString(A)
: 숫자를 문자열로 변환함.

<script>
// 숫자나 연산식을 toSting()할 수 있음.
let x = 123;
	document.getElementById("demo").innerHTML =
	x.toString() + "<br>" +
            (123).toString() + "<br>" +
            (100 + 23).toString() + "<br>" +
            ( x - 23).toString() + "<br>" +
            ( x + 23).toString();
</script>

Number()
: number type으로 변환함.

<script>
document.getElementById("demo").innerHTML =
        Number(true) + "<br>" +             // true : 1
        Number(false) + "<br>" +            // false : 0
        Number("10") + "<br>" +             // 10
        Number("  10") + "<br>" +           // 10
        Number("10  ") + "<br>" +           // 10
        Number("  10  ") + "<br>" +         // 10 --> 공백 삭제
        Number("10.33") + "<br>" +          // 10.33
  
  		// NaN을 엄격하게 구별함.
        Number("10,33") + "<br>" +          // NaN 
        Number("10 33") + "<br>" +          // NaN
        Number("John");                     // NaN
</script>

Number() function에 날짜를 넣으면, 1970년 01월 01일 0시 0분 0초를 기준으로 숫자로 변환함.

• (1day : 24시간 60분 60초 * 1000ms)

+) Java, JSm, C, Cpp, Oracle 모두 적용되는 규칙임.

<script>
let x = new Date("1970-01-02");
  document.getElementById("demo1").innerHTML = 
	"Date를 숫자로 변환 : " + Number(x); // ==> 86400000
</script>

parseInt()
: 정수값으로 변환한 메소드, 실수값은 소수점 제거함.
=> 최대한 정수값으로 변환하려고함.

<script>
document.getElementById("demo").innerHTML =
	parseInt("-10") + "<br>" +        // -10
    parseInt("-10.33") + "<br>" +     // -10
	parseInt("10") + "<br>" +         // 10 
    parseInt("10.33") + "<br>" +      // 10 

    parseInt("10 6") + "<br>" +       // 10
    // ==> NaN으로 출력하지않고 읽을 수 있는 정수까지 최대한 읽어옴.
    parseInt("10 years") + "<br>" +   // 10
   // ==> 정수만 출력하고 문자를 버림.
   parseInt("years 10");          	  // NaN
   // ==> 문자가 먼저 인식되면 NaN 출력
</script>

parseFloat()
: 실수값으로 변환함.
=> global function(method)
=> Number function costructor

<script>
document.getElementById("demo2").innerHTML =
	parseFloat("10") + "<br>" +         // 10
    parseFloat("10.33") + "<br>" +      // 10.33
    parseFloat("10 6") + "<br>" +       // 10
    parseFloat("10 years") + "<br>" +   // 10
    parseFloat("years 10");             // NaN
</script>

Number()
-> 엄격하게 Number로 변환함.

• 띄어쓰인 숫자, 문자, 문자와 함께 쓰인 숫자 등,,, 모두 NaN으로 출력됨..

parseFloat() parseInt()
-> 최대한 변환할 수 있도록 함.

• 웬만하면 모두 일정 규칙을 갖고 변환됨.
• 단, 문자가 먼저 나오는 숫자는 NaN으로 출력함.