[SIST] Web_javascript_days02

1. javascript 기본 개념2

1) javascript 누가 실행시키는가?

   - html 문서 안에 script 태그 안에 코딩을 하면 웹 브라우저에서 실행

2) 작성된 순서대로 하나씩 실행된다.

3) 실행문(명령문) 뒤에 세미콜론을 추가
   - js는 하나의 명령문 뒤에 세미콜론을 안붙여도 상관없지만, 세미콜론을 추가하는 것을 적극 권장

4) js는 여러 공백을 무시한다. 공백을 추가하면 가독성이 좋다.

5) js 예약어(키워드)
abstract   arguments   await*   boolean
break   byte   case   catch
char   class*   const   continue
debugger   default   delete   do
double   [else]   enum*   eval
export*   extends*   false   final
finally   float   [for]   [function]
goto   [if]   implements   import*
in   instanceof   int   interface
[let*]   long   native   new
null   package   private   protected
public   return   short   static
super*   switch   synchronized   [this]
throw   throws   transient   [true]
try   typeof   [var]   void
volatile   while   with   yield

6) 리터럴(== 고정값)
     ex) 3.14

7) javascript는 문자/문자열 구분 X ''(홑따옴표)에 넣어도 되고 ""(쌍따옴표) 넣어도 된다.

- var msg = "yalin's home"; // 안에 ' 쓸 일이 있으면 "" 감싸고, 안에 " 쓸일 있으면 '' 감싸자

8) javascript 대소문자 구분을 한다.

9) javascript 변수 선언할 때 Camel Case(카멜표기법) 사용

   ex) first name -> firstName 선언

 

* 변수명 앞에 $를 붙여서 사용할 수 있다.

10) 주석처리 // 와 /* ~ */ 

 

11) 연산 방향 왼쪽 -> 오른쪽

---

2. javascript에서 변수를 선언하는 4가지 방법

1) var 예약어 사용

  - 1995년 ~ 2015년까지 js 코드에 사용

 

  - 변수를 재선언할 수 있음. 변수를 다시 선언해도 값이 손실되지 않는다.

 

  - 변수 선언이 값을 할당한 코딩 밑에 있으면 웹브라우저 내부에서 자동으로 변수 선언한 코딩을 값 할당하는 코딩 위로 올린 다음에 처리가 된다. == javascript 호이스팅

 

- 블럭 범위 제공 X

 

2) let 예약어 사용

- 2015년부터 새로 추가된 키워드

- 변수 선언 후 나중에 값 할당 가능

 

- 변수 재선언은 할 수 없고 재할당은 가능하다.

 

- 블럭 범위를 제공한다.

 

- ES6(2015년) 사용 ES == 에크마 스크립트

* 변수를 재선언할 시 에러 발생(Uncaught SyntaxError: Identifier 'age' has already been declared)

 

 

3) const 예약어 사용

-  2015년부터 새로 추가된 키워드

- 변수에 값을 변경할 수 없을 때 사용 

- 변수를 재선언과 재할당 모두 할 수 없다.

 

- 변수 선언과 동시에 값을 할당해야한다.

- 블럭 범위를 제공한다.

 

  [const는 언제 사용하는가?]
   1) 새로운 배열
   2) 새로운 객체
   3) 새로운 함수
   4) 새로운 정규표현식

 

4) 아무것도 사용하지 않는 방법

---

3. javascript operator(연산자)

- 연산자에도 우선순위가 있다.

1) 산술연산자

+ : 덧셈

- : 뺄셈

* : 곱셈

/ : 나눗셈 (ex. 20/6 = 3.3333335)

% : 나머지

** : 제곱 (ex. 2**2 = 4)

  * Math 내장 객체가 있어서 Math.pow(2, 2) 라고 사용해도 된다.

2) 증감연산자

++ 

--

 

ex)

    var x = 10;

    x++; // 11 (후위증감연산자)

    ++x; // 11 (전위증감연산자)

 

3) 할당(대입)연산자와 복합 대입 연산자

= : 할당(대입)연산자

 

아래는 복합 대입 연산자

+=

-=

*=

/=

%=

**=

 

4) 문자열 연결 연산자 : + 

 

5) 비교연산자

== : 같다

!= : 다르다

> : 크다

< : 작다

>= : 크거나 같다

<= : 작거나 같다

 

만약 data type(데이터 자료형)까지 비교한다면..

=== : 같다

!== : 다르다

 

6) 논리연산자, 타입연산자, 비트연산자

- 논리 연산자 : &&   ||     !

     && : AND

      || : OR

       ! : NOT

- 타입 연산자 : typeof      instanceof

    typeof는.. 아래와 같이 사용할 수 있다.

    typeof(값 또는 변수)

    typeof 값 또는 변수

 

* instanceof는 다음에 알려주실 예정

- 비트 연산자 : &    |     ~     ^     <<     >>     >>>

---

4. javascript의 data type(데이터 자료형)

1) number

2) string

3) boolean
4) object - array( [] ), object( {} )
5) function - 함수도 data type이다.

 

- javascript는 할당되는 값의 데이터 타입에 따라 자료형이 바뀐다.(동적 유형)

 

- 배열은 대괄호[ ]를 사용하며, 배열의 크기를 지정할 필요가 없다.

 

- 객체는 중괄호{ }를 사용한다.

---

5. load와 unload

- load : 웹 문서가 로드 완료되었을 때 (랜더링 완료) 일어나는 이벤트

 

- unload : 웹 문서 로드가 끝났을 때(브라우저를 닫을 때..) 일어나는 이벤트

 

6. focus와 blur

- focus : 초점을 맞출 때 일어나는 이벤트

 

- blur : 초점을 잃을 때 일어나는 이벤트

 

7. keydown, keypress, keyup - 키보드 이벤트

- keydown : 키를 누를 때(문자를 표시하지 않아도 발생) 이벤트 발생

  > 키를 누르고 있을 때 단 한번만 실행

  > Ctrl, F1 인식 O, 대소문자 구분X, 취소 가능

- keypress : 문자를 표시하는 키를 누를 때만 이벤트 발생

  > 키를 누르고 있을 때 계속 실행

  > Ctrl, F1, 한글, 방향키, DELETE키와  같이 즉시 TEXT에 입력이 반영되는 키보드가 아닌 것에는 이벤트가 반응하지 않는다(인식X)

  > 대소문자 구분O, ASCII, 한글 인식 X, 취소 가능

> keydown과 keypress는 이벤트를 먼저 발생시킨 후 문자가 찍힘 ***

 

- keyup : 키를 눌렀다가 뗄 때(문자를 표시하지 않아도 발생) 이벤트 발생

   > 문자가 먼저 찍힌 다음에 이벤트가 발생 ***

 

* keydown 이벤트는 눌리거나 해제된 키를 나타내고, keypress 이벤트는 입력 중인 문자를 나타낸다.

 

* 이벤트 발생 순서

키를 누르면 keydown 이벤트가 발생하며, 이어서 바로 keypress 이벤트가 발생한다. 그런 다음 키가 해제되면 keyup 이벤트가 생성된다.

1. 키보드를 누른다.

2. keydown 이벤트가 발생

3. 글자가 입력

4. keypress 이벤트가 발생

5. 키보드에서 손을 뗀다

6. keyup 이벤트가 발생

 

* keydown과 keypress의 keycode 값 차이가 있다.

숫자 0은 48이지만, Num Lock을 킨 상태로 텐키의 숫자 0을 누르면 keydown은 96이고, keypress는 48이다.

---

코드예시)

 

결과)

---

예제1) 주민등록번호를 입력 후 엔터를 치면 다른 텍스트 박스로 입력 포커스 이동하기

코드)

 

결과)

---

예제2) 주민등록번호 앞자리 6자리를 입력하면 7자리 입력하는 텍스트 박스로 focus 주기

코드)

 

결과)

---

예제3) 2개의 텍스트 박스에 숫자 입력 후 엔터를 치면 자동으로 계산해주기

코드)

 

결과)

- select()로 인해서 엔터를 치면 다음 텍스트 박스의 전체 범위를 잡아줘서 바로 입력할 수 있도록 함