본문 바로가기

JavaScript/공부공부

 (21)
[jQuery] .load() 함수 .load() HTML문서 / 서버에서 가져온 데이터를 선택한 요소에 로드하기 위해 사용. ( Ajax 요청 )페이지 일부를 동적으로 업데이트할 때 사용. $(selector).load(url, [data], [callback]);  - selector : jQuery 선택자. (데이터를 로드할 위치) - url : 데이터를 요청할 url. - data (선택사항) : 요청과 함께 서버로 전송할 데이터. - callback (선택사항) : 콜백함수 (로드작업 성공여부와 상관없이 실행)  ( html파일 )Content will be loaded here.Load Content=> 버튼을 클릭하면 ' content.html '의 내용이 '#content' 요소에 로드된다. (기본 GET요청) $('#con..
[JS] a링크 페이지 이동 막기_javascript:void(0), event.preventDefault() ' ' 태그 : 클릭 시 링크로 이동.' href = "#" ' => 브라우저의 페이지 최상단으로 이동. (페이지 리로드X)  javascript:void(0)주로 HTML에서 링크를 클릭했을 때 페이지를 리로드하거나 다른 페이지로 이동하지 않도록 하기 위해 사용. - javascript 브라우저에서 링크를 클릭했을 때 JavaScript 코드를 실행하도록 지시하는 프로토콜. - void : 결과를 무시하고 'undefined' 를 반환.-  void(0) : '0'을 평가하지만 그 값을 무시하고 'undefined' 를 반환.  '' 태그의 'href' 속성으로 사용 링크 링크 (태그) 클릭 => href = "javascript:void(0)" 으로 인해 페이지 이동이나 리로드가 일어나지 않음..
[JS] 배열값 비교 (include, '===') / Java_List 비교 * 배열요소 비교 ( include ) const arr = [1, 2, 3, 4, 5];console.log(arr.includes(2)); // true * includes() 함수는 내부적으로 '===' 연산자를 사용하여 요소를 비교하기 때문에 다른 타입은 비교 불가능.const mixedArr = [1, "2", 3];console.log(mixedArr.includes(2)); // falseconsole.log(mixedArr.includes("2")); // true 배열을 해체해서 비교해줘야 한다.const num = 2;const exists = mixedArr.some(value => value.toString() === num.toString());console.log(exists);..
[JS] 고차함수 (2) closure, currying [ 고차함수 (Higher-order function) ]함수형 프로그래밍에서 다른 함수를 인자로 받거나, 함수를 결과로 반환하는 함수. (추상화)  [ 결과를 함수로 반환하는 고차함수 ]ex) 클로저(closure), 커링(currying) [ Closure ]함수와 함수가 선언될 때의 렉시컬 환경(Lexical Environment)의 조합.=> 함수가 자신이 생성될 때의 환경을 기억.function makeCounter() { let count = 0; return function() { return count++; // 내부 함수가 외부 함수의 `count` 변수를 참조 };}let counter1 = makeCounter(); console.log(counter1..
[JS] 고차함수 (1) map, filter, reduce [ 고차함수 (Higher-order function) ]함수형 프로그래밍에서 다른 함수를 인자로 받거나, 함수를 결과로 반환하는 함수. (추상화)  [ 함수를 인자로 받는 고차함수 ]ex) 자바스크립트 배열 메소드  map( ), filter( ), reduce( ) ( TypeScript 의 타입정의 )* Array.prototype.map  /**     * Calls a defined callback function on each element of an array, and returns an array that contains the results.     * @param callbackfn A function that accepts up to three arguments. The map me..
[JS] 비구조화 할당 (destructuring assignment) 문법 * 비구조화 할당 (destructuring assignment)=> 배열이나 객체의 속성을 분해하여 개별 변수에 할당.  [ 배열 비구조화 할당 ]num이라는 변수에 아래와같이 배열을 할당  => 변수 a와 c에 배열 요소들을 각각 할당.  (방법1) let num = [1, 2]; let a = num[0]; let c = num[1]; (방법2) let num = [1, 2]; let [a, c] = [1, 2]; // or let [a, c] = num  * 배열의 일부 요소만 할당 let num = [1, 2, 3, 4, 5]; let [a, b, c, , e] = num * 기본값 설정const num = [1, 2];const [a, b, c = 3] = num;  *..
[JS] previousElementSibling & previousSibling / 삼항연산자 / Truthy & Falsy * previousElementSibling() : 바로 이전 형제요소 반환 ( 실제 HTML 요소만 ) * previousSibling() : 바로 이전 형제요소 반환 (주석, 공백, 텍스트 포함) div2를 기준으로 div1의 text를 가져오려면 첫 번째 div 요소 두 번째 div 요소 * previousElementSibling 사용 var secondDiv = document.getElementById('div2'); var prevElementSibling = secondDiv.previousElementSibling; console.log('previousElementSibling:', prevElementSibling ? prevElementSibling.textContent : '없음'..
[JS] Select / Option 태그 DB의 데이터를 select 태그의 option으로 넣는 경우, 이전 프로젝트에서는 서버에서 불러온 데이터를 jstl태그의 foreach로 뽑아내고 조건문을 걸어서 option값에 할당했었는데 이번 과제에서는 $(document).ready 함수와 ajax로 바로 데이터를 불러왔고 jquery를 활용해서 option값에 할당해줬다. * jstl & foreach 이용해서 option값 할당. ${item.name} * ajax & jquery (forEach) 이용해서 option값 할당. $.ajax({ url : '/getList' , type : 'POST' , async : true , data : data , header: { "Content-Type": 'application/json; cha..

티스토리툴바