믹아의 개발일기

펑소에 html 코딩을 할 때 button 등에 데이터를 저장하기 위해

<button id="data1"> 버튼 1 </button>
<button id="data2"> 버튼 2 </button>
<button id="data3"> 버튼 3 </button>
<button id="data4"> 버튼 4 </button>

이렇게 야매로 많이 했었다. 근데 관리해야할 데이터가 좀 많아져서 찾아보니 다른 방법이 있더라.

<button id="btn1" data-test="value"> 버튼 </button>

<script type="text/javascript">
	document.getElementById("btn1").addEventListener("click", function(){
        console.log(this.dataset.test);
    })
</script>

<!-- console
value
-->

data- 뒤에 원하는 변수명을 입력하고 값을 지정해준다.

그리고 DOM을 얻어와 dataset.변수명으로 구해올 수 있다.

<button id="btn1" data-test="value" data-test2="value2"> 버튼 </button>

<script type="text/javascript">
	document.getElementById("btn1").addEventListener("click", function(){
        console.log(this.dataset);
    })
</script>

<!-- console
 { test : "value" , test2 : "value2" }
-->

데이터를 여러개 넣어서 구해오고 싶으면 더 추가하면 된다.

input type='file' 로 비디오 파일을 선택해서 video 태그로 재생해보자

<!-- HTML -->
<input id="file" type="file" accept="video/mp4,video/mkv, video/x-m4v,video/*">
<video id="video"></video>

input 에 type 은 file로, accept 로 비디오 확장자로 설정했다.

// Javascript

const inputFile = document.getElementById("file");
const video = document.getElementById("video");

inputFile.addEventListener("change", function(){
    const file = inputFile.files[0];
    const videourl = URL.createObjectURL(file);
    video.setAttribute("src", videourl);
    video.play();
})

일단 간단하게 이렇게 만들수 있다.

샘플 페이지

codepen.io/mika0203/pen/VwPKLLM

구글 크롬에서만 작동 확인..

a 태그에 하이퍼링크를 달았을 때

기본값은 파란색(#0000EE) , 한번 누른적이 있다면 보라색(#551A8B)으로 뜬다.

기본값을 바꿔보자.

/* style.css */

:link { color: #0000EE; }
:visited { color: #551A8B; }

link 가 링크 방문전 색이고, visited 가 방문한 적이 있는 링크다.

element.insertAdjacentHTML(position, text);

element 에 html 텍스트를 파싱하여 node를 추가한다.

jQuery 의 append() 기능과 비슷하다고 생각하면 된다.

<div id='node'> </div>

<script type="text/javascript">
	var node = document.getElementById("node");
    var span = "<span> Hello World! </span>"

	node.insertAdjacentHTML("beforeend", span);
</script>

position 엔 4가지가 있다.

jquery 의 append(), prepend(), before(), after() 과 동일하다. 

node.insertAdjacentHTML("beforebegin", "beforebegin");
node.insertAdjacentHTML("afterbegin", "afterbegin");
node.insertAdjacentHTML("beforeend", "beforeend");
node.insertAdjacentHTML("afterend", "afterend");

현재 jQuery코드를 javascript 로 옮기는 중 의문점..

document.addEventListener("DOMContentLoaded", function(event) { 
  //do work
});

https://stackoverflow.com/questions/799981/document-ready-equivalent-without-jquery