JavaScript&JQuery (31) 썸네일형 리스트형 쿠키 쿠키 활용 컴퓨터에서 텍스트 파일로 저장된 데이터. 쿠키는 사용자에 관한 정보를 기억하는 용도의 데이터 이다. 세션과 쿠키를 확실하게 구분 지을 수 있어야 한다. 세션-서버에 저장, 쿠키-??? · 쿠키의 사용처 ☞ 데이터 저장 ▶ setCookie, getCookie w3school.com의 setCookie와 getCookie 소스코드를 활용해보자. - setCookie function setCookie(cname, cvalue, exdays) { var d = new Date(); d.setTime(d.getTime() + (exdays*24*60*60*1000)); var expires = "expires="+ d.toUTCString(); document.cookie = cname + "=" +.. 문자열 객체 문자열 객체 다루기 ▶ 문자열 객체의 선언 방법 new String() 형태를 생략하여 선언이 가능하지만 생성자 함수를 통해 객체를 생성하고 사용할 수 있게 해준다. - var 변수 = ' '; - var 변수 = new String(); - var 변수 = new String(' '); ▶ 문자열 객체의 메서드 및 속성 값에 의해 생성된 문자열 객체는 아래의 메서드 및 속성을 사용 할 수 있다. 다음은 자주쓰는 문자열 객체 메서드 및 속성을 정리한 표 이다. 어떤 것이 있는지, 그 사용법을 알아두자. 종류 사용법 설명 indexOf 변수.indexOf(' ') 변수값에 담긴 문자열을 indexOf의 인수값과 일치하는 인덱스 번호를 반환한다. lastIndexOf 변수.lastIndexOf(' ') 변수.. 문서 객체 모델 이벤트 연산 문서 객체모델의 이벤트 연산 문서 객체모델을 이용하여 이벤트를 걸어주고, 이벤트 실행시 연산되어 결과값을 출력하는 작업을 해보자. ▶자바스크립트 이벤트 연산 아이디 action버튼 클릭시 input의 숫자값을 곱하여 아이디 result에 결과값을 출력하고, 계산값이 50 이상일 경우 텍스트 색상 빨강 49 이하일 경우 검정으로 설정하였다. X계산하기 결과값 더보기 X 계산하기 결과값 ▶ 자바스크립트 this 활용 readonly 속성이 부여된 input 박스 result 는 값을 웹에서 수정하지 못한다. 상품가격은 5천원이다. 수량을 선택할 경우 아이디 result에 총 상품가격을 상품가격 x 수량만큼 계산하여 적용하였다. 상품가격 : 상품수량 : :: 수량 선택 :: 1 2 3 4 총 계산 금액 : 더.. 문서 객체 모델 Style dom style style의 속성을 사용 할 수 있다. (css) 스타일 주기 예를 들어 텍스트박스 하나와 버튼이 하나 있다. 크롬 개발자모드의 console창에 입력해서 dom 객체를 등록해 보자. dom객체를 변수에 담으면 style속성을 사용할 수 있다. 콘솔에서 텍스트박스에 스타일을 직접 변경할 수 있다. 스타일 이벤트 ▶ 스타일 변경 기능 javascript에서 style 속성을 사용하는 방법. 아래의 스타일 주기 버튼을 클릭시 스타일의 값이 변경된다. 이를 응용해 토글 기능을 만들 수 있다. 스타일 주기 스타일이벤트코드보기 ▶ innerHTML 문구 변경 기능 변수에 문자열을 초기화 시키고 새로 문자열을 할당하여 버튼을 누를시 문구가 바뀌는 기능이다. innerHTML HTML 삽입을 원한다.. 유효성 검사 유효성 검사 ▶ 유효성 검사 입력 데이터가 정해진 포맷에 맞는지 확인해야 하는 경우, 자동으로 확인해주는 작업이다. 아래의 로그인 폼에 정보를 입력하지 않았을 경우 입력해달라는 경고창이 뜰 것이다. 이게 유효성 검사이다. 아 이 디 전송 (로그인) 비밀번호 더보기 아 이 디 전송 (로그인) 비밀번호 ▶ 회원가입 유효성 검사 회원가입 폼을 만들때 필수적으로 필요한 것이다. 이름 아이디 비밀번호 비밀번호확인 성별 남 여 회원가입 더보기 이름 아이디 비밀번호 비밀번호확인 성별남 여 회원가입 dom 이벤트 dom 이벤트 발생addEventListener 메소드를 이용하여 이벤트를 발생시킬 수 있다. ▶ 클릭 이벤트클릭이벤트 id="myBtn"를 가진 버튼을 생성한다. 객체 검색 메서드로 myBtn이라는 아이디를 가진 객체를 찾아, myBtn 의 주소값을 myBtn이라는 변수에 대입한다.myBtn변수의 메서드중 클릭시 다음과 같은 함수를 발생시키도록 하자. 버튼 클릭시 콘솔창(f12)에 클릭 이벤트 발동 이라는 문구를 띄게 하였다. ▶ 키보드 이벤트 text박스를 하나 생성하고, onkeypress라는 속성을 걸어준다. myKeypress 라는 변수에 함수를 할당한다. 입력박스에 키보드로 입력시 바로 콘솔창(f12)에 출력한다. ▶ 체인지 이벤트 (select) :: 선택 :: 옵션1 옵션2.. dom 객체 사용 dom 객체 사용 ▶ dom객체 속성 ☞ 테그 검색하거나 삽입하기 innerHTML, innerText 의 속성으로 접근 및 요소 값 변경 가능 안녕하세요. myTag 라는 아이디를 가진 태그에 접근하여 속성값을 변경하였다. ☞ 다중 객체에 접근하여 반복문 풀기 checked 클래스 이름이 같을 경우 클래스명으로 객체를 검색하면 배열이 찾아진다. 찾아진 배열로 반복문을 만들어 보자. var checked = document.getElementsByClassName('myCheck'); for(var i=0;i 해당 객체에 커서 이동하기. 아래 상태는 위와 같이 폼 테그에 focus 속성을 부여한 것이다. 커서가 텍스트박스를 가르킴. ☞ 버튼 onclick 속성 버튼을 클릭시 onclick 속성을 부여했기.. dom 객체 document object model - dom 문서 객체 모델. 문서의 정보가 담아져 있다. 문서의 해당 태그들을 document가 가지고 있다. document 라는 변수명으로 문서에 접근 할 수 있다. ▶ 객체 검색 메서드 ◈ 아이디 검색 document.getElementById('아이디명'); 아이디로 객체를 검색해 해당 테그를 찾아준다. 다음 사진은 해당 메서드의 사용방법이다. ◈ 태그 명 검색 document.getElementsByTagName('태그명'); 태그로 객체를 검색해 해당 테그를 찾아준다. 다음 사진은 해당 메서드의 사용방법이다. 다수의 값인 경우 배열로 만들어 진다. 태그 네임일 경우 다수의 값이 존재할 수 있기 때문에 getElementById와는 다르게 Elements이.. 이전 1 2 3 4 다음
