방구석 상상코딩

정규표현식(Regular Expression) : 특정 규칙을 가진 문자열의 집합, 문자열에서 특정한 규칙을 가지는 문자열의 집합을 찾아내기 위한 검색 패턴 사용방법 리터럴을 이용한 생성 RegExp 객체를 이용한 생성 - 슬래쉬"/"로 감싸는 패턴 - 스크립트가 불러와질 때 컴파일 된다. - 정규식이 실행 시점에 컴파일 된다. var re = /ab+c/; var re = new RegExp("ab+c"); Meta 문자 : 표현식 내부에서 특정한 의미를 갖는 문자 Meta문자 설명 . 한 개의 어떤 문자와도 일치할 경우 \d 한 개의 숫자와 일치할 경우 \w 한 개의 문자나 숫자와 일치할 경우 \s 공백, 탭, 줄 바꿈, 캐리지 리턴 문자와 일치 ^ 패턴의 시작 표시 $ 패턴의 끝 표시 [] 문자종류..

input 태그 생성 값1 값2 값3 1) 값 확인 // id $('input:checkbox[id="checkBox의 id값"]').val(); // name $('input:checkbox[name="checkBox의 name값"]').val(); 2) 선택된 개수 확인 $("input[name='checkBox의 name값']:checked").length 3) 여러개 선택된 값 확인 - if 사용 var len = $("input[name='brand']:checked").length; if(len > 1){ //개수를 체크하고 2개부터는 each함수를 통해 각각 가져온다. $("input[name='brand']:checked").each(function(e){ console.log($(this..

select 태그 생성 값1 값2 값3 1) 선택된 값 확인 - id로 선택 $("[#select박스id] option:selected").val(); HTML 삽입 미리보기할 수 없는 소스 - name로 선택 $("select[name=select박스name]").val(); HTML 삽입 미리보기할 수 없는 소스 2) 기본값 지정 HTML 삽입 미리보기할 수 없는 소스 3) 비활성화 값2 HTML 삽입 미리보기할 수 없는 소스 4) 특정 option 목록에서 숨기기 값2 HTML 삽입 미리보기할 수 없는 소스 5) 변화에 따른 val값 가져오기 HTML 삽입 미리보기할 수 없는 소스 6) option 강제로 선택하기 - selectedIndex 사용 document.getElementById("sel..

input 태그 생성 값1 값2 값3 A B C 값 가져오기 Radio Button 값 확인 $("input[name='radio의 name값']:checked").val(); Radio Button 1개 선택 - 동일한 name 속성을 추가하여 1개만 선택할 수 있도록 한다. $("input[name='radio의 name값']:checked"). $(document).ready(function () { $('#radiobutton').click(function () { var radioVal = $('input[name="radiobox"]:checked').val(); }); }); Radio Button 다중 선택 - 서로 다른 name 속성을 추가하여 다중 선택을 할 수 있도록 한다. $(doc..

HTML 삽입 미리보기할 수 없는 소스

input 태그 생성 값 가져오기 function getinput() { // id 값으로 가져오기 var id = $('#inputID').val(); console.log(id); // class 값으로 가져오기 var inputclass = $('.inputCLASS').val(); console.log(inputclass); // name 값으로 가져오기 var inputname = $('input[name=inputNAME]').val(); console.log(inputname); } 값 설정하기 - attr : 요소(element)의 속성(attribute)의 값을 가져오거나 속성을 추가 function setinput() { // id 값 설정 $('#inputID').attr('value..

Ajax 전송 Form 전송 전송 방식 비동기/동기 동기 방식 method 방식 type success funtion 방식 페이지 이동(Reload) X O Event(이벤트) 발생 Evnet Listener 생성을 통해 데이터 전송 별도의 코드 없이 HTML만으로 submit 이벤트를 통해 데이터 전송 content-type (request로 보내는 데이터가 무엇인지 확인) (기본) - application/x-www-form-urlencoded - key=value&key=value 형태로 전송 ex) data:id=${id}&email=${email}&email_auth_key=${email_auth_key} (기본) - application/x-www-form-urlencoded (파일전송) - ..

동기식 비동기식 요청(Request) 후 응답(Response)을 받아야지만 다음 동작이 이루어진다. 요청(Request)을 보낸 후 응답(Response)과는 상관없이 동작하는 방식이다 > Client (클라이언트) Server에서 정보를 가져와서 사용자에게 보여줄 수 있고 사용자와 상호 작용할 수 있는 소프트웨어 Ex) web browser, 핸드폰 애플리케이션 > Server 네트워크 상에서 접근할 수 있는 프로그램으로서 어떤 자료들에 대한 관리나 접근을 제어해주는 프로그램 Ajax - 자바스크립트의 라이브러리 중 하나 (Asynchronous Javascript And XML) - 비동기식 서버에 데이터를 요청하여 필요한 데이터를 받아와 전체 페이지를 새로 고치지 않고 변경이 필요한 페이지 부분만..

이벤트 핸들러란? 특정 요소에서 발생하는 이벤트를 처리하기 위해 이벤트 핸들러(Event Handler)라는 함수를 만들어 바인딩하는 것으로 이벤트 핸들러가 연결된 특정 요소에서 지정된 타입의 이벤트가 발생하면 해당 함수를 실행한다. 방법 1> // 등록 elem.addEventListener(event, handler) // 삭제 elem.removeEventListener(event, handler) 방법 2> // 등록 elem.attachEvent('on이벤트명'; function(){ }); // 삭제 elem.detachEvent('on이벤트명'; function(){ }); See the Pen Untitled by 도그리 (@yafsfbms-the-reactor) on CodePen. ▶ ..

키보드 이벤트란? 키보드를 조작할 때 발생하는 이벤트를 캐치하는 것으로, keydown, keypress, keyup 이 있다. keydown keypress keyup - 키보드를 누르는 순간 발생 - 물리키에 반응 - 현재 눌린 문자와는 상관없이 물리적인 키에만 반응 - 키보드를 누르는 순간 발생 - 현재 눌린 문자에 반응 - 문자 키에 반응 - 키보드를 눌렀다 떼는 순간 방법 1> function pressEnter(){ if(event.keyCode == 13){ alert("엔터키 활성화!"); } } 방법 2> function keycheck(evt){ var keyCode = evt.which?evt.which:event.keyCode; } 방법 3> txt1.onkeydown = funct..