전체 글(223)
-
[ JavaScript / jQuery ] 조건 검사 하는 방법 (상태변수, 상태객체 사용)
환경 : Visual Studio Code [ 주요 코드 ] 해야할 일 1. 아이디 입력창에서 입력이 완료될 경우, 형식 검사하여 결과 기록 2. 비밀번호 입력창에서 입력이 완료될 경우, 형식 검사하여 결과 기록 3. 비밀번호 확인 입력창에서 입력이 완료될 경우, 비밀번호와 비교하여 결과 기록 4. form의 전송이 이루어질 때 모든 검사결과가 유효한지 판단하여 전송 여부 결정 - 상태 객체 //상태객체 (React의 stat로 개념이 이어짐) // JS는 클래스가 없어서 객체를 바로 만들 수 있음 var state = { //key : value memberIdValid : false, memberPwValid : false, memberPwCheckValid : false, //객체에 함수를 변수처럼..
2024.05.27 -
[ JavaScript / jQuery ] 필수항목 검사
환경 : Visual Studio Code 목표 : 정규형 표현식을 지정하여, 정규형 표현식에 부합하는 닉네임 정보만 넘어가도록 해보기 - 콘솔을 통해 닉네임 입력창의 유효성 검사 변수(memberNickValid)에 들어있는 값을 확인해보기 - 최종 결과 [ 주요 코드 ] //상태 변수를 생성 var memberNickValid = false; (+) 상태변수를 설정하여, 전역변수처럼 사용 //$("[name=memberNick]").on("blur", function(){}); //JS $("[name=memberNick]").blur(function(){ //jQuery (+) JS / jQuery와 비교하여 blur를 실행할 함수 코드 알아두기 $("[name=memberNick]").blur(f..
2024.05.26 -
[ JavaScript / jQuery ] alert 창의 값 여부에 따라 페이지 이동 구현
환경 : Visual Studio Code [ 주요 코드 ] if(message == undefined) { message = "정말 이동을 원해?"; } (+) 현재 this에 들어있는 데이터 "message"의 값이 undefined라면, "정말 이동을 원해?" 라는 메시지를 출력해준다. return choice; // return ture;//통과 // return false;//차단 (+) choice 변수에 message에 대한 확인 결과 값을 넣었으므로 choice 값을 리턴해주면, 사용자가 입력한 값 true/false 중 하나의 값이 반환된다. [ 전체 코드 ] jQuery 기본이벤트 제어 네이버 네이버 네이버 개인 공부 기록용입니다:)
2024.05.25 -
[ JavaScript / jQuery ] jQuery를 활용하여 같은 틀을 여러 번 반복해서 사용할 수 있는 코드를 작성해보자
환경 : Visual Studio Code 목표 : 1000자까지 입력가능한 화면을 여러개 띄우지만, 이를 실행하는 코드는 하나로..! [ JS와 jQuery 코드를 비교 ] - 자바스크립트만 이용 - jQuery 이용 (+) for문을 사용하지 않고도 원하는 div 태그에게 동일한 효과를 부여할 수 있다. (+) 한 줄에 원하는 내용을 이어붙여 쓰기 용이하다. [ jQuery를 이용한 전체 코드 ] 자기소개서 (Q) 질문 테스트 1번 0 / 1000 (Q) 질문 테스트 2번 0 / 1000 (Q) 질문 테스트 3번 0 / 1000 개인 공부 기록용입니다:)
2024.05.24 -
[ JavaScript / JQuery ] jQuery를 자바스크립트에서 사용해보자!
환경 : Visual Studio Code [ jQuery란? ] jQuery는 JavaScript를 기반으로 하는 빠르고 간편한 웹 개발을 위한 라이브러리 = 자바 스크립트를 쉽게 사용할 수 잇도록 도와주는 오픈 소스 HTML 문서를 다루기, 이벤트 처리, AJAX 기능을 제공하는 등 다양한 웹 개발 작업을 단순화하는 데 사용 주요 특징과 기능: 1. 선택자(Selectors): jQuery는 CSS 선택자를 사용하여 HTML 요소를 선택할 수 있다. 이를 통해 원하는 요소에 쉽게 접근하고 조작할 수 있습니다. // 예제: 모든 태그를 숨김 $("p").hide(); 2. 이벤트 처리(Event Handling): jQuery는 이벤트 핸들링을 간편하게 만든다. 이벤트에 대한 동작을 쉽게 정의 및 연..
2024.05.23 -
[ CSS ] transition 이해
transition 속성과 사용법 특정 조건 하에서 애니메이션이 동작되는 과정을 보여주고자 할 때 사용 전환이 일어날 요소들을 작성해주는 것! 📝 transition 속성 transition-property : 효과를 적용하고자 하는 css 프로퍼티를 지정. 즉, 과정을 보고 싶은 속성을 지정 기본값 : all 복수의 프로퍼티를 지정하는 경우 쉼표(,)로 구분한다. transition-property: width height; 전환 수치를 다르게 하려면? transition: width 1s, height 2s transition-duration : 효과가 나타나는데 걸리는 시간 기본값 : 0s transition-timing-function : 트랜지션 효과의 속도 기본값 : ease, 느리게 시작하여..
2024.05.22