CH11.자바스크립 참조
JAVASCRPT:언어. LIKE 자바
→JAVA(JVM)
→JAVASCRIPT(Browser)
html동적관리.(html 이벤트. 무슨 버튼을 하면 뭐한다든지)
→스
기생언어
script :뭔가의 도움을 받아야 실행가능 한 것.-v
v8?가지고 있다고?? jvm같이?
node.js를 실행하면
쓰면 따로 분리해서 사용가능?
브라우저없이?
java> v8엔진???
java
jvm
os
node.js가 뭐야?
jvm (자바 런타임 환경)같은 거.
모든 언어는 만들 수 있는데 lib없어서 안됨??
interprint 실행할 때 발견하는 것??
목적) html를 제어할려고 뭐를 한다고?? js???
자바스크립은 id보고 찾는 다고??
ptag. 글자넣는 곳
자바스크립트로 돔을 관리하는 거?
DOM은 Document Object Model의 약자입니다. DOM은 웹 페이지의 구조화된 표현을 제공하며, 프로그래밍 언어가 웹 페이지의 요소를 선택하고 조작할 수 있도록 도와줍니다. DOM은 HTML, XML 등의 마크업 언어로 작성된 문서를 트리 구조로 표현하며, 각 요소는 객체로 표현됩니다. 이 객체들은 프로퍼티와 메서드를 가지고 있어, 웹 페이지의 요소에 대한 접근과 조작을 가능하게 합니다. 예를 들어, JavaScript를 사용하여 DOM을 조작하여 웹 페이지의 내용이나 스타일을 변경할 수 있습니다. DOM은 웹 애플리케이션 개발에서 매우 중요한 개념이며, 웹 페이지를 동적으로 조작하고 상호작용하는 데 사용됩니다.
기본기)) Javascript (언어) -> html 이벤트 -> Java (JVM) -> Javascript (Browser) -> 스크립트(대본) -> 엑터(배우 - HTML)
기본기_javascript(언어)→html이벤트
→
쌤이 찝어준 것만 공부(w3school)
(arry search, methods,sort, map 이런 거 안 해봐도 됨.)
1. Variables
2. Operators
3. Arithmetic
4. Functions
5. Object
6. Event
7. String
8. String Templates(Back-Tics)
9. JS Arrays
10. Date Formats + Get Method
11. JS Comparisons (비교) ==값, ===값타입
12. if else
13. for of (Java foreach)
14. while break, continue
15 JS Object (저랑)
16 JS Functions (저랑)2. Operators
3. Arithmetic
- object 예시 뭔 말인지 모르겠음
이벤트도 보급
이것도 이해x
백틱은 그냥 “”대신 ``을 쓴다는 것인가?
``안에는 ""들어가도 되고.
아까도 “”해도 됬던 것 같은데 헷갈림.
ajax 비동기 처리(통신),
전체다운 받지 말고 부분을 리로드 할 수 있다고
알아야 됨
주 언어(파이선, 자바 등 .객체지향)
자바스크립트 알아야 함
sql 알아야 함.(dls :도메인 특화?언어?)
자바스크립
varㅡㅇㄴ 잘ㅇ 안씀
let만 쓰기~모든 타입(var 자바 같은. 이거 안쓰리고 했찌?)
실행 시에 값이 들어가면서 결정
언디파인 상태 : 값이 설정되지 않은 상태? 값이 없음이라느 키
1급 객체? : 메모리에 다이렉트하게 연결 가능 .-v
언어 배울 때 1급 객체는 뭐지?하고 봐야함. 처음에
자바스크립트에서 변수는 1급객체
모든게 1급 객체임. 독자적으로 메모리에 다 띄울 수 있음
자바처럼 class 안적고~~-v
다 컬렉션 가변길이?
자바스크립은 자유도가 높다고?
스택과 힙에 있다고 다 힙에 있다고?자동으로 ?
클래스 안에 있으면 안뜬다고?
리턴타입, 변수 타입을 몰라도 자바스크립트에서는 오케이
표현식은 리턴이 되야 한다고?
클래스안 메서드 아니면 클래스?>
스크립트 언어를 제이슨으로 바꾸는 이유: 데이터를 보내려면, 통신하려구
보낼려구?
제이슨 : 문자열
<!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>
<hr>
<script>
let user = {
id: 1,
username: "ssar",
password: "1234",
hobby: ["축구", "농구"]
};
//js object-> json string
let requestBody = JSON.stringify(user);
console.log(requestBody);
</script>
</body>
</html>자바에서는 joson은 문자열. 하지만 꼴이 이렇게 생김
json가 자바스클립트,자바에서는 그냥 문자열. 오브젝트라고x
이것의 목적: 송신???
======
불변해야 다름을 감지함.
얇은 복사
깊은 복사
animal a = new animal();
깊은 복사
<!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(copyArr);
//2. 값 가공(복사해서 바꾸는 것)
let mapArr = arr.map(i => i * 2);
console.log(mapArr);
//3. 값 제거(필터)
let filterArr = arr.filter(i=> i !=2);
console.log(filterArr);
</script>
</body>
</html>j 쿼리 지금은 안씀
react???
ssr로 웹 뷰를 만든다구.
순수 자바스크립을 건들 수 있는 건 react?
바닐라자바?
데이터를 먼저 하고 그림그리기-v
이벤트 기본
queue자료공간에 change 타이틀을 등록한다.
실행이 아니라 이벤트 등록을 한다고(3번 클릭하면 3번 저장됨 → 이후 할 일이 없을 때 하나씩 실행한다고?)
메인스레드가 바쁘면 이것은 발동x
큐=이벤트루프-v
이벤트 실행(실행시점이 정해지지 않은 .클라이언트가 요청하면 되는 것.)하면 >> 등록됨. >>메인스레드가 변경버튼 3번>바쁘지 않을 때 실행
<!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>
<!-- //id,은 중복되면 x 즉, 타이틀 중복되면 x -->
<body>
<h1 id="title">이벤트 두 번째 기본</h1>
<hr>
<button id="btn-change">제목변경</button>
<script>
let btn = document.querySelector("#btn-change");
btm/addEventListener("click", changeTitle);
function changeTitle() {
window.alert("제목변경 클릭됨");
let title = document.querySelector("#title");
title.innerHTML = "<i>반가워</i>";
}
</script>
</body>
</html>reaci: 돔을 안하고 코드에 직접 함?
자바스크립트로 돔을 조절하는 거-v
제이슨이 받아와서 clintlandering
Share article
