기억의 파편들

728x90

반응형

SMALL

[

Language/자바스크립트 검색 결과

해당 글 13건

728x90

반응형

LIST

JS 메모

**JS에서 String 조합할때 방법** const username = loginInput.value; //첫번째 방법 const innerText = "Hello " + username; //두번째 방법 const innerText = `Hello ${username}` 2번째 방법이 좀더 깔끔해보인다. 유의점은 `싱글코테이션(' ')`이 아니라 `백틱(``)`을 사용해야한다 **local storage** localStorage.getItem(); https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

Language/자바스크립트 2023. 11. 6. 18:52

[Javascript] 비동기, Promise, async, await 확실하게 이해하기

https://springfall.cc/article/2022-11/easy-promise-async-await

Language/자바스크립트 2023. 9. 11. 17:09

List<DTO>list 형태를 만들어서 서버에게 전달하기

Object.fromEntries(Target) 를 잘 사용해보자 서버 요구 스펙 @PostMapping("/{tid}") public ResponseEntityaddSubTask(@RequestBody List subTaskMap){ log.info("--------------- addSubTask ---------------"); log.info("subTaskDTO: " + subTaskMap); //service.register(subTaskMap); return new ResponseEntity(HttpStatus.OK); } SubTaskDTO @Data @Builder @AllArgsConstructor @NoArgsConstructor public class SubTaskDTO { priv..

Language/자바스크립트 2022. 5. 4. 15:11

10. JSON.stringify. JSON.parse 사용 방법

일반 객체 타입 var stringTest = {name: "윤주영", address: "서울", phone: "1234", family: ["아버지", "나"]}; 콘솔로 일반 객체 타입과 객체타입의 키값으로 value 값을 찍어보자 console.log(stringTest); console.log(stringTest.name); 1.객체(String)타입을 JSON 타입으로 변환하자(JSON.stringify) var jsonTest=JSON.stringify(stringTest); console.log("객체를 json으로 변환 후: ",jsonTest); 객체 타입과는 다르게 키 값과 VALUE 값에 "" 가 씌워진것을 확인할수 있다. 2.JSON 으로 변환된 타입을 다시 객체타입으로 변환(JSO..

Language/자바스크립트 2021. 9. 30. 02:37

9. 자바스크립트 자주 쓰이는 간단한 이벤트 모음

change input 안의 값에 변화에 따라서 자유롭게 핸들링하자 input 태그에 쓰여진 값을 다른 태그 안에 넣어줄수도 있으며 직접 뽑을수도있다 SelectBox 에서 선택된 option의 text 값 또는 value값을 가져오자 //선택한 selectBox의 value 또는 text 값 가져와보기 선택하세요. 옵션 1 옵션 2 옵션 3 click checkBox가 클릭상태면 1, 아니면 0 이라는 값을 갖도록 하자 //체크박스 클릭에 따라서 value 값 지정하기 체크박스 submit form 이용하여 데이터 전송시 전송을 잠시 중단 후 유효성 검사를 진행하자 //폼으로 전달할때의 유효성 검증 name

Language/자바스크립트 2021. 9. 16. 00:39

8. 자바스크립트 널 값 확인하기

ajax로 컨트롤러에 넘겨주는 과정에서 무한 404 오류가 발생했다. var formData={id:jobId,manager:manager, name:name, start_date:start_date, end_date:end_date,work_type:select_work_type, work_detail_type:select_work_detail_type, work_division:select_work_division,week:parent_week,privacy_state:select_privacy_state, sub_name:sub_name, sub_start_date:sub_start_date, sub_end_date:sub_end_date,sub_week:sub_week,real_progress:r..

Language/자바스크립트 2021. 9. 8. 21:17

7. Select Box의 선택된 option 의 text 또는 value 값 가져오기

전체 기타 //1.select 박스 아이디 찾기 var project_title = document.getElementById('project_title'); //2.선택된 text 값 가져옴 ("전체","기타") var select_project_title=project_title.options[project_title.selectedIndex].text; //3.선택된 value 값 가져오기 ("all","기타") var select_project_title=project_title.options[project_title.selectedIndex].value;

Language/자바스크립트 2021. 9. 7. 21:47

6. CheckBox 에 체크여부 확인

1.제이쿼리 방법 prop 프로퍼티 사용

Language/자바스크립트 2021. 9. 4. 23:17

5.[JS]자바스크립트 MAP,Array 사용법

Map 에서 데이터 넣기 const map = new Map(); map.set('hi'); Array 에서 데이터 넣기 var menuArr= new Array(); menuArr.push("hi"); Array 안에 map 데이터 넣기 for(let item of map ){ menuArr.push(item); }

Language/자바스크립트 2021. 8. 19. 20:21

4.[JS] FileReader 이용하여 업로드 이미지 출력하기

현재 나는 새로운 파일을 업로드 할때 마다 그에 맞는 이미지를 출력해야하는데 이전에 업로드했던 파일의 이미지가 그대로 올라가는 문제가 발생하였다. 파일 선택 버튼을 클릭하여 파일을 새로 갱신 할때 마다 이미지 또한 갱신해주는 식으로 변경해야된다. 파일 변경시마다 서버 업로드와 이미지 갱신하는 JS코드 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 $("input[type='file']").change(function(e){ var formData = new FormData(); var inputFile = $("input[name='uploadFile']"); var files = in..

Language/자바스크립트 2021. 6. 12. 22:28

3.[JS] 사용자와의 커뮤니케이션(alert,confirm,promt)

Window 가 최종부모객체로서 아래 하위 자식들을 사용할 수 있다. ex) alert 객체는 기본적으로 window에 속해있기때문에alert = window.alert 은 같은 기능을 한다. DOM: Document Object Model 보통 태그 접근하여 어떠한 기능을 주고싶을때 document.getElementById('태그값'); document 객체를 써서 접근한다. BOM:Browser Object Model 브라우저한테 어떠한 행동을 보여주는 기능을 한다. *사용자와의 커뮤니케이션 1.alert 대표적으로 alert 으로 알람메시지를 띠우는걸 볼수 있다. 결과 요즘은 경고 알람을 alert 이 아닌 console.log 로서 클라이언트한테 주는 형식을 많이 쓴다고 한다. 2.confirm..

Language/자바스크립트 2021. 3. 17. 12:51

2.[JS] 자바스크립트 선언위치 선정

우리는 자바스크립트 선언시 2가지 방법으로 선언할수있다. 1.head 태그안에 2.body 태그 안에 왠만해서는 body 태그 안에 선언을 추천한다. 왜 그럴까? *head 태그 안에 실행 순서는 위 사진과 같이 웹 브라우저에서 html 페이지를 요청하면 1. 자바 스크립트 파일 이 먼저 읽히고 그 다음 2.body 태그 안에 있는 정보들이 읽히게 된다. 이때문에 body 태그안에 있는 id값을 통해서 이벤트를 주고싶을때는 window.onload 라는 함수를 통해서 html의 전체 정보를 가져와 실행시켜야 한다. 이는 실행 순서로 인해서 js가 먼저 실행되고 body 정보가 해석되기때문에 결국 js는 body정보를 모르기 때문에 전체를 택하는 함수를 통해서 사용해주어야 한다. 별도의 자바 스크립트 파일..

Language/자바스크립트 2021. 3. 15. 16:44

1.[JS]메모리 절약을 위한 프로토타입 사용하기

1.객체 생성자 함수 CheckWeight 이름으로 객체 생성자 함수를 선언하고 2개의 객체를 생성하는 예제. yoon.getInfo() 를 통해서 객체에 등록된 속성과 함수를 확인하고 yoon.getResult()를 통해서 몸무게가 정상인지 판별하는 결과를 반환한다. 2.메모리 절약을 위한 프로토타입 사용 앞선 1번방법으로는 객체를 생성하면 생성한 만큼 함수가 등록됨. 그리고 함수를 여러 개 등록하면 메모리 공간을 많이 차지해 메모리 낭비가 됨. 객체 생성자 함수에 프로토타입을 사용하여 함수를 등록하면 메모리 낭비를 줄일 수 있음 1번 방법 2번 방법

Language/자바스크립트 2021. 3. 3. 18:48