728x90 반응형 JavaScript6 [javaScript] 객체 지향 프로그래밍 기초 (객체, 메소드, this) 안녕하세요! 여니노트 입니다🙂 객체 기초 공부한 내용 몇 자 적어 봅니다 HTML 삽입 미리보기할 수 없는 소스 객체 기초 - 객체를 사용하면, 변수와 함수를 묶어 관리에 용이합니다. - 속성과 메소드를 가집니다. 객체 만들기 person = {}; 속성 - 객체에 속한 변수 person.name = "yeony"; person.site = "blog"; console.log(person.name); console.log(person.site); HTML 삽입 미리보기할 수 없는 소스 메소드 - 객체에 속한 함수(function) person.eat = function(food) { console.log(this.name + "는 " + food +"를 먹었다."); }; person.eat("coffe.. 2022. 4. 15. [javaScript] function return 기초 ( + 이중 loop 한번에 나가기 ) 안녕하세요! 여니노트 입니다🙂 function(함수)와 return 값 1. 리턴 값이 있는 함수 정의 및 호출 리턴 값이 있는 경우, 함수를 호출해서 변수에 값을 넣을 수 있습니다. let numberFunc = function() { return 5; } let num = numberFunc(); console.log(num); 결과값 👇 5 HTML 삽입 미리보기할 수 없는 소스 2. 리턴이 없는 함수를 변수에 할당하면? return과 console.log는 다릅니다. let numberFunc = function() { console.log(5); } let num = numberFunc(); console.log(num); 결과값 👇 5 undefined 3. 값없는 리턴 사용하기 값없는 ret.. 2022. 4. 14. [javaScript] 배열과 문자열 기초 (Mutable/Immutable) 안녕하세요! 여니노트입니다 😀 배열과 문자열 기초 차이점에 대해 알아보았습니다. 결론부터 말씀드리면 아래와 같습니다. - 배열 : Mutable - 문자열 : Immutable HTML 삽입 미리보기할 수 없는 소스 배열 : Mutable arr변수에 0부터 4까지 5번째 배열 위치까지 데이터를 넣었습니다. arr[0]으로 0번째 배열을 찍어보면, 0 값이 출력됩니다. arr[0]에 '100'을 넣고 arr배열을 찍어보면, 0번째 배열에 '100'으로 변경된 배열로 찍히는 걸 볼 수 있습니다. 문자열 : Immutable string 변수 안에 'hello'라는 문자열을 넣었습니다. string을 찍어보면, 'hello'라는 문자열이 찍히는 걸 확인할 수 있습니다. string[0]으로 0번째를 's'로.. 2022. 4. 14. [javaScript] Top버튼 스크롤 하단 붙이기 Top버튼 스크롤 하단 붙이기 안녕하세요~ UI 모션 개발을 할 때, 컨텐츠가 긴 경우를 대비해서 보통 우측 하단에 상단으로 이동할 수 있는 일명 Top버튼을 많이 적용하고 있습니다. Top버튼을 적용시킬 때 여러가지 기능이 있을 수 있습니다. 단순히 우측하단에 Top버튼 위치시키기 디폴트로 Top버튼 숨겨져 있고, 스크롤 이벤트가 발생했을 때 우측 하단에 Top버튼 보이기 - 단점 : 푸터와 겹치게 됨 디폴트로 Top버튼 숨겨져 있고, 스크롤 이벤트가 발생했을 때 우측하단에 Top버튼 보이기 - 장점 : 푸터와 겹치지 않음 - 단, 스크롤이 푸터에 닿기 전에 Top버튼은 푸터 바로위에 위치시키기 위의 3가지 경우 중에서 마지막 3번째 경우에 대한 모션구현을 해보았습니다. 디폴트로 Top버튼 숨겨져 있고.. 2022. 4. 6. [javaScript] 스크롤 여부에 따른 버튼영역 하단에 붙이기!! 안녕하세요! 웹사이트를 제작할 때, 스크롤 여부에 따라 버튼 영역을 푸터 하단 쪽에 붙이는 기능이 필요할 때가 종종 있습니다. 다른 작업에서도 이와 같은 유사한 기능을 작업 할 수 있기 때문에 히스토리 차원으로 코드 남깁니다!! 유사한 작업을 하시는 분들께 도움이 되었으면 합니다~ 💡html과 css 코드는 동일! 💡jQuery로 구현한 경우와 javaScript로 구현한 경우! 1) 제이쿼리로 구현한 코드 1-1) 브라우저 화면보다 컨텐츠 내용이 짧아, 스크롤 발생 안 한 경우 HTML 삽입 미리보기할 수 없는 소스 1-2) 브라우저 화면보다 컨텐츠 내용이 길어, 스크롤 발생했을 경우 HTML 삽입 미리보기할 수 없는 소스 2) 자바스크립트로 구현한 코드 2-1) 브라우저 화면보다 컨텐츠 내용이 짧아,.. 2022. 3. 25. [javaScript] ios기기에서 절전모드(저절력모드) 일 때, video 자동재생되지 않는 이슈 ios 기기에서 저전력(절전) 모드 일 때, video autoplay(자동재생)되지 않는 현상 해결 방법 3가지! [이슈 설명] 태그를 활용해 영상을 자동재생으로 추가했을 때, 유독 아이폰에서만 자동재생이 되지 않는 현상을 발견했다. 그 이유는 아이폰에서 절전모드인 저전력 모드를 사용하고 있는 경우에만 나타나는 현상이다! [해결방법 1] 사용자가 영상을 클릭 또는 영상 컨트롤할 수 있는 버튼을 통해 play/pause 제어를 할 수 있도록 변경하는 방법이다. (단점, 기획자를 비롯해 함께 프로젝트를 진행하는 TF 인원들에게 기능 수정을 요청해야 한다..) [해결방법 2] 영상이 재생되지 않을 때의 조건으로 스크립트 제어로 강제로 재생 코드를 추가하는 방법이다. $('body').on('click tou.. 2022. 3. 24. 이전 1 다음 728x90 반응형
