the Rabbit_Sand, IT Blog 🍀

// prompt()에 입력받은 값을 변수 year로 받기 var year = prompt("태어난 연도를 입력하세요.(단, 숫자만 입력하세요.)"); // year를 12달로 나눴을 때 나머지가 n일 때 XX띠라고 alert로 출력하기 if(year % 12 == 0){alert('원숭이띠');} else if(year % 12 == 1){alert('닭띠');} else if(year % 12 == 2){alert('개띠');} else if(year % 12 == 3){alert('돼지띠');} else if(year % 12 == 4){alert('쥐띠');} else if(year % 12 == 5){alert('소띠');} else if(year % 12 == 6){alert('범띠');} e..

자손 선택자(>)와 후손 선택자( ) div의 후손이면서 ul의 자손1 div의 후손이면서 ul의 자손2 div의 후손이면서 ul의 자손3 div의 후손이면서 ul의 자손4 duv/ul의 후손이면서 li의 자손 자손2 자손3 속성 선택자 - 선택자[속성]: 특정한 속성을 가지고 있는 모든 요소를 선택한다. - 선택자[속성=특정값]: 속성값이 특정값과 일치하는 모든 요소를 선택한다. - 선택자[속성~=특정값]: 속성값에 특정값의 단어를 포함하는 요소를 선택한다. - 선택자[속성^=특정값]: 속성값이 특정값으로 시작하는 요소를 선택한다. - 선택자[속성$=특정값]: 속성값이 특정값으로 끝나는 요소를 선택한다. - 선택자[속성*=특정값]: 속성값에 특정값을 포함하는 요소를 선택한다. 입력 양식 선택자 : in..

아이디 선택자 : 특정 아이디값을 가진 요소 하나만 선택할 때 사용한다. JavaScript로 아이디 선택자 jQuery로 아이디 선택자 태그 선택자 : 특정 태그 요소를 선택할 때 사용한다. p태그1 p태그2 p태그3 h1태그1 h1태그2 h1태그3 클래스 선택자 : 특정 클래스 속성을 가진 요소들을 선택할 때 사용한다. 클래스 선택자1 클래스 선택자2 클래스 선택자3 *** JavaScript와 jQuery 비교 1. 요소를 선택하기 JavaScript jQuery document.getElementById("아이디명") $("#아이디명") document.getElementsByTagName("태그명") $("태그명") document.getElementsByClassName("클래스명") $("...

post 방식의 특징 1. url의 body 영역에 데이터를 포함시켜서 요청한다. → 사용자가 입력한 데이터(값)들이 url에 노출되지 않아 보안유지가 가능하다. → 로그인이나 회원가입의 경우가 post 방식에 적합하다. 2. body 영역은 전송하는 길이 제한이 없어 게시판 작성 등에 용이하다. 3. 즐겨찾기가 가능하지만 전달되는 데이터가 url에 노출돼있지 않아서 get 방식과 달리 기존의 검색결과를 볼 수 없다. request_post.html 이름: 성별: 남자 여자 나이: 거주 지역: 서울 경기 강원 부산 대구 광주 울산 인천 키: 좋아하는 음식(모두 선택하기) 중식 일식 양식 한식 분식 RequestPostServlet @WebServlet("/test2.do") public class Req..

get 방식의 특징 1. url의 header 영역에 데이터들을 포함시켜서 요청한다. → 사용자가 입력한 데이터들이 url에 노출되어 보안 유지가 불가능하다. → 로그인이나 회원가입과 같이 보안 유지가 필요한 경우에는 get 방식이 부적합하다. 2. header 영역은 전송 길이에 제한이 있다. → 방대한 데이터들을 담고 있을 경우엔 초과된 데이터들이 절단되어서 넘어간다. → 게시판 작성과 같은 경우엔 get 방식이 부적합하다. 3. url에 입력 데이터가 노출되므로 북마크(즐겨찾기)가 가능하다. → 검색 기능을 사용할 땐 get 방식이 적합하다. 회원 정보 입력 이름: 성별: 남자 여자 나이: 거주 지역: 서울 경기 강원 부산 대구 광주 울산 인천 키: 선호하는 음식 선택(최대 5개) 중식 일식 양식 ..

Servlet : Servlet은 웹 서비스를 위한 Java class이다. - MVC에서 Controller의 기능을 하며, 사용자의 요청을 받아서 처리하고 그에 해당하는 응답 페이지를 만들어서 다시 사용자에게 전송하는 역할을 한다. - 동적 웹 페이지를 Java로 구현할 수 있게 하는 서버 측 프로그램이다. - 장점: Java 코드 내에 작성하므로 반복문이나 조건문 등의 메소드를 사용할 수 있다. - 단점: html을 수정해야 할 때는 직접 Java 코드 내에서 수정해야 하므로 서버를 재구동시켜야 한다. web.xml - 배포 서술자(DD, Deployment Descriptor) : 해당 웹 애플리케이션의 기본적인 설정을 위해 작성하는 파일이다. - 해당 웹 애플리케이션을 구동시키는 서버를 star..

jQuery : 기존의 JavaScript만으로 구현하기엔 복잡했던 구문들을 간소화하기 위해 개발된 JavaScript 기반 라이브러리이다. → JavaScript 언어로 함수나 기능들이 이미 정의돼있다. - jQuery의 장점 : DOM 요소와 관련된 스크립트를 쉽게 구현할 수 있다. AJAX, 이벤트 처리 등 폭넓게 지원한다. jQuery와 관련된 확장형 플러그인, 오픈 API 등을 지원한다. jQuery 라이브러리 연결 방식 1. 오프라인 방식 : https://www.jquery.com에서 jQuery 라이브러리를 직접 다운로드 받은 후에 경로를 지정한다. - UnCompressed : 개발자 전용 → 일반 js 파일: 개발자가 보기 쉽도록 주석과 코드 정렬 등을 활용하여 가독성이 좋다. - Co..

정규표현식(REGEX/REGEXP: Regular Expression) : 특정 패턴을 가진 문자열을 찾거나 변경할 때 사용하는 형식 언어이다. - 문자열에 대해 특정 패턴의 조건을 검사하거나 변경할 때 복잡한 조건을 제시하지 않고 간단하게 처리할 수 있다. - JavaScript 외에 Java, Oracle 등 다른 언어에서도 사용할 수 있다. 정규 표현식 객체 생성 방법 방법1. 생성자 구문으로 작성한다. var regExp = new RegExp("script"); 방법2. 정규식 변수를 선언한다. var regExp = /script/; 정규 표현식과 관련된 메소드 var sub1 = "javascript jquery ajax"; var sub2 = "java oracle html css"; 1...

유효성 검사 : 로그인이나 회원가입을 할 때 보면, 아이디와 비밀번호를 입력할 때 지켜야하는 조건들이 있다. '비밀번호는 영문자와 숫자, 특수문자를 포함하여 8~15자 이내로 입력하세요', '아이디는 숫자만으로는 입력할 수 없습니다' 등등. 이때 사용자가 값을 입력하면 유효성 검사를 통해 한 글자씩 조건에 맞는지 확인한다. 만약 조건에 맞지 않으면 기본 이벤트가 실행되지 않도록 한다. 정규표현식을 통한 유효성 검사 - 정규표현식 틀 : // - 시작: ^ , 끝: $ - 조건 정할 때: [] - a-z: 소문자 a부터 z까지 - A-Z: 대문자 A부터 Z까지 - 0-9: 숫자 0부터 9까지 - 글자 수 n글자부터 m글자 이하까지: {n, m} var regExp = /^[a-zA-Z0-9]{5,12}$/..

이벤트의 종류 1. 고전 이벤트 모델(기본) : 요소객체를 가져와 해당 요소객체에 이벤트 속성으로 접근한 후에 이벤트 핸들러를 연결한다. - 이벤스 속성에 null을 대입하여 이벤트를 제거할 수 있다. - 동일한 이벤트를 여러 번 사용할 수 없고, 나중에 작성된 이벤트로 덮어쓰기가 된다. 고전 이벤트 버튼1 고전 이벤트 버튼2 2. 인라인 이벤트 모델 : 요소 내부에 직접적으로 이벤트 속성을 제시하여 실행할 내용을 정의한다. - 주로 script 태그에 정의돼있는 함수를 호출하는 방식으로 사용한다. - 이 모델은 구문이 길어지고 복잡해보여 잘 사용하지 않는다. 버튼 누르기 버튼 클릭 3. 표준 이벤트 모델(addEventListener) - 동일한 이벤트를 여러 번 사용할 수 있다. - 이벤트 대상 요소..