✨ Front-end67 [jQuery] 버튼 hover로 색상변경 addClass, removeClass HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 $(this).addClass('btnColor') 현재 버튼에 btnColor라는 클래스를 추가한다. 버튼에 클래스가 추가되면 버튼의 스타일이 변경될 수 있다. $(this).removeClass("btnColor") 현재 버튼에서 btnColor 클래스를 제거한다. 버튼의 스타일이 원래대로 돌아간다. 2023. 9. 4. [jQuery] JSON 표기법, 임시 회원으로 로그인 성공, 실패 처리해보기 JSON 표기법 HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 JSON 배열 HTML 삽입 미리보기할 수 없는 소스 ID : admin pw : 1234 로그인 HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 2023. 9. 4. [jQuery] var( ) 비밀번호 일치 여부 확인하기, (중복체크) HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 var pass1=$('#pwd1').val(); 비밀번호 필드(#pwd1)에서 입력된 값을 가져와 변수 pass1에 저장한다. var pass2=$('#pwd2').val(); 비밀번호 확인 필드(#pwd2)에서 입력된 값을 가져와 변수 pass2에 저장한다. if(pass1==pass2) { ... } else { ... }: pass1과 pass2를 비교하여 비밀번호가 일치하는지 확인한다. $('#result').html(...): 결과 메시지를 표시할 요소(#result)의 내용을 변경한다. .css(...)를 사용하여 텍스트의 색상을 변경한다. 일치할 경우 녹색('green'), 일치하지 않을 경우 빨강('red')으.. 2023. 9. 4. [jQuery] innerHTML, text 바꾸기 HTML 삽입 미리보기할 수 없는 소스 기존 javaScript를 이용해서 텍스트를 박아넣는 형식을 jQuery로 바꾸어보았다. HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 var str=$('#txt').val(); 텍스트 입력 필드(#txt)에서 입력된 값을 가져와 변수 str에 저장한다. $('#view1').text(str);: 변수 str의 내용을 요소(#view1)의 텍스트로 설정하여 출력한다. 출력2 버튼도 위와 같은 방식으로 작동되는 것이다. HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 .css({...}) .css() 메서드를 사용하여 요소의 스타일을 변경한다. 여기서는 텍스트의 색상('color'), 글꼴 굵기('fon.. 2023. 9. 4. [jQuery] 보이기 숨기기 기능 (show, hide, toggle, slideup, fade) show()와 hide() HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 $().ready(function(){ ... }); 이 부분은 문서가 로드될 때 실행할 JavaScript 코드를 정의하는 부분이다. $().ready(...) 또는 $(document).ready(...)와 같이 사용되며, 페이지가 완전히 로드되었을 때 내용을 실행다. $('#btn1').click(function(){ ... }); "보이기" 버튼(#btn1)이 클릭되었을 때 실행할 코드를 정의한다. 이 코드는 텍스트 입력 필드를 선택하여 show() 메서드 or hide() 메서드를 호출하여 표시한다. toggle(), slideup(), fade() HTML 삽입 미리보기할 수 없는 소스 H.. 2023. 9. 4. [jQuery] 가장 기초적인 $( function() { .... } 에 대해 $( function() {... } 란? 자바스크립트의 $(document).ready(function() { ... }); 을 축약한 jQuery이다. HTML 삽입 미리보기할 수 없는 소스 두 코드 모두 웹 페이지의 DOM 요소가 완전히 로드 되었을 때 실행된다는 것이다. 즉, 웹 페이지의 HTML 구조가 완전히 로드되고 초기화되서 사용자에게 표시되기전까지 기다린다. HTML 삽입 미리보기할 수 없는 소스 그렇다면 이 두개는 무슨 차이가 있을까? 코드를 적용해보면 페이지로 들어왔을 때 2가 먼저 출력이 되고 이후 1이 출력이된다. alert(2) 이 코드는 스크립트가 로드되면 즉시 실행되기 때문이다. 웹 페이지 로딩과는 관련이없으며, 스크립트가 로드되는 즉시 실행된다. 주로 초기화와 관계없는 간단한.. 2023. 9. 4. [jQuery] 아코디언(accordion) UI 써서 활용하기 https://jqueryui.com/tabs/ Tabs | jQuery UI Tabs A single content area with multiple panels, each associated with a header in a list. Click tabs to swap between content that is broken into logical sections. view source 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 jqueryui.com HTML에는 부트스트랩이 있다면 JS에는 이게 있다. 신기한 기능들이 많아 하나씩 공부해보려고한다. 내가 아는 jQuery의 지식은 $("h3") 은 d.. 2023. 9. 4. [JavaScript] 정규 표현식(RegExp) RegExp란? Regular Expression 의 줄임말로, 정규 표현식을 나타내는 자바스크립트의 내장 객체이다. 조건 1. 5~8자 이내여야 한다. 2. 반드시 영문(대, 소문자)로 시작해야한다. 그 외 나머지는 영문(대, 소문자) 또는 숫자로 만들 수 있다. HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 var patt = new RegExp("^[a-zA-Z][0-9a-zA-Z]{4,7}$") ^ : 문자열의 시작 지점을 나타낸다. [a-zA-Z] : 첫 번째 문자는 영어 대문자 또는 소문자로 시작해야 한다. [0-9a-zA-Z] : 나머지 문자는 숫자 또는 영어 대문자 또는 소문자로 이뤄져야한다. {4, 7} : 총 길이는 4에서 7자 사이여야 한다. $ : 문.. 2023. 9. 1. [JavaScript] JSON 객체, 배열 사용법 JSON 객체 HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 JSON 배열 HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 JSON(stingify, parse) HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 stringify( ) JSON 객체를 string으로 변환해 준다. parse( ) string 객체를 JSON객체로 변환해 준다. 2023. 9. 1. [JavaScript] 배열 객체와 날짜함수 배열 객체 1 HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 pop( ) : 뒤에서부터 삭제 push( x ) : 맨 뒤에 숫자 x 넣기 unshift( x ) : 맨 앞에 숫자 x 넣기 shift( ) : 맨 앞에 숫자 삭제 splice( 1, 2 ) : 1번째, 2번째 삭제 x.concat( y ) : x와 y 합침 join( ) : 배열의 모든 요소를 기본 구분자 쉼표( , )로 결합한다. join( ' - ' ) : 배열의 모든 요소를 대시( - ) 로 구분하여 결합한다. every( x ) 배열 내의 모든 요소가 주어진 조건을 만족하는지 여부를 확인한다. 만약 배열내의 모든 요소가 x라면 true, 그렇지 않다면 false이다. some( x ) 배열 내의 어느 .. 2023. 9. 1. [JavaScript] String 객체 함수 HTML 삽입 미리보기할 수 없는 소스 String 객체 함수 예시 코드 HTML 삽입 미리보기할 수 없는 소스 replace() - 메서드를 사용하여 문자열 내에서 "test"를 찾아 "sample"로 바꿔 결과를 출력한다. length - 문자열의 길이를 출력한다. toUpperCase( ) - 메서드를 사용하여 문자열을 모두 대문자로 변환한 결과를 출력한다. bold - 문자열을 굵은 글씨로 변환한 결과를 출력한다. charAt( x ) - 문자열에서 인덱스가 x인 위치의 문자를 가져와 출력한다. ( 0부터 시작하는 인덱스 ) substring(x,y) - 인덱스 x 부터 y-1까지 부분 문자열을 가져와 출력한다. ( 시작 인덱스 포함, 끝 인덱스 포함 x) substring(x) - 인덱스 x부터.. 2023. 9. 1. [JavaScript] 생성자 함수 HTML 삽입 미리보기할 수 없는 소스 자바스크립트에서 생성자 함수는 객체를 생성하고 초기화하는 역할을 수행한다. 생성자 함수를 사용하면 유사한 속성과 메서드를 가진 여러 객체를 쉽게 생성할 수 있다. 생성자 함수를 사용하면 코드의 재사용성을 높이고, 객체 간의 구조를 일관성 있게 유지할 수 있다. HTML 삽입 미리보기할 수 없는 소스 1. 생성자 함수의 정의 생성자 함수는 function 키워드를 사용하여 정의된다. 함수 이름은 주로 대문자로 시작하며, 객체의 속성을 초기화하는 코드가 함수 내에 작성된다. 2. 새로운 객체 생성 생성자 함수를 사용하여 새로운 객체(인스턴스)를 생성할 때에는 new 키워드를 사용한다. new 키워드를 사용하면 생성자 함수 내부의 코드가 실행되어 객체가 초기화된다. 3... 2023. 9. 1. 이전 1 2 3 4 5 6 다음