2022.03.07_20일차_javascript(3)ㅡㅡㅡㅡㅡ

# 노드 탐색  << 접근 요소를 통해 다른 요소로 접근
요소.parentNode : 선택한 요소의 부모 노드
요소.previousSibling : 이전 형제 요소
요소.nextSibling : 다음 형제 요소
요소.firstChild : 현재 요소의 첫 번째 자식 노드
요소.lastChild : 현재 요소의 마지막 자식 노드
요소.childNodes : 자식 노드들 (text까지 포함)
요소.children  : 자식 노드들 (html요소만)

# 요소 조회
#1) 요소의 컨텐츠 조회. 하고 수정
textContent   텍스트문자열넣어주면되고...
innerText     랜더링이 된 텍스트... 넣는건 동일 
innerHTML   html이 파싱된 텍스트... 보안으로는 나쁘다고...가급적 위에꺼들로 써라 
<

2) 요소의 속성(attribute) 접근/수정
className : 태그의 클래스 속성
classList : add, remove, item, toggle 등의 메서드도 제공 (IE10이상)

id : 태그의 id 속성

Boolean  hasAttribute(attr) : 속성 지정 여부 확인
String getAttribute(attr) : attr 속성값 가져오기
x setAttribute(attr,value) : attr 속성에 value값으로 속성세팅
x setAttribute(attr,value) : attr속성 삭제

# DOM 조작 (요소 추가)
1. 요소 노드 생성  : createElement(tagName)
2. 텍스트 노드 생성 : createTextNode(text)
  (생략하면 컨텐츠가 비어있는 요소)
3. 생성된 요소를 DOM에 추가  : appendChild(node)
  (삭제는 removeChild(node))
 
*insertBefore(추가할 요소, 위치)




# classList 메서드 
classList.메서드명()

add("클래스속성값") : class 속성값 추가 //className으로 하면 덮어쓰기니까 그것보다 클래스 리스트 쓰는게 더 효율적
remove("클래스속성값")  : class 속성값 삭제
toggle("클래스속성값", 조건) : 조건은 옵션, class속성값 토글(해당 값이 있으면 없게, 없으면 있게.)
item(idx) : idx를 이용해 클래스 값 꺼내기 //잘안씀
replace("oldVal","newVal") : 존재하는 이전 클래스를 새 클래스로 교체
contains("클래스속성값") : 클래스 속성 값이 존재하는지 여부

# style
요소.style.css속성 = "값";

<#2. 스타일 작성

21. 객체 정의  (사용자정의) 
: 객체는 객체 리터럴과 생성자함수 두가지 방법으로 생성할 수 있다.
  (class 문법) //세가지 모두 내부적으로는 다 생성자함수로 만들어지는것임...

1) 객체 리터럴 
객체 : 이름과 값을 한쌍으로 묶은 데이터들을 여러개 모은 것.
  연관배열 또는 사전이라고도 부름.

# 객체 생성
var 참조변수 = {};  // 빈 객체 생성
var card1 = {shape : "하트", number :"A" }; //-----11:16 식별자로도 되고????????????????????????
var card2 = { "shape" : "하트", "number" :"A"}; //변수이름을 쌍따옴표에 넣어도됨. 문자열. 가능은 하지만 위에걸 더 많이씀

* 프로퍼티 : 객체에 포함된 데이터 하나(이름과 값의 쌍)을 가르킴 / 키 값으로 부를수도. (맵타입처럼)/ 파이썬은 맵타입을 사전이라고 부름..

* 프로퍼티 값을 읽거나 수정할때는 점(.)연산자 또는 대괄호([]) 연산자를 사용
card1.shape --> "하트"  // 문자열은 못옴.....
card2.shape --> "하트"
    card1["shape"] --> 불가능
card2["sha[e"] --> "하트" //둘다 가능. 근데 대괄호는 잘 안쓰긴함.

card1.color --> undefined

# 프로퍼티 추가, 삭제
추가 : 없는 프로퍼티 이름에 값을 대입 // 있는거에 하면 그냥 덮어쓰기
삭제 : delete 연산자 사용

# in 연산자 : 프로퍼티 존재 여부 확인

"프로퍼티명" in 참조변수

<< js17.html 

# 객체 메서드 //함수. 객체 안에 넣어준걸 메서드라고 많이 함.
함수를 객체의 프로퍼티로 담고 있을 때 메서드라고도 표현. //리터럴로도 담아줄수 있음
객체 밖 == 전역/지역 함수
객체 안 == 메서드

const 참조변수 = {
프로퍼티명:값, // 일반데이터를 값으로
프로퍼티명:[], // 배열객체를 값으로
프로퍼티명:new Number(), // 객체형태로도 넣을수도있고
프로퍼티명:function(매개변수...) {
//코드작성 this.~~~ ( 이 메서드를 가지고 있는 객체인 참조변수를 가르키는 것)
return 값;
},
.....
}; // var대신 const해도 내부 안에 프로퍼티 값들은 수정 가능허다~~~

<<

2) 생성자 ///함수처럼 보이는거 ,... 생성자기반
#1. 생성자 정의
function 생성자명() {
//코드
}
// 생성자명은 첫글자 대문자 // (일반함수는 다 소문자)

// 리터럴  ////////////간편하게 객체 당장 쓸거. 데이터 묶어서 왔다갔다..
var card = { shape:"하트", number:"A"};

function Card(){ //대문자
this.shape = shape;
this.number = number;
this.func = function(){ ///이렇게 하면 객체 생성때마다 메모리차지늘어나

}
}
var card = new Card("하트","A"); ////////////구조를 미리 만들어서 ~~ 만들때마다 다양한 기능을 여러번 쓸 때


card.shape --> "하트"
card.number --> "A"
card.메서드명() 
<<11:56 js18.html

3) class : ES6 (코드로 바로 확인) 
다른언어로 .... 쓰는 사람들.... 리터럴로 가장 많이 쓰긴 함

class 클래스명 {
// 생성자
constructor(){
this.name = "hello";  // 이거도 변수.. 로 취급 되영 / 프로퍼티 추가
}
}


4) 프로토타입 prototype  
: 메모리 절약을 위한 방법중 하나
공유해서 사용할 것들을 prototype으로 만들어두면
메모리를 효율적으로 사용가능하다
나아가서 상속관계까지 만들어줄 수 있다. 

[ 기존방법 ]
객체 생성자 함수
|
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
| | |
  객체생성    객체생성     객체생성
| | |
   메서드     메서드     메서드


[ prototype 함수 ] JS에는 상속개념이 없어서 prototype으로 상속같이 만들어줌
객체 생성자 함수
|
prototype 메서드
|
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
| | |
  객체생성     객체생성    객체생성

// JS는 프로토타입기반 언어~~~~

function Person(){ // Person.prototype Obhect이 자동으로 생김~~~~~
this.age = 1; age, name 여기에 갔다놓으면 공유가능
this.name = "str"; java static같은....공유...
}
Person.prototype.age = 1; <<<<<<<<<<이렇게 해야 프로토타입 오브젝트로 넣어두는것. <12:56 js19.html

|내부에 두개가 생성되어있음
function Person() {} // Person Prototype Object 추가 생성되는 것.
prototype constructor
__proto__  

pika
__proto__

let pika = new Person();  // 메모리상 2개 
let lai = new Person(); // 메모리상 2개 

* Prototype = Prototype Link + Prototype Object
1) Prototype Object

  let obj = new Person();
  let obj = {};    new Object(); 랑 동일한 것. 

<js19.html
2) Prototype Link 
: __proto__ : 객체가 생성될 때 조상이 되는 Prototype Object가르킴
obj는 Person함수로 생성되었으니
Person Prototype Object를 가르키고
Person Prototype Object가 가진 __proto__는
Object 객체를 가르킴(Object가 객게의 조상)



22. 화할표 함수 Arrow Function  <

// 매개변수 지정방법
() => { ... } // 매개변수 0개
x => { ... } // 매개변수 1개, 소괄호 생략가능
(x,y) => { ... } // 매개변수 여러개 

// 함수 body 지정
x => {return x * x }
x => x * x; //구현부 명령이 한줄의 구문이면 중괄호 생략가능
    // 라턴은 리턴키워드 생략가능
()=> {return {a:10};}
()=> ({a:10})  //객체 리턴시 중괄호 소괄호로 묶어서 사용

() => {
if()...
for()...
return x*x;
};

< js20.html //// null "" 빈문자열상태 다른 것.



자바 업그레이드 포문 부터 for on/ for in/ forEach/ map/ filter....

 js21.html

wikidocs.net -------------무료로 책 볼 수 있엉.★★★★★★★★★ 점프 투 자바 
즐겨찾기 정리하기 

부수적으로 js만의 문법들 확인~~~~
        // 구조분해 할당문법  <
: 배열 변수.. 묶인 데이터를 바로 풀 수 있는 방법


Rest 파라미터

Spread파라미터 오후


23. event 이벤트 (클릭, 로딩완료) << java22.html
이벤트 : 웹 브라우저상에서 어떤 상황
ex ) 버튼 클릭, 페이지 로드

이벤트 핸들러 : 이벤트가 발생하면 그에 맞는 반응을 하는 함수 (처리 기술)

1) UI 이벤트 종류 (화면상의 이벤트)
load : 웹페이지 로드 완료시
unload : 웹페이지 로드 안될 때
error : js에서 오류를 만났거나 요청한 자원이 존재하지 않는 경우
resize : 사이즈 바뀌었을때............
scroll : 스크롤할 때
select : 텍스트 선택했을 때

2) Keyboard 이벤트
keydown : 키 누를 때
keyup  : 키를 뗄 때
keypress : 누르고 뗐을 때

3) Mouse 이벤트
click
dbclick
mousedown
mouseup
mousemove : 마우스 움직일 때 (touchscreen x)
mouseover : 마우스를 요소 위로 움직였을때 (touchscreen X)
mouseout : 마우스가 요소 밖으로 나갈 때 (touchscreen X)

4) Focus 이벤트
focus / focusin : 요소 포커스를 얻었을 때 ex) input 태그에 커서가 깜빡거리며 포커스가 있을 때
blur / focusout : 요소 포커스를 잃었을 때 // id 타이핑 하면 중복, 형식 안맞는 경우... input태그의 변경이 change 이벤트 또는 focus가 떠나면 체크...ajax로 처리...

5) Form 이벤트
input  : input이나 textarea 등 값변경 가능한 요소의 값이 변경되었을 때
change  : select, checkbox, radio의 상태가 변경되었을 때
submit : form태그 내 submit버튼 누를 때
reset : reset버튼 눌렀을 때

6) Clipboard 이벤트   // 텍스트나 이미지 임시저장하는 곳
cut : 컨텐츠를 잘라내기 할 때
copy : 컨텐츠 복사할 때
paste : 컨텐츠 붙여넣기 할 때

7) 이벤트 핸들러 등록
#1. 인라인 이벤트 핸들러 등록 (onClick) // 옛날방식, 비추.. 눈에 보여서 개발처음에는 잘보여좋을 수 있지만. 지저분 문서구성이 길어짐 목적이 다른 두개를 섞어 쓰는건 좋은게 아님 html요소보여주기 배치만, js 동적페이지 연산 프로그램...... 인라인 태그 내부에 적는방식
HTML 태그에 on으로 시작하는 속성으로 추가~ 
이벤트에 해당하는 개별 속성에 호출될 함수이름 <<오후 4:57 2022-03-07  #2.


#2. 이벤트 핸들러 프로퍼티 방식 <<오후 5:01 2022-03-07 
HTML과 JS를 분리하여 작성할 수 있으나, 
이벤트 핸들러 프로퍼티에 하나의 이벤트 핸들러만 바인딩할 수 있다. << #3.

#3. addEventListener 메서드로 등록하는 방식

오후 5:16 2022-03-07    꼼꼼하게 코드 작성 할수도....있다는데 ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ


#5. 타겟없이 오후



 js23.html 마무리 못함