자바스크립트-1일차 정리

- 자바 스크립트는 head 태그 혹은 body 태그 안에서 선언하고 사용가능하다.

- 스크립트가 많아지게 될 때 body 끝 부분에 넣는다면 앞에 있는 html코드가 먼저 생성된 후에 스크립트가 컴파일 되고, head쪽에 스크립트를 두게 되면 html코드가 생성되기 전에 컴파일 되기 때문에 속도가 차이가 날수도 있다.

- 자바 스크립트 파일(.js)을 따로 만들어 두고 이용할 수 있다. 

- 외부로 놓게 되면 이점이 있는데

1) html코드와 js코드를 분리할 수 있다는 점

2) 코드가 보기 편해지고, 유지보수가 쉬워진다

3) 캐쉬된 스크립트 파일은 페이지 로드의 속도를 올려준다.

- 외부 스크립트 파일을 이용할 때 full url를 참조하여 사용할 수도 있다.

- 자바스크립트의 출력은 크게 4가지이다.

1)innerHtml - html을 변화시킨다.

2)document.write() - 페이지에 출력시킨다. 단 기존에 출력됬던 결과들은 사라진다.

3)window.alert() - 알림창

4)console.log() - 콘솔창

- 자바스크립트는 카멜케이스로 작성한다.

- 데이터 타입의 종류

1) string

2) number

3) boolean

4) undefined  *(null과 undefined는 같은 의미이지만, 타입이 다르다)

5) object

6) array

- 객체안에 있는 function()을 실행시킬 때 ()를 빼고 선언하게 되면 함수가 실행되는 것이 아닌 함수 안에 내용이 보여지게 된다.

- 자바스크립트는 html안에서, 이벤트에 동작한다.

- 이벤트의 종류

1)onchange : html element가 변경되었을 때

2)onclick : 유저가 element를 클릭하였을 때

3)onmouseover : 유저가 element위에서 마우스를 움직일 떄

4)onmouseout :  유저가 element 위에서 마우스를 뗄때

5)onkeydown : 유저가 키보드 키를 눌렀을 때

6)onload : 브라우저가 페이지 로딩을 끝냈을 때

- 스트링 메소드 : https://www.w3schools.com/js/js_string_methods.asp

- 자바스크립트 Array 안에는 다양한 타입의 변수들을 가질 수 있다.

- Array는 반드시 숫자 인덱스를 사용해야 한다.

- slice()는 기존 코드에서 변경하는 것이 아닌 새로운 배열을 생성한다.

- new Data()에 가능한 인자는 6가지이며 각 각 년,월,일,시,분,초 이며, 예외적으로 인자가 하나 일때는 년도가 아닌 초를 나타낸다.

- for( x in array) 

- 정규표현식 /pattern/modifiers

- modifiers 종류

1) i : 대소문자를 구분하지 않는다.

2) g: 검색된 모든 결과를 리턴

-pattern의 종류

-  brakets 종류

1) [abc] : brakets 사이의 character를 찾는다.

2) [0-9] : brakets 사이의 숫자를 찾는다.

3) (x|y) : Find any of the alternatives separated with | 

- metacharacter 종류

1) \d : 숫자를 찾는다

2) \s : 스페이스바 찾는다.

3) \b : 단어의 시작이 주어진 것과 같은 것을 찾는다.

4) \uxxxx : 헥사 넘버로 표현된 유니코드를 찾는다.

- quantifier 종류

1) n+ : 최소 한개의 n이 연속된 string을 찾는다

2) n* : n의 구성원들을 찾는다. ex) n=123때 123333,12

3) n? : n의 구성원들을 찾는다. 단 n의 맨뒤에 문자가 연속되지 않는다. ex) n=123때 123,12

- try{ .. .} catch(err){ ... }

- hoisting = 자바스크립트는 디폴트 행동으로 생성과 동시에 초기화되지 않은 모든 변수 선언을 코드의 범위 위쪽으로 움직여 놓는다.

(* let과 const로 선언된 것은 이에 영향을 받지 않는다.)

- 자바스크립트 ECMAScript 5 부터 "use strict" 를 사용한다.

(* use strict는 예를 들어 선언되지 않는 변수를 사용하는 것으로부터 보호하여 안전한 코드를 쓸 수 있도록 도와준다..)

- this 키워드 범위는 객체 내부에 메소드 외에는 전부 글로벌인것 같다(?)

- let과 const 의 등장

- let은 {} 괄호안에서만 사용이 가능하고, 괄호를 벗어나면 사용할 수 없다. 괄호 안에 괄호 {  {}  } 에서 변수를 변경하여도 그 변경된 괄호안에서만 유효하다.

- const는 let과 같이 동작하지만 재정의 할 수 없다는 것이 특징이다.

- const object, array는 변경이 가능하다. 하지만 재정의는 불가능하다

JS Best Practice

---

- 글로벌 변수를 조심하라. => 글로벌 변수와 함수는 다른 스크립트에 의해서 오버라이트 될수도 있다.

- 모든 함수 또는 스크립트에서 선언은 위에 놓는다.

- 숫자,문자,불리언을 객체로 생성하지 마라 => 나중에 타입으로 인해서 잘못된 결과가 나올 수도 있다.

JS Mistakes

---

1) regular comparison 과 strict comparison을 구별하라.

var x = 10; var y="10";

if( x==y) //true

if( x===y) //false

switch에서는 strict comparison을 사용한다.

2) Float에 대한 잘못된 이해

float는 64비트에 저장되게 되는데, 이는 정확한 부동 소숫점 값을 가지는데 어려움을 갖는다.

var x = 0.1.y=0.2;

x+y //0.3000000000004

이 문제를 해결하고 싶다면

var z = (x * 10 + y * 10) / 10;       // z will be 0.3 

3) Object와 Arrays의 차이를 이해하라

4)Undefined는 Null이 아니다.

자바스크립트 객체와 변수, 프로퍼티, 메소드는 undefined 될 수 있다.

게다가, 빈 자바스크립트 객체는 value로 null을 가질수도 있다.

따라서

if(typeof myObj === "undefined") //true

if(typeof myObj === "null") //false

다음 순서 : https://www.w3schools.com/js/js_mistakes.asp