-
Javascript, jQuery 2022‧10‧17
배열의 마지막 값 가져오기
slice(-1)을 이용해서 배열의 마지막을 가져올 수 있다. 하지만 이렇게 하면 배열의 마지막 값만 배열에 담기는 것이라["E"]가 된다. 그렇기 때문에 "E" 만 받아오려면 아래처럼 다시 배열안의 값을 가져온다. 또는 아래처럼도 배열의 마지막 값을 가져올 수 있다.
-
Javascript, jQuery 2021‧10‧21
JS - 쿠키 저장, 불러오기
jQuery가 아닌 자바스크립트로만 쿠키를 저장하고 불러오고 지우는 코드 1. 쿠키 설정하기 (저장) 2. 쿠키 불러오기 (읽기) 3. 쿠키 지우기(삭제)
-
Javascript, jQuery 2020‧07‧20
JS - map()
타겟 배열을 가지고 배열의 0번째부터 끝번째까지 하나하나 가공을 거쳐 새로운 배열로 반환하는 것 위 예제는 배열 arr 의 요소들을 곱하기 2로 한 뒤 새로운 배열에 담아 반환하는 것이다.설명하자면 배열 arr 의 하나하나 요소가 맵안에 만들어진 연산을 거쳐 새로운 배열에 그 요소가 들어가는 것이다.
-
Javascript, jQuery 2020‧07‧20
JS - filter()
타겟 배열을 가지고 배열의 0번째부터 끝번째까지 조건에 대입한 뒤 조건에 맞는 것들만 모아서 새로운 배열로 반환하는 것 위 예제는 배열 arr을 2보다 큰 수일 경우를 배열로 반환하는 것이다.설명하자면 배열 arr 의 하나하나 요소가 필터안에 만들어진 조건에 충족되면 새로운 배열에 그 요소가 들어가는 것이다.
-
Javascript, jQuery 2020‧07‧13
동적인 값으로 css 추가하기
보통 css는 정해놓은 값들로 처리된다.하지만 브라우저 리사이즈와 같은 인터렉션에 의해 사이즈나 속도등이 변경되었으면 할 css 값들이 있다. (특히 애니메이션 키프레임)이럴 경우 자바스크립트를 활용해서 넣는 몇가지 방법이 있었지만 내가 쓰는 방법만 적어 놓겠다.혹시 필요하면 구글에서 CSSStyleSheet.addRule() 과 CSSStyleSheet.insertRule()를 검색해서 더 많은 정보를 찾아보면 된다. 이렇게 먼저 스타일 엘리먼트를 만들어서 헤더에 넣도록 하고 jquery 로 ready 또는 […]
-
2015-2016 2016‧10‧19
Gillette Pop-up Store
질레트 팝업 스토어 - 디지털 인터렉티브 가로 페럴렉스 웹사이트로 제작하여 외부에서 시리얼 통신을 통해 인터렉티브한 미디어를 제작하였습니다. 마그네틱 센서의 절대값을 시리얼 포트와 자바스크립트를 이용해서 마우스의 휠과 같은 역할로 투명 디스플레이 안에서 컨트롤 컨트롤이 되도록 개발되었습니다. 디스플레이 뒤의 모형에 맞춰 스크롤에 맞게 이벤트가 발생하도록 매칭해놓았으며 영상들을 제어하도록 되어있습니다. [vimeo clip_id="193542807" height="350"]
-
2015-2016 2016‧04‧14
TOYOTA KOREA website renewal
토요타 코리아 - 웹사이트 반응형 웹사이트로 제작하였습니다. 개발 초에는 ie7부터 맞추는 작업도 있었으며, 비주얼적인 면이 많고 이와 함께 인터렉션들도 많기 때문에 여러 사용자들의 행동 변수들을 감안하여 시나리오에 맞춰 개발하게 되었습니다. youtube 영상을 담은 슬라이드 플러그인, 비규칙적 카드 레이아웃 플러그인을 만들어서 적용시켰습니다. [vimeo clip_id="203967880" height="350"]
-
Javascript, jQuery 2016‧03‧24
JS - youtube 재생 완료 이벤트 받기
유튜브 영상을 가져와서 사이트를 제작할 경우가 발생할 때 여러가지 인터렉션을 구현하게 된다. 그 중 영상의 재생이 끝났다는 이벤트를 받아와서 다른 행동이나 스크립트가 실행되도록 하고자 할 때 아래와 같이 스크립트를 작성한다. 시작 전 ie8 이하는 해당 기능이 되지 않는다. 이유는 html5를 지원하는 브라우저에서만 가능하기 때문이다. <div id="player"></div> html에 유튜브 영상을 넣을 div를 만들어 놓는다. 스크립트가 실행되면 […]
-
Javascript, jQuery 2015‧12‧24
JS-페이스북 공유한 뒤 공유 여부값 가져오기
페이스북을 이용해서 게시물을 공유하게 한 뒤 공유가 되었거나 실패하였는지 확인하는 코드가 필요할 때가 있습니다. 이 코드를 작성하기 앞서 페이스북 개발자 센터에서 APP ID를 발급 받으셔야합니다. APP ID 발급 방법은 구글에서 'facebook app id'만 검색해도 쉽게 설명이 잘 나와있으니 참고하신 후 APP ID를 발급 받아놓습니다. 아래는 id 값 sharebutton 을 가진 공유버튼을 클릭하면 페이스북 공유 창이 […]
-
Javascript, jQuery 2015‧10‧17
javascript - head에 tag 엘리먼트 추가하기
상황에 따라 헤더에 스크립트 파일이나 css 태그를 넣어야하는 상황이 온다. 아래와 같이 넣으면 된다. if(!document.getElementById('id1')) { var script = document.createElement('script'); script.id = 'id1'; script.src = 'Scripts/Script1.js'; document.head.appendChild(script); } id는 존재하는 지 여부를 확인하는 것이기 때문에 넣는 편이 좋다.