본문 바로가기

반응형

Web Dev/Javascript

(24)
Javascript 첨부파일 용량 제한하는 방법 쉽습니다 feat JQuery HTML -파일 첨부시 250KB 이하 용량만 첨부 가능 위와 같은 파일 업로드 input 태그를 만들고 파일을 업로드 할 때 용량 제한은 서버 관리를 위해 매우 중요하다. 너무 큰 용량의 파일의 경우 해당 파일을 서버까지 전송하는데 많은 시간과 에러를 발생시킨다. JAVASCRIPT $(document).ready(function() { $('.upload_file').change(function() { var file = this.files[0]; var maxSize = 250 * 1024; // 250KB 제한 (1KB = 1024 bytes) if (file.size > maxSize) { alert("파일 크기는 250KB 이하여야 합니다."); $(this).val(''); // 선택한 파일..
Javascript : 웹페이지 원하는 위치에 애니메이션 focus 주는 방법 feat JQuery 방법 예를 들어 이런 포커스 주기를 원하는 HTML 태그가 있습니다. 동의합니다. 해당 태그를 구분할 수 있는 값은 여러 방식이 있지만 우선 class , name , id 값이 있습니다. JQuery 사용 법은 jQuery는 JavaScript 기반의 오픈 소스 라이브러리로, HTML 문서의 구조를 조작하고 상호 작용할 수 있는 강력한 기능을 제공합니다. jQuery를 사용하면 간단하고 효과적으로 DOM 요소를 선택하고 조작할 수 있으며, AJAX를 통해 서버와 통신하는 등 다양한 작업을 수행할 수 있습니다. jQuery를 사용하기 위해서는 먼저 해당 라이브러리를 HTML 문서에 포함시켜야 합니다. jQuery를 다운로드하여 로컬에 저장하거나, CDN(Content Delivery Network)을 통해 온..
Javascript 문법 - 구조분해할당(Destructing) 구조분해할당 = 비구조화할당 const child = { name: "준호", age: 30, school: "USC", createdAt: "2021-03-15", } // const name = "joonho" // const age = 30 // const school = "서라벌초등학교" // const createdAt = "2020-01-01" const { name, age, school, createdAt } = child getWelcomeTemplate({ name, age, school }); function getChild() { return { namec: "철수", agec: 13, schoolc: "다람쥐초등학교", } } const { schoolc } = getChild()..
Javascript : table 태그 name ,id 값으로 행과 열 구분하여 checkbox 체크 가능 범위 조절하는 함수 HTML 정책의 이해 설치기술 실무 인증제도의 이해 적용방법 ① 평가항목별 적용방법 ② Javascript //이준호 작성 //체크 박스 중복 체크 방지 코드 function handleCheckboxClick(checkbox) { const checkboxes_names = document.getElementsByName(checkbox.name); const checkboxes = document.querySelectorAll('input[type="checkbox"]'); // 클릭된 항목 담는 배열 변수 const checkedValues = []; checkboxes.forEach(function(checkbox) { // 각 체크박스 요소에 대한 처리 if (checkbox.checked) {..
JavaScript 자바스크립트의 관대함 this, argument C 언어와는 다르게 매개 변수를 함수에 넣어 줄 때 꼭 정확하게 개수를 맞출 필요가 없다. 약속어 처럼 사용 하는 arguments는 알아서 배열 기능도 가지고 있어 원하는 인자를 넣어 주기만 하면 알아서 배열도 되었다가 단일변수도 되었다가 마법을 부린다. C 언어에서 말하는 객체와 속성 함수 메서드의 개념도 쫌 차이가 있다. 속성에 함수가 들어 있다면 그걸 메소드라고 부른다. 함수가 가지는 메서드에는 APPLY , CALL 등을 가지는 데 APPLY를 사용해 보았다 . APPLY이는 이렇게 사용하는데 SUM(1,2) = SUM(NULL,[1,2]) 같은 값이 나온다. 그러면 왜 쓰는 걸까 ? THIS라는 예약어와 연관이 있다. NULL이였던 자리에 사용하고자하는 객체 변수를 넣어주면 var this =..
JS Rest 파라미터 사용 방법 간단한 예제로 알려드립니다 //REST 파라미터 ?? const child5 = { name: "철수", age: 8, school: "다람쥐초등학교", money: 2000, hobby: "수영", } //delete child.money -> 원본을 건들이는 명령어 //how to use ...rest const { money, hobby, ...rest } = child5; //...rest = {name , age, school} console.log('rest', rest) 변수 이름은 자유 ! ...aaa , ...bbb , ...ccc 아무거나 적어도 상관 없다. spread 연산자과 구조분해할당 합쳐서 구현
Javascripte웹 백엔드 학습 No.1 : Token 만드는 코드 -> Farcade Pattern PAD padStart와 padEnd 함수는 ES8(ES2017)에 새롭게 추가된 기능이다. pad는 좌우에 특정한 문자열로 채우는 기능이다. 좀더 자세히 얘기하면 첫번째 파라미터인 maxLength를 받아 문자열의 길이가 maxLength보다 작을 경우 나머지를 특정한 문자열로 채워주는 기능이다. 이때 두번째 문자열을 넘겨주지 않으면 빈 공백으로 문자열을 채운다. const result = String(Math.floor(Math.random() * 1000000)).padStart(6, "0"); console.log('result', result)​ Token console.log("안녕하세요 !") function getToken(num) { const result = String(Math.flo..
Javascript 문법 - 얕은 복사 (spread연산자) / 깊은 복사(JSON메서드) : 백엔드 //얕은 복사 -> spread ... 문법 사용 const child1 = { name: "철수", age: 13, school: "다람쥐초등학교" } const child2 = { ...child1 } child2.name = "영희"; console.log('child1', child1) console.log("child2", child2) //깊은 복사 -> JSON 문법사용 or lodash -> 공부 const child3 = { name: { first: "김", last: "철수" }, age: 13, school: "다람쥐초등학교" } const child4 = JSON.parse(JSON.stringify(child3)); //완전 새로운 객체 child4.name.first = "최"..

반응형