TIL/웹퍼블리셔취업과정(56)
-
객체지향 문법
절차지향 코드의 불편한 점 - 여러개의 기능을 만들 때, 반복적으로 실행되는 공통의 기능들까지 일일이 코드를 입력해야 함 --> 해결방안: 이벤트+함수 형태 (반복되는 공통의 기능을 함수로 패키징해서 호출하는 식으로 재활용) 이벤트+함수 형태의 불편한 점 - 공통적인 기능 자체는 함수라는걸 이용해서 재사용 가능하지만 전역변수에 저장되는 선택자와 해당 선택자를 불러와서 연결하는 이벤트구문은 필연적으로 계속 반복적인 코드를 입력해야 함 객체지향 - 선택자와 이벤트를 통째로 함수와 같이 기능단위로 패키징 함 객체지향의 기본 개념 - 자주 사용되는 특정 기능을 멤버변수, 메서드 형식으로 패키징을 해서 해당 기능이 필요할 때마다 손쉽게 복사해서 재사용하기 위한 시스템적인 틀 생성자함수(constructor) : ..
2021.11.09 -
svg이미지 활용
필수요소 stroke-linejoin (선이 꺽이는 부분 모양처리) - miter: 직각으로 꺽음 (기본값) - round: 모서리를 둥글게 - bevel: 두번 꺽어서 완만하게 꺽음 stroke-dasharray - 선에 빈 공간을 생성 - 수치값을 늘릴수록 빈 공간은 늘어남 - 빈공간 크기와 비례해서 선이 그려지는 영역도 같이 늘어남 stroke-linecap (선이 짤린 단면의 모양처리) - butt: 직각으로 자름 - square: stroke-width크기만큼 여백을 줘서 자름 (기본값) - round: 둥글게 자름
2021.11.02 -
문자열 관련 메소드
▶ 문자열 관련 메소드 문자열.length : 문자열 갯수 반환 문자열.indexOf("text") : 특정 문자에서 끝나는 부분의 특정 문자열의 위치를 반환해줌 문자열.lastIndexOf("text", [start]) : 특정 문자에서 끝나는 부분의 특정 문자열의 위치를 반환 문자열.search("text") : 특정 문자에서 시작하는 부분의 특정 문자열의 위치를 반환 문자열.slice(start, [end]) : 특정문자에서 특정부분의 순서값을 넣어서 문자열을 자름 문자열.substring(start, [end]) : 특정문자에서 특정부분의 순서값을 넣어서 문자열을 자름 문자열.substr(start, [length]) : 특정문자에서 특정갯수만큼 문자열을 자름 문자열.replace("origin"..
2021.10.08 -
youtube api 적용하기
$.ajax({ url: "", dataType: "jsonp", data: { part: "snippet", key: "", maxResults: 5, playlistId: "" } }).success(function(data){ console.log(data); }); }).error(function(err){ console.error(err); }); ▶ youtube data api https://developers.google.com/youtube/v3/docs/playlistItems/list ▶ youtube api https://console.cloud.google.com/cloud-resource-manager?hl=ko
2021.10.08 -
flickr api 적용하는 방법
$.ajax({ url: "", dataType: "json", data: { api_key: "", per_page: 5, format: "json", nojsoncallback: 1, privacy_filter: 5 } }).success(function(data){ console.log(data); }).error(function(err){ console.err("데이터를 불러오지 못했습니다."); })
2021.10.08 -
jQuery 기초 문법
▶ DOM 탐색 메서드 $(선택자).children(요소명) : 직계 자식 요소 중에서 요소명에 해당하는 DOM 탐색 $(선택자).find(요소명) : 자손 요소 모두 탐색해서 요소명에 해당하는 DOM 탐색 $(선택자).parent() : 직계 부모 탐색 $(선택자).siblings(요소명) : 형제 요소 중에서 요소명에 해당하는 DOM 탐색 $(선택자).next() : 형제 요소들 중에서 바로 다음에 있는 DOM 탐색 $(선택자).prev() : 형제 요소들 중에서 바로 이전에 있는 DOM 탐색 $(선택자).eq(순번) : 형제 요소들 중에서 해당 순번에 맞는 DOM 탐색 $(선택자).first() : 형제 요소들 중에서 제일 처음 요소 DOM 탐색 $(선택자).last() : 형제 요소들 중에서 제일..
2021.09.08