본문 바로가기

JavaScript

 (24)
[JS] Form & Checkbox 체크박스를 포함하고 있는 form 을 제출하면, form은 체크된 요소의 value값을 서버로 전송한다. => 체크 여부에 상관없이 값을 서버로 전송하고 싶다면?  방법1.  type="hidden" 활용. 체크 X =>  폼데이터에 chkYn=N 만 적용되어 전송체크 O =>  폼데이터에 chkYn=N & chkYn=Y 형태로 적용되어 전송  이후에는 서버에서 어떤 방식으로 값을 받느냐에 따라 달라진다.  - request.getParameter("chkYn") 로 값을 가져오는 경우.  => key값이 중복되는 경우 값을 덮어쓰게 되어 마지막 값인 'Y'를 가져온다. - Map formData 로 값을 가져오는 경우  => key값이 중복되는 경우 값을 덮어쓰..
[JS] Property vs Attribute 1. Attribute (HTML 속성)- HTML 마크업에 정의된 초기 속성 값.- HTML 태그에 직접 작서외는 속성으로, 요소가 초기화될 때만 설정.- 문서 로드 시점에만 DOM 요소의 초기 상태로 설정됨, 이후 DOM에 반영. => input요소의 attribute : type, value   2. Property (DOM 속성)- 자바스크립트에서 접근할 수 있는 DOM 객체의 속성.- DOM에 로드된 이후 요소의 현재 상태.- 동적으로 변경 가능하며, 변경 시 DOM에 즉시 반영. const input = document.getElementById('input');console.log(input.value); // "Hello" (Property 값 접근)input.value = "World";..
[JS] addEventListener vs onclick * DOM 요소에 클릭이벤트 핸들러를 할당하는 방법 *1. onclick : DOM 요소에 포함된 이벤트 속성2. addEventListener : DOM 요소에 이벤트 핸들러를 동적으로 추가하는 메서드.  [ onclick ] DOM 요소에 포함된 이벤트 속성. 단일 이벤트 핸들러. 버튼=> 태그 내부에 클릭이벤트 핸들러를 직접 지정할 수 있다. (하지만 함수로 분리해서 지정하는 방법 추천!)  - 단일 이벤트 핸들러   : 하나의 이벤트에 대해 하나의 핸들러만 설정할 수 있다.const button = document.querySelector('button');button.onclick = function() { console.log('Button clicked via onclick!');};/..
[JS] new 연산자, 프로토타입 객체 ( new 연산자 객체 생성 )// 생성자 함수 정의function Person(name, age) { this.name = name; this.age = age;}// 객체 생성const person1 = new Person('Alice', 25);const person2 = new Person('Bob', 30);person1.sayHello(); // "Hello, my name is Alice."person2.sayHello(); // "Hello, my name is Bob."JS에서 new 연산자는 생성자 함수를 통해 객체를 생성할 때 사용.=> 이렇게 생성된 객체는 해당 생성자 함수의 프로토타입을 상속.  [ 객체 생성 과정 ] (생성자함수)function Person(name) ..
[jQuery] jQuery 플러그인 $.fn (사용자 정의 함수) * jQuery 플러그인 jQuery의 기능을 확장하여 사용자 정의 함수를 추가하는 방식. ( jQuery의 프로토타입  )$.fn 객체를 사용하여 인스턴스 메소드를 정의하고, jQuery 객체의 메서드처럼 호출해서 사용.쉽게 말해 내가 원하는 jquery함수를 만들어 사용할 수 있는거다.   ( jQuery 플러그인 정의 )$.fn 객체에서 사용자 정의 메소드 'highlight' 추가$.fn.highlight = function(color) { color = color || 'yellow'; this.css('background-color', color); // jQuery 체이닝을 위해 this 반환 return this; };=> 여기에서 this는 호출된 ..
[JS] FormData 객체 * FormData  객체 JS에서 제공하는 웹API로,HTML 폼의 데이터를 key-value형태로 자동으로 수집하여 비동기 요청으로 서버에 전송하는 경우 사용.(파일업로드를 지원하기 때문에 복합데이터(파일, 이미지 등)를 전송하는 경우 많이 사용.)  ( FormData객체 생성 )const formData = new FormData();  ( 폼 데이터 )  ( 폼 데이터를 FormData 객체에 추가 )const formElement = document.querySelector('form');const formData = new FormData(formElement);for (let pair of formData.entries()) { console.log(pair[0] + ': '..
[JS] 페이지 이동( location.replace / location.href ) *  location.replace('url') - 지정한 url로 이동. - 히스토리에 현재 페이지를 저장하지 않음 =>  '뒤로가기' 불가. * location.href('url') - 지정한 url로 이동. - 히스토리에 현재 페이지를 저장 =>  '뒤로가기' 가능.   현재 페이지 url이 https://www.example.com/current/page 인 경우 * 절대경로 ( ' / '로 시작)location.replace('/example/page')=> https://www.example.com/example/page 로 이동. * 상대경로  ( ' / '없이 시작) location.replace('example/page')=> https://www.example.com/current/pa..
[JS] sort(), localeCompare() 함수 (문자열비교) [ sort 함수 ]배열 요소를 정렬. 배열 자체(원본 배열)를 변경하며 정렬된 배열을 반환. array.sort([compareFunction]) * array : 정렬할 배열* compareFunction (선택) : 요소 간의 순서를 정의하는 함수.  (생략 시 사전식(lexicographical) 정렬  _요소들은 문자열로 변환되어 유니코드 순서로 정렬, 대소문자 구분X) (문자열정렬)let fruits = ["banana", "apple", "cherry"];fruits.sort();console.log(fruits); // ["apple", "banana", "cherry"] (숫자정렬)let numbers = [4, 2, 5, 10, 3];numbers.sort();console.log(nu..

티스토리툴바