JS Interaction 개인

UI/UX 인터렉션

• setInterval( function(){}, 일정시간)
  setInterval() 정해진(일정) 시간마다 (블럭 안의)함수 호출
  setTimeout() 지연된 시간 함수 호출

<-> clearInterval( );

**자동롤링, 웹접근성 측면에서는 맞지 않음

• background-attachment: fixed;

---

.scrollTop()

• 선택한 요소의 스크롤바 수직 위치를 반환
• 동적인 값 (정해져있는 정적인 값이 아님)
  .offset().top
• 선택한 요소의 위치를 가져오거나 특정 위치로 이동
• 문서 끝(위)부터 선택한 요소까지의 거리
• 정적인 값

$(window) -> 보이는 화면$(“html, body”) -> 문서 전체
window.alert(화면) 과 document.write(문서) 이 다르지만 비슷.. write?right?

객체지향 : 절차지향을 함수형으로 분리해주고 객체(생성자함수, 플러그인)로 바꿔주는것

제이쿼리로인 이유,,
크로스브라우징되고 비동기로 데이터 끌어오는 에이젝스

---

코딩을 잘하는것이란,,,, 예외처리- 문제점을 잘 찾고 처리하는 능력
**예제 step 중 배운(수정된)부분 => 스크롤값연동 - 크루 & 세부모션 - 비쥬얼 네모, 뉴스의 네모

• DOM 생성방법
  방법 1. append() 활용해서 태그, 속성을 직접 다 설정
  방법 2. html()을 활용해서 모든 태그와 속성을 아예 문자열로 전체로 만들어서 삽입
  html() - 선택자 안에 기존의 내용을 지우고 새로운 태그를 문자열 형태로 삽입
  방법 3. es6 표기법 (벡틱)

메소드체인

• 객체합치기
  var resultFavorite = Object.assign({}, 디폴트값, 옵션값(=우선적용값));

첫번째 인수는 새로운 객체를 옮겨담을 빈 객체,
두번째 인수는 덮어쓰기 당할 기본객체,
세번째 인수는 덮어쓰기할 객체

• 두번째 객체를 세번째 객체로 덮어쓰기한 새로운 객체값을 맨앞의 빈 객체에다 옮겨 담아서 반환
• 불변성 유지 : 기존 객체 값을 변경하지 않으면서 새로운 객체를 반환
  빈객체{}를 써주면 원본의 훼손 없이 결과값이 나옴
  기본값을 유지하되 옵션이 필요할때 쓰는것

---

**배열과 객체는 안에 값이 변하는건 상관없고 자료형 형태만 유지하면 되기때문에 const로 씀.

input{outline: 0;} 폼요소의 테두리 탭키로 포커스가 어디있는지 알려줌, 값을 0으로 없애준것임. 고로 웹접근성에 맞지는 않음

• Query String 쿼리스트링
  url로 요청을 보낼때 문자열 형태로 다양한 옵션값을 연결해서 보냄
  result html?name=value&name=value

var num = /[0-9]/; //정규표현식, 0부터 9까지 모두
test() - 주어진 문자열이 정규 표현식을 만족하는지 판별하고 그 여부를 true/false로 반환해줌

---

mouseover
헤더 안에 자식요소가 모두 이벤트 대상이 되어버려서 계속 함수 호출이 됨
mouseenter
헤더 한번만 호출됨

• each문으로 반복 DOM 생성
  .each() : 배열이나 반복되는 DOM을 반복처리 가능

** 자식 요소를 찾는 children() , find()
바로 아래 요소, 즉 자식 요소만 탐색할때는 children()을 사용, 자식 및 하위 태그 모두에서 찾을 때는 find()를 사용

**드롭다운 글로벌네비게이션바 예시 사이트
https://www.shinhancard.com/pconts/html/main.html#utm_source=naver_pc&utm_medium=brandsearch_sa&utm_campaign=home_button
https://www.subway.co.kr
https://www.mcdonalds.co.kr/kor/main.do
https://ediya.com/#c
https://www.dior.com/ko_kr?utm_source=Brandsearch_ko&utm_content=Homelink&utm_medium=CPC&utm_campaign=CDC_Brandsearch_PC&utm_term=디올

---

**gnb 선을 줘서 흔들리는 느낌은 없다가 생겨서 생기는거임 -> 미리 줘버렷

** timer_ID = setInterval();
clearInterval(timer_ID);

---

• ajax
  (Asynchronous JavaScript and XML)
  외부 데이터를 가지고 오는 방법
  비동기방식으로 데이터 호출하기

$.ajax({
url: "데이터를 가지고 오는 주소",
dataType: "json"
})
.success(function(data){
console.log(data);
})
.error(function(err){
console.log(err);
})

• JSON
  (JavaScript Object Notation)
  자바스크립트의 객체 표현식과 유사한 방식으로 데이터를 주고 받는 방법

**Open API는 특정 서비스를 제공하는 서비스 업체가 자신들의 서비스에 접근할 수 있도록 그 방법을 외부에 공개한 것으로 해당 서비스로 접근하기 위한 규칙을 정의한 것이라 할 수 있습니다.
이처럼 기존의 API를 이용해 새로운 프로그램을 만드는 것을 매쉬업(mashup)이라고 하는데 가장 대표적인 사례가 구글의 하우징 맵스 서비스입니다.

---

• 시간구하기
  new Date()
  .getFullYear()
  .getMonth()+1
  .getDate()
  .getHours()
  .getMinutes()
  .getSeconds()
  .getDay()

(hour<12) ? hour = “” : hour
조건을 만족한다면(?) 실행구문, 그게아니라면(:) 실행구문

• 쿠키
  쿠키 : 클라이언트 컴퓨터에 물리적인 파일을 만들어서 특정 정보값을 저장

쿠키모양
name = value; path=/; expires="쿠키가사라질시간"

쿠키확인: 쿠키는 문자열 형태로 저장되어 있음
document.cookie;

특정쿠키확인방법
document.cookies.indexOf("찾을 쿠키문자");
//해당값이 -1을 반환하면 쿠키가 없음
//있으면 첫번째 인덱스 반환

쿠키 만들어서 등록하는 방법
document.cookie = today = oneday; path=/; expires="쿠키가사라질시간";

duratedate
toGMTString() today new Date지정해줬던 본래 값으로 돌아가게해줌
toGMTString() GMT를 사용하여 문자열로 변환된 날짜를 가져옵니다.

• 쿠키팝업
  팝업 aside

뭔가 문제 없는데 실행이 안된다 -> 캐시지워보기

---

호출시 옵션값
part: 'snippet',
key: 키값
maxResults: 호출할 데이터 갯수,
playlistId: 호출할 유튜프 재생목록 아이디

**(len > 100) ? p_txt = p_txt.substr(0, 100)+"..." : p_txt;

---

• 피그마 (모듈)
  즐겨찾기는 16 x 16 (px), svg불러와서 사이즈 조정, 확장명을 ico 로 수정(favicon.ico), index에서 link로 연결

QQQQQQQQ
동적(append)으로 ::after 설정하려면 어떻게?..
css파일에 주는 수 밖에 없??
, nth-of-type

---

**키보드이벤트 중 , 기능키 13번 keycode

• 객체지향
  다양한 정보 값을 넣을 수 있음
  키 : 밸류

constructor(생성자함수), prototype(프로토타입)을 활용한 객체지향 프로그래밍

생성자 함수 (통칭 ES5에서의 클래스) constructor
너무 많은 객체를 만들어야 할때, 기본 객체 틀을 만들어 놓는것

• 어떤 반복적인 대량의 결과물을 뽑아내기 위한 시스템적인 틀(붕어빵틀)
• 함수 이름은 대문자로 시작

인스턴스(instance) - 객체

• 생성자 함수를 통해서 복사가 된 실제적인 결과물 혹은 복사본 (붕어빵틀을 통해서 찍어낸 개별 붕어빵들)
• new 붙여서 생성

프로토타입

• 생성자함수를 만들면 자동으로 생성되는 공통의 저장공간
• 동일한 생성자 함수를 통해서 복사가 된 인스턴스들은 동일한 프로토타입을 공유한다
• 보통 자주쓰는 함수(메서드) 들을 프로토타입이라는 공통의 저장공간에 등록하여 모든 인스턴스들이 해당 메서드를 공유하도록 한다

생성자함수로 인스턴스 생성하는법
1. new 연산자를 이용해서 인스턴스를 생성하는 함수, 무조건 제일 먼저 실행될 함수 (생성자함수)
—> 호출될 때 받은 인자값을 인스턴스로 전달해줌 (this를 이용해서 전달)
—> 생성자 함수 전용의 공간인 prototype을 생성 (모든 인스턴스는 prototype에 저장된 값을 공유)
—> 공통으로 쓰이게 될 값이나 함수(메소드)들은 무조건 prototype에 저장시킴

호출 위치에 따라 this의 참조값
1. 일반 함수 안에서의 this - 제일 최상위 window객체
2. 이벤트문 안쪽에서의 this - 이벤트가 발생한 대상
3. 생성자함수 안쪽에서의 this - 인스턴스
4. 일반객체 안쪽에서의 this - 객체 자기자신을 지칭

this의 혼용때문에, 인스턴스 this를 지역변수 var inst = this; 로 정의하여 사용
플러그인파일은 (어쩔수없이)보통 index.html에서 생성자함수호출

함수형 코드를 객체지향형 코드로 변경하는 순서
1. 모든 코드를 document.ready 구문 밖으로 뽑아냄
2. 생성자 함수 만듦
3. 생성자 함수의 프로토타입에 init, bindingEvent 메서드 등록
4. init 메서드 안쪽에 모든 전역변수 집어넣은 뒤에 var 대신 this. 으로 대체
5. init메서드에 상수값을 외부에서 전달받은 파라미터 연결
6. init메서드를 생성자 함수 안쪽에서 호출
7. 이벤트 바인딩 부분을 bindingEvent 함수 안에 넣게
8. bindingEvent안쪽에 있는 변수들을 this로 치환
9. (주의)bindingEvent 안쪽에서 인스턴스를 this —> 지역변수에 옮겨담음
10. bindingEvent를 생성자 함수 안쪽에서 호출
11. 일반함수 정의부는 그냥 프로토타입에 등록
12. 마지막으로 document.ready안쪽에서 new 연산자로 생성자 함수 활성화
13. 인스턴스 호출할 때 추가적으로 넣어야 하는 상수값은 두번째 파라미터에 객체로 전달
14. 생성자 함수 안쪽에 default 객체를 만들고 두번째 파라미터로 전달받은 객체를 합쳐서 this로 인스턴스에 전달

---

객체제향 장점
도서관에서 책을 몇백권 관리, 엄청 많은 데이터를 관리
엄청많은 코드(돔캐싱)
프로토타입에 등록 해놓고 호출만 하면 됨
유지보수 재활용

**dom앞에 this..인스턴스에 지정해주기 위해 this 붙여줌

메서드 체인(Method Chaining)
자기 자신을 반환하면서 다른 함수를 지속적으로 호출하는 릴레이 방식의 프로그래밍 패턴. jQuery 라이브러리에서 매우 흔하게 볼 수 있는 디자인 패턴

fn - 제이쿼리의 저장공간에 플러그인으로 할당.등록 되는것

---

** for of : 배열을 반복
for in : 객체의 키값을 반복

json data file = 각각의 객체를 배열로 묶어놓은것을 다시 객체로 감싼 형태, 대부분 문자열 형태로 저장됨

callData()의 할일 세가지
1. result
2. ajax data
3. return
세가지 할일이 비동기(병렬구조)로 돌아감 -> ajax(web api에게 부탁) 데이터 호출이 완료되기 전에 값을 return —>undefined
“async : false”로 동기방식으로 바꿔줌 -> 데이터 호출 완, 값을 담고 return

---

• display : flex

• 부모요소에 설정해서 자식 요소의 레이아웃 배치 방식을 지정
• 모든 자식 요소를 inline-block형태로 변경

flex-direction: flex상의 기본축을 지정

• row : 기본축을 가로로 지정
• cloumn : 기본축을 세로로 지정

flex-wrap: 자식요소의 줄바꿈 유무 결정

• nowrap(디폴트): 줄바꿈 하지 않음
• wrap : 줄바꿈

justify-content: 자식요소의 기본축 정렬방식 지정

• flex-start : 왼쪽방향정렬
• flex-end : 오른쪽방향 정렬
• center : 가운데 정렬
• space-between : 양끝을 가장자리에 붙이고 사이 간격을 균등 배치
• space-around : 자식요소의 좌우 여백을 양끝에도 설정
• space-evenly : 자식요소의 충첩된 좌우여백까지 양끝에도 설정

align-items(배치요소가 한 라인일때) : 자식요소의 반대축 정렬방식 지정 //center, flex-start, flex-end, …
align-content(배치요소가 여러 라인일때) : 위와 동일 효과
—align-content 적용시에는 무조건 flex-wrap:wrap도 같이 설정

order : 자식요소의 순서를 변경
flex : 자식요소 넓이값ㅇ

---

const ver = navigator.userAgent;

각 browser별 navigator.userAgent 값의 고유 문자 값
웨일 : wale
크롬 : chrome
엣지 : edg
ie : trident
파이어폭스 : mozilla

ver 변수에 담겨있는 문자열 중에서 trident는 문자를 포함하고 있는지 판단해서 t/f값을 반환