#001 #Draft

Javascript (언어) → html이벤트

→ Java (JVM)

→ Javascript (Browser)

→ 스크립트 (대본) → 엑터 (배우 → HTML)

•

script라는 단어가 붙으면 기생언어라고 부른다. 혼자서는 실행이 안됨

•

V8엔진 → 브라우저에 내장이 되어있슴.

◦

그 엔진을 실행할 수 있는 환경을 제공해준다. → Node.js

◦

브라우저 바깥에서 실행할 수 있다. 

◦

자바스크립트를 브라우저 없이 실행할 수 있으므로, 기생언어가 아니다. 

•

모든 언어는 모든것을 다 개발할 수 있는데, 단지 라이브러리가 부족하다는 차이점이 있다.

•

인터프리터는 읽고 바로 실행한다.

•

nodejs는 웹서버가 아니라 jvm같은 것

•

배우는 목적은 HTML을 제어하기 위함이다.

•

JavaScript 이 부분을 집중해서 공부

DOM을 javascript로 다루는 기

•

다른 일을 할 수 있는 스레드가 있다. 자바 스크립트는 단일 스레드이다.

•

자바스크립트는 id를 보고 찾는다.

•

document는 브라우저를 이야기한다. 화면

•

클릭하면 demo아이디를 찾아서 html를 hello javascript로 바꾼다.

공부해야될 Java Script Variables Operators Arithmetic Functions Object Event String String Templates (Back-Tics) JS Arrays (method, sort, search는 하지말자) Date Formats + Get method JS Comparisons (비교) == 값, === 값타입 if else for of (Java foreach) while break, continue ——————— JS Object JS Function

•

자바스크립트는 클라이언트 측에서 실행되는 스크립트 언어다.

•

AJAX를 꼭 알아야 된다. 

◦

비동기식 처리를 하기 위해서 

◦

부분 리로드를 하기 위해서

•

자바스크립트 덕분에 전체 페이지를 매번 받는게 아니라, 정보를 받아서 클라이언트가 해당 부분만 리로드할 수 있게한다.

•

Nodejs 내부에 V8엔진이 들어가있다.

•

자바스크립트는 가장 대중적인 언어, 개발자가 꼭 알아야된다.

•

자기 주 언어, 자바스크립트, SQL(DSL), 

•

자바 스크립트에서 선언할 떄 let을 사용하자. 

◦

타입이 런타임에 결정된다. → 인터프리터

◦

컴파일 언어는 공간을 미리 확보하고, 인터프리터는 미리 확보하지 않고 런타임에 터진다.

•

undefined는 값이 없음이라는 키워드이다.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h1>안녕</h1>
    <script>
        let n1 = 1; //Number 타입
        let s1 = "문자열";  // String 타입
        let s2 = '문자열';
        let s3 = '문자열 $(n1)';
        let b1 = true;
        let u1 = null;
        let u2; // Undefined 타입, null이 아니다.


        console.log(n1);
        console.log(s1);
        console.log(s2);
        console.log(s3);
        console.log(b1);
        console.log(u1);
        console.log(u2);
    </script>
</body>

</html>
JavaScript
복사

•

메모리에 다이렉트하게 띄울수 있는 것은 1급 객체

•

자바에서는 1급 객체는 클래스이다.

•

자바에서는 클래스 안에 있는 함수를 모두 매서드라고 한다.  

◦

상태를 변경할 수 있는 행위란 뜻이다.

◦

자바 스크립트에서 변수는 1급 객체 이다. 모든 것이 1급 객

<script>
        let user = {
            id: 1,
            username: "ssar"
        }

        console.log(user);
    </script>
JavaScript
복사

•

자바 스크립트 배열은 컬렉션이다. 

◦

길이가 가변적이다.

let arr = [1,2,3];
console.log(arr);
console.log(arr[0]);
JavaScript
복사

let hobby = ["축구", "농구"];

let user = {
    id: 1,
    username: "ssar",
    hobby: hobby
}
JavaScript
복사

•

자바스크립트의 배열은 자유도가 높다. 어떤 타입이든 넣을 수 있다.

•

익명함수 → 이름이 없다.

let m1 = function (n1, n2) {
            console.log(n1 + n2);
        }
m1(1, 2);
JavaScript
복사

•

표현식이란 단어는 리턴이 있어야 된다. 

•

클래스안에 들어가면 메소드, 아니면 함수이다.

JSON오브젝트 JSON오브젝트라고 부르기는 하지만, 아래 출력된 값은 JSON타입인 문자열이다. JSON → JavaScript Object Notation → javascript의 키값에 쌍따옴표가 있다.

<script>
    let user = {
        id: 1,
        username: "ssar",
        password: "1234",
        hobby: ["축구", "농구"]
    };
    let requestBody = JSON.stringify(user);
    console.log(requestBody);

</script>
JavaScript
복사

JSON string

// json string -> js object
let responseBody = JSON.parse(requestBody);
console.log(responseBody)
JavaScript
복사

깊은 복사(Deep Copy)

는 '실제 값'을 새로운 메모리 공간에 복사하는 것을 의미하며,

얕은 복사(Shallow Copy)

는 '주소 값'을 복사한다는 의미 결국 기존데이터를 유지하면서 새데이터에 추가정보를 입혀야 변경을 감지 할 수 있다.

구름,태양,바다라는 기존데이터가 있어야지 배 라는 정보가 추가된 것을 감지 할 수 있다. 웹에서는 이 변경감지 엔진이 React이다.

기존 데이터를 변경시키면서 복사하는 방법은 쓰지말자.

…은 자바에서 stream() 역할과 같다. 흩뿌리고 다시 배열로 담으로면 [ ] 로 다시 감싸준다.

let copyArr = ...arr; // 이건 그냥 원소가 흩뿌려진 거

let copyArr = [...arr] // 이렇게 하면 copyArr에 담아서 새로 배열을 만든다.
JavaScript
복사

값 추가는 요렇게 하자

<script>
    let arr = [1, 2, 3];

    //1. 값 추가
    let copyArr = [0, ...arr, 4];
    console.log(copyArr);
</script>
JavaScript
복사

값을 가공하는 것 람다표현식으로 만들어보자.

//2. 값 가공
let mapArr = arr.map(i => i * 2);
console.log(mapArr);
JavaScript
복사

값 제거, 필터링!

//3. 값 제거 (필터)
let filterArr = arr.filter(i=> i!=2); // 2가 아닌 것만 출력하고 싶을
console.log(filterArr);
JavaScript
복사

•

프로젝트할 때 jquery를 사용한다.

•

바닐라 자바스크립트 → 순수함

•

DOM 은 태그이다. h1, body, inpu 태그

•

백엔드 개발자는 ssr은 할 줄 알아야 된다. (서버 사이드 렌더링)

•

리액트를 안하고 자바스크립트로 사용한다면 Jquery를 쓰게 될 수 있다.

•

DOM(Document Object Model) : 웹 페이지의 구조화된 표현을 제공하는 인터페이스

•

문서 구조, 스타일 및 내용을 변경할 수 있도록 하는 표준화된 방법을 제공

•

JS로 문서의 내용, 구조 및 스타일을 동적으로 변경 가능

<h1 id="title">이벤트 기본</h1>
<hr>
<button onclick="changeTitle()">제목 변경</button>
<script>
		function changeTitle() {
        // window.alert에서 window.은 생략이 가능하다.
        alert("제목변경 클릭됨");
    }
</script>
JavaScript
복사

버튼이 클릭되면 바로 호출 하지 않는다.

•

메인스레드가 바쁘면 Queue가 동작을 하지 않는다. 

•

바로 실행되는게 아니라 event에 등록이 된다. 

<h1 id="title">이벤트 두 번째 버전</h1>
    <hr>
    <button id="btn-change">제목 변경</button>
    <script>
        let btn = document.querySelector("#btn-change");
        btn.addEventListener("dbclick", changeTitle);
        

        function changeTitle() {
            let title = document.querySelector("#title");
            title.innerHTML = "<i>반가워</i>";
        }
    </script>
JavaScript
복사

btn.addEventListener("dbclick", () => {
            let title = document.querySelector("#title");
            title.innerHTML = "<i>반가워</i>";
        });
JavaScript
복사

마우스 이벤트 핸들러

click : 요소를 클릭할 때 발생합니다.

dblclick : 요소를 더블 클릭할 때 발생합니다.

mousedown : 요소에서 마우스 버튼이 눌릴 때 발생합니다.

mouseup : 요소에서 마우스 버튼이 떼어질 때 발생합니다.

mousemove : 요소에서 마우스가 움직일 때 발생합니다.

mouseover : 요소에 마우스 커서가 올라갈 때 발생합니다.

mouseout : 요소에서 마우스 커서가 벗어날 때 발생합니다.

keydown : 키보드에서 키를 누를 때 발생합니다.

keyup : 키보드에서 키를 뗄 때 발생합니다.

10.

submit : 폼을 제출할 때 발생합니다.

11.

change : 요소의 값이 변경될 때 발생합니다.

12.

load : 웹 페이지나 이미지 등이 로딩되었을 때 발생합니다

•

도큐먼트를 찾아, 그림이 다 그려지면 function ()을 호출 

•

자바스크립트는 바디 제일 밑에 위치해서, 굳이 페이지가 다 로드 되면이라는 로직을 추가하지 않는다. 

•

자바 스크립트로 DOM을 제어하는 기법을 숙달하