UX·UI - FrontEnd Dev. Story

프론트엔드/Javascript 37

[jQuery] 기존 요소의 내부 컨텐츠 변경 - .html() VS .text() 차이점

다음 이 두가지[ .html() / .text() ]메소드를 사용하면 기존 요소의 내부에 새로운 요소나 컨텐츠를 반환하거나 설정 가능하다. 메소드 설명 .html() 해당 요소의 HTML 콘텐츠를 반환하거나 설정 .text() 해당 요소의 텍스트 콘텐츠를 반환하거나 설정 1) .html() 메소드 선택한 요소의 내용을 새로운 HTML 요소로 변경 가능하다. ex) .wrap { color: blue; } 안녕하세요. $("p").html("Chloe 입니다."); 2) .text() 메소드 선택한 요소의 내용을 새로운 단순 text로 변경 가능하다. .wrap { color: blue; } 안녕하세요. $("p").text("Chloe 입니다.");

[jQuery] 요소의 추가 .append/.prepend/.before/.after/.wrap/.wrapAll

1. 기존 요소의 내부에 추가하는 요소 - 다음 메소드를 사용하면 기존 요소의 내부에 새로운 요소나 컨텐츠를 추가 가능. 메소드 설명 .append() 선택된 요소 마지막에 새로운 요소나 컨텐츠를 추가한다. .prepend() 선택된 요소의 첫번째에 새로운 요소나 콘텐츠를 추가한다. .appendTo() 선택된 요소를 해당 요소의 마지막에 추가한다. .prependTo() 선택된 요소를 해당 요소의 첫번째에 추가한다. 1) .append() 메소드 $(target).append(source) source 객체를 target 객체의 마지막에 추가. ex) 첫 번째 아이템 두 번째 아이템 $("#list").append("새로 추가된 아이템"); 2) .prepend() 메소드 $(target).prepen..

쿠키 활용해서 제어하기 :: setcookie 저장 / cookie 삭제

function setCookie(name, value, day){ //*1) ex01 setcooke( name, value, exprire, path, domain, secure) var today = new Date(); // Data 객체 생성 today.setDate(today.getTime() + day * 60 * 60 * 24 * 1000); // 1초 = 1/1000 //*2 파라미터로 받은 day(기간)을 data 객체에 담는다. document.cookie = name + '=' + value + ';expires=' + date.toUTCString() + ';path=/'; // cookie를 셋팅합니다. }; *1) - name : 쿠키 변수명 - value : 변수값 - exp..

[javascript] input 숫자만 입력하는 자바스크립트 / 정규식 방법

Inputbox Validtion Numbers Only 자바스크립트 방법 중 가장 많이 쓰이는 방법 중 하나가 input 텍스트 박스 내에 숫자만 입력하게 하는 방법이다. 다양한 개발 방법 중 자바스크립트 이용하는 방법과 정규식의 인라인으로 작성하는 방법을 알아보자. 1. 정규식 이용한 방법 이렇게 onKeyup 속성을 넣어서 정규식을 입력하면 숫자외에 입력이 되지않는다. 2. 자바스크립트 이용한 방법 function inNumber(){ if(event.keyCode57){ event.returnValue=false; } } 자바스크립트로 키보드 누르는 키를 제어함으로써 숫자만 입력가능하도록 할 수 있다.

[Javascript] 변수와 상수, 리터럴 자바스크스립트 기본 개념 잡기

1. 변수 변수란 언제든 바뀔 수 있는 이름을 붙이는 것이다. 변수를 선언할때는 let / var 를 앞에 붙인다. 변수 선언할 때는 꼭 초깃값을 지정해야하는 것은 아니다. 초깃값을 할당하지 않았을때는 특별한 값 undefined가 할당된다. let 문 하나에는 변수 여러개를 선언 할 수 있다. let targetTempC, room1 = "conference_room", room2 = "lobby"; 여기서는 변수 3개를 선언 했는데 targetTempC는 값을 할당하지 않았으므로 undefined 받습니다. room1은 선언과 동시에 'conference_room'를 할당 받았고, room2 역시 선언과 동시에 'lobby'를 할당했습니다. 2. 상수 ES6에서 새로 생겼습니다. 상수는 변수처럼 값을..

[Javascript] 자바스크립트 기초 용어 공부하기

함수 - 하나의 단위로 실행되는 문의 집합. -반환값 : 함수 호출의 값을 반환(return)값이라고 한다. 함수 바디안에서 return 키워드 사용하면 함수를 즉시 종료하고 값을 반환한다. -호출과 참조 : 함수 식별자 뒤에 괄호()를 쓰면 함수를 호출하려고 하는것이고 함수 바디를 실행시킨다. 그리고 호출한 표현식은 반환값이 된다. 괄호를 쓰지 않는다면 다른 값과 마찬가지로 함수를 참조하는 것이며 그 함수는 실행되지않는다. getGreeting();//"Hello World!" getGreeting; // function getGreeting() -함수와 매개변수 : 함수 호출하면서 정보를 전달할 때는 함수 매개변수를 이용한다. function avg(a,b){// a와 b는 정해진 매개변수 retur..

[Javascript] 간단한 탭메뉴 자바스크립트로 제작하기 <tab menu>

1. HTML 마크업 메뉴01 메뉴02 메뉴03 내용01 내용02 내용03 우선 HTML 코드로 탭 메뉴 리스트들과 그 메뉴를 선택했을 때 나타나는 탭 컨텐츠를 제작합니다. * 탭 메뉴 리스트 : ul.tabs > li.tab-list * 탭 컨텐츠 영역 : div.tab-content 2. Javascript $(document).ready(function(){ $('ul.tabs li').click(function(){ var tab_id = $(this).attr('data-tab'); $('ul.tabs li').removeClass('current'); $('.tab-content').removeClass('current'); $(this).addClass('current'); $("#"+tab..

[JS] 날짜를 문자열 / 숫자로 변환하는 자바스크립트 메서드

자바스크립트를 사용하다보면 시간/날짜를 이용해서 작업하는 경우가 많다. 날짜 객체는 문자열과 숫자 모두 반환할 수 있는 유일한 타입이며 어떤 메서드가 있는지 알아보자. 메서드 설명 getDate() 날짜 중에 '일'자를 숫자로 반환 ( 1 - 31 ) getDay() 날짜 중에 '요일'을 숫자로 반환 ( 일요일 : 0 ~ 토요일 : 6 ) getMonth() 날짜 중에 '월'을 숫자로 반환 ( 1월 : 0 - 12월: 11 ) getFullYear() 날짜 중에 '년도'를 4자리 숫자로 반환 ( ex : 2022 ) getTime() 1970년 1월 1일부터 현재까지 시간을 초 단위 숫자로 반환 getHours() 시간 중 '시'각을 숫자로 반환 ( 0 ~ 23 ) getMinutes() 시간 중 '분'..

[Javascript] 정규 표현식이란? Regular expression 알아보기

정규 표현식 소개 - 정규표현식(Regular expression)은 특정한 규칙을 가진 문자열의 집합을 표현하는데 사용하는 '형식단어'이다. - 정규 표현식은 많은 텍스트 편집기와 프로그래밍 언어에서 '문자열의 검색과 치환'을 위해 지원하고 있다. ​ ​ ​var regex = /정규표현식/; if(!regex.test("검사할문자열")) {...} ​ - Javascript는 정규 표현식을 슬래시( / )로 감싸서 표현한다. (따옴표가 아님에 주의) - 정규 표현식은 하나의 객체 형태가 되고, 내장하고 있는 test() 메서드를 통해 문자열이 그 식에 부합할 경우 true, 그렇지 않을 경우 false를 리턴한다. - 정규 표현식의 검사 결과는 보통 문자열이 식에 부합되지 않을 때에 대한 예외 처리가..

반응형