html

<body>
    <div class="arrcodian_wrap">
        <dl class="arrcodian_contain">
            <dt class="accordion">
                1 title
            </dt>
            <dd class="panel">
                1 panel
            </dd>
            <dt class="accordion">
                2 title
            </dt>
            <dd class="panel">
                2 panel
            </dd>
            <dt class="accordion">
                3 title
            </dt>
            <dd class="panel">
                3 panel
            </dd>
            <dt class="accordion">
                4 title
            </dt>
            <dd class="panel">
                4 panel
            </dd>
            <dt class="accordion">
                5 title
            </dt>
            <dd class="panel">
                5 panel
            </dd>
        </dl>
    </div>
</body>

 

css

 body{
            background: #ffb900;
        }
        
  
        /* 아코디언메뉴 */
        
        .arrcodian_wrap {
            width: 200px;
            margin: 50px auto 0;
            border-radius: 10px;
            overflow: hidden;
        }
        
        .accordion {
            background-color: #f74f4f;
            color: #fff;
            cursor: pointer;
            padding: 10px;
            font-weight: bold;
            border-bottom: 1px solid #ec3636;
            font-size: 14px;
        }

        .panel {
            background-color: #004a80;
            color: #fff;
            display: none;
            padding: 12px;
            font-size: 12px;
        }
        
        .panel.active {
            display: block;
        }

 

js

let acc = document.querySelectorAll(".accordion");
    let panel;
    [].forEach.call(acc, (accItem) => {
            accItem.addEventListener('click', function() {
                this.classList.toggle("active");
                panel = this.nextElementSibling;
                panel.classList.toggle('active');
            })
        })

See the Pen 아코디언 by CHOEDB (@chleoqja) on CodePen.

저작자표시

'Frontend' 카테고리의 다른 글

transform hertz unit  (0) 2020.08.18
NUXT.js 로 Vue SSR 세팅하기(1)  (0) 2019.06.23
[jQuery] 최상단, 최하단 바로가기 애니메이트 버튼  (0) 2019.04.11
jQuery를 pure js, vue.js로 바꿔보자  (0) 2019.02.25
뷰 설치  (0) 2019.02.12

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');

 

저작자표시

'Javascript' 카테고리의 다른 글

배열의 중복값 제거  (0) 2019.04.25
[자료구조]  (0) 2019.04.25
base64 인코딩, 디코딩하기!  (0) 2019.04.11
[Object] Object 다루기 - map, filter 로 값 추출하기  (0) 2019.04.11
Promise Chain 구성하기  (0) 2019.04.11

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
저작자표시

'Javascript' 카테고리의 다른 글

배열의 중복값 제거  (0) 2019.04.25
[자료구조]  (0) 2019.04.25
다수의 엘리먼트에 이벤트 등록하기  (0) 2019.04.11
[Object] Object 다루기 - map, filter 로 값 추출하기  (0) 2019.04.11
Promise Chain 구성하기  (0) 2019.04.11

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' } 
]
저작자표시

'Javascript' 카테고리의 다른 글

배열의 중복값 제거  (0) 2019.04.25
[자료구조]  (0) 2019.04.25
다수의 엘리먼트에 이벤트 등록하기  (0) 2019.04.11
base64 인코딩, 디코딩하기!  (0) 2019.04.11
Promise Chain 구성하기  (0) 2019.04.11

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

최상단으로 가는 버튼

 

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; 
})
저작자표시

'Frontend' 카테고리의 다른 글

NUXT.js 로 Vue SSR 세팅하기(1)  (0) 2019.06.23
아코디언 메뉴(업데이트 예정)  (0) 2019.04.12
jQuery를 pure js, vue.js로 바꿔보자  (0) 2019.02.25
뷰 설치  (0) 2019.02.12
[Array] array.filter 메서드 사용하기  (0) 2019.01.29 
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 에게 상속된다.
저작자표시

'Javascript' 카테고리의 다른 글

배열의 중복값 제거  (0) 2019.04.25
[자료구조]  (0) 2019.04.25
다수의 엘리먼트에 이벤트 등록하기  (0) 2019.04.11
base64 인코딩, 디코딩하기!  (0) 2019.04.11
[Object] Object 다루기 - map, filter 로 값 추출하기  (0) 2019.04.11

 

 

input 과 textArea 바인딩하기

 

1. jQuery

See the Pen zbOdQd by Choidaeboem (@choidaeboem) on CodePen.

 

2. javascript

See the Pen jsBinding by Choidaeboem (@choidaeboem) on CodePen.

 

3. vue (양방향바인딩)

See the Pen vue binding by Choidaeboem (@choidaeboem) on CodePen.

 

지극히 개인적으로 잊지말자  

저작자표시

'Frontend' 카테고리의 다른 글

아코디언 메뉴(업데이트 예정)  (0) 2019.04.12
[jQuery] 최상단, 최하단 바로가기 애니메이트 버튼  (0) 2019.04.11
뷰 설치  (0) 2019.02.12
[Array] array.filter 메서드 사용하기  (0) 2019.01.29
[jQuery] 쇼핑몰-썸네일영상띄우기  (0) 2019.01.21

뷰 개발에 필요한 사항들... 계속 업데이트 예정

 

vue-cli 설치

npm install -g vue-cli     

 

웹팩설치

vue init webpack-simple

 

개발에 필요한 모듈설치

npm i 

 

VUE-ROUTER 설치

npm install vue-router --save

 

VUEX 설치

npm install vuex

 

코드보기                           

code . 

 

뷰빌드시 참고사항

1. main.js 를 엔트리포인트로 삼는다.                        

 

 
import Vue from 'vue'
import VueRouter from 'vue-router'
//뷰라이브러리를 사용할 때
//뷰를 먼저 가져오고, 뷰 라이브러리를 가져온다.
 
Vue.use(VueRouter)
// Vue.use 안에 VueRouter 를 기입한다.
 
const router = new VueRouter({
mode:'history',
// Vue.use 안에 VueRouter 를 기입한다.
routes : [
{ path:'/', component: Home},
{ path:'/Login', component: Login},
{ path:'*', component:NotFound}
]
})
 
 
export default router
// 설정해놓은 코드들을 router 라는 이름으로 내보낸다.
 

 

 

업데이트 될 내용들

 

바인딩( v-if, v-for, click 등등)

Vue-router를 활용한 액세스 링크관리

Vuex를 활용한 상태관리(State, Mutation, Action)

 

확장프로그램설치

vetur

task explorer

vuetify-vscode

 

플러그인

vue add vuetify

 

 

 

 

저작자표시

'Frontend' 카테고리의 다른 글

[jQuery] 최상단, 최하단 바로가기 애니메이트 버튼  (0) 2019.04.11
jQuery를 pure js, vue.js로 바꿔보자  (0) 2019.02.25
[Array] array.filter 메서드 사용하기  (0) 2019.01.29
[jQuery] 쇼핑몰-썸네일영상띄우기  (0) 2019.01.21
userAgent를 활용한 브라우저 감지  (0) 2019.01.11

+ Recent posts

티스토리툴바