JavaScript

브라우저 내에서 실행되는 프로그램을 개발할 수 있는 프로그래밍언어다.
java와 문법적 유사성이 많아서 쉽게 배울 수 있다.
인터프리터(Interpret) 프로그래밍 언어다.
(컴파일 과정없이 소스가 실행파일로 사용된다.)

javaScript로 할 수 있는 일

html 컨텐츠를 변경할 수 있다.

*브라우저를 통해서 현재 보고 있는 웹 페이지를 변경할 수 있다.
HTML태그의 속성을 변경할 수 있다.
HTML 컨텐츠의 스타일을 변경할 수 있다.

*CSS 변경할 수 있다.
사용자와 상호작용하는 프로그램을 작성할 수 있다.
이벤트모델을 활용한다.
브라우저의 도움없이 서버와 데이터통신을 할 수 있다.

AJAX기술을 활용한다.

JavaScript의 특징

스크립트 언어(인터프리트(interpret) 언어)다.
객체지향프로그래밍 언어다.
동적 데이터타입을 지원한다.(데이터 타입이 없다)
자바 스크립트의 함수(메소드)는 1급시민이다.

JavaScript 프로그램 작성하기

-스크립트 태그내에서 작성하기
<script>
                자바 스크립트 프로그램
                자바 스크립트 프로그램
</script>

-별도의 자바스크립트 파일을 사용
    * app.js와 같은 자바스크립트 파일 작성
    * script태그로 웹 문서에 포함시킨다.
    <script type="text/javascript" src="app.jsp"></script>

    * 주의사항
    - 실수하기 쉬운 잘못된 <script>태그 사용법
        -별도의 닫기 태그가 없는 경우
            <script type="text/javascript" src="app.jsp"/> <----잘못된표현
        - 자바스크립트 파일을 불러오는 태그내에 스크립트 코드를 작성하는 경우 
            <script type="text/javascript" src="app.js">
                            자바스크립트 프로그램
            </script>

JavaScript의 기본 문법

수행문 작성하기

  수행문; // 수행문의 끝은 세미콜론으로 나타낸다.
  수행문 // 세미콜론을 생략할 수 있다.

javascript의 리터럴

  -숫자
          123
          3.15
  -문자열
          "안녕하세요"
          '안녕하세요'
  -배열
          [1,2,3]
          ['홍길동',"김유신",'강감찬']
  -불린값
              true
              false
  -객체
          {}
          {firstName:"홍", lastName:"길동", age:40, married:true}

javascript의 데이터타입

자바스크립트의 변수의 데이터타입은 다이나믹하게 변한다.

number 타입

  * 기본적으로 java의 double타입과 유사하다.
  * 정수, 실수를 담을 수 있다.

boolean 타입
```
  * true, false
```

string 타입

  * single or double quotos로 표현된 것

array 타입
```
  * [값,값,값,값]
```

Object 타입

  * {이름: 값, 이름:값, 이름/값}

undefined 타입

  * 변수를 선언하고, 값을 할당하지 않으면 그 변수의 값은 undefined이고,
       그 변수의 타입도 undefined다.

null 값

  * 객체가 할당되지 않았다.
  * null을 값으로 가지는 변수는 "아무것도 가지고 있지 않다"라는 것을 의미한다.
  * null이 저장된 변수의 타입이 object 타입이다.

변수의 선언과 초기화

변수의 선언

  var x; 
  var x, y, z;
  * x와 y와 z는 undefined값을 가지고 있고 타입은 undefined다.

변수의 초기화

  - var x;
      x = 10;

  - var x = 10;
  - var x = 10, y = "홍길동", z = [1, 2, 3];

자바스크립트의 연산자

  - 산술 연산자
          + - * / % ++ --
  - 대입연산자
          = += -= *= /= %=
  ~~~~- 관계연산자
      > >= < <= == === != !==
      * ==                    : 값이 일치하거나, 변환된 값이 일치하면 true
      * ===                   : 값이 일치하고, 타입도 일치하면 true
      * !=                    : 값도 일치하고 타입도 일치하면 false
      * !==                   : 값이 일치하지 않거나 , 타입이 다르면 true

      5 === 5          true
      5 === '5'        false
      5 != 8           true
      5 != '8'         true
      5 !== 5          false
      5 !== '5'        true

  - 논리연산자
          && || !
          * 자바스크립트에서 거짓으로 판단하는 값
                      false, undefined, null, 0, ""(빈문자열)
                      * 위의 값들이 논리연산자의 값으로 사용되거나 제어문, 반복문에서 사용될 
                          때 거짓으로 판정된다
                              while (1) { 참 }
                              if ("") { 거짓 }
                      * 논리연산자의 연산결과가 true, false일 수 있지만, 
                          true나 false로 판정될 수 있는 1, 100, "vip", null, undefined등이 
                          될 수도 있다.

```

자바스크립트의 함수 (function)

특정 작업을 수행하는 수행문(코드)의 블록을 함수라고 한다.

*자바의 메소드와 유사하다.

형식

  function 함수명1(매개변수명, 매개변수명, 매개변수명, ... ) { 
      수행문; .. 
  }

  function 함수명2(매개변수명, 매개변수명, 매개변수명, ... ) { 
      수행문; retrun 반환값. 
  }

  var 변수명 = function (매개변수명, 매개변수병, ... ) { 
          수행문;
          ...
  }

  함수명1 ( 값, 값, 값,...);
  var 변수 = 함수명2(값, 값, 값, ...);

  * 이름이 없는 함수
  var 변수명1 = function (매개변수명, 매개변수병, ... ) { 
          수행문;
          ...

  }
  var 변수명2 = function (매개변수명, 매개변수병, ... ) { 
          수행문;
          ...
          return 반환값;
  }
  변수명1(값, 값, ...)
  var 변수 = 변수명2(값, 값, ...);

  * 자바와의 차이점
                      - 접근제한자가 없다.
                      - 반환타입을 지정할 필요가 없다 .(전부 var밖에없기에)
                      - 매겨변수의 타입을 지정할 필요가 없다.
                      - 함수 중복정의가 소용이 없다.

함수의 실행 방법
1. 자바스크립트 수행문에서 함수를 실행할 수 있다.
  
  function myfn() {...}
2. 이벤트 발생시 함수가 실행되게 할 수 있다
  
  *funtion myfn() {...}
  
  <botton onclick "myfn()">클릭
3. 셀프실행 (즉시실행함수)
  
  *(function() {
  
  수행문;
  
  수행문;
  
  }

javaScript Event (2019.11.26)

Event(이벤트)
- HTML 엘리먼트(태그)에서 생겨나는 것
- 이벤트가 생기는 원인
  1. 웹페이지의 로딩이 완료됐을 때
  2. 입력필드의 값이 변경됐을 때
  3. 사용자가 마우스를 움직일 때
  4. 사용자가 키보드를 입력할 때
  5. 사용자가 브라우저 창의 크기를 조절할 때
  6. 사용자가 html문서를 스크롤할 때
이벤트의 처리
1. 이벤트 발생이 예상되는 엘리먼트를 선정한다.
2. 해당 엘리먼트에서 발생이 예상되는 이벤트를 선정한다.
3. 해당 엘리먼트에서 발생이 예쌍되는 이벤트가 발생했을 때 실행될 함수를 구현한다.
4. 해당 엘리멘트에 이벤트 발생시 실행될 함수를 바인딩한다.

이벤트 처리를 통해서 사용자와 상호작용하는 웹페이지를 제작할 수 있다.

Event의 종류

마우스 이벤트
- onclick 엘리먼트를 클릭했을 때
- ondbclick 엘리먼트를 더블 클릭했을 때
- onmouseover 엘리먼트 위로 마우스가 움직일 때
- onmounseout 엘리먼트 밖으로 마우스가 움직일 때
- onmousenter 엘리먼트 위로 마우스가 움직일 때
- onmouseleave 엘리먼트 밖으로 마우스가 움직일 때
- onmousemove 엘리먼트 위에서 마우스가 움직일 때
- onmousedown 엘리먼트에서 마우스의 버튼을 눌렀을 때
- onmouseup 엘리먼트에서 마우스의 버튼을 뗐을 때
키보드 이벤트
- onekeydown 엘리먼트에서 키보드 키를 누르고 있을 때
- onkeypress 엘리먼트에서 키보드 키가 완전히 눌려졌을 때
- onkeyup 엘리먼트에서 키보드 키가 위로 올라올 때(비밀 번호입력? 하나하나 값을 입력받으면서 중첩시켜야할때?)
폼-이벤트 (
태그 내의 엘리먼트에서 발생하는 이벤트)
- onfocus 폼 입력요소가 포커스를 획득했을 때
- onblur 폼 입력요소가 포커스를 잃었을 때
- onchange 폼 입력요소가 값이 변경될 때
- onselect 입력요소의 텍스트를 선택했을때(드래그상태)
- onreset 폼의 리셋버튼이 클릭 됐을 때
- onsubmit 폼이 서버로 제출될 때
윈도우 이벤트
- onload 브라우저가 페이지의 로딩을 끝마쳤을 때
- onresize 브라우저의 윈도우 크기가 변경될 때
- onerror 자바스크립트 실행 중 에러가 발생했을 때

이벤트 객체

웹페이지나 엘리먼트에서 이벤트가 발생할 때 마다 생겨나는 객체
이벤트 객체의 주요 API
- 프로퍼티(필드,속성,프로퍼티)
  
  target : 이벤트가 발생한 엘리먼트를 반환한다
  
  type : 발생한 이벤트의 이름을 반환한다.
  
  which
  
  마우스이벤트나 키보드이벤트가 발생했을 때 클릭한 마우스 번트의 번호, 입력한 글자의 유니코드값을 반환한다. (왼클 1 , 우클 3 , 휠2 )
- 메소드(Method)
  1. preventDefault() (아래 두가지 경우에서만 사용하면된다.)
    
    이벤트가 발생했을 때 그 이벤트와 관련된 기본동작의 실행을 취소시킨다.
    
    대표적인 예)
    - "submit"버튼을 클릭했을 때 폼의 입력값이 서보로 제출되는 것을 취소 할 수 있다.
    - "a" 링크를 클릭했을 때 해당 url로 이동하는 것을 취소할 수 있다.(작은 이미지를 선택했을 때 해당창에서 크게 보고 싶을 때 사용( 새창으로 이동하지 않고)
  2. stopPropagation()
    - 이벤트 버블링을 (부모로 전달되는 것을) 차단한다.
  3. stopImmediatePropagation()
    - 이벤트 버블링을 차단하고, 해당 엘리먼트에 동일한 이벤트를 발생시 실행할 다른 함수의 실행도 즉시 중지한다.
  - 이벤트 버블링
    - 이벤트가 발생하면 해당 엘리먼트의 부모 엘리먼트로 이벤트가 전파되는 것을 이벤트 버블링이라고 한다.
```
div[id^='box] 시작
div[id$='box] 뒤
```
- onclick 이벤트
  - button , a , img, div 등의 엘리먼트를 클릭할 때 정의된 함수가 실행되도록 한다.
  - 가장많이 활용되는 이벤트다.
  - 꼭, button이나 a가 아니어도 상관없다. 어떤 종류에 엘리먼트던지 onclick이벤트 발생시 실행될 함수를 연결지을 수 있다.
- onmouseenter, onmouseleave 이벤트
  - 마우스 포인터가 특정 엘리먼트 영역으로 진입하거나 빠져 나올 때 정의된 함수가 실행되도록 한다.
  - 주메뉴에 마우스가 진입하면 서브 메뉴가 나오게 하거나,
    
    그림위에 마우스가 진입하면 그림에 대한 설명이나 소개가 나오게 하는 등,
    
    특정 엘리먼트에 진입했을 때 즉시 부가적인 정보나 추가정보가 표출되도록 할 때 사용된다.
- onkeyup 이벤트 ( 글자를 입력할 때 마다 )
  - 키보드로 글자를 입력할 때 정의된 함수가 실행되도록 한다.
  - 텍스트필드, 비밀번호필드, textarea에서 값을 입력할 때마다 값을 읽어와서 추가적인 작업을 수행할 때 주로 사용한다.
  - 아이디 필드에 지정된 문자외의 문자를 사용하는지 체크하거나, 숫자만 입력해야하는 필드에 숫자외의 다른 문자를 입력하는지 체크하는 작업을 수행할 수 있다.
- onchange () (select box)
  - 폼 입력요소의 입력값이 변경될 때 정의된 함수가 실행된다.
  - radio, checkbox의 체크된 항목을 바꾸거나, select의 선택된 항목을 바꿀때 마다 작업을 수행할 수 있다.
  - input, textarea등은 최종적으로 입력한 값이 이전 입력값과 비교했을 때 달라진 부분이 있으면 해당 메소드가 실행된다.

Form 입력요소의 조작

폼 입력요소의 값을 조회하기
- input text, input password, input file, radio, checkbox, textarea, select, input hidden
  
  엘리먼트.value = "새로운 값" (value는 폼요소에만)
  
  단) 1. input file에는 값을 설정할 수 없다.
  1. select 박스에는 옵션에 이미 지정되어 있는 값 중에 하나여야한다.
  2. radio나 checkbox의 경우에는 값을 다시 지정하는 경우가 거의 없다.
폼 입력요소 중 radio와 checkbox의 체크여부 변경하기
1. 체크하기
  
  radio엘리먼트.checked = true;
  
  checkbox엘리먼트.checked = true(선택);
  1. 체크 해제하기
  checkbox엘리먼트.checked = false;
  
  단 ) radio버튼은 체크해제하기를 사용할 일이 없다.
폼 입력요소 중 radio와 checkbox의 체크여부 조회하기

var 값 = radio엘리먼트.checked;

var 값 = checkbox엘리먼트.checked;
- 조회된 값은 true 혹은 false 값이다.

일반 엘리먼트의 조작

엘리먼트의 텍스트 컨텐츠 조회하기

안녕하세요

var 컨텐츠 = document.querySelector("#x").textContent;
엘리먼트의 텍스트 컨텐츠 변경하기

안녕하세요
—>
네 반갑습니다.

document.querySelector("#x")textContent = "네 반갑습니다.";
엘리먼트의 html 컨텐츠 조회하기
메뉴
- 짜장면
- 짬뽕
var html컨텐츠 = document.querySelector("#box").innerHTML;
```
  <div id="box">

  <h3>메뉴</h3> 

  <ul>

  <li>짜장면</li>

  <li>짬뽕</li>

  </ul>

  </div>
```
var 컨텐츠 = document.querySelector("#box").textContent;
```
  *메뉴 짜장면 짬뽕 (텍스트만 가져옴 태그를 못가져옴)
```

엘리먼트의 html 컨텐츠 변경하기

  \<div id="box"><h1>연습하기</h1></div> --> <div id="box><h3>엘리먼트 연습하기</h3></div>
  document.querySelector("#box").innerHTML = '<h3>엘리먼트 연습하기</h3>';

  <div id="box"><h1>연습하기</h1></div> --> <div id="box">엘리먼트 연습하기</div>
  document.querySelector("#box").textContent = '<h3>엘리먼트 연습하기</h3>';

엘리먼트의 속성값 조회하기

  <img src="sample.png" alt="샘플 사진" id="photo" />
  var 속성값 = document.querySelector.(#phtoto)getAttribute("src"); ---> "sample.png"
  var 속성값 = document.querySelector.(#phtoto)getAttribute("alt"); ---> "샘플사진"
  var 속성값 = document.querySelector.(#phtoto)getAttribute("id");  ---> "photo"

엘리먼트의 속성값 변경하기 및 추가하기

  <input type="text" name="username" id="field"/> --> <input type="text" name="customername" id ="field"/>
  document.querySelector("#field").setAttribute("name", "customername");

  <input type="text" id="field"/> --> <input type="text" name="customername" id ="field"/>
  document.querySelector("#field").setAttribute("name", "customername"); 

  없으면 추가해주고 있으면 변경해줌.

엘리먼트의 속성값 삭제하기

  <img src="sample.png" alt="샘플 사진" id="photo" /> ---> <img src="sample.png" ~~alt="샘플 사진"~~ id="photo" />
  document.querySelector("#photo").removeAttribute("alt");

JavaScript의 주요객체

String 객체
- 자바스크립트에서 문자열은 기본데이터 타입이다.
- 속성(property), 기능(method)를 가질 수 없다.
- 문자열의 경우 속성이나, 기능을 사용하려고 하면 기본데이터 타입이 객체로 변한다.
- 주요 API
  - 속성(Property)
    
    -length 문자열의 길이를 반환한다.
  - 메소드(Method)
    - charAt(index) 지정된 위치의 문자를 반환한다
    - indexOf(str) 지정된 문자열이 등장하는 위치를 반환한다
    - lastIndexOf(str) 지정된 문자열이 마지막으로 등장하는 위치는 반환한다.
    - toLowerCase() 소문자로 변환된 문자열을 반환한다.
    - toUpperCase() 대문자로 변환된 문자열을 반환한다.
    - trim() 의미없는 좌우공백이 제거된 문자열을 반환한다.
    - split(str) 지정된 구분자로 문자열을 나눠서 배열로 반환한다.
    - substr(begin) 지정된 위치에서 끝까지 잘라서 반환한다.
    - substr(begin, length) 지정된 위치에서 길이만큼 잘라서 반환한다.
    - substring(begin) 지정된 위치에서 끝까지 잘라서 반환한다.
    - substring(begin, end) 지정된 구간의 문자를 잘라서 반환한다.
    - startsWith(str) 지정된 문자열로 시작되는지 여부를 반환한다.
    - endWith(str) 지정된 문자열로 끝나는지 여부를 반환한다.
    - replace(search, new) 검색된 문자열을 새 문자열로 바꿔서 반환한다.
```
                               단, 제일 처음으로 발견되는 것만 바꾼다.
```
Date 객체
- 현재 날짜. 시간 정보를 표현하는 객체
- 주요 API
  - 생성자 함수
    1. Date()
    2. Date(밀리초)
    3. Date(년, 월, 일, 시, 분, 초) // 월은 0부터 시작
  - 메소드
    1. getTime() Date객체 표현하는 날짜,시간에 대한 밀리초를 반환
    2. getFullYear() 년도를 반환
    3. getMonth() 0부터 시작하는 월을 반환
    4. getDate() 일을 반환한다. (1~31)
    5. getHours() 시간을 반환한다.(0~23)
    6. getMinutes() 분을 반환한다.(0~59)
    7. getSeconds() 초를 반환한다.(0~59)
      // setter 메소드가 있다.
    8. getLocaleDateString() 해당 지역에 최적화된 날짜 패턴의 문자열을 반환한다.
    9. getLocaleTimeString() 해당 지역에 최적화된 시간패턴의 문자열을 반환한다.
    10. getLocaleString() 해당 지역에 최적화된 날짜/시간 패턴의 문자열을 반환한다.
Array 객체
1. 가변 길이 배열 객체다
2. 자바의 ArrayList와 유사하다
3. 배열의 인덱스를 활용해서 값을 추가하거나 조회할 수 있다.
4. 배열의 인덱스를 지정해서 값을 저장하면 배열의 길이가 인덱스+1 만큼 늘어난다.
5. 주요 API
  - 속성
    length 배열의 길이를 반환한다.
  - 메소드
    
    push(값) 배열의 끝에 새로운 값을 추가한다.
    
    pop() 배열의 끝에서 값을 삭제하고, 그 값을 반환한다.
    
    unshift(값) 배열의 처음에 새로운 값을 추가한다.
    
    shift() 배열의 처음에서 값을 삭제하고, 그 값을 반환한다.
    
    slice(begin, end) 지정된 구간에 해당하는 값을 가진 새로운 배열을 반환한다.
    
    splice(position, lenght) 지정된 위치부터 갯수만큼 예열에서 삭제하고, 그값을 반환한다.
    
    splice(pos, len, 값) 지정된 위치부터 갯수만큼 삭제하고, 지정된 위치에 값을 추가한다.
    
    join(문자) 지정된 문자로 배열의 각 값을 연결한 문자열을 반환한다.
    
    reverse() 배열에 저장된 요소의 순서를 뒤바꾼다.

Math 객체

수학 연산과 관련된 기능을 제공하는 객체

주요 API

메소드

  abs(number)           절대값
  round(number)         반올림
  ceil(number)          천정값을 반환한다.
  floor(number)         바닥값을 반환한다.
  trunc(number)         소수점부분을 잘라낸 정수를 반환한다.
  min(number, number, number) 최소값을 반환한다.
  max(number, number, number) 최대값을 반환한다.
  random()                    0 <= 반환값 <1 사이의 난수값을 반환한다.
  *Math 객체 생성없이 Math.abs(-23)과 형식으로 사용한다.
  Math.trunc(Math.random()*6 + 1) 1부터 ~6사이만 나옴 1부터 45사이 나오게하면 로또!

'프로그래밍 > 자바스크립트' 카테고리의 다른 글

[Javascript] input 태그에서 oninput으로 숫자만 입력받기 (정규표현식) (from IE to Chrome) (0)	2020.12.31
[Jsp][javascript] 자바스크립트와 JSTL의 혼용법 (0)	2020.11.13
[Javascript] [Vue] 뷰 인스턴스 (0)	2020.11.13
[Javascript][IE] 실시간 글자수(텍스트 입력 수) 감지하는 함수 (0)	2020.11.13
SCRIPT5: Access is denied in (엑세스가 거부 되었습니다) 해결방법 (0)	2020.11.10

SeongbinDB

[Javascript] 자바스크립트 기본 정리

JavaScript

javaScript로 할 수 있는 일

JavaScript의 특징

JavaScript의 기본 문법

javaScript Event (2019.11.26)

이벤트 처리를 통해서 사용자와 상호작용하는 웹페이지를 제작할 수 있다.

Event의 종류

이벤트 객체

Form 입력요소의 조작

일반 엘리먼트의 조작

메뉴

JavaScript의 주요객체

'프로그래밍 > 자바스크립트' 카테고리의 다른 글

티스토리툴바

[Javascript] 자바스크립트 기본 정리

JavaScript

javaScript로 할 수 있는 일

JavaScript의 특징

JavaScript의 기본 문법

javaScript Event (2019.11.26)

이벤트 처리를 통해서 사용자와 상호작용하는 웹페이지를 제작할 수 있다.

Event의 종류

이벤트 객체

Form 입력요소의 조작

일반 엘리먼트의 조작

메뉴

JavaScript의 주요객체

'프로그래밍 > 자바스크립트' 카테고리의 다른 글

관련글

티스토리툴바