티스토리

개발일지 블로그

검색하기

블로그 홈

개발일지 블로그

120ne.xyz/m

연습용365 님의 블로그입니다.

구독자: 1

방명록 방문하기

주요 글 목록

[JS] forEach 대신 contains const parentClassList = eParent.classList;parentClassList.forEach( target => { // 부모 span의 class에서 ax5-Calendar 찾기 if("ax5-Calendar".includes(target)) { if(!"calendar-Enabled".includes(target)) { target.classList.add('calendar-Enabled'); } } }); // ax5-Calendar 클래스를 가진 부모 요소에 calendar-Enabled 추가if (eParent.classList.contains('ax5-Calendar') && !eParent.classList.contains('calendar-Enabled').. 공감수 0 댓글수 0 2025. 1. 8.
[JS] Serialize(직렬화) https://ahma.tistory.com/65 Serialize란 무엇인가?코드를 쓰다 옆사람이 serialize가 뭔데 썼냐는 말에 저는 그냥 남들이 사용하길래 적었다. 라는 말도안되는 대답을 했습니다. serialize가 무엇이고 왜 사용하는지 궁금하여 기록한 내용입니다. Seriaahma.tistory.com 직렬화된 데이터 디코딩해서 보려면 아래 처럼 사용log(decodeURIComponent(requestData)); 공감수 0 댓글수 0 2025. 1. 8.
forEach()와 Array.from() 차이 Array.from()과 .find()를 사용한 이유는 다음과 같습니다:1. Array.from()을 사용하는 이유:document.querySelectorAll()은 NodeList라는 배열과 비슷한 객체를 반환하는데, 이 객체는 배열의 모든 메서드를 갖고 있지 않습니다.Array.from()은 이 NodeList를 진짜 배열로 변환해 주기 때문에, 배열 메서드인 .find() 등을 사용할 수 있게 됩니다.2. .forEach() 대신 .find()를 사용하는 이유:.forEach()는 모든 요소를 순회하지만, 조건에 맞는 요소를 찾은 후에 반복을 중단할 수 없습니다.반면에 .find()는 첫 번째로 조건에 맞는 요소를 찾으면 바로 멈추기 때문에, 특정 요소를 찾고자 할 때 더 효율적입니다.즉, .fi.. 공감수 0 댓글수 0 2024. 9. 20.
onChange + onBlur JS onChange 일 때 유효성 체크해서 못 나가도록 focus 하는 메소드를 만들었습니다. 근데 한 번만 적용이 되고 그 이후로는 focus가 안 돼요. 아예 밖으로 못 빠져나가게 못 하나요? onChange 이벤트에서 유효성 체크 후 focus를 하는 방식은 한 번만 작동하는 이유가, 브라우저가 해당 요소의 focus 이벤트를 기본적으로 한 번만 처리하기 때문일 수 있습니다. 특히 SPA(싱글 페이지 애플리케이션)에서 한 번 focus가 동작한 뒤 blur 이벤트가 발생하면 이후의 focus 동작이 정상적으로 작동하지 않을 수 있습니다.이를 해결하려면 onBlur 이벤트도 함께 활용하여 유효성 검사를 계속 수행하게 할 수 있습니다. 이렇게 하면 사용자가 포커스를 벗어나려 할 때마다 유효성 검사를.. 공감수 0 댓글수 0 2024. 9. 11.
substr 사용 금지 https://minitoy.tistory.com/1159 공감수 0 댓글수 0 2024. 9. 10.
[JavaScript] 인쇄 기능 재설계 인쇄기능 참고 사이트 (이벤트 핸들러 사용법) JS#1. 웹페이지의 특정 부분만 인쇄하고 싶을 때 웹페이지에 인쇄 기능을 넣고 싶은데, 인쇄 결과물에는 전체가 아니라, 특정 부분만 나오게 하고 싶을 때가 있습니다. 웹서핑을 하다보면 이런 기능이 구현된 곳이 종종 보이지요. 두 가지 방법 openuri.net 전에 열심히 만들어뒀던 인쇄 기능이 있긴 했지만, 어느 순간부터 인쇄 기능이 실행이 된 이후 취소를 누르면 원본 복사 해둔 상태로 돌아가지 않는 문제가 생기고 말았다. 전에도 같은 부분에서 작은 문제가 있었는데 인쇄 기능 실행 이후에 원본의 창(모달창)의 취소 버튼이 눌리지 않는 문제가 있어서 아래 코드에 보면 그 부분을 수정하는 코드도 추가를 해뒀었다. 구글링을 해보니 새 창을 열어 원본 복제를 하.. 공감수 0 댓글수 0 2023. 1. 30.
아코디언 메뉴 열고 닫을 때 class show 자동 감지 // 아코디언 메뉴 눌렀을 때(class = show) 해당 jsp 파일 불러오기 $('.accordion-button').on('click', function(){ var myTarget = $(this).attr('data-bs-target');// 내가 누른 버튼의 타겟 찾음 var targetId = myTarget.substr(1, myTarget.length);// # 뺌 var targetId2 = document.getElementById(targetId); console.log("targetId : " + targetId); console.log("targetId2 : " + targetId2); setTimeout(function() {// show 실행까지 기다림 ( 0.4s ) va.. 공감수 0 댓글수 0 2022. 11. 5.
[jquery] ajax 처리시 한 번에 데이터 전달 - serialize() http://chongmoa.com/ajxa/6764 C.m.A API 이야기(Mokulsha!) serialize() 입력된 모든Element(을)를 문자열의 데이터에 serialize 한다. serialize()를 이용하면 일일이 fname=값&femail=값&sex=값&job=값 이렇게 안해주어되 됩니다. serializ.. chongmoa.com 공감수 0 댓글수 0 2022. 7. 6.
[jquery] 프론트 단에서 모바일 구분하기 function Mobile() { return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i .test(navigator.userAgent); } 공감수 0 댓글수 0 2022. 7. 6.
[JavaScript] radio check div 숨기기/표시하기 문제해결 - radio 버튼을 눌렀을 때 해당 값에 해당하는 div에 있는 내용을 활성화 시키고, 해당 값이 아닌 것은 비활성화 시키기 위해서 자바스크립트 값을 onClick에 함수를 줬다. - 이 때의 문제는 페이지 로드시 온클릭에 해당하지 않기 때문에 숨김 처리해뒀던 div가 떠있다는 것이다. - 곰곰히 생각해 본 결과 onload 시에도 값을 줘야한다는 걸 깨달았다. window.onload = function() { } 윈도우 온 로드시 함수를 실행 체크 값을 가져와서 setDisplay()에 넣음 setDisplay는 라디오 버튼 onClick시 실행되는 함수로 style로 div 값을 숨기고 오픈 Jquery에 익숙해져서 자바스크립트는 전혀 기억이 나지 않았는데 이번에 공부가 되었다. 앞으로도 공부의 .. 공감수 0 댓글수 0 2022. 4. 16.
[jQuery] js파일에서 jQuery 사용하기 function loadJQuery() { var oScript = document.createElement("script"); oScript.type = "text/javascript"; oScript.charset = "utf-8"; oScript.src = "http://code.jquery.com/jquery-1.6.2.min.js"; document.getElementsByTagName("head")[0].appendChild(oScript); } $(function(){ $() }); 공감수 0 댓글수 0 2022. 4. 11.
[JavaScript] 대화상자 Dialog Box 대화상자(DialogBox) alert()메소드 사용자에게 간단한 메세지를 보여주고, 그것에 대한 사용자의 확인을 기다림 alert() 메소드 alert대화상자 prompt() 메소드 사용자에게 간단한 메세지를 보여주고, 사용자가 입력한 문자열을 반환함 prompt 창 버튼선택 화면에 있는 버튼을 클릭하면 입력창이 뜬다. 코드에서 기본값으로 설정해둔 홍길동이 적혀있다. innerHTML을 통해서 내가 입력한 text 아이디인 글자가 화면에 뿌려진다. **innerHTML은 문서바디 안에 있는 html 코드를 자바스크립트로 조작할 수 있게 해주는 코드이다. confirm() 메소드 사용자에게 간단한 메세지를 보여주고, 사용자가 확인이나 취소를 누르면 그 결과를 불리언(boolean) 값으로 반환함 conf.. 공감수 0 댓글수 0 2021. 11. 10.
[JavaScript] 아직 생성되지 않은 HTML 요소에 속성 추가 아직 생성되지 않은 HTML 요소에 속성 추가 속성추가 안녕 속성추가 버튼을 누를 때마다 새로운 단락이 추가 되고 가장 하단에 있는 글씨(태그)가 빨간색이 되는 문장이 있다. setAttribute() .setAttribute() 괄호 안에서 선택한 요소(Element)의 속성(Attribute) 값을 정한다. 만약 속성값이 원래 있었다면 지우고 다시 넣는다. document.getElementById("para").setAttribute("style", "color:Red"); id para 안에 값을 넣는다. 어떤 값? 스타일 요소에서 속성값 빨간색 createElement() .createElement() 괄호 안에서 선택한 요소(Element)를 추가한다. var newNode = document.. 공감수 0 댓글수 0 2021. 11. 10.
[JavaScript] 문자열, 배열 관련 메소드 모음 문자열의 위치 찾기 indexOf() - 앞에서부터 찾는다. lastIndex() - 뒤에서부터 찾는다. 특정 문자나 문자열이 처음으로 등장하는 위치나 마지막으로 등장하는 위치를 반환하는 메서드이다. 전달 받은 특정 문자나 문자열을 찾을 수 없을 때는 -1을 반환한다. var str = "abcDEFabc"; document.write(str.indexOf('abc') + " "); document.write(str.indexOf('abcd') + " "); document.write(str.indexOf('abc', 3) + " "); document.write(str.lastIndexOf('abc') + " "); document.write(str.lastIndexOf('d') + " "); docu.. 공감수 0 댓글수 0 2021. 11. 9.
[JavaScript] 함수(1) 함수(function) 하나의 특별한 목적으로 작업을 수행하도록 설계된 독립적인 블록을 의미한다. 필요할 때마다 호출하면 반복해서 사용 가능! 반환문(return) 함수는 반환문을 포함할 수 있다. 호출자가 함수에서 실행된 결과를 반환을 통해서 받을 수 있다. return는 배열이나 객체를 포함한 모든 타입의 값을 반환할 수 있다. function multiNum(x, y) { return x*y; } let a = multiNum(3,4); document.write(a); multiNum(3,4) 인자값 3,4가 함수로 전달된다. 함수가 호출되고 계산을 한 뒤 리턴값이 a에 저장된다. 변수의 유효 범위 1. 지역 변수 (local variable) 2. 전역 변수 (global variable) 지역.. 공감수 0 댓글수 0 2021. 11. 8.
JavaScript의 기본과 오브젝트의 설명 JavaScript 사용자의 input값을 핸들링 하는 경우 예를들어 DOM, DOM 객체를 보이거나 안 보이게 하거나.. style을 다르게 주거나 이런 걸 컨트롤 한다. 변수 var, let, const 변수명 기능 var 동일한 변수명을 선언해도 허용 let 동일한 변수명을 선언하면 오류가 뜸 const 상수의 의미로 한 번 선언을 하면 값 수정도 못 함 10년 동안 자바스크립트에는 var만 있었지만 또 다른 타입인 let과 const가 생겼다. var 변수만을 사용해서 개발을 하는 경우. 한 페이지에 방대하게 작성했을 때 개발자가 실수로 같은 변수명을 만들어서 사용하는 경우가 있다. 그렇게 되면 앞에 썼던 변수의 값이 나도 모르게 바뀌는 불상사가 생기곤 해서 다른 변수 타입들이 생기게 된 것이다... 공감수 0 댓글수 0 2021. 11. 7.
자바스크립트/제이쿼리 비교 (2) - 각 지역의 동네를 조회(select) 자바스크립트와 제이쿼리의 차이 자바스크립트로 작성한 코드를 제이쿼리 언어로도 표현할 수 있다. 더 짧게 줄일 수 있기에 편하게 사용 가능! (기초적인 html 기능들은 따로 설명하지 않음) 연습 이름 : 지역 : 서울 practice365.xyz 저번 글에 이어서 ... 이번엔 동네까지 추가를 해본다. 서울이 디폴트 상태이니까 서울의 동네를 표시하고 내가 다른 지역을 선택하면 서울의 동네가 지워지고 내가 선택한 지역의 동네를 보여주는 코드! 자바스크립트 버전 이름 : 지역 : 서울 인천 동네 : 강남 서초 부평 학익 제출 동네 : 강남 서초 부평 학익 아래에서 함수를 만들기 위해 각 select id를 설정할 때 "region_"까지는 맞추고 뒤에 오는 숫자에 지역번호를 넣는다. style = "disp.. 공감수 0 댓글수 0 2021. 11. 7.
자바스크립트와 제이쿼리의 차이 제이쿼리는 자바스크립트로 만든 라이브러리로 자바스크립트를 좀 더 간결하게 사용할 수 있다! 자바스크립트의 표준이 워낙 예전에 정해졌기 때문에 브라우저 별로 중구난방이었는데 제이쿼리가 동일한 코드로 대부분의 브라우저와 버전을 지원하기 때문에 편하다. 하지만 제이쿼리만 배우는 게 부정적인 이유는 제이쿼리 외에 다른 라이브러리를 사용할 수 없고, 자바스크립트의 작동방식을 이해하는 게 어렵기 때문에 둘을 같이 배우는 게 좋다고 합니다. 모바일 버전에서는 제이쿼리가 단점이 되는 경우도 있어서 요즘엔 사용하지 않는 경우도 많다고 하니 참고 하는 게 좋을 듯해요~ 이름 : 지역 : 서울 인천 제출 이름과 지역을 선택하고 제출을 눌렀을 때 경고창(alert)에 이름과 지역번호가 뜨게 만드는 코드이다. alert(doc.. 공감수 0 댓글수 0 2021. 11. 7.
연관 배열 예제 필드1 필드2 필드3 document.myForm["a" + i].value = i; 연관배열은 반드시 따옴표 안에 들어가야한다. 공감수 0 댓글수 0 2021. 11. 6.
JavaScript에서 놓치기 쉬운 배열의 특징들 지금까지 당신이 알고 있던 배열은 가라···! 만약 당신이 이전에 다른 언어를 배웠다면 자바스크립트의 배열이 더 어려울 것이다. 난 아직도 어렵다. 아직도 얼떨떨하고 머리만 긁고 있다~ 자바에서는 한 번 결정한 배열의 타입이 절.대.로 바뀔 수 없지만 자바스크립트에서는 배열의 타입이 고정되어 있지 않아서 정수형, 실수형, 문자형, 불리언 타입 등 한 가지 배열이라는 변수 안에 모두 섞어서 사용할 수 있다. 인덱스도 연속적이지 않아도 되고 중간에 비워져 있어도 된다. 심지어는 한 번 결정한 배열의 숫자에서 맘대로 추가하고 삭제할 수도 있다. 어떻게 이런 일이~ 그럴 수 있는 이유는 자바스크립트에서의 배열은 Array 라는 객체로 다뤄지기 때문이다! 아래의 많은 예시들을 참고해서 배열에 대해 알아보자. 배열.. 공감수 0 댓글수 0 2021. 11. 6.
[JavaScript] 숫자 맞추기 게임 숫자 맞추기 게임 이 게임은 컴퓨터가 생성한 숫자를 맞추는 게임입니다. 숫자는 1부터 100사이에 있습니다. 숫자 : 확인 추측횟수 : 힌트 : 공감수 0 댓글수 0 2021. 11. 5.
JavaScript에서 value의 기능? 이름 : 지역 : 서울 인천 제출 html 부분은 이렇게 만들어두고 value의 기능을 알아보도록 한다. button 태그를 onClick 했을 때 실행되는 ok()메소드이다. alert(경고)창이 뜨면서 내가 보고 싶은 정보를 띄우게 되는데 document.getElementById("name").value -문서 중 id가 name인 정보를 가지고 온다. -여기서 value가 없다면 실행이 되지 않는데 그 이유는 사용자가 입력한 값이 들어오는 곳이기 때문! -html 부분에서 value="" 이렇게 초기화를 해놓지 않아도 메소드에서 바로 사용가능 -결과적으로 name창에서 사용자가 입력한 이름이 경고창에 뜨게 되는 것이다~ 공감수 0 댓글수 0 2021. 11. 5.
자바스크립트 정리 및 예제들 언어 기능 html 웹 내용 작성 css 웹 디자인 javascript 웹 동작 구현 객체기반의 스크립트 언어 동적이며, 타입을 명시할 필요가 없는 인터프리터 언어 (int char double 등 타입 명시가 필요 없음) 컴파일 언어 - 인터프리터 언어 자바 컴파일 언어 / 자바스크립트, 파이썬 인터프리터 별도의 컴파일 언어로 해석하지 않고, 한줄씩 내려오면서 기계어로 읽음 컴파일 돼서 실행 되는 게 더 빠르다. 컴파일로 거치지 않고 한줄씩 기계어로 읽기 때문에 속도가 느리다. 객체지향형 프로그래밍과 함수형 프로그래밍을 모두 표현할 수 있음 (함수형: 메소드) html 내용 변경가능(화면에 뿌려주고 나서 변경을 하는 것) html 속성 변경가능 html 스타 변경가능 자바스크립트 문법 실행문은 세미콜론.. 공감수 0 댓글수 0 2021. 11. 3.
[jquery] animate 기능 움직이다가 멈추기 alert (복습) box $(function(){ var div1 = $('#div1'); var img = $(""); div1.animate({top: 200, left: 400 }, 1000); div1.animate({top: 0, left: 400 }, 1000, function(){alert("쉬어가세요");}); div1.animate({top: 200, left: 0 }, 1000); div1.animate({top: 0, left: 0 }, 1000); img.appendTo(div1); }); 변수를 만들어줘서 간단하게 불러서 쓸수도 있다. $(function(){ var img = $(""); $('#div1').animate({top: 200, left: 400 }, 1000, function(){ .. 공감수 0 댓글수 0 2021. 9. 14.
[jquery] radio 입력 받아서 출력하기 성별체크 여자 남자 function radio(){ $(function(){ var id = $("input[name='sex']:checked").attr('id'); document.write(id); alert(id); }); } var id = $("input[name='sex']:checked").attr('id'); $("input[name='sex']:checked").attr('id') input 타입에 name='sex'인 것을 체크 document.write(id); alert(id); 둘중에 하나만 해줘도 됨 공감수 0 댓글수 0 2021. 9. 14.
[jquery] 변수명을 설정해서 쉽게 부르기(feat.alert) 고양이 이런 파일을 준비한다. 그럼 아래처럼 뜰 것이다. var div1 = $('#div1'); 변수명 = 선택자 alert(div1.width()); 경고창에 div1의 width 크기를 띄운다. 이런식으로.. alert창에 div1의 width, height, font-size 값이 차례대로 뜬다. 공감수 0 댓글수 0 2021. 9. 14.
[jquery] each() 명령어 each() 선택한 여러 개의 요소들에게 각각 순차적으로 접근을 할 때 사용한다. 기본형 $(요소선택).each(function(매개변수1, 매개변수2){ ... } ); 고양이 진돗개 호랑이 사자 $('.animal').each(function(){var name = $(this).text(); alert(name);}); $('.animal').each ==> 애니멀 클래스에 순차적으로 접근한다. var name = $(this).text(); ==> 변수 네임은 애니멀의 텍스트(고양이, 진돗개 등..) alert(name); ==>네임의 값을 alert 화면에 뿌려줘 그러니 alert(경고)창에 순서대로 고양이, 진돗개, 호랑이, 사자가 뜬다. 공감수 0 댓글수 0 2021. 9. 13.
JavaScript를 Jquery로 바꾸기 예제 div1 -JavaScript 버전 window.onload = function(){ var div = document.getElementById('div1'); div.style.fontSize = "50px"; //그 div을 style의 폰트사이즈 = 50px } var div = document.getElementById('div1'); ==>Id의 요소를 div에게가지고 온다. div.style.fontSize = "50px"; ==> 가지고 온 div의 style을 설정한다. => fontsize = "50px"; -Jquery 버전 $(function(){ $('#div1').css('font-size', '50px'); }); 더 짧게 이용할 수 있다. $('#div1').css('font.. 공감수 0 댓글수 0 2021. 9. 13.
[jquery] clickTest 줄여서 쓰기 $(this) div1 div1 div1 div1 div1 $(function(){ var elements = $('.clickTest'); elements.click(function(){elements.text('클릭되었습니다.');}); }); 이런 모양이 있다. 클릭을 하면? 한 번에 모든 게 바뀐다. 하나를 클릭하면 하나만 바뀌도록 하려면? div1 div2 div3 div4 div5 일단은 바디부터 바꿔준다. 각 div에 id 설정을 해주었다. $(function(){ var div1 = $('#div1'); div1.click(function(){div1.text('클릭했어요');}); }); 제이쿼리에 가서 div1 변수 설정 및 명령어 입력을 해준다. 아직은 하나만 바뀜. $(function(){ var.. 공감수 0 댓글수 0 2021. 9. 13.
[jquery] focus()명령어 결과는 똑같지만 코드가 너무 길어져서 헷깔린다면 변수를 설정해서 간단하게 쓸수도 있다. 결과는 똑같으니 취향에 맞게 써주면 된다. $(function(){ $('#input1').focus(function(){$('#input1').addClass('active');}); $('#input1').blur(function(){$('#input1').removeClass('active');}); }); 위에서 본 기존의 코딩이다. $(function(){ var element = $('#input1'); element.focus(function(){element.addClass('active');}); element.blur(function(){element.removeClass('active');}); }.. 공감수 0 댓글수 0 2021. 9. 13.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.