본문 바로가기

JavaScript

 (17)
자바스크립트로 쿠키 사용하기 # 자바스크립트로 쿠키 사용하기 로그인 구현시 아이디 저장기능을 구현하기 위해서는 저장소가 필요하다. 값을 저장하기위한 저장소는 DataBase, file, 쿠키등이 있고 jsp를 사용한다면 session영역도 사용 가능하다. DB와 file은 속도 측면에서 느려지므로 제외한다. 여기서는 쿠키(cookie)를 이용한 방법을 알아 보자. 쿠키는 로컬저장소에 저장되며 서버가 아닌 클라이언트측에 사용하는 저장소이다. 따라서 용량이 제한적이라 간단한 정보를 저장하는데 사용한다. 예를들면 id, 최근상품목록, 자주 사용하는 메뉴나 인증정보등의 보안정보를 저장하는 용도로 사용한다. 그리고 쿠키는 생성시 해당 브라우저가 종료되기전까지 남아있다. 이런 쿠키의 특성을 이용하여 로그인시 브라우저가 종료될때까지 쿠키의 값을..
input type 'file' 값 변경 불가 # input file의 value는 우리가 임의로 세팅 할 수 없다. 다른 text, check, hidden등 xx.value = yyy 로 값을 임의로 줄 수 있지만input file은 보안상의 이유로 세팅 할 수 없다. (기본) 아마 읽기 전용인듯 하다. # file 선택 창에서 취소버튼 누른결과를 우린 알 수 없다. 또한 file의 선택창에서 취소 버튼누른결과를 우린 알 수 없다.(이것또한 보안상 이유인가?)하지만 우리는 onChange이벤트로 this.value의 길이가 0이면 파일을 선택안했단 뜻이니 이런식으로 처리( 또는 $(this).files 의 length가 0일경우 )( $(this).files[0].name ) # 활용jQuery 사용 시 $('input[type=file]')[0..
data-* attribute이용하기 # 개요 어느 엘리먼트상관없이 data-* 로 시작하는 attribute는 전부 사용가능( 순수 HTML임 ) 화면에 안 보이게 글이나 추가 정보를 저장 가능 아래와같이 원하는 속성 생성가능... # 접근 1. JS에서 접근 var a =document.getElementById('electriccars').getAttribute('data-columns'); alert(a);document.getElementById('electriccars').setAttribute('data-columns',5); // 값 변경도 가능 혹은 DOMStringMap 을 이용하여document.getElementById('electriccars').dataset.columns=6; // 값 변경var a =documen..
a태그(anchor)에서 href 혹은 onclick사용 & ajax 뒤로가기 https://thingsthis.tistory.com/130 # a태그 기본동작 앵커?해쉬? 인 # 는 현재 페이지에서의 이동을의미한다......aaa.....fff따라서 fff누르면 #abc( 아이디가 abc) 있는곳으로 화면이 이동( 실질적인 경로이동X , 현재페이지내에서이동)url상태는 ~~#abc거기서 aaa를누르면 # 는 최상위...페이지 젤 위로 이동함!url상태는 ~~#여기서 뒤로가기누르면 #abc로 이동. url상태는 ~~#abc거기서 다시 뒤로가기누르면 url상태는 ~~ 이것은 a태그의 위치로 바로이동가능함url에 ~~~#abc 입력하면 fff 로 바로 이동함 # a태그(앵커)로 javascript function 호출하는법 2가지 1. javascript function this가 전..
테이블 정렬(오름/내림) + 테이블체크박스(ALL) 이사람 출처인데 내공 장난아니네 자세함!http://forest71.tistory.com/129 # 테이블 정렬 일단 이사람의 정렬은 교육용 목적이라 순수 자바스크립트코드이며 이런 테이블 정렬 기능은 외부 라이브러리에 많다네 var sortType = 'asc'; // 정렬타입을 토글 window.onload = function() { // 임의의 데이터 넣기 var data = [ ['Gu', 80, 70, 30], ['Brad', 50, 90, 90], ['Lee', 70, 70, 70], ['Kim', 90, 60, 80] ]; var id = document.getElementById("mainTable_tbody"); createTableBody(id, data); // 테이블 바디 만드는 함수..
meta 5초후 자동이동합니다 이런거할때도 쓰고구글링같이 검색시 meta정보로 검색한다는데.... 추후 정리할것 # 정의태그는 사용자의 일반적인 화면에는 보이지않지만해당 페이지의 내용을 담고있음 # 형식 # charset - 인코딩 타입지정 # name, content - 메타태그의 일반적으로 사용되는속성 뷰포트메타정보 - 모바일환경을위해 생긴메타정보 이건머지? 임의의메타정보인가?? # http-equiv - 전처리구문지시자로 웹브라우저에게 정보를 전달하기위해 사용 content속성 필수 2초뒤에 해당 url로 이동 다음은 랜더링모드를 적용하는법이다. 참고자료 : https://blog.naver.com/j_wlove12/221410333869 :1초마다 리플래쉬 :페이지이동 :그림위에 마우스 오버시 이미지 관련..
JSON객체 ( JavaScript Object Notaion ) 이번에는 JSON객체에 대해 알아보자. JSON( JavaScript Object Notaion ) 약자로서 그냥 자바스크립트 객체라고 보면된다.이는 데이터를 전달하기 위한 표준으로 형식은 키와 값이 쌍으로 이루어져 있다. 특히 비동기 브라우저/서버 통신인 AJAX(Asynchronous JavaScript and XML)를 위해 사용한다.이름 그대로 원래는 JavaScript형식을 따르지만 독립적 데이터 형식이다. 따라서 다른 프로그래밍 언어에 독립적이므로 각종 프로그래밍 언어에서 쉽게 사용 할 수 있다.또한 자바스크립트에서 eval명령으로 곧바로 사용 가능하다.( 그러나, 악성 코드 유입가능성있음 )그래서 웹 환경에서 유용하게 사용 가능하다. 이런 특성을 이용하여 이기종간의 데이터 통신을 JSON형식..
내장객체 # 내장객체객체는 생성자함수를 사용하여 내용을 정의하지만 내장객체는 이미 생성자함수의 내용을 포함하고있어서 별도의 함수를 정의하지않고 new 연산자를 통해 다음과같이 객체로 정의해주면됨객체명=new 객체의형식(값) var now=new Date(2013,4,13) 하지만 String객체나 Math객체등과같이 new연산자를사용하지않는것도있는데 이를 정적객체라고 함! # String 객체( 정적객체 ) : 단순히 문자열을 변수에할당하면 String객체가생성됨 : index는 0번부터 시작!!// 변수명="문자열" var str="abc" 1. .length : 문자열 길이 반환"abcd".length 2. .charAt(2) : 문자열왼쪽0번부터시작하여 2번째 문자를 표시"abcd".charAt(2); //..

티스토리툴바