'JavaScript' 카테고리의 글 목록

[Jquery] 제이쿼리 .append() .prepend() . .remove() .empty() 사용법 & 예제

개발을 진행하다 보면 정적이 화면이 아닌 동적인 화면을 구성해야 할 경우가 종종 생긴다. 동적인 화면의 경우 특정 엘리먼트가 show/hide 될수도 있으면 현재 엘리먼트의 자식에 새로운 엘리먼트를 추가해야 하는경우도 있습니다. 그리하여 오늘은 동적인 화면을 컨트롤할때 자주 사용하느 append(), prepend(), remove(), empty()에 대해서 알아보겠습니다. 1. .append() 사용법 & 예제 제이쿼리 .append() 함수의 경우 현재 대상의 엘리먼트 내에 맨끝에 새로운 엘리먼트를 추가하는 함수입니다. 아래 소스의 경우 div1이라는 id를 가진 엘리먼트 안의 자식 맨 끝에 div를 새로 추가하는 방법입니다. * 실행코드 1 2 3 4 5 6 7 8 9 10 11 $(documen..

JavaScript 2021. 1. 12. 19:32

[JavaScript] 자바스크립트 Array() 배열 사용법 & 예제 배열 선언 방법

자바스크립트를 이용하여 개발을 진행하다 보면 다수의 데이터를 처리해야 하는 경우가 있습니다. 그럴경우 배열을 이용하여 변수 하나나에 데이터를 넣는게 아닌 배열 안에 데이터를 한번에 넣어서 관리하여 가공하여 사용하면 조금 더 편리하게 사용 할 수 있습니다. 1. 배열 선언 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 // 첫번째 방법 var array = new Array(); array[0] = "a"; array[1] = "b"; array[2] = "c"; console.log(array); // 결과 값 [a, b, c] // 두번째 방법 var array2 = ["가", "나", "다"]; console.log(arra..

JavaScript 2021. 1. 6. 15:10

[Javascript] 제이쿼리 엘리먼트(Element) 존재 확인 사용법 & 예제

오늘은 자바스크립트에서 엘리먼트(Element)의 존재 유/무를 확인할수 있는 방벙에 대해서 알아보겠습니다. 개발을 하시면서 보통 특정 엘리먼트(Element)를 클릭하였을경우 hasClass() 함수를 사용하여 Class 존재 유/무를 파악하는 경우가 많습니다. 그러나 특이하게 특정 엘리먼트(Element)가 존재 유/무 구하는 경우도 있어서 긁을 써봅니다. 엘리먼트(Element) 존재 유무 확인 예제 & 사용법 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 $(document).ready(function(){ $("#testBtn").click(function(){ if($("#testDiv")[0] != null || $("#testDiv")[0] != 'u..

JavaScript 2020. 9. 23. 17:45

[Javascript] 자바스크립트 체크박스 체크 유/무 확인방법 & 예제

오늘은 html의 checkbox(체크박스)에 체크 혹은 미체크로 되어있는지 확인하는 방법에 대해서 설명 드리겠습니다. 설명 1. 'next'라는 id를 가진 버튼을 클릭 시 'chk1', 'chk2'의 id를 가진 체크박스가 체크가 되어 있는지 체크. '$("#chk1").is(":checked")'함수가 'true'가 나오면 체크가 되어 있다는 표시입니다. 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 // 다음 버튼 클릭 $("#next").click(function(){ // 첫번째 체크박스가 체크되어 있는경우 if($("#chk1").is(":checked")){ alert("첫번째..

JavaScript 2020. 5. 11. 16:00

[JavaScript] 자바스크립트 window.open() 새창 열기 기능 사용방법 & 예제

안녕하세요. 오늘은 자바스크립트 window.open()에 대해서 알아 보겠습니다. 개발을 하시면서 새창으로 열기 기능을 많이들 사용하시는데요. 자주 까먹는 기능이라 자주 쓰이는 함수 위주로 설명 드리겠습니다. 예제 1. 버튼에 'id'를 기준으로 클릭 이벤트를 선언하구 window.open()을 사용하여 네이버 홈페이지를 새창으로 띄울수 있습니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 // 네이버 바로가기 $("#gotoNaver").click(function(){ window.open("https://naver.com."); }); 2. 이번에는 위와 같이 window.open()을 사용하여 새로운 팝업창을 띄우지만 새로운 팝업창의 크기를 지정할 수 있습니다..

JavaScript 2020. 5. 8. 12:13

[ Jquery ] 제이쿼리 실시간 검색어 자동완성 ajax 통신 방법 & 예제

안녕하세요. 오늘은 제이쿼리 자동완성 기능에 대해서 설명 드리겠습니다. Web개발을 하면서 DB에있는 데이터를 기반으로 자동완성 기능을 개발 해달라고하는 경우가 종종 있습니다. 그래서 오늘은 Ajax통신을 통해 실시간으로 DB에 있는 데이터를 기준으로 자동완성 기능을 만들어 보겠습니다. 설명 1. 입력 필드를 만듭니다. ↓ 소스 참조 1 2 3 4 2. id를 기준으로 autocomplete 기능을 선언 해줍니다. ↓ 소스 참조 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 35 36 37 38 39 40 $("#testInput").autocomplete({ source : funct..

JavaScript 2020. 4. 3. 11:35

[Javascript] 자바스크립트 while()문 사용방법 & 예제, 반복문 빠져 나오는 방법

안녕하세요. 오늘은 자바스크립트의 반복문중 하나인 while()문에 대해서 설명 드리겠습니다. for()문 다음으로 제일 많이 쓰이게 되는 반복문중 하나인거 같습니다. 아래의 소스코드 예제를 통해서 설명하겠습니다. 소스 예제 1-1. 'a'에 정수를 셋팅 해줍니다. 1-2. while()문의 동작 방식은 if()문과 비슷합니다. while()문 안에 비교문을 넣어 주면 비교문이 true일 동안 반복을 진행합니다. 1-3. 글 중간에 if()문 안에 'break'를 걸어주어 'a'의 값이 '7'과 같을 경우 while문을 빠져 나갑니다. ↓ 소스참조 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 // 정수 셋팅 var a = 1; // if()문과 비슷함 'a'의 값이 10보다 작은동아 ..

JavaScript 2020. 3. 23. 14:37

[Jquery] 제이쿼리 change 이벤트 사용방법 & 예제, change 이벤트 소스코드로 정리와 설명

안녕하세요. 오늘은 제이쿼리(Jquery) change()에 대해서 알아보겠습니다. - change 이벤트란? 제이쿼리 change 이벤트의 경우 셀렉터를 정하여 해당 셀렉터의 값이 변할경우 변화를 캐치하는 이벤트입니다. - 소스코드 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 alert($(this).val()); // 제이쿼리 change 함수 $("#testChange").change(function(){ // 변경된 값으로 비교 후 alert 표출 if($(this).val() == ""){ alert("저의 이름은 길길동 입니다."); } else if($(this).val() =..

JavaScript 2020. 2. 27. 02:21

[Javascript] 자바스크립트 onchange() 사용법 & 예제 (데이터 가져오기 포함)

안녕하세요. 오늘은 자바스크립트(Javascript) onchange() 이벤트에 대해서 알아보겠습니다. 자바스크립트 onchange의 용도는 셀렉트박스의 값이 변경될때 자주 사용됩니다. 셀렉트박스의 값이 변경될때 onchange() 이벤트에서 사용자가 지정한 함수를 호출하여 각각의 동작(스크립트)을 실행 시킵니다. - 소스 설명 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 35 // onchange에서 호출하는 함수. function testChange(obj){ // 'obj'는 this를 지칭하는 것입니다. alert($(obj).val()); // 값 비교로 테스트 가능. if..

JavaScript 2020. 2. 26. 02:00

[Jquery] 제이쿼리 텍스트(문자열) 변경 실시간 감지방법 설명(간단)

안녕하세요. 현재 onchage()를 이용해서는 text나 textarea의 경우에는 값을 적고 있는 시점에는 값의 변경을 감지하지 못합니다. (foucs out일 경우는 체크) 그리하여 오늘은 input 타입 text에서 문자열이 변경됐을때 실시간으로 현재 변경된 값을 바로 읽어 드릴수 있는 방법에 대해서 설명 드리겠습니다. - 소스코드 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 var newValue; // 모든 텍스트의 변경에 반응합니다. $("#testOnchange").on("propertychange change keyup paste input", function() { // 현재 변경된 데이터 셋팅 newValue = $(..

JavaScript 2020. 2. 19. 03:00

고똘이의 IT 개발이야기

JavaScript → (31)건