반응형 웹에서 테이블 구조를 사용하는 경우에, 모바일 화면에서는 테이블의 구조가 무너지는 경험을 자주 했기 때문에 해결을 위해 브라우저의 폭이 줄어들었을 경우에는 좌우의 스크롤을 통해서 테이블을 확인할 수 있도록 구현할 수 있습니다. 구현 방법은, 테이블을 두 개를 만들어서 하나의 테이블은 고정된 컬럼을 보여주기 위함 하나의 테이블은 스크롤을 통해서 보여질 테이블로써 사용합니다. 실제동작 확인 See the Pen Untitled by JONGIN CHOI (@jongin1004) on CodePen. 간단히 코드 설명 JS const table_container = document.querySelector('#table-scroll'); const table = document.querySelector..
javascript
흔한 CMS 프로그램에서 글을 업로드 한 뒤에, 뒤로가기 버튼을 누르게되면 제출한 Form 데이터가 그대로 남아있게 됩니다. 백엔드 설계에 따라 다르겠지만, 게시글을 클릭하여 상세보기에서 삭제버튼을 눌러 삭제하는 경우에도, 삭제 후 뒤로가기 버튼을 누르게되면 삭제된 게시글의 내용이 그대로 보이게 됩니다. 이러한, 동작을 방지하기 위해서는 많은 방법들이 존재합니다. JS를 통해 방지하는 법, Ajax 통신, GET 방식 등등 2중 Submit을 방지하기 위한 방법 const createForm = document.getElementById("createForm"); let checkSubmit = false; saveBtn.addEventListener("click", e => { e.preventDefa..
HTML detail detail ... 각기 다른 value값을 지닌 button 여러개를 준비 JavaScript const buttons = document.querySelectorAll('#button') buttons.forEach(button => button.addEventListener('click', (e) => { console.log(e.target.value) })); 각 버튼 요소를 누르면, 각 요소의 value 값을 console.log로 출력시킴 각 버튼을 클릭해보면, 콘솔창에서 각 button요소의 value값이 출력되는 것을 확인할 수 있습니다.
제가 구현하고 싶었던 내용은 위의 사진처럼 체크박스가 여러개 존재하는데, 각 카테고리마다 내용이 중복이 되고있습니다. 그래서, 만약에 "행"의 카테고리에서 "keyword"를 선택하면, 다른 두개의 "열"과 "값"에서는 "keyword"를 선택 못하도록 막고싶었습니다. JS에대한 지식이 부족해서 검색해보면서, 무식하게 구현한 것 같지만.. CheckBox 태그
js코드를 파일로 만들어서 html에 가져오는 경우에, script 선언 위치를 어디에 할지에 대한 고민이있습니다. 대부분은 body가 끝나는 부분에 선언하는 경우가 많습니다. 그 이유는 ?? 위의 코드처럼 javascript 코드를 head 부분에 선언한 경우에 어떻게 실행되는지를 설명해보면, 브라우저는 해당 html코드를 한줄한줄 해석하게 됩니다. 그러다가 script 태그를 만나, 해당 array.js라는 js파일을 다운받는 과정이 필요하고 실제로 코드에 적용하기 위해서 js파일을 실행하는 시간이 필요합니다. 그러면, 브라우저는 js파일을 다운받고 실행하는 시간동안은 나머지 HTML 코드를 parsing을 하지 못하게 되고, 유저들은 그만큼 기다리는 시간이 길어지게 됩니다. 그렇기 때문에, body..
1. Class 정의 class Person { //constructor constructor(name, age) { //fields this.name = name; this.age = age; } //method speak() { console.log(`${this.name}: hello!`); } } const jongin = new Person('jongin', 20); console.log(jongin.name); console.log(jongin.age); jongin.speak(); Class의 구성요소로는 필드, 함수, 생성자가 존재한다. 필드는 객체의 상태등을 나타내는 값, 함수는 객체의 동작 생성자는 처음 객체를 생성할 때, 필드의 값을 초기화하는 등의 작업을 한다. 2.getter An..
