UI/UX 인터렉션
<-> clearInterval( );
**자동롤링, 웹접근성 측면에서는 맞지 않음
.scrollTop()
(“html, body”) -> 문서 전체
window.alert(화면) 과 document.write(문서) 이 다르지만 비슷.. write?right?
객체지향 : 절차지향을 함수형으로 분리해주고 객체(생성자함수, 플러그인)로 바꿔주는것
제이쿼리로인 이유,,
크로스브라우징되고 비동기로 데이터 끌어오는 에이젝스
코딩을 잘하는것이란,,,, 예외처리- 문제점을 잘 찾고 처리하는 능력
**예제 step 중 배운(수정된)부분 => 스크롤값연동 - 크루 & 세부모션 - 비쥬얼 네모, 뉴스의 네모
메소드체인
첫번째 인수는 새로운 객체를 옮겨담을 빈 객체,
두번째 인수는 덮어쓰기 당할 기본객체,
세번째 인수는 덮어쓰기할 객체
**배열과 객체는 안에 값이 변하는건 상관없고 자료형 형태만 유지하면 되기때문에 const로 씀.
input{outline: 0;} 폼요소의 테두리 탭키로 포커스가 어디있는지 알려줌, 값을 0으로 없애준것임. 고로 웹접근성에 맞지는 않음
var num = /[0-9]/; //정규표현식, 0부터 9까지 모두
test() - 주어진 문자열이 정규 표현식을 만족하는지 판별하고 그 여부를 true/false로 반환해줌
mouseover
헤더 안에 자식요소가 모두 이벤트 대상이 되어버려서 계속 함수 호출이 됨
mouseenter
헤더 한번만 호출됨
** 자식 요소를 찾는 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({
url: "데이터를 가지고 오는 주소",
dataType: "json"
})
.success(function(data){
console.log(data);
})
.error(function(err){
console.log(err);
})
**Open API는 특정 서비스를 제공하는 서비스 업체가 자신들의 서비스에 접근할 수 있도록 그 방법을 외부에 공개한 것으로 해당 서비스로 접근하기 위한 규칙을 정의한 것이라 할 수 있습니다.
이처럼 기존의 API를 이용해 새로운 프로그램을 만드는 것을 매쉬업(mashup)이라고 하는데 가장 대표적인 사례가 구글의 하우징 맵스 서비스입니다.
(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를 사용하여 문자열로 변환된 날짜를 가져옵니다.
뭔가 문제 없는데 실행이 안된다 -> 캐시지워보기
호출시 옵션값
part: 'snippet',
key: 키값
maxResults: 호출할 데이터 갯수,
playlistId: 호출할 유튜프 재생목록 아이디
**(len > 100) ? p_txt = p_txt.substr(0, 100)+"..." : p_txt;
QQQQQQQQ
동적(append)으로 ::after 설정하려면 어떻게?..
css파일에 주는 수 밖에 없??
, nth-of-type
**키보드이벤트 중 , 기능키 13번 keycode
constructor(생성자함수), prototype(프로토타입)을 활용한 객체지향 프로그래밍
생성자 함수 (통칭 ES5에서의 클래스) constructor
너무 많은 객체를 만들어야 할때, 기본 객체 틀을 만들어 놓는것
인스턴스(instance) - 객체
프로토타입
생성자함수로 인스턴스 생성하는법
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
flex-direction: flex상의 기본축을 지정
flex-wrap: 자식요소의 줄바꿈 유무 결정
justify-content: 자식요소의 기본축 정렬방식 지정
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값을 반환