불타는 코딩🔥

document.querySelectorAll('targets') 으로 불러올 경우

nodeList가 유사배열(?)로 넘어오기때문에 [].forEach.call() 을 사용한다.

html

<button class="target-btn"> button01 </button>
<button class="target-btn"> button02 </button>
<button class="target-btn"> button03 </button>
<button class="target-btn"> button04 </button>
<button class="target-btn"> button05 </button>

javascript

function enterEvent(_targets, _event, _callback){
        [].forEach.call(_targets, _target => {
            _target.addEventListener(_event, function(e){
                console.log( this, e )
            })
        })
    }
    
    let targets = document.querySelectorAll('.target-btn');
    enterEvent(targets,'click');

base64 인코딩, 디코딩 해야될 때가 있다. 

이때 쓰면 편리한 것이다. 

function b64DecodeUnicode(str) {
  return decodeURIComponent(atob(str).split('').map(function(c) {
  	return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
  }).join(''));
}
    
let char = "SEVMTE8gV09STEQh";
b64DecodeUnicode(char);
// >>> HELLO WORLD!

// base64 인코드 메소드 -> window.btoa()
let incodeChar;
incodeChar = window.btoa('targetChar'); 
// >>> dGFyZ2V0Q2hhcg==

// base64 디코드 메소드 -> window.atob()
let decodeChar;
decodeChar = window.atob(incodeChar);
// >>> targetChar

Object(객체) 다루기

Object(객체) 란 무엇인가?

1. key: value 쌍을 가지는 자료구조입니다.

2. value 에 문자, 숫자, 배열, 객체, 함수를 할당할 수 있습니다.

1. 오브젝트 데이터 생성

const objPersons = {
  persons: [
    {name: "kim", age: 20, gender: "man"}, 
    {name: "vicky", age: 22, gender: "women"},
    {name: "gloria", age: 42, gender: "women"},
    {name: "gom", age: 27, gender: "man"},
  ]
};

Object 안에 Array 가 있고, 그 Array 안에 다시 Object가 배치되어있습니다.

objPersons는 현재 { key: [ {key: value}, {key: value}, {key: value}, {key: value} ] } 이러한 형식과 동일합니다.

2. 오브젝트 데이터 가공하기

const {persons} = objPersons
// ES5: const persons = Object.assign([], objPersons.persons)와 동일
const mapPersons = Object.values(persons).map(v => Object.keys(v).map(v2 => v[v2]))
const filteredPersonsAge = persons.filter( v => v.age > 25 )

작업 순서대로 나열해 보겠습니다.

1. objProject 에서 persons 만 빼와서 블록상수로 참조합니다.

2. persons의 value들을 돌며 key와 일치하는 값들을 mapPersons에 새로운 배열을 반환합니다.

3. persons의 value들을 돌며 일치한 값만 filteredPersonsAge에 새로운 배열을 반환합니다. 

3. 값 확인하기

console.log(persons)
>>> [ 
  { name: 'kim', age: 20, gender: 'man' },
  { name: 'vicky', age: 22, gender: 'women' },
  { name: 'gloria', age: 42, gender: 'women' },
  { name: 'gom', age: 27, gender: 'man' } 
]

console.log(mapPersons)
>>> [
  [ 'kim', 20, 'man' ],
  [ 'vicky', 22, 'women' ],
  [ 'gloria', 42, 'women' ],
  [ 'gom', 27, 'man' ] 
]

console.log(filteredPersonsAge)
>>> [
  { name: 'gloria', age: 42, gender: 'women' },
  { name: 'gom', age: 27, gender: 'man' } 
]

너무 간단하지만, 쓸 일이 많으므로 저장!

최상단으로 가는 버튼

html

<button type="button" id="goTop'"> go to ther TOP </button>

jQuery

$('#goTop').on('click', function(e){ 
     $("html, body").animate({ scrollTop : 0 }, "400") ;
     return false; 
});

최하단으로 가는 버튼

html

<button type="button" id="goBottom"> go to ther BOTTOM </button>

jQuery

$('#goBottom').on('click', function(e){ 
     $("html, body").animate({scrollTop : $(document).height() }, "400");
     return false; 
})

function chain( _x ){
  return new Promise( (resolve, reject) => {
    return resolve( _x ); 
  }) 
} 

chain("hello")
.then( res => { 
    console.log( '1', res );  //  console >>> '1', 'hello'
    return res; 
})
.then( res => { 
    console.log( '2', res );  //  console >>> '2', 'hello'
    return res; 
})
. then( res => {
    console.log( '3', res );  //  console >>> '3', 'hello' 
    return res; 
});

// return 값을 주면 이후 체이닝되는 then 에게 상속된다.

  

    #특명 : 이름에 "g" 가 들어간 사람들을 찾아야한다!

    

    var person = [

        {

            "name": "kim",

            "age": "20",

            "gender": "man"

        }, {

            "name": "vicky",

            "age": "22",

            "gender": "women"

        },

        {

            "name": "gloria",

            "age": "42",

            gender: "women"

        }, {

            "name": "gom",

            "age": "27",

            "gender": "man"

        }

    ];

    

    // 객체가 담은 배열 person에 filter 메서드 사용

    // 배열 순서대로 객체단위로 쪼개어 load 라는 매개변수로 할당

    // 객체 순서대로 name 에 우리가 원하는 문자열이 있는지 탐색

    // 해당 문자열이 있는 경우 참, 거짓으로 리턴된다.

    // filter메서드는 참의 결과들만 모아 배열로 반환한다.

    

    function arrayFilter(_objInArray, _findValue) {

        return _objInArray.filter(function(load) {

            return load.name.includes(_findValue);

        });

    };

    

    arrayFilter(person, "g");

    

    

    //결과 Array

 [

    {name: "gloria", age: "42", gender: "women"},

    {name: "gom", age: "27", gender: "man"}

]

    

쇼핑몰 재직 중 만든 썸네일에 영상띄우기 pc버전

필요한 부분만 구성한 약식 UI로 만들어봤다.

실사용하려면 콘텐츠를 생산해야하니 촬영팀 부담이 크다... 

ps. 영상은 존경하는 김포프님 영상입니다.  

#설명 

1. productNumber에 상품번호, productMedia 에 매치시킬 영상링크 두 가지를 설정한다.

2. 해당 상품번호가 페이지내 상품목록에 있을 경우, [영상보기] 버튼을 노출 시킴.

3. [영상보기] 버튼 클릭 시 모달창과 영상이 띄어진다.

4. 띄어진 모달창엔 클릭한 상품의 상품명, 상품링크가 새겨진다.

5. [닫기] 혹은 모달창 외부를 클릭할 경우 닫힌다.

끝

#ex

상품번호가 127464 일 경우, https://www.youtube.com/embed/6eSyE9cXQ-U 영상이 출력된다.

productInfo = [

    {

        "productNumber": "127464",

        "productMedia": "https://www.youtube.com/embed/6eSyE9cXQ-U"

        }, {

        "productNumber": "127434",

        "productMedia": "https://www.youtube.com/embed/YrweCYauK6o"

        }

          ];

[ 0.5× ] 보기로 확인하시면 편리합니다.

펄스처럼 파형을 가진 것 같은 시선강탈 버튼입니다.

CSS3의 강력함과 표현력이 빛을 발휘합니다.

hover시엔 pulse를 멈추고 out시엔 pulse가 실행됩니다.

200px 밑으로 내려가면 보입니다!

ps.구 브라우저에선 펄스가 안보이니 당황하지마세요.

See the Pen pulse 파형 버튼만들기 by Choidaeboem (@choidaeboem) on CodePen.