프론트엔드/Javascript 검색 결과

해당 글 3건

자바스크립트를 이용해 동적으로 생성된 노드에 이벤트 추가하는 방법

document.getElementById("btnPrepend").addEventListener를 이용해 이벤트 등록을 할 경우 동적으로 생성된 노드일 경우는 이벤드 등록이 되지 않고 에러가 발생한다. document.addEventListener('click',function(e){ if(e.target && e.target.id== 'brnPrepend'){ //do something } }); $(document).on('click','#btnPrepend',function(){//do something}) 현재 하고있는 프로젝트에서는 jQuery를 이용하지 않고 순전히 자바스크립트를 사용하는 상황이다. jQuery로 동적 노드에 이벤트 등록하는 방법은 알고 있었지만 자바스크립트로 하는 방법은 알..
프론트엔드/Javascript 2020. 3. 9. 13:47

processing.js를 이용한 빗방울 떨어지는 애니메이션 만들기

Processing.JS inside Webpages: Template make it rain var sketchProc = function(processingInstance) {with (processingInstance) {size(400, 400);frameRate(30);var xPositions = [200];var yPositions = [0];var rainColorArray = [];var rainColor = function(r,g,b) {this.r = r;this.g = g;this.b = b;};rainColorArray.push(new rainColor(0,200,255));draw = function() {background(204, 247, 255);for (var i = 0;..
프론트엔드/Javascript 2018. 4. 20. 20:46

간단한 이미지 갤러리 만들기

========================================================["./img/이미지1.jpg","./img/이미지2.jpg","./img/이미지3.jpg","./img/이미지4.jpg","./img/이미지5.jpg","./img/이미지6.jpg"]이미지 주소를 가지고 있는 json 형식 image_list.txt 파일========================================================index.html========================================================body{ overflow: hidden;}.image{ position:relative; float: left; height: 200px..
프론트엔드/Javascript 2018. 3. 18. 19:53