JAVASCRIPT&JQUERY11

• [JAVASCRIPT] 참 같은 값 truthy / 거짓 같은 값 falsy Truthy ( 참 같은 값 ) Truthy 한 값이란, boolean context(대표적으로 조건문, 반복문) 에서 쓰이면 true로 간주되는 값이다. Falsy ( 거짓 같은 값 ) Falsy한 값이란, boolean context(대표적으로 조건문, 반복문) 에서 쓰이면 false로 간주되는 값이다. 어떠한 값이 있을까? 먼저, falsy한 값들을 알아보자. (truthy한 값들은 falsy한 값을 뺀 모든 값이기 때문이다. 소거법으로 알아보자!) 1 false false값 2 0 숫자 0 ( also 0.0, 0x0 ) 3 -0 음수 0 ( also -0.0, -0x0 ) 4 0n BigInt 0 ( also 0x0n ) - Bigint형의 음수0 (-0n)은 없다는 걸 메모! 0n의 음수형은 .. JAVASCRIPT&JQUERY 2022. 11. 29.

• [JAVASCRIPT] .reduce 사용법 reduce, reduceRight reduce를 덧셈 함수로 알고 계신 분들이 많은데, 대부분의 사이트에서 reduce 사용 예시를 덧셈으로 들고 있기 때문입니다. 심지어 저도 강좌에서 덧셈으로 예를 들었습니다... 하지만 reduce는 알고보면 매우 강력한 친구입니다. 함께 알아봅시다. reduce 메서드는 다음과 같이 사용합니다. 배열.reduce((누적값, 현잿값, 인덱스, 요소) => { return 결과 }, 초깃값); 이전값이 아니라 누적값이라는 것에 주의하셔야 합니다. 누적값이기 때문에 다양하게 활용할 수 있습니다. 먼저 흔한 덧셈 예시를 살펴봅시다. result = oneTwoThree.reduce((acc, cur, i) => { console.log(acc, cur, i); retur.. JAVASCRIPT&JQUERY 2021. 12. 6.

• 

  [JAVASCRIPT] 동적으로 테이블 행 추가/삭제 후 번호 다시 매기기 동적으로 행 추가/삭제하기 완결판! -추가 버튼을 누를 시 행이 밑에서부터 하나씩 추가된다. -각 행의 - 버튼을 누를 시 해당 행이 삭제된다. -초기에는 DB에 가져온 값을 각 행에 보여주고, 사용자가 추가/삭제 할 수 있도록 한다. -적용 버튼을 누를 시 해당 값이 DB에 저장된다. 1. DB에서 값 불러오기 -행을 추가 할 테이블 세팅한다. -부트스트랩을 이용할거라면 당연히 추가해줘야 한다. 동적테이블 행추가하기 추가버튼 행 -반복문을 이용해서 초기에는 DB에서 불러온 값을 세팅하도록 한다. 행 ${status.count} -추가/변경된 부분만 보자면, 행 ${status.count} -구문을 사용하려면 Collection객체인 List/배열을 items에 적어준 뒤 사용할 변수 명을 var에 적어.. JAVASCRIPT&JQUERY 2021. 10. 8.

• 

  자바스크립트 {...} [...] 문법 (비구조화 할당/구조분해 할당) 자바스크립트의 문법에 대한 글을 검색하면 대부분 let, const 혹은 화살 함수(arrow function)에 대한 이야기가 주를 이룹니다. 이번 시간에는 흔히 알려지지 않았지만 유용한 비구조화 할당 문법을 소개하고자 합니다. 정의 모질라 형님들의 문서에 의하면 '비구조화 할당(destructuring assignment) 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 자바스크립트 표현식(expression)'입니다. 간단하게 정리하면 배열 [], 혹은 객체 {} 안의 값을 편하게 꺼내 쓸 수 있는 문법입니다. 기본 문법(배열) 배열에서의 적용은 아래와 같습니다. [a1, a2, ...rest_a] = [1, 2, 3, 4, 5, 6, 7, 8, 9]; console.. JAVASCRIPT&JQUERY 2021. 10. 6.

• 

  자바스크립트 vs 제이쿼리 ( JQuery ) 자바스크립트 vs jQuery, 과연 그 우위는? 웹에서는 필수불가결 기술인 자바스크립트와 jQuery, 과연 어느것이 더 뛰어날까요? 오늘은 잠깐 시간 내어 관련 부분을 논해 봅니다. ​ 자바스크립트는 웹브라우저에서 작동하는 스크립트입니다. 서버 사이드가 아닌 클라이언트 기술이지요. 오래전부터 널리 사용되어 왔고 지금도 지속적으로 사용되고 있으며, 기능성 홈페이지 99% 이상이 이 기술을 사용하고 있다고 해도 과언이 아닐 겁니다. ​ 그렇다면 jQuery 는 무슨 기술일까요? jQuery 역시 자바스크립트입니다. 다만 자바스크립트로 빈번하게 사용되는 기능들을 약간 다른 형식으로 사용하게 만든 라이브러리입니다. 프로그램 언어에서 '라이브러리'란 '도서관'의 의미보다는 '기능덩어리'라고 이해하시면 됩니다... JAVASCRIPT&JQUERY 2021. 10. 6.

• [JSTL core] [c:forEach] varStatus를 활용한 변수 forEach문은 아래와 같이 활용한다. // 반복해서 표시할 내용 혹은 반복할 구문 이 때, 상태용 변수를 status라고 지정했다면 아래와 같이 활용할 수 있다. ${status.current} 현재 for문의 해당하는 번호 ${status.index} 0부터의 순서 ${status.count} 1부터의 순서 ${status.first} 첫 번째인지 여부 ${status.last} 마지막인지 여부 ${status.begin} for문의 시작 번호 ${status.end} for문의 끝 번호 ${status.step} for문의 증가값 활용 예 / 출처 : https://jetalog.net/20 JAVASCRIPT&JQUERY 2021. 10. 5.

• 

  [jQuery] 동적으로 테이블에 행 추가하기/삭제하기 오늘 만들어 볼 것! 동적으로 조절하는 테이블 예시) + 버튼을 누르면 마지막 행이 추가된다. - 버튼을 누르면 해당 행이 삭제된다. 프로세스는 아주 단순하다. 1)먼저, HTML에 원하는 테이블을 세팅한다. 나의 경우는 검색창이 큰 테이블 내부의 이여서, 클릭할 때마다 내부의 가 추가/삭제되게 만들었다. table자체여도 큰 차이가 없을 듯 "검색" "프로세스 검색" "외부이름 검색" "내부이름 검색" 2) 버튼에 달아준 onclick 이벤트를 처리한다. 2-1)먼저, +버튼 이벤트 addSearchKey() 추가 function addSearchKey() { var rowItem = ""; rowItem += ""; rowItem += ""프로세스 검색""; rowItem += ""외부이름 검색"";.. JAVASCRIPT&JQUERY 2021. 9. 16.

• [javascript] 전체선택 checkbox 자동선택/자동해제 포인트는, -전체선택 checkbox 선택 시 나머지 cat, dog, tiger, lion이 선택된다. (all select) -전체선택 checkbox 해제 시 전부 선택 해제된다. (all deselect) -전체선택 checkbox 선택 중, cat, dog, tiger, lion 중 하나라도 선택 해제 시 전체선택 checkbox가 자동 해제된다. -전체선택 checkbox 해제 중, cat, dog, tiger, lion 모두 선택 시 전체선택 checkbox가 자동 선택된다. 1.HTML 세팅하기 전체선택 cat dog tiger lion 1. checkbox_group div tag 안에 각 input type을 checkbox div tag로 감싸준다. 2. 전체 선택을 위한 checkb.. JAVASCRIPT&JQUERY 2021. 9. 1.

• 

  [JavaScript] JSON 데이터 다루기 문법 총 정리 JSON(JavaScript Object Notation)을 모른다면 선행 해야 할 글 [IT용어] JSON(JavaScript Object Notation) JSON(JavaScript Object Notation) 개념 경량(Lightweight)의 DATA-교환 형식이다. 경량(Lightweight)의 DATA-교환 형식~ 경량(Lightweight)의 DATA-교환 형식~~!! 속성-값 쌍 || 키-값 쌍으로 이루어진 데이터 오.. java119.tistory.com JSON의 개념은 위 글에서 설명하였으니, 먼저 보시기 바랍니다. 저도 처음에 JSON 데이터를 다룰 때 상당히 삽질을 많이 했는데요. 그러한 피해자(?)가 더 없게 문법 정리정리해보았습니다. 다양한 예제를 제공하니 하나 하나 직접 .. JAVASCRIPT&JQUERY 2021. 8. 25.

• 

  jQuery / Method / .val() - 양식(form)의 값을 가져오거나 값을 설정하는 메소드 .val() .val()은 양식(form)의 값을 가져오거나 값을 설정하는 메소드입니다. 문법 1 .val() 선택한 양식의 값을 가져옵니다. 예를 들어 var jb = $( 'input#jbInput' ).val(); 은 아이디가 jbInput인 input 요소의 값을 변수 jb에 저장합니다. 문법 2 .val( value ) 선택한 양식의 값을 설정합니다. 예를 들어 $( 'input#jbInput' ).val( 'ABCDE' ); 는 아이디가 jbInput인 input 요소의 값을 ABCDE로 정합니다. 예제 1 양식에 텍스트를 입력하고 버튼을 클릭하면, 입력한 값을 출력합니다. Click 예제 2 select 양식에서 값이 바뀌면, 그 값을 출력합니다. One Two Three 예제 3 버튼을 클.. JAVASCRIPT&JQUERY 2021. 8. 20.

• 

  jQuery / Method / .attr() - 속성(attribute)의 값을 가져오거나 속성을 추가하는 메서드 .attr() .attr()은 요소(element)의 속성(attribute)의 값을 가져오거나 속성을 추가합니다. 문법 1 .attr( attributeName ) 선택한 요소의 속성의 값을 가져옵니다. 예를 들어 $( 'div' ).attr( 'class' ); 는 div 요소의 class 속성의 값을 가져옵니다. 문법 2 .attr( attributeName, value ) 선택한 요소에 속성을 추가합니다. 예를 들어 $( 'h1' ).attr( 'title', 'Hello' ); 는 h1 요소에 title 속성을 추가하고 속성의 값은 Hello로 합니다. 예제 1 h1 요소의 class 속성의 값을 가져와서 출력합니다. Lorem ipsum dolor. h1 class value is : 예제 2.. JAVASCRIPT&JQUERY 2021. 8. 20.