JavaScript

Javascript

객체 기반의 스트립트 언어로 웹문서에서 사용자와 다양한 상호작용을 하기 위해 만들어졌다. 현재는 웹 브라우저에서만 사용하지 않고 Node.js 를 통해 다양한 프로그래밍에 으용되고 있다. 서버(백엔드)에서 사용가능

역사

90년대 등장 후 java의 유명세 고려 javascript로 명명
넷스케이프 용으로 처음 등장 후 , 
각각의 웹 브라우저에서 전용 스크립트를 만들다가 ECMAScrpit가 표준안으로 채택
Ajax의 출현으로 웹 개발에 필수적인 프로그래밍 언어 ### 원리
서버 -> html, css, js -> 웹브라우저가 해석 후 그려줌
1. 클라이언트 사이트 접속
2. 서버 요청 전달
3. 서버에서 알맞은 html, css, js를 보내준다.
4. 웹브라우저의 javascript 인트프린터 해석 후 화면 그리기

자료형 (Data Type)

자료형은 프로그래밍 언어가 다룰 수 있는 데이터의 형태를 의미한다. 아래는 대표적인 자료형이다.

원시 형태(Primitive)
- 숫자(Number)
- 문자열(String)
- 불리언(Boolean)
- undefined(정의되지않음)
- null(없음)
객체 형태(Object)
- 시간(Date)
- 배열(Array)
- 객체(Object)

리터럴 선언

코드 상에서 값을 직접 명시해서 선언하거나 할당하는 것으로 자료형에 따라 리터럴 선언 문법이 다르다.
"1000" vs 1000 ? ### 원시 자료형 - Number
숫자형으로 정수나, 실수를 포함한다.
100, 0.4 - String
문자열형, 문자들의 나열을 의미 - Boolean
참/거짓만을 나타내는 자료형
true, false - undefined
값이 정해지지 않았다는 것을 표현하는 자료형
unkown - null
아무것도 없을 표현하는 자료형 ### 변수 프로그램은 다양한 조건과 환경에 따라 달라지는 값을 입력 받아 정해진 동작을 수행하게 된다.

선언

var 키워드와 이름을 선언
var x; #### 할당
대입연산자(=)을 사용하여 값을 대입
x = 40;
x = '철수';
데이터를 리터럴 선언으로 대입 가능

var x = 40;
선언과 동시에 대입 가능 #### 규칙
하이픈 (-) 사용불가
첫 글자로 숫자 사용불가
띄어쓰기 사용 불가
예약어 사용 불가

배열 사용

인덱스 기반으로 값을 순서대로 삽입할 수 있는 특별한 객체 형태 인덱스(index) : 위치, 0부터 시작하는 정수형 값

var array = [0, 10, 20];
array[0];//0
array[2];//20

배열형 값의 삽입/제거

lengh: 배열의 크기 리턴
array.lengh // 3;

push(): 배열에 새로운 값 추가

unshift(): 배열에 새로운 값을 0번 인덱스로 추가

pop(): 배열의 마지막 값을 리턴하면서 제거

shift(): 배열의 처음 값을 리턴하면서 제거

객체 자료형(Object Type), 프로퍼티

프로퍼티는 값이나 함수(메소드,method)를 가질 수 있다.

userName : "salmon2"
property name : value

객체 프로퍼티에 접근하거나 값을 저장하고 싶으면 .(dot) 기호를 사용한다.

var object = {userName : "salmon2", age : 10};
object.userName //userName 값에 접근
object.age = 12// age 값을 12로 변경
object.online = true //online 값을 true 지정
online 프로퍼티 생성 후 true로 값을 변경

연산자

산술 연산자

덧셈
	+
뺄셈
	-
곱셈
	*
나눗셈
	/
나머지
	%
복합 연산 형태
	+=, -=, *=, /= ### 비교 연산자
두 값을 비교하기 위해 사용, 참 도는 거짓이 결과 값
동등 ==
	값이 같다.
부등 !=
	같이 다르다
일치 ===
	데이터 타입까지 같다.
크기 비교	<, >, <=, >= ### 논리 연산자
참 또는 거짓을 연산할 때 사용
and : &&
or : ||
not : ! ### 기타 연산자
삼항 연산자 ?
	명제 ? 참일경우 리턴 값 : 거짓일 경우 리턴 값
단항 연산자 
	delete typeof
비트 연산자
	&, |, ^, ~

조건문

조건의 참/거짓 여부에 따라 원하는 코드를 실행

if 문
    if, else 키워드의 조합으로 조건문을 완성
    if (조건문){
        실행 코드
    }

switch 문
    switch(표현식){
        case 값1:
            실행코드
            break;
        case 값2:
            실행코드
            break;
        default:
            모든 조건에 속하지 않을때 실행
    }

반복문

조건식을 만족하는 한 계속해서 코드를 반복 실행한다.

for(초기식; 조건식; 증감식){
    반복 실행될 코드
}
for ( var i = 0; i<10; i+=1){
    실행코드
}
while(조건식){
    실행코드
}

함수(function)

함수는 독립적인 실행 코드를 하나로 묶어 둔 것을 의미, 코드를 묶어서 작성하는 것을 함수의 정의(declaration)이라고 하며 정의된 함수는 호출(call)을 통해 실행할 수 있다.

function 함수명 (매게변수){
    실행코드
}
function convertDollorToWon(dollar){

    return dollar + 1201.5;
}

스코프

{}(중괄호) => 블록(Block) 코드는 중괄호로 묵을 수 있는데, 이렇게 묶인 코드를 코드 블록(Block)이라고 한다.

{
    실행코드
}

함수 블록과 조건문, 반보문 등의 블록은 다른 성질의 블록 -> 함수 블록 내에 선언된 변수는 함수 밖에서 사용할 수 없다.

스코프는 변수를 선언할 때 그 변수를 어디까지 접근 가능한지를 정의하는 영역을 의미

전역 스코프 블록 바깥에 그냥 선언된 변수
지역스코프 블록 내부에 선언된 변수
- 블록 스코프 일반적인 블록(조건문, 반복문 등)에 선언된 변수 var 선언 시 : 모든 스코프에서 사용가능 let 선언 시 : 선언도니 블록 또는 중첩된 블록 내에서만 사용 가능
- 함수 스코프 함수 내부에 선언된 변수 해당 함수 내에서만 사용 가능

자바스크립트의 작성 방식

인라인 스타일 html 태그에 이벤트 속성으로 직접 작성

내부 스크립트 <script> 태그 내부에 작성

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>Hello JavaScript</title>
  </head>
  <body>
      <h1>head 태그 내의 자바스크립트</h1>
      <p>자바스크립트를 이용하면 현재 날짜와 시간 정보에도 손쉽게 접근할 수 있어요!</p>
      <button onclick="printDate()">현재 날짜와 시간 표시하기!</button>
      <p id="date"></p>
      <script>
          function printDate() {
              document.getElementById("date").innerHTML = Date();
          }
      </script>
  </body>
  </html>

외부 스크립트 js 파일 작성 후 <script> 태그로 임포트(import)

  function printDate() {
      document.getElementById("date").innerHTML = Date();
  }

  <head>
      <meta charset="UTF-8">
      <title>Hello JavaScript</title>
  </head>
  <body>
      ~~~~~
      <script src = "hello.js"></script>
  </body>

view 최적화를 위해 body 바로 위에 보통 작성한다.

DOM (Document Object Model)

js같은 포로그래밍 언어에서 HTML 문서의 정보들을 다룰 수 있게 해주는 프로그래밍 인터페이스 HTML 코드 -> DOM <-> js

1. 웹 브라우저에 의해 DOM으로 변환
2. DOM 인터페이스로 js 접근
    요소 dom객체와 연결
    실시간으로 화면의 형태를 변경 <img src = "/assets/img/web/js/02.png" width="1024" height="256">

DOM은 HTML 파일의 구조를 계층적으로 정리한다.

주요객체

document HTML 문서의 최상위 root 객체, html 문서 전체를 대변한다.
element HTML document 하위의 화면요소(HTML tag로 그려지는 요소)들을 의미한다. DOM에서는 계층적인 형태로 존재

DOM 접근 함수

document.getElementById(elementId) 요소의 id 값(Html 태그의 id 속성) 으로 요소를 가져온다.
document.getElementsByTagName(name) 요소의 태그 종류로 (html 태그)으로 요소들을 가져옵니다. (배열 형태, nodeList)
document.getElementsByClassName(className) 요소의 class 값 (html 태그의 class)속성으로 요소들을 가져온다. (배열형태, nodeList)
document.querySelector(selector) 선택자 문법으로 문서 내의 요소들을 가져온다.
- querySelector() 가장 처음 요소 1개
- querySelectorAll() 모든 요소 var elements = documents.querySelector("div.panels li");
```
var googleLogo = document.getElementBYID('hplogo');
googleLogo
document.querySelector('#hpgogo');
```

DOM 객체 추가

DOM 객체를 생성해서 DOM 구조에 추가하여 화면에 출력

document.createElement(tagName) 새로운 DOM 노드 객체를 생성한다.
```
  var element = document.createElement('p');
```

(특정 element).appendChild(사입할 DOM 노드 객체) 특정 DOM 객체 하위에 다른 DOM 객체를 삽입한다.

  var div = document.getElementById('panels');
  var element = document.createElement('p');
  element.innerHTML = 'p 태그의 내용입니다.';
  div.appendChild(element);
    
  var new =  document.createElement('p');
  new
  newElement.innerText = '안녕';
  new
  var lgaElement = document.getElementById('lga');
  lgaElement
  lgElement.appendChild(newElement)	;
  document.getElementById('hplogo').remove();

DOM 객체 수정

DOM 접근 API를 사용하여 필요한 객체를 가져와서 innerHTML이나 style 속성으로 객체를 수정

element.innerHTML 요소 내부의 콘텐츠 값에 접근하거나 지정 가능 html 코드로 실행 o innerText : html 코드로 실행이 되지 않는다.

element.style 요소가 가지고 있는 style을 지정할 수 있다.

  element.style.display = 'none'
  element.style.fontSize = '11pt'

요소가 가지고 있는 모든 스타일 특성 집합 객체

  var helloElement = document.querySelector('#lga p');
  helloElement.innerText = 'sssss';
  helloElement.innerText
  helloElement.innerHTML = "hi"
  helloElement.style.borderColor = 'rgb(56,56,200);
  helloelement.remove();

이벤트(event)

DOM 기반의 요소들은 event(웹 표준)를 감지해서 그 이벤트가 감지되었을 때 원하는 코드가 실행되도록 할 수있다. click 이벤트(사용자가 마우스 클릭) <div> -> event listener 실행

대표적인 이벤트 종류

DOM 차원에서 미리 정의

click 해당 객체 클릭
mousemove 해당 객체 위에서 마우스를 이동
keypress 해당 객체가 선택된 상태에서 키보드 입력
submit form의 전송
load 해당 객체가 화면에 로딩이 완료되어 화면에 표시될 때 발생

Event 리스너 등록

var element = document.getElementBYID("panels");
element.addEventListner("click",
	function(){				//익명 함수
		alert("안녕");
	}
);

element.addEventListner('click', preFunc);

var logo = documnet.getElementById('hplogo');
logo
logo.addEventListner('click',
	function(){
		alert('hi');
	}
);
logo.addEventListener('mousemove', 
	function(event){
		console.log(event);
	}
); ### 클로저 내부함수가 실행시점을 포함해서 외부함수의 맥락(context)에 접근할 수 있는 것

선언할 때 외부 스코프에 정의된 변수들까지 캡쳐해서 함수가 실행될 때 사용할 수 있는것

func a(){}
선언 시 b= 0
실행 시 b= 2
func a b = 0으로 실행

예시

function createTodayExchangeReate(wonPerDollar){
    return function(dollar){
        var result = dollar * wonPerDollar;
        console.log(result;
    
        return result;
    }
}

wonPerDollar 클로저에 포함
var convertExchange = createTodayExchangeRate(1200);
    새로운 내부 함수가 생성되면서 1200 변수가 캡쳐되어 같이 저장된다. -> 환율 기준값이 캡슐화된다.
convertExchange(20);	//1200원 기준으로 20달러 변환
var convertExchange2 = createTodayExchangeRate(1000);
    새로운 내부 함수가 생성되면서 1000 변수가 캡쳐되어 같이 저장된다. -> 환율 기준값이 캡슐화된다.
convertExchange2(20);	//1000원 기준으로 20달러 변환
convertExchange2 시점에서 환율은 은닉이 되어있다.

Ajax(Asynchronous Javascript And Xml)

자바스크립트에 내장된 XMLHttpRequest 객체를 이용해서 페이지를 새로고침하지 않고도 필요한 데이터를 비동기적으로 불러오는 기법을 의미한다.

한 데이터를 백엔드에서 비동기적으로 불러오는 기법을 의미한다. 이 때 주고 받는 데이터 형식으로 XML형식을 사용하였는데 현재는 JSON 형식을 사용한다.

화면에 표시가 완료 시점
이벤트 발생
callback에서 ajax 호출 ajax 데이터 불러옴
dom api 화면 추가

JSON

javaScript Object Notation의 약어로 자바스크립트 객체를 표현하는 데이터 형식이다. 객체 타입의 리터럴 선언과 비슷하다.

{
    “name”: “salmon2”,
    “born” : 2017,
    “classes” : [
        …
    ]
}

AJAX 예제

var httpRequest = new XMLHttpRequest();
httpRequestonreadystatechange = function(){	//AJax 리스너
    if(this.readyStatus == 4 && this.status == 200){ 정상요청, 정상 응답
        document.getElementById("panels").innerHTML = this.responseText;// 응답 문자열을 innerHTML에		
    }
}	//리턴시 실행

httpRequest.open("GET", /getJson", true);	//요청 방식을 정한다.
httpRequest.send();	//전송을 보낸다.

JavaScript

목차

Javascript

역사

자료형 (Data Type)

리터럴 선언

선언

배열 사용

배열형 값의 삽입/제거

객체 자료형(Object Type), 프로퍼티

연산자

산술 연산자

조건문

반복문

함수(function)

스코프

자바스크립트의 작성 방식

DOM (Document Object Model)

주요객체

DOM 접근 함수

DOM 객체 추가

DOM 객체 수정

이벤트(event)

대표적인 이벤트 종류

Event 리스너 등록

Ajax(Asynchronous Javascript And Xml)

JSON

AJAX 예제

Salmon2_DB

목차

Javascript

역사

자료형 (Data Type)

리터럴 선언

선언

배열 사용

배열형 값의 삽입/제거

객체 자료형(Object Type), 프로퍼티

연산자

산술 연산자

조건문

반복문

함수(function)

스코프

자바스크립트의 작성 방식

DOM (Document Object Model)

주요객체

DOM 접근 함수

DOM 객체 추가

DOM 객체 수정

이벤트(event)

대표적인 이벤트 종류

Event 리스너 등록

Ajax(Asynchronous Javascript And Xml)

JSON

AJAX 예제

Share this post