개발/html, css, javascript (7) 썸네일형 리스트형 SheetJS 를 이용하여 xlsx 데이터 를 json 으로 만들기 - 나의 상황 : 화면에서 엑셀을 업로드 받아 상품 목록 데이터를 읽어 db에 저장해야했다. 백엔드에서 처리해도 되는데 javascript 로도 처리할 수 있다고하여 도전. 1. 라이브러리 추가. 2. script 나는 file 의 change 이벤트로 처리했다. $("#file").on("change", (event)=>{ let input = event.target; let reader = new FileReader(); let rows; reader.onload = async function () { let data = reader.result; let workBook = XLSX.read(data, { type: 'binary'}); workBook.SheetNames.forEach(functio.. Javascript 배열, 배열 함수 정리 - 내가 매번 헷갈려서 나중에 찾아보려고 정리.. - 배열 선언 : 두가지 let arr = new Array(); let arr = []; - for of, forEach : 배열의 값 하나씩 꺼내기 let items = [1, 2, 3] for(let item of items){ console.log(item); } // 1 // 2 // 3 items.forEach(function(item, index, array)){ // = items.forEach((item, index, array) => {}); console.log(item, index); }); // 1 0 // 2 1 // 3 2 - push : 배열 젤 뒤에 값 추가 - pop : 배열 젤 뒤에 값 삭제 - unshift : 배열 젤.. Javascript ... 문법 의미 const pagingParam = {pageNum = 1}; getList(pagingParam); function getList(pagingParam){ param = { ...pagingParam, pageRows: $("#pageRows").val(), searchColumn: $("#searchColumn").val() } //생략 } 다른 분의 소스를 분석하던 중, ...pagingParam 은 왜 ...이 붙을까 궁금해서 찾아보았다! 이건 '비구조화 할당 문법'으로 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 자바스크립트 표현식이다! ...pagingParam 으로 쓰면, 넘겨받은 pagingParam 배열 안에 들어있는 값들을 다 할당해준다!(주소값이 아니라 값.. (html) data-* attributes 사용하기 -html5 에서 지원하는 기능. - data-* 를 사용하면 html 에서 id, name, class, vlaue 외에도 다른 속성을 커스텀해서 쓸 수 있다. 사용법. // HTML ... //JavaScript const article = document.querySelector('#electric-cars'); // The following would also work: // const article = document.getElementById("electric-cars") article.dataset.columns // "3" article.dataset.indexNumber // "12314" article.dataset.parent // "cars" //JQuery 를 사용한다면 아래처럼도.. 서버의 설정값(*.properties) 을 JavaScript (.jsp, .js)에서 사용하기. -config.properties #Excel Download time limit(day) excel.download.time.limit.day=31 -.JSP //스크립트에서 사용하기 //화면에서 사용하기 ------------------------------------------------------------------------------------------------------------------------- - .JS : 내가 지금 개발하야하는 부분은 공통으로 적용해야해서 따로 빠져있는 common.js 파일에 추가해야했다. 근데 let limitDay = ""; 이걸 써도 limitDay 의 값이 jstl 태그까지 통으로 String 으로 찍히는 현상 발생. 찾아보니 js 파일은 서버스크.. COOKIE(쿠키)에 ID 값 저장하기. ID 저장 체크박스 만들기. 1. html 에 체크박스 그려주기. ID 저장 2. javascript //쿠키값 set function setCookie(cookieName, value, exdays){ let exdate = new Date(); exdate.setDate(exdate.getDate() + exdays); let cookieValue = escape(value) + ((exdays == null) ? "" : "; expires=" + exdate.toGMTString()); document.cookie = cookieName + "=" + cookieValue; } //쿠키값 delete function deleteCookie(cookieName){ let expireDate = new Date(); expire.. [html] id, name, class 차이점 id class name 한 페이지에 하나의 요소만 가능. 여러 요소 적용 가능 여러 요소 적용 가능 CSS 에서 식별자로 사용 가능 (#testId) CSS 식별자로 사용 가능 (.testClass) CSS 에서 사용 불가 jQuery : $("#testId") jQuery: $(".testClass") jQuery : $("input[name=testName]") - - submit 전송 시 전달. * 만약 여러 요소에 같은 name 값 지정시, 해당 name 의 value 값은 배열로 전송 이전 1 다음
