ECMA Script 6 / 2015 강의 08 -object destructuring

ECMA Script 6 / 2015 강의 09 - Object Destructuring #2

ECMA Script 6 / 2015 강의 10 - Object Destructuring #3 중첩과 적응(뽀개기 중첩과 적용)

객체가 가지고 있는 속성의 이름을 전체네임으로 바꾸려면 ?

객체가 중첩된 경우

ECMA Script 6 / 2015 강의 11 - Array Destructuring #1

let을 통해 변수 선언

나중에 temp배열에 담긴 값으로 바꾸려면 ? (다른배열을 이용하고싶을때)

배열뽀개기를 이용한 순서 재배열

ECMA Script 6 / 2015 강의 12 - Array Destructuring #2

기본값 설정하기

배열이 가지고있지않은  속성에  기본값 설정하기

ECMA Script 6 / 2015 강의 13 - Set 콜렉션

객체지향언어에서 컬렉션이 내장되어있다.

언어가 컬렉션을 지원 (자바,씨샵 등등)

컬렉션 : set, list , map

컬렉션들은 데이터를 수집한다(데이터를 담을 수 있다). 가변길이의 데이터공간

*데이터를 식별하는 키값이 다르다.

map : 데이터를 수집하면서 데이터식별키를 같이 심는다.

        "내가 맡겼던 타이틀줘"

list : 데이터를 담고 , 식별자를 담지않는다. (데이터를 담는 순서가 식별자)

     "내가 맡긴 0번째 줘"

set : 식별자가없다. 데이터가 식별자 (so, 같은값 저장불가능, 중복된 값 허용 x)

     "컬렉션에 5가 담겨있니" -> 값들을 특정 지어서 꺼낼 수 없으니 나열할 수 있는 기능이 필요 ->이터레이터등장

*배열의 항목에 중복값이있을때 중복제거가능 ->set이 중복제거해줌

*for in : 키 값 얻어줌

*for of : 값을 하나씩 꺼내줌

https://haileykim2014.tistory.com/211

forEach , entries로 키와 값을 출력할수있다.

ECMA Script 6 / 2015 강의 14 - Map 콜렉션

map을 사용할때 exam.set할수도있고 배열형태로 중첩해서 사용가능, 반환해서 쓸때도 배열형태모양으로 가능

ECMA Script 6 / 2015 강의 15 - Rest Parameters

...values 나머지것들에 대해서 컬렉팅(나머지것들에 대해서 인덱스 0부터)

별칭을 지정하지않은것은 arguments로도 가능

ECMA Script 6 / 2015 강의 16 - Spread Operator

갖고있는값을 흩뿌려줘

각각 나누어서 전달

단순히 함수에 전달하는 목적x + 값을 나열하기 위해 사용

ECMA Script 6 / 2015 강의 17 - Default Value의 이전방식과 현재방식

ECMA Script 6 / 2015 강의 18 - Arrow Functions와 그 특징

print()안의 this : window객체라서 console.log(kor)하면 10이 출력, 전역변수

Arrow function은 애초부터 함수의 기능만 수행하도록 만들어짐

매개변수하나일경우

var fun = x =>x

ECMA Script 6 / 2015 강의 19 - class를 이용한 객체 정의

은닉화 문제발생

console.log(exam.kor) // 10 출력, 속성을 은닉화해야한다.

ECMA Script 6 / 2015 강의 20 - class 멤버 은닉하기

함수도 은닉화가능

ECMA Script 6 / 2015 강의 21 - static 멤버 정의하기

static : 객체마다 동일한 속성이 존재할 경우 사용, 객체와 상관없이 전역변수화

클래스명.스테틱변수명 (울타리내에있다)

객체생성과 상관없이 사용가능

객체를 만들지않고도 사용할 수있는 static메소드

메서드는 객체화되지않는다. 메서드는 데이터가 아니다. 함수는 절차니까 흐름에왔다갔다.

호출될떄마다 만들어질필요 x

프로토타입

객체가 다르면 데이터가 달라지지만 함수는 같은함수쓰도록하자.

프로토타입이란 ?

ex 배경색바꾸기, 기본도형설정 

new할때마다 aa라는 속성을 가져야할때 

Exam.prototype.aa = 30;

객체가 생성되지않아도 프로그램이 실행이 되는순간 만들어짐.전역변수,

하나만 가지고 공유

private static : 클래스안에서만 사용

기본도형에 넣으면 하나로 공유.

인스턴스 호출전에 항상 먼저 준비됨.

단일하게 처리

객체지향

-행위 또는 처리하는 함수

-데이터객체를 만들어서 초기화하는 목적의 함수 :  생성자 함수

=== : 참조비교

print()안의 this : 전역객체, window 

Exam()안의 this : new를 통해 호출한 함수. exam을 가리킴

this생략불가능. 무조건 써줘야한다.

1.지역변수

2.매개변수

3.인스턴스변수

클래스 특징

new를 통해서만 호출

클래스내 데이터만열거(메소드제외)

strict 모드 : 변수 중복선언 불가능, 변수선언안하고 쓰는것도 오류발생 ->let ,const (es6)

캡슐화 : 속성+ 기능

서비스란 

내가필요한 서비스를 만들어야 돈이 된다.

업로드한 파일 이용하는 방법

빈공백이없는 엘리먼트만대상으로할때 firstElementChild

텍스트노드빼고!

파일업로드의 진척도표시

눈에보기쉽게 바로 진척도를 나타낸다면 ?

파일경로를 출력해보자

서버에서 인코딩설정

편집기

윗칸은 작성하고있는내용을 미리보여주는칸

아랫칸이 실질적으로 전송되는 내용 

아랫칸이 숨김으로되면 작성자는 작성한내용자체가 전송되는것처럼보인다.

첨부파일의 파일선택은 서버에 안올라갔지만 이미지가 나오게한다.

파일이 선택되면 ->이미지추가

이미지첨부파일을 선택하면 미리보기가 나타난다.

for in , for of 차이

동일 html에 적용했을때 비교 

    <h1>
        <span>R</span>
        <span>A</span>
        <span>I</span>
        <span>N</span>
        <span>B</span>
        <span>O</span>
        <span>W</span>
    </h1>

for...in (객체순환)

index return

        const colors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet']; 
        let span = document.querySelectorAll('span');
        for(let i in colors){
            span[i].style.color = colors[i];
            console.log(i);// in : 0,1,2,3,4,5,6 인덱스번호
         
        }

for...of (배열 값 순환)

해당 value return

        const colors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet']; 
        let span = document.querySelectorAll('span');
        for(let i of colors){
            span[i].style.color = colors[i];
            console.log(i);//of : red, orange, yellow, green, inigo // span[red] 이므로 오류 
        }

값 :

8진수 / 2진수

변수:

var -> let

지역변수 / 지역화

const :

상수형변수

문자열 : 템플릿 문자열

어금부호로 감싸는 문자열

값을 포맷하거나 내려쓰기 등이 자유롭다

Escapte 문자를 포함하고 싶다면 ?

String.raw`...\n\n`

JSON이 향상되었다.

변수에 담겨진 값을 이용해 Object를 만들때

뽀개기 : 객체가 가지고있는 속성들을 지역변수화해서 값을 옮겨담는 작업 

	let kor = 30;
	let eng = 40;
	let math = 50;
	
	let exam = {
		kor :kor,
		eng :eng,
		math:math,
		total:	function(){
		console.log("total");
		}
	};
	console.log(exam.total());
	
	exam = {
			kor,
			eng,
			math,
			total(){
		console.log("new total");
	}};
	
	console.log(exam);
	console.log(exam.total());
	
	exam = {
			kor,eng,math,total(){console.log("prac");
			}
	}
	console.log(exam.total());

객체의 키를 변수로 사용

	let attr = "kor";
	let exam = {
		[attr] : 1,
		eng : 2
	};
	console.log(exam.kor); // 1출력
    
    	let attr = "kor";
	let exam = {
		[attr+"1"] : 1,
		eng : 2
	};
	console.log(exam.kor1);

객체를 뽀개지않고  사용하는 방식은 가독성이나 실행 성능을 낮춘다.

function printExam(exam){
	//뽀개기 Destructuring
	/*let kor = exam.kor;
	let eng = exam.eng;
	let math = exam.math;*/
	//let{kor, eng, math} = exam;
	let{kor,eng,math,avg=100} = exam;
	console.log(avg);//100
	
	let total = kor + eng+math;
	console.log(`kor:${kor}, eng:${eng}, math:${math}`); //ex2.js:485 kor:10, eng:20, math:30
	console.log(`total is ${total}`)//ex2.js:486 total is 60
}

let exam = {
	kor:10,
	eng:20,
	math:30
}

printExam(exam);

별칭사용

let{kor:k, eng, math, avg=100} = exam;
console.log(k) // 10

대괄호 변수선언

let [x,y] = [2,3];
console.log(x);//2
console.log(y);//3

[x,y] = [3,4];
console.log(x);//3
console.log(y);//4

[x,y] = [y,x];
console.log(x);//4
console.log(y);//3

[a,b] = [b,a] : 임시변수없이 교체가능

선언없는 할당

코드블럭( )으로 감싸기.

let a;
let b;
[a,b] = [10,20];
console.log(`a:${a},b:${b}`); //a:10,b:20

let kor;
let eng;
({kor,eng} = {kor:80, eng:90});
console.log(`a:${kor},b:${eng}`);//a:80,b:90

let notices = {
	title:"공지사항목록",
	list:[
		{title:"굿~", content:"좋아요~"},
		{title:"호호~", content:"웃음소리~"}
	]
};

//let {list:[{title}]} = notices;//굿
let {list:[,{title}]} = notices;//호호

console.log(title);

( Ajax ) ``억음부호 ${ } / insertAdjacentHTML / JSON.parse

로딩화면만들기

검정화면 나타내기

이미지를 가운데위치시키기위해 flex, center적용

dom을 쓰는것보단 ``억음부호안에다가 넣어서 쓰는게좋다.

JSON 라이브러리

원래는 json형식으로 format에 담아서 문자열을 누적해야했다.

그동안 println(list)넣은것은 운좋게 작동했던것. 빈공백이나 문자열에러가 발생해왔다.

{notice },{notice },{ }가 들어가야한다.

쉽게만들어주는 라이브러리가있다. list객체를 json규격의 문자열로 바꿔준다.

gson 다운로드 -> WEB-INF>lib에 넣어준다.

중복이 발생

url만 다를뿐 

중복코드를 줄이고, 페이지번호를 누르면 목록을 바로 출력하자

window.addEventListener("load", function() {
	var section = document.querySelector("#ex10");
	var tbody = section.querySelector("tbody");
	var requestButton = section.querySelector(".btn-request");
	var pager = section.querySelector(".pager");
	
	function bind(url){//데이터를 화면에 연결
		var request = new XMLHttpRequest();
		request.onload = function() {
			var list = JSON.parse(request.responseText);

			var trEmpty = tbody.querySelector(".empty");
			if (list.length > 0 && trEmpty != null)
				trEmpty.remove();

			for (var i = 0; i < list.length; i++) {
				var tr = `<tr>
							<td>${list[i].id}</td>
							<td>${list[i].title}</td>			
						</tr>`;
				tbody.insertAdjacentHTML("beforeend", tr);//
			}
		};/*request*/
		
		request.open("GET", url, true);//false 동기
		request.send(null);
	}

	pager.onclick = function(e) {
		e.preventDefault();

		if (e.target.tagName != "A")
			return;

		var page = e.target.innerText;//사용자가누른 페이지

		bind(`../api/notice/list?p=${page}`);	
	};

//request버튼누르면 목록나열
	requestButton.onclick = function(e) {
		bind("http://localhost:8080/api/notice/list");

	};/*requestButton*/
});

Q. 기본 1페이지가 로드되자마자 보이도록하려면?

bind()메소드를 밖으로 빼낸다.

로드되자마자 보이게됨

Q. 2페이지를 누르면 2페이지로 바뀌어야하는데, 밑으로 누적되서 나온다.

1페이지를 지워주고 2페이지가 보이도록하려면 ?

tbody.innerHTML = ""; tbody의 자식들을 지운다.

Q. 데이터가 요청된 후에 지워져야하므로 

onload안에서한다. 

Q. 검색기능추가

NoticeList.java에 필드(검색종류), 쿼리(검색내용) 변수를 넣는다.

변수들이 null 그리고 빈문자열이 아닐때 변수에 담아 getList에 넣고 전달한다.

작업중이라는것을 알리면서, 다른요청을 또 하지않도록

명령할수있는버튼을 다 가리기

콘솔자바 

서블릿 ,

둘다 자바프로그램

옛날에는 클라이언트서버형태(CS)

톰캣 : 웹서버역할 + 와스역할

뭘해결하기위해서나왔는지 ? 생각할것

사용자의 요청이 있을때

사용자 요청을 수반하다보면, 일반적으로 get요청을 많이 받게된다.

주소창말고 자바스크립트로도 웹서버를 요청할수있게되었다

페이지정보불러오기(NoticeList.java에서 연결)

"http://localhost:8080/js/ex1.js"
http://localhost:8080/api/notice/list 
../api/notice/list?p=${page}

노드객체를 사용할 수 있는 능력
브라우즈가 제공하는 객체
-window
-window.document
--node object
   얻기  /  속성 / 스타일 / 조작하는
-window.XmlHttpRequest : Ajax
-- 원격으로 데이터를 요청해서 그 결과로 화면(노드 객체)를 조작하는 기술

[자바스크립트 (X) ]   ------------------------          [ 자바 on Tomcat ] 
                                                                          (동적)문서를 제공

[자바스크립 on Browser] <----- XmlHttpRequest-------> [자바 on Tomcat] Servlet/JSP
    데이터 "요청"                                                         데이터를 제공(XML/CVS)
    노드 조작

Ajax - > web version2 :비동기적으로 데이터를 요청해서 화면을 갱신하는 기술의 집합

Frontend 기술의 가장 꽃

주요 API :

XmlHttpRequest

-open() / send() 

비동기로 처리할때 사용하는이벤트

onreadystatechange

onload

onerror

onabort

onloadend

동기적 : 페이지자체를 새로고침, 데이터가 바뀔때마다 업로드를 해야한다.(다른것들이 가동불가)

비동기적 : 부분적으로 바로바로 데이터를 업로드, 다른것도 가동

웹브라우저에서 페이지를 보려면 서버를 요청해야한다.

ex1.js파일에서

request.open("GET", url, true);

url를 요청한것

out출력도구

컬렉션일경우 알아서 toString을 호출해서 항목들을 [ , , , ] 로 묶어서 출력해준다.

Notice누르고 에프3

묵시적으로 투스트링호출됨

오버라이드된 toString메소드에 의해 출력된것이다.

JSON형태로 바꾼다면 ? 

key ""떠블따옴표로 감싸져있어야하고, 그러려면 역슬래시가 앞에 들어가야한다.(이스케이프) 이중더블따옴표모양이되니까,,

title, writerid의 값도 문자열이므로 따옴표가 되어있어야한다.

"title":"????",

이제 클라이언트에서는 JSON형태의 문자열을 받은거니까 파싱해서쓰면된다

request.responseText은 통으로되어있음

list은 배열로 되어있음

JSON.parse() : JSON 형식의 텍스트를 자바스크립트 객체로 변환한다.

서버로부터 브라우저로 전송된 JSON 데이터는 문자열이다. 이 문자열을 객체화.

문자열스트링을 JSON객체로 변화시켜준다.

request.responseText은 그냥 문자열이었다.

문자열 키를 큰따옴표로 묶어야한다. ->JSON객체로 쉽고빠르게변환된다.

테이블의 내용이 데이터가없을 경우에만 레코드가 존재하지않습니다를 보이고,

데이터가있으면 데이터만 보이게해보자.

4가지 방법이 있다.

1.innderHTML 사용 문자열로넣기

2. DOM을 직접생성해서 추가하는 방법

3. template을 이용한 클론

4. append말고 insertAdjacentElement로 이웃하는곳에넣기

3.template

4. append말고 insertAdjacentHTML로 이웃하는곳에넣기

템플릿스트링 ?

여러라인 문자열제공 `` 

내려쓰기를마음대로쓸수있다

포멧문자열

es6에서 등장

달라기호 데이터를 거기에 꽂아넣을수있다

${ }

문자열을 +로 더할필요없이 ` ${} `로 사용가능

beforeEnd : tbody.insertAdjacentHTML("beforeend",tr);

HTML 문자열 "<tbody>AAA</tbody>"를 개체가 종료되기 전에 tr을  삽입.

레코드가 존재하지않습니다는 데이터가 있을경우 안나오게해보자(if 조건문)

tjdghkwnd1.tistory.com/entry/insertAdjacentHTML-%EC%9D%80-%EC%96%B4%EB%94%94%EC%97%90-%EC%82%AC%EC%9A%A9%EB%90%A0%EA%B9%8C

웹 서버와 WAS :victorydntmd.tistory.com/121#:~:text=%EC%9B%B9%20%EC%84%9C%EB%B2%84%EB%8A%94%20%EC%A0%95%EC%A0%81%EC%9D%B8,%EB%A5%BC%20%EC%A0%9C%EA%B3%B5%ED%95%98%EB%8A%94%20%EC%84%9C%EB%B2%84%EC%9E%85%EB%8B%88%EB%8B%A4.&text=WAS%EB%8A%94%20DB%20%EC%A1%B0%ED%9A%8C%EB%82%98,%EB%A5%BC%20%EC%A0%9C%EA%B3%B5%ED%95%98%EB%8A%94%20%EC%84%9C%EB%B2%84%EC%9E%85%EB%8B%88%EB%8B%A4

AJAX란 ?

velog.io/@surim014/AJAX%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80

insertAdjacentHTML

tjdghkwnd1.tistory.com/entry/insertAdjacentHTML-%EC%9D%80-%EC%96%B4%EB%94%94%EC%97%90-%EC%82%AC%EC%9A%A9%EB%90%A0%EA%B9%8C

DOM (Document Object Model)

• 웹문서(HTML,XML,SVG)를 브라우저가 이해할 수있는 구조로 구성하여 메모리에 적재하는것
• 모든 요소와 요소의  어트리뷰트,텍스트를 각각의 객체로 만들어 부자관계로 표현하는 트리구조로 구성
• DOM 자바스크립트를 통해 동적으로 변경
• 메모리상의 DOM을 변경하여 정적인 웹페이지를 동적인 웹페이지로 변경

브라우저는 HTML문서를 로드 한후 해당 문서에 대한 모델을 메모리에 생성. 이때 모델은 객체의 트리로 구성된다.-> DOM tree

HTML 문서내의 각 요소에 접근/수정 : DOM은 모델 내의 각 객체에 접근하고 수정할 수있는 프로퍼티와 메소드를 제공.DOM이 수정되면 브라우저를 통해 사용자가 보게될 내용도 변경

DOM tree

브라우저가 HTML문서를 로드한 후 파싱하여 생성하는 모델

노드선택 

document.getElementsByClassName(class)

firstElementChild, lastElementChild: 태그만선택

firstChild, lastChild : 공백,줄바꿈모두 텍스트노드로  취급

previousElementSibling, nextElementSibling :형제 노드 중에서 Element type 요소만을 탐색한다.

Ajax란 ?

• 자바스크립트를 이용해서 비동기적으로 서버와 브라우저가 데이터를 교환할 수있는 통신 방식.
• 서버로부터 웹페이지가 반환되면 화면전체를 갱신해야하는데, 페이지 일부만을 갱신하고도 동일한 효과를 볼 수있도록 하는 것이 Ajax.

동기식 처리 : 순차적 작업수행. 서버에서 데이터를 가져와 화면에 표시하는 작업을 수행할 경우 서버에 데이터를 요청하고 데이터가 전달될 때까지 이후 작업들은 중단.

비동기식 처리: 병렬적 작업수행. 작업이 종료되지않은 상태라도 대기하지않고 다음작업 실행.

자바스크립트의 대부분의 DOM이벤트와 Timer함수, Ajax요청은 비동기적으로 동작

Ajax 요청 및 응답처리

• 브라우저는 XMLHttpRequest 객체를 이용하여 Ajax요청을 생성한다. 서버가 브라우저의 요청에 대해 응답을 반환하면 같은 XMLHttpRequest 객체가 그 결과를 처리한다.
• XMLHttpRequest.send() 메소드를 통해 서버에 Request를 전송하면  서버는 Response를 반환하는데, 언제 resonse가 클라이언트에 도달할지 알 수없다.
• XMLHttpRequest.onreadystatechange는 Response가 클라이언트에 도달하여 발생된 이벤트를  감지하고 콜백함수를 실행하여 준다.
• XMLHttpRequest.readyState 프로퍼디가 변경될때마다 호출되는 EventHandler이다
• 만일 XMLHttpRequest.readyState의 값이 4 인경우 정상적으로 Response가 돌아온 경우이다.

XMLHttpRequest.readyState

//요청처리 예시
// XMLHttpRequest 객체의 생성
var req = new XMLHttpRequest();
// 비동기 방식으로 Request를 오픈한다
req.open('GET', 'data/test.json', true);
// Request를 전송한다
req.send();

//응답처리 예시
// XMLHttpRequest.readyState 프로퍼티가 변경(이벤트 발생)될 때마다 콜백함수(이벤트 핸들러)를 호출한다.
req.onreadystatechange = function (e) {
  // readyStates는 XMLHttpRequest의 상태(state)를 반환
  // readyState: 4 => DONE(서버 응답 완료)
  if (req.readyState === XMLHttpRequest.DONE) {
    // status는 response 상태 코드를 반환 : 200 => 정상 응답
    if(req.status == 200) {
      console.log(req.responseText);
    } else {
      console.log("Error!");
    }
  }
};

// XMLHttpRequest 객체의 생성
var req = new XMLHttpRequest();
// 비동기 방식으로 Request를 오픈한다
req.open('GET', 'data/test.json', true);
// Request를 전송한다
req.send();

// XMLHttpRequest.readyState 프로퍼티가 변경(이벤트 발생)될 때마다 콜백함수(이벤트 핸들러)를 호출한다.
req.onreadystatechange = function (e) {
  // 이 함수는 Response가 클라이언트에 도달하면 호출된다.
};

지금페이지요청1번만

상태값받아서

웹1.0 : 개인이 소비만

웹2.0 ?

개인이 저작자,개인이 소비

스크립트를 써서 저작하기편한 환경

자바스크립트로 페이지로딩없이 비동기처리, (xml,json

비동기적데이터처리

화면을 갱신하지않고 데이터요청해서 기술들을 통틀어 ajax라고한다

자바스크립트로 데이터요청

초록:원격에있는 xml요청, 비주얼베이직용라이브러리

페이지로딩없이 데이터베이스저장 ?!

브라우저에포함된요청자 사용 ?

액티브 : 모든언어가 사용할수있는 라이브러리

다른사이트에있는 데이터를 요청할수있다

항상 콘솔에 출력해서 테스트할것

window.XMLHttpRequest(); 윈도우생략가능

동기형 비동기형

2개이상있을 경우 관계가 동기형이다,비동기형이라고 표현

동기형 : 내가 말을하고 오바, 저쪽에서 말하고 난 듣기만해야함. 무전기 턴을주고받듯이일함

           일하나를 두고 여러사람이 기다림,false 

비동기형 : 각자 동시에 다 일할 수있는 환경(동시에,같이)

txt파일에있는 내용을 콘솔에 출력

A라는 서비스에서받은 문서를 가지고 B라는 서비스문서를 요청하는것이 과거는 가능했다.

악용사례로 A로부터 받은 문서를 가지고 B회사에 서비스요청하는것을 막아놨다. cross request

주소가 다른서버,

현재 두가지 서버를 사용한다.

VS코드에는 웹서버(라이브서버) , 톰캣서버

한곳에 몰아줘야한다.

톰캣에다가 몰아주자.

poiemaweb.com/jquery-ajax-json

백종원이 만든 시판소스를 사용하는것이 실력일까 ?

다 만들어져있는, 소스를 버무리는것은 실력이라고하기어렵다.

함수를 만드는것말고 사용하는 방법떄문에 시간을 쓰는것 비효율

dataTransfer는 드래그할때 가져온데이터를 가지는 객체이다. 어떤속성인지 알고싶다면 ?

이벤트객체의 속성을 알아낼수있다.

갖고있는 기능을 출력해보자. -> for in문을  쓰면 속성을 알아낼수있다.

어떤객체든 속성을 나열 할 수있다. ->

for in 문은 key를 뽑는다.

for(var attr in e.dataTransfer.files[0] : 파일속성들출력

for(var attr in e.dataTransfer.files[0].name){ 

 console.log(e.dataTransfer.files[0].name);

} : 파일명의 글자하나하나가 배열처럼 인덱스로 출력된느것

ojdbc8.jar 이라는 파일명이 for in문돌리면 각각 키가나온다.(문자열배열) 0,1,2,3,...9 =>문자열일가능성이 큼

for in문을 돌리면 문자열이 하나의 컬렉션으로 인식이 되고 각각 의 데이터를 뽑기위한 key가 나온다.

key가나와서 0,1,2,3,.으로나온다

속성명이 나온다는것은 오브젝트란 뜻이고 

0,1,2,..로 나오는것은 배열이란뜻

console.log에 직접출력하면 속성들을 하나씩 확인해볼 수 있다.

포인문으로 속성이몇개있는지찾고, 직접출력

남의것에포커스 x

재사용할 수있게 정리해놓기

햄버거버튼을 다시누르면 슬라이드가 부드럽게되지않는다. 왜그럴까 

ul,테이블 : 텍스트를 감싸는블럭, 인라인만 감싸는블럭

li를 박스처럼쓸수없다.

li는 텍스트만 감싸므로 div가 안에들어갈수없다

인라인태그 = 텍스트, 방이아니다 ,내용물 (텍스트취급 a, span, input, img)

블럭태그 : 행을 다 차지

div가 목록이될수도있다.

객체선택

속성,스타일사용 : "-" ->["-"], border-width ->borderWidth

스타일은 미리 만들 수있는것은 미리 만들어서 사용해라

classList,add,remove,toggle

set/get

appendChild/removeChild

이벤트객체이용하기

선택한 것을 변경하기/선택한것을 제거하기

지역적으로 내앞에것,내아래것 찾아서순회하기 

파일업로드

스크립트가 자동으로 파일수집할수없다.

사용자가 인식하게끔한다

클릭을 전이

파일을 드래그하게하려면 ?

사진을 읽어버린다.

-브라우저뷰어로서 행동이발생한다. 정상적으로 드래그를작동시키려면 위코드가필요하다

-모두다 디폴트를 비활성화시킨다.

-기존에있는 드래그행위가 방해되는것을 막는다.

드래그: 

포지셔닝이 스테틱이아니면 제트축존재

1.어사이드

2.스크린

3.헤더

햄버거버튼을 눌렀을때 검정화면이 먼저뜨고(screen) 어사이드메뉴가 다음에 왼쪽에서 슬라이드되려면 ? 

1.setTimeout의 시간조정 (screen.style.transition = ".5s" ; )이므로 500을 지정해주면 

0.5초기다렸다가 실행된다. (딜레이시키는것)

2. screen.ontransitioned = function(e) { } 앞의 이벤트가 끝난다음에 실행된다.

grace-go.tistory.com/79

자식태그, 부모태그, 형제태그

각각 클릭이벤트달면안됨

모든노드대상 : 주석,텍스트,빈공백 모두 노드

모든노드가 아니라 element노드만 할때는 nextElementSibling

Node와 ElementNode는 태그 노드와 텍스트 노드 전체를 가리키고, Element는 텍스트 노드를 제외하고, 흔히 생각하는 태그(<a>같은)만 가리킵니다. 따라서 태그만 검색하고 싶을 때는 Element가 붙은 메소드를 선택해야합니다.

nextElementSibling

//다음형제태그이름에 d-none을 제거

e.target.nextElementSibling.classList.toggle("d-none");

nextElementSibling vs nextSibling 차이

nextSibling은 태그사이의 공란(텍스트)가 출력된다.

온클릭은 부모에게한번만

item.parentNode : 위(up)버튼을 눌렀다면 up의 부모 div =" item "

item.parentNode.querySelector("input") : 부모노드중 input을 선택

기본행위를 갖고있는 태그가있다

submit은 눌리면 전송하는기능

a태그는 href주소로 페이지전환행위

페이지를 새로고침하게된다

e.preventDefault(); 기본동작 중단

e.preventDefault();적용전에는 메뉴버튼을 누르면 click출력이 사라졌지만 적용후 계속 누적출력된다. 

픽셀의원점이 문서다보니까

스크린의 속성으 ㅣ값이바뀔때 0.5초사이에 천천히바뀐다

이벤트객체

벨류가아니고 참조라서 이상한일발생

let이용

언어(ES5 without OOjavascript / ES6)

플랫폼( window/document/..)

window

-alert /prompt / confirm

-setTimeout/ setinterval/ clear

document

-write()

-선택

--getElementById

--querySelectorAll, querySelector

언어(ES5 without OOJavascript/ES6)
플랫폼(window/document/...)
window
-alert/prompt/confirm
-setTimeout/setInterval/clear....
document
-write()
-선택
--getElementById/getElementsByClassName/getElementByName/..
--querySelector/querySelectorAll
-객체의 속성 / 타일 사용 
--set/get
-객체를 조작하는 것
--appendChild/removeChild/...
-이벤트 객체를 이용하기

버블링 : 자식요소에서 발생한 이벤트가 부모요소로 전파되는것

모든 윈도우들에 이벤트를 적용하지않는다.

버블시스템을갖고있기때문

컨테이너에다가 하나만적용

div를 눌렀는데 container가 동시에 실행된다

사용자는 이미지를클릭

집중화

어떤것을 클릭하던 이벤트를 ul이 발생할수있게

img를 클릭하면 ul에전달

자식들이 클릭되면 ul이 실행되게끔

부가적으로 전달해주는데이터 ?

이벤트로직이 수십개,똑같은함수를 가지고있다면

뒷단에 누가 클릭됐는지알려준다.

타켓을통해 내자식중에 하나가 클릭됐구나

이벤트가발생한위치의 도형을찾는다

맨앞에있는녀석 td를 찾고, td에위ㅣ임되어있던함수 호출

부모한테도 

지금까지 이벤트객체를 쓰지않았었어

자바스크립트는 인자의 개수가 일치하지않아도 문제가없다

사건이 발생:  누가,언제,어디서 

이벤트정보를 담아줘서 전달하는객체-이벤트객체

( )가 눌렸대, 어느 키가 눌렸는지,

마우스가클릭됐데 : 어디를 클릭했는지, 무엇을 클릭했는지, 

그런정보알아내주는객체

div태그(파란원)을 클릭하면 div태그 클래스이름에 aaa가 추가된다

2번째 div태그를 클릭하면, 클릭한 div 클래스명에 selected가 추가되고, css style에 만들어놓은 .selected가 연결되서 보더의 색깔이변경된다

처음은 널값

첫번째 selecte는

selected.classList.remove("selected");만썻으면 오류발생

if조건을넣는다

선택한 3번에 selected 명이 추가되고 삭제버튼을 누르면 삭제된다 

if을넣어서  하나만선택되도록한다 

선택취소를 하려면 ?

다시누르면 취소되는엘리베이터, 안되는엘리베이터

한번선택했는데,기존에선택된녀석인지알아야

add는 1한번만, (중복해서 이름이들어가지않음)

1선택후 1을누르면 빨간색이 사라지지않는다. if문에 조건이 더필요하다

selected를 삭제후 toggle로 인해 또 들어간다

1.Detach(할 필요없다 -바로 replace됨)

2.Replace : 1이 2의 자리로감

3.insert : 자리뻇긴 2를 1의 앞에넣음 

아우터 영역의 자원이 해제될 수있게하는 키를 가지는 함수

for문이 반복할때마다 function객체가 만들어진다.

3개의 객체가 i변수를 참조하고있다.

값이아니야, i라는 참조가 가리키는값이 3이야. (0부터 length까지인 2 이후에 i가 3된다.

boexs[3] 은 없지.

값변수가아니라 참조변수라서 계속 3을 가리킨다.->undefined

무엇을클릭해도 3이다.

let을 쓰면 가능하다. 값변수로 바뀐다.

선택후 삭제를누르면 삭제된다.

nodes: DOM API상에 존재하는 모든 것들. 그것들을 모두 포괄하는 이름이 node이다.

Node의 밑에 Element가 있고

element: one specific type of node. 예를 들어  div, body, window 같은 특정한 타입.

모든 element는 HTMLElement의 자식이다. 따라서, HTMLElement의 property를 똑같이 가지고 있다. 동시에, element의 성격에 따라서 자신만의 property를 가지고 있다.

텍스트노드추가하기

var txt = document.createTextNode("1");

var div = document.createElement("div");

1.div태그 만들기

document.createElement("div")

2.많은 태그객체의 속성설정

div.style.color="#fff";

3. 객체추가

div.append("1")

    btnAdd.onclick = function(){
        //1.엘리먼트 객체를 생성하기
        var div = document.createElement("div");
        
        //2. 엘리먼트객체의 스타일,속성 설정하기
        // img.src="../../images/1.jpg";
        div.style["background-color"]= "blue";
        div.style.backgroundColor = "blue";
        div.style.width = "100px";
        div.style.height = "100px";
        div.style.borderRadius = "50px";
        div.style.fontWeight ="bold";
        div.style.textAlign = "center";
        div.style.color="#fff";
        div.style.lineHeight ="100px";

        div.append("1"); //객체를 만들지않고 텍스트넣기

        //3. 엘리먼트 객체를  추가하기
        container.append(div);

    };

innderHTML

객체들을 문자열로뽑아내서 문자열을 더한다. 앞에꺼부터 다시 짓게되는셈.

removeChild(div); //0번째 div가 없어진다. 

사용자가 입력한 색상값에 따라 속성변경하기

사용자가 input태그에 입력 후 추가버튼을 누르면 해당 값이 반영된 div태그가 추가된다.

노드복사

Node.cloneNode()

해당 node의 children 까지 복제하려면 true, 해당 node 만 복제하려면 false

모든 CSS 초기상태 값불러와서 특정 속성값만 추출 

• var box = boxes[0];//왼쪽좌표위치 0, 원래있던 위치에서부터 증가하려면 ?
• let boxStyle = window.getComputedStyle(box);
• var left = parseInt(boxStyle.getPropertyValue('left'));//현재위치

Window.getComputedStyle()

Javascript에서 태그 추가하기 (엘리먼트 추가하기)

1. element 객체 생성 : var img = document.createElement("img") 
2. element 객체속성 설정 : img.src="/images/1.jpg"
3. element 객체를 문서에 추가하기 : container.appendChild(img)

Document.createElement() ->window.document.creatElement() 앞에 윈도우가 생략된것.

Node.appendChild()

초기상태값 불러오기 

 let boxStyle = window.getComputedStyle(box);

The getComputedStyle() method gets all the actual (computed) CSS property and values of the specified element.

left를 0으로초기화했었다. 원래 있었던위치에서 부터증가하려면 ?

CSS에서 left값을 70px설정했어도 자바스크립트는 불러올 수 없다.

getComputedStyle(box)를 통해 box의 모든 css속성을 가져온다.

CSS값이 아니라 박스가 가지고있는 스타일속성을 갖는 객체를 만든다 ->boxStyle

boxStyle.getPropertyValue('left') : 스타일 속성중 특정  속성값가져오기.

left 의 값인 70을 가져온다.

developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle

  var left = boxStyle.getPropertyPriority("left");

문자열을 정수로 바꿀때 : parseInt( ) 숫자뒤의 문자를 없애준다.

left의 값 "70px"를 숫자로 바꿔준다.

// ex4.css 속성 다루기
window.addEventListener("load",function(){
    // var section = document.getElementById("ex3");
    var section = document.querySelector("#ex4");

    var container = section.querySelector(".container");//id인지 class인지 표기
    var boxes = section.querySelectorAll(".box");//모두선택
    var button = section.querySelector("input[value='click']");
    
    button.onclick = function(){
        var box = boxes[0];//왼쪽좌표위치 0, 원래있던 위치에서부터 증가하려면 ?
        let boxStyle = window.getComputedStyle(box);

        var left = parseInt(boxStyle.getPropertyValue('left'));//현재위치
        var tid = window.setInterval(function(){
            
            left++;
            box.style.left = left + "px"; 
            if(left==400){
                clearInterval(tid);

            }

        },17);
    };
});

Node타입

• 노드 :공통
• 엘리먼트객체 : 태그 추가
• 텍스트노드객체 : 텍스트

우리가 사용하는객체들은 다큐먼트에 담겨있다.

HTML내용을읽어서 메모리에올린것

노드는 마디를 의미, 메모리에올라간게 노드 객체

-엘리먼트노드객체

-커멘트노드객체

-텍스트노드객체

엔티티 : 대신사용하는키워드

엔티티레퍼런스 : 엔티티를 사용할 수있게금 해주는 레퍼런스

엘리먼트 객체사용

Javasctrip에서 이미지 추가

태그를 html에서 얻어오는작업말고 추가할 수가 있다.

1. element 객체 생성 : var img = document.createElement("img") 

2. element 객체속성 설정 : img.src="/images/1.jpg"

3. element 객체를 문서에 추가하기 : container.appendChild(img)

Javascript에서 div태그추가

1. 엘리먼트 객체 생성

var div = document.createElement("div");

2. 엘리먼트객체 속성 설정

       div.style["background-color"]= "blue";

        div.style.backgroundColor = "blue";

        div.style.width = "100px";

        div.style.height = "100px";

        div.style.borderRadius = "50px";

3.엘리먼트객체 추가 

container.appendChild(div);