1. 변수
- 브라우저가 실행되면 다 new해서 들고 있음(1~200개중 10개정도만 외우기) 그냥 적으면 참조할 수 있음 java에서 버퍼를 모니터 선에 연결되어있는 것과 동일
<!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>test1.html</h1> <hr> <script> let n1 = 1; // Number let s1 = "문자열"; // String let s2 = '문자열'; let s3 = `문자열 ${n1}`; // 문자로 처리 let b1 = true; let u1 = null; // 값이 없음을 나타내는 타입 / null도 데이터 let u2; // 값이 할당되지 않은 상태 = undefined : 데이터 타입 console.log(n1); console.log(s1); console.log(s2); console.log(s3); console.log(b1); console.log(u1); console.log(u2); // 브라우저가 실행되면 다 new해서 들고 있음(1~200개중 10개정도만 외우기) // 그냥 적으면 참조할 수 있음 // 버퍼를 모니터 선에 연결되어있는 것과 동일 </script> </body> </html>
1급 객체 : 메모리에 다이렉트하게 띄울 수 있는 객체
언어를 공부할 때 반드시 알아야 할 것
java는 class
오브젝트 안에 있는 애들은 그냥 메서드, 행위
메모리에 뜨면 ?로 가능
{} : object
2. 오브젝트
<!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> <script> let user = { id: 1, username: "ssar" }; console.log(user); </script> </body> </html>
javacript 배열은 컬렉션 : 가변 길이
<!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> <script> let user = { id: 1, username: "ssar" }; console.log(user); let arr = [1, 2, 3]; console.log(arr); console.log(arr[0]); </script> </body> </html>
<!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> <script> let hobby = ["축구", "농구"]; let user = { id: 1, username: "ssar", hobby: hobby // 변수이름을 같게 해서 호출할 수 있음 }; console.log(user); // javacript 배열은 컬렉션 : 가변 길이 let arr = [1, 2, 3]; console.log(arr); console.log(arr[0]); </script> </body> </html>
- 해석기가 브라우저니까 오류 디버깅은 콘솔에서 하기
화면에서 확인하기
자바스크립트 코드면 콘솔 확인하기
인텔리 제이의 로그 확인하기
- 자유도가 높음
3. 함수
- 1급 객체 : 바로 띄울 수 있음 -> 실행시에 내부가 뜸(stack과 heap이 있음)
- 읽으면서 다 메모리에 띄우는 데 그 공간이 다 heap
- ()안에 타입 없이 매개변수 적기
- 리턴 타입을 안적어도 됨
<!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> <script> add(1,2); function add(n1, n2) { // 1급 객체 : 바로 띄울 수 있음 -> 실행시에 내부가 뜸(stack과 heap이 있음) console.log(n1 + n2); } </script> </body> </html>
- 호이스팅은 JavaScript에서 변수 및 함수 선언이 컨텍스트의 최상단으로 이동되는 것
<!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> <script> //add(1, 2); // 이게 호이스팅 function add(n1, n2) { // 1급 객체 : 바로 띄울 수 있음 -> 실행시에 내부가 뜸(stack과 heap이 있음) console.log(n1 + n2); } add(1, 2); function minus(n1, n2) { // 1급 객체 : 바로 띄울 수 있음 -> 실행시에 내부가 뜸(stack과 heap이 있음) return n1 - n2; } let result = minus(1, 2); console.log(`result : ${result}`); </script> </body> </html>
<!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> <script> // 모든게 1급 객체라서 다 담을 수 있음 let m1 = function add(n1, n2) { console.log(n1 + n2); } add(1, 2); function minus(n1, n2) { return n1 - n2; } let result = minus(1, 2); console.log(`result : ${result}`); </script> </body> </html>
<!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> <script> // 모든게 1급 객체라서 다 담을 수 있음 let m1 = function (n1, n2) { console.log(n1 + n2); } m1(1, 2); function minus(n1, n2) { return n1 - n2; } let result = minus(1, 2); console.log(`result : ${result}`); </script> </body> </html>
익명 함수 : 함수를 변수에 담으면 변수 이름으로 하기에 함수의 이름이 쓸모 없음
- function대신 ⇒로 변경
- 표현식 : 리턴이 됨
- 클래스 안에 들어가면 다 메서드 아니 함수
<!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> <script> // 익명 함수 let m1 = function (n1, n2) { console.log(n1 + n2); } m1(1, 2); // 람다식 let m2 = (n1, n2) => { console.log(n1 + n2); } m2(1, 2); // 람다 표현식 = expression let m3 = (n1, n2) => n1 + n2; let r3 = m3(1, 2); console.log(r3); </script> </body> </html>
json
- 중간 언어로 변환하는 이유 : 통신해서 주고 받으려고
- 프로토콜
통신해서 json(문자열)로 온 것을 받으려고 오브젝트로 변경함
오브젝트를 json(문자열)로 바꾼 이유는 보내려고
- java와 javascript 입장에서 json은 그냥 문자열 → 이해하는 데이터 타입이 아님
이런 형태를 그냥 json (object)이라고 함
- JSON : JavaScript Object Notation다 약어라서 대문자로
JavaScript와 유사하게 생겼으나 키 값에 “”가 있음
<!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>json과 object로 변환 다루기</h1> <hr> <script> //자바 스크립트 오브젝트 let user = { id: 1, username: "ssar", password: "1234", hobby: ["축구", "농구"] }; //js object-> json string let requestBody = JSON.stringify(user); // 다 약어라서 JSON 대문자로 씀 console.log(requestBody); //json string -> js object let responseBody = JSON.parse(requestBody) console.log(responseBody); </script> </body> </html>
파싱해서 java의 오브젝트로 변환해야 함
- 웹 페이지의 인풋 태그에서 사용자 입력을 수집합니다.
- JavaScript를 사용하여 수집한 데이터를 JSON 형식으로 변환합니다.
- 변환된 JSON 데이터를 서버로 전송합니다.
- 서버에서는 수신된 JSON 데이터를 파싱하여 Java의 객체로 변환
<!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>Stream 배열 다루기</h1> <hr> <script> //자바 스크립트 오브젝트 let user = { id: 1, username: "ssar", password: "1234", hobby: ["축구", "농구"] }; //js object-> json string let requestBody = JSON.stringify(user); // 다 약어라서 JSON 대문자로 씀 console.log(requestBody); //json string -> js object let responseBody = JSON.parse(requestBody) console.log(responseBody); </script> </body> </html>
stream배열
- arr.push();해서 추가하면 원래 값이 바껴서 원 상태의 값을 알 방법이 없음
- 변화를 감지하려면 이전 데이터가 있어야 함
- 현존하는 그림 그리는 도구들은 데이터를 기반으로 그림을 그림
객체 안에 구름, 태양, 바다의 데이터를 기반으로 그림을 그리고 복사함
기존의 데이터가 이전 데이터, 복사해서 변경된 데이터가 이후 데이터를 비교
이전 데이터로 엔진(리엑트, 플러터)이 변화를 감지해서 새로운 것만 그림을 그림
이전 데이터는 삭제
→ 원본 데이터가 불변해야 함
- 깊은 복사(Deep Copy) : '실제 값'을 새로운 메모리 공간에 복사
얕은 복사(Shallow Copy) : '주소 값'을 복사
- 얕은 복사하기
<!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>Stream 배열 다루기</h1> <hr> <script> let arr = [1, 2, 3]; // 1. 값 추가 let arr2 = arr; // 얕은 복사 arr.push(4); console.log(arr); console.log(arr2); </script> </body> </html>
- 깊은 복사하기
<!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>Stream 배열 다루기</h1> <hr> <script> let arr = [1, 2, 3]; // 1. 값 추가 let copyArr = [...arr]; // 깊은 복사 arr.push(4); console.log(arr); console.log(copyArr); </script> </body> </html>
- 원본 불변, 배열에 값 추가하기
<!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>Stream 배열 다루기</h1> <hr> <script> let arr = [1, 2, 3]; // 1. 값 추가 let copyArr = [0, ...arr, 4]; // 깊은 복사 console.log(arr); console.log(copyArr); </script> </body> </html>
- 값 가공하기
복사해서 바꾸는 것
수집을 안함
<!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>Stream 배열 다루기</h1> <hr> <script> let arr = [1, 2, 3]; // 1. 값 추가 let copyArr = [0, ...arr, 4]; // 깊은 복사 console.log(arr); console.log(copyArr); // 2. 값 가공 let mapArr = arr.map(i => i * 2); // 수집을 안함 console.log(mapArr); </script> </body> </html>
- 값 제거(filter)하기
<!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>Stream 배열 다루기</h1> <hr> <script> let arr = [1, 2, 3]; // 1. 값 추가 let copyArr = [0, ...arr, 4]; // 깊은 복사 console.log(arr); console.log(copyArr); // 2. 값 가공 let mapArr = arr.map(i => i * 2); // 수집을 안함 console.log(mapArr); // 3. 값 제거(filter) let filterArr = arr.filter(i => i != 2); // 참이면 리턴, 거짓이면 리턴 안함 </script> </body> </html>
- 지금 배우는 것 : 바닐라 자바스크립트(순수한 자바스크립트)
- 돔(태그)를 제어하기 위해 배움
- 제이 쿼리 : 순수한 자바스크립트를 쉽게 사용할 수 있는 문법
- 최근의 모든 개발은 제이 쿼리를 사용하지 않음 → 리엑트때메 사장되었기 때문
- ssr 서버 사이드 랜더링 : 템플릿 엔진으로 웹 뷰를 만드는 것
- 신규 개발은 안 일어나도 유지 보수를 하는 건 다 제이 쿼리이기 때문
이벤트
- DOM(Document Object Model) : 웹 페이지의 구조화된 표현을 제공하는 인터페이스
문서 구조, 스타일 및 내용을 변경할 수 있도록 하는 표준화된 방법을 제공
JS로 문서의 내용, 구조 및 스타일을 동적으로 변경 가능
- 이벤트를 통해 DOM 제어하기
ID를 걸어서 제어하기
- 모든 html은 attribute(속성)이 있음
- JS 최상위 객체 = WINDOW
- 리스너가 onclick이라는 이벤트를 계속 while 돌면서 감지하고 있음
- 클릭되면 함수 호출
다이렉트하게 호출되지 않음
실행 시점이 정해지지 않는 이벤트들은 실행이 아니라 Queue 자료 구조 제일 밑에 함수를 등록함
→ 메인 스레드가 할 일이 없을 때 메인 스레드가 이벤트 루프(큐)로 가서 등록된 함수를 실행됨
들어온 순서대로 실행됨
- 왜 등록을 하나?
이벤트 시간이 만약 1초라면 스레드가 1개일때
클릭하고 바로 (이벤트가 )실행되는 동안 화면이 뻗어버림→ 연속 3번이 안됨
등록하면 스레드가 1개여도 연속 클릭이 가능함
- 메인 스레드가 바쁘면 동작을 안함
- 멀티 스레드 구현이 가능하다면?
자바) 이벤트 받는 스레드 및 각각 이벤트를 받는 스레드가 있으면 등록할 필요없이 바로 작용됨
<!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 id="title" onclick="changeTilte()">event의 기본</h1> <hr> <button>제목변경</button> <script> function changeTilte() { window.alert("제목변경 클릭됨"); }; </script> </body> </html>
<!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 id="title">event의 기본</h1> <hr> <button onclick="changeTilte()">제목변경</button> <script> function changeTilte() { window.alert("제목변경 클릭됨"); }; </script> </body> </html>
- window는 생략 가능함
DOM을 찾는 방법
- id는 문서에서 유일해야 함
- class는 중복 가능함
- element는 중복 가능함(hi, div)
- innerHTML은 상태 변수를 들고 있음?
클래스는 .
태그는 태
아이디는 #
<!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 id="title">event의 기본</h1> <hr> <button onclick="changeTilte()">제목변경</button> <script> function changeTilte() { // JS 최상위 객체 = window // (window.) 생략 가능 alert("제목변경 클릭됨"); // JS 최상위 객체 = window // DOM을 찾는 방법 // id는 문서에서 유일해야 함 // class는 중복 가능함 // element는 중복 가능함(hi, div) // let title = document.querySelector(); // 리턴 타입이 한 건 : 젤 위에것만 찾음 let title = document.querySelector("#title"); console.log(title); // title.innerHTML = "반가워"; title.innerHTML = "<i>반가워</i>"; // 이텔릭체 }; </script> </body> </html>
- JS에서 찾는 방법
<!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 id="title">event의 버전 2</h1> <hr> <button id="btn-change">제목변경</button> <script> let btn = document.querySelector("#btn-change"); // JS에서 찾는 방법 // 동적으로 버튼을 찾아내서 작성 // 어떤 이벤트 인지 정해서 문자열로 넣기, 이벤트 행위 btn.addEventListener("click", changeTilte); function changeTilte() { alert("제목변경 클릭됨"); // DOM을 찾는 방법 let title = document.querySelector("#title"); console.log(title); // title.innerHTML = "반가워"; title.innerHTML = "<i>반가워</i>"; // 이텔릭체 }; </script> </body> </html>
- 응용하기
- click : 요소를 클릭할 때 발생
- dblclick : 요소를 더블 클릭할 때 발생
- mousedown : 요소에서 마우스 버튼이 눌릴 때 발생
- mouseup : 요소에서 마우스 버튼이 떼어질 때 발생
- mousemove : 요소에서 마우스가 움직일 때 발생
- mouseover : 요소에 마우스 커서가 올라갈 때 발생
- mouseout : 요소에서 마우스 커서가 벗어날 때 발생
- keydown : 키보드에서 키를 누를 때 발생
- keyup : 키보드에서 키를 뗄 때 발생
- submit : 폼을 제출할 때 발생
- change : 요소의 값이 변경될 때 발생
- load : 웹 페이지나 이미지 등이 로딩되었을 때 발생
<!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 id="title">이벤트 두번째 버전</h1> <hr> <button id="btn-change">송민경</button> <script> let btn = document.querySelector("#btn-change"); btn.addEventListener("dblclick", changeTitle); //더블 클릭시 변경됨 function changeTitle(e) { console.log(e); let title = document.querySelector("#title"); title.innerHTML = e.target.innerHTML; } </script> </body> </html>
- 트리거 코드
<!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 id="title">이벤트 두번째 버전</h1> <hr> <button id="btn-change">송민경</button> <script> let btn = document.querySelector("#btn-change"); let num = 1; // 변수 초기화 btn.addEventListener("mouseover", changeTitle); // 더블 클릭시 변경됨 function changeTitle(e) { console.log(e); let title = document.querySelector("#title"); // 트리거 코드 num = num * -1; title.innerHTML = num; } </script> </body> </html>
Share article
