본문 바로가기
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); //..
String, Math, Date, Array 객체들의 메서드 # 핵심요약보기 String객체( 주로 인덱스 0부터 시작 ) "문자열".charAt(3); - 문자열 왼쪽0부터시작하여 3번째 문자를 표시 "문자열".substr(2,4); - 문자열 2번부터 4개(음수시 오류) "문자열".substring(2,4) - 문자열2번부터 4번째보다작은거(2는포함 4는미포함)( 음수는 0으로인식) "문자열".slice(2,4) - substring과 같지만 음수도 적용됨 ( slice(2, -1) 는 문자열 끝에서 왼쪽으로 한칸(역시나 미포함) ) document.write( "abcdefg".slice(2,-2)); // cde "문자열".concat("추가할 문자열"); - 문자열에 내용 추가(누적) "문자열".split("구분자") - 구분자를 기준(컴마로바뀜)으로 배..
객체 #객체1. 객체 생성 첫번째 방법var 객체명={속성:값 , 속성:값, ....}; 2. 두번째 방법( 생성자함수를 이용하는 방법 ) 일반객체선언과 다르게 여러개의 객체를 찍어낼 수 있는 함수( 함수명 첫글자는 대문자로)function 함수명(){ this.속성=값;} var 객체명 = new 함수명(); # 배열과 객체 접근법배열은 요소에 접근할때 인덱스를 사용하고객체는 요소에 접근할때 키를 사용한다.배열 : 배열명[인덱스]객체 : 1. 객체명.키 2. 객체명["키"] or 객체명['키'] [ex]window.onload = function() { // 배열 var arr = [11,22,33]; alert(arr[0]); // 객체 생성 첫번째 방법 var 객체1 = {color:"red", spee..

티스토리툴바