프론트엔드/JAVASCRIPT(21)
-
[JS] 헤더 고정 스크롤 구현
[헤더고정스크롤 구현] 요건 : JSP내에서 엑셀다운로드를 할 수 있는 테이블 만들어야 하는데, 화면에 보여질 때 헤더는 고정이 된 상태에서 스크롤시 동적으로 리스트를 생성해야함 방법1 . 임시테이블 하나 더 생성 검색 KEY 파일이름 생성일자 KEY 파일이름 생성일자 내용0 내용0 내용0 내용1 내용1 내용1 내용2 내용2 내용2 내용3 내용3 내용3 내용1 내용1 내용1 내용2 내용2 내용2 내용3 내용3 내용3 내용1 내용1 내용1 내용2 내용2 내용2 내용3 내용3 내용3 Excel Download 구현내용: 화면에 리스트로 보여줄 테이블(resultTable) 과 헤더만 보여질 테이블(fixedtable) 을 생성 화면에 리스트로 보여줄 테이블(resultTable) thead를 'display..
2020.11.07 -
[JS 객체(Object)
object = {key : value}; 1. Literals and properties 1-1. Object의 사용 보통 primitive타입은 변수 하나당 값을 하나만 할당할 수 있는데, 이 변수들을 출력하고자 함수를 정의해서 호출한다면 출력하고자 하는 변수들이 굉장히 많아질 수 있고 비효율적일 수 있는데 이럴 경우 객체(Object)를 활용하면 위의 문제점들을 개선할 수 있음 const name = "ellie"; const age = 4; print(name, age); function print(name, age) { console.log(name); console.log(age); } function printObject(person) { console.log(person.name); con..
2020.06.18 -
[JS] javascript:void(0) 과 #
javascript:void(0) ' javascript: '을 사용할 경우 해당 구문이 스크립트로 평가되어 실행되어 도큐먼트의 내용으로 표시됩니다. ' javascript:void(0) '을 사용할 경우에는 스크립트의 평가 결과로 'undefined'가 반환되어 무시되므로 현재 페이지가 유지됩니다. 주의할 점은 CSP(Content Security Policy)의 설정에 따라서는 Inline Event Handler가 블럭될 수 있습니다. (물론 void이므로 블럭된다해서 문제될 것은 없을 수 있지만 보안툴 등에 의해 경고가 출력될 수 있습니다. #(hash) ' #(hash) '는 보통 페이지 내부링크를 목적으로 사용되는데 id를 지정하지 않은 경우에는 해당 페이지의 최상단으로 스크롤됩니다. 기본동작..
2020.06.08 -
[JS] 클래스(Class)
객체지향프로그래밍(Object-oriented programming)에서 class는 template이고, object는 instance of a class입니다. 그렇다면 Javascript에서 class는? -introduced in ES6 -자바스크립트에서는 기존에 클래스가 존재하지 않다가 'ES6'에서 추가됨 (클래스가 도입되기 전에는 클래스를 만들지 않고 바로 Object를 만들 수 있었고, 이 Object를 만들 때 Function을 이용해서 템플릿을 만드는 방법이 있었음) -syntactical sugar prototype-based inheritance -클랫는 완벽하게 짠하고 추가된 것이 아니라 기존에 있던 자바스크립트에 추가된 것이기 때문에 기존에 존재하던 prototype을 베이스로 ..
2020.06.04 -
[JS] 함수(Functions)
1. Function -fundamental building block in the program -subprogram can be used multiple times -perfirns a task or calculates a value 1-1. Function declaration function name(param1, param2) {body... return;} one function === one thing(한 개의 함수는 한 가지의 일만 하도록 작성해야함) e.g. createCardAndPoint -> createCard, createPoint function is object in JS (자바스크립트에서 함수는 Object로 간주) 변수에 할당할 수도 있고 파라미터로 전달되고 함수를 리턴도 ..
2020.06.03 -
[JS] 반복문(Loops)
1. while while the condition is truthy, body code is executed. let i = 3; while(i>0){ console.log(`while:${i}`); i--; } //while:3 //while:2 //while:1 2. do while body code is executed first, then check the condition let i = 1; do { console.log(`do while:${i}`); i--; } while(i>0); //do while:0 3. for for(begin;condition;step) begind은 딱 한번만 실행하고 블럭을 실행하기 전에 condition체크하고 블럭을 실행하고 step진행 i에 '3'을 대입..
2020.05.31