목록Front-end (81)
Daily coding
* XML 파일( 또는 url )을 서버로 전송하기 위한 단계 * XML 데이터를 불러오기 위한 함수 만들기 * 태그명만 가져오는 함수 * 자식노드이름을 출력하는 함수 (번호,이름,주소,방문)
* XML 데이터는 DOMParser 객체를 이용하여 문자열로 변환할 수 있다 1. 데이터 파싱하기 // xml 데이터형식을 가진 문자열 데이터를 생성하여 변수에 넣기 var xmltext = "" + // root tag 만들기 (=head), 2개 "" + // node : ... "탈무드" + "man" + "2001" + "" + "" + //반드시 위아래 xml태그의 종류와 개수가 똑같아야 함 "이솝이야기" + "woman" + "2004" + "" + ""; // 파싱을 위한 객체 생성 var parser; // 문자열을 xml로 변환하여 담을 변수 선언 var xmlDoc; // 파싱하기 parser = new DOMParser(); xmlDoc = parser.parseFromString(..
XML : 파일 읽어오기 XML 파일을 읽어오기 위한 단계 1. http 통신을 하기위한 객체 생성 (서버와 교류함 - 비동기 통신) var xhttp = new XMLHttpRequest(); - XMLHttpRequest() : 비동기 처리를 하기위한 객체 생성 xhttp.onreadystatechange = function () { if( this.readyState == 4 && this.status == 200 ) { // 파일에서 읽어들인 부분을 서버로 보내고, 다시 데이터를 서버로부터 받는 부분 // this.responseText : 서버로부터 txt파일을 받아옴 } } onreadystatechange : XMLHttp 소속 함수 - xhttp.open ("GET", "url", true..
XML : eXtensible Markup Language 확장 표시 언어 Data -> 배포 (교통정보, 가로수 등) file, DB(X) * data.txt 파일로 데이터 전송할 때 이름 : 홍길동 나이 : 24 주소 : 서울시 ----------- 홍길동/24/서울시 ... -> 데이터를 읽는 방식이 전부 다 달라서 불편하기 때문에 데이터를 보내고 읽는데 편하게 처리하기 위해 통합된 타입이 xml XML : 전부 다 태그로 되어있음 html과 코드가 유사 아래처럼 작성함 홍길동 24 서울시 ====> parsing : 원하는 데이터만 끄집어 냄 (parser:parsing을 위한 툴): 자바/자바스크립트 모두 파싱 가능 => XML : 여러개의 데이터를 취급하고 배포하기 위한 형식(form) - 웹..
focus( ) : 해당 태그로 커서가 옮겨갔을 때 호출 = mouseover( ) blur( ) : 해당 태그에서 포커스가 벗어났을 때 호출 = mouseout( ) dblclick( ) : 더블클릭 시 호출 이름: 이메일: 여기가 p tag 1입니다 여기가 p tag 2입니다 hide() : 태그 감추기 show() : 태그 보여주기 toggle() : 번갈아가며 show / hide * mouseenter(): 적용한 개체에 마우스를 올리면 실행, mouseover와 비슷하게 작동하지만, mouseover는 자식객체에도 함수의 적용이 되어 안쪽에 위치한 자식객체로 마우스커서를 옮기면 함수 적용이 되지 않는다 그러나 mouseenter는 적용한 그 객체의 바운더리 안에 있을 때 실행이 되기 때문에 안..
// file을 읽어왔다고 가정 // 테이블에 넣을 데이터 정의 var woman = [// 테이블에 넣을 배열 임의적으로 작성하기 ["", ""],// --> 열 목록에 들어갈 것이기 때문에 빈칸 ["aaa", "01:06:11"], ["bbb", "01:08:31"], ["ccc", "01:16:55"] ]; var man = [ ["", ""], ["AAA", "01:07:11"], ["BBB", "01:08:55"], ["CCC", "01:10:32"] ]; // 테이블 th와 td데이터 삽입하기 $(function () { //$("tr:even").css("background-color", "green"); // even : 짝수에 함수 적용하기 , odd :홀수 // 위의 코드는 짝수번째 인..
* List에 접근하는 방법 // 다중 리스트로 구성된 구조를 정의 Coffee black milk Tea Milk // JQuery로 리스트의 요소들 가져오기 2.show ( ) : 해당 태그를 나타낸다.
기본함수 : mouseover / mouseout 1, Java Script 방식 mouseover in JS java script > jQuery : 자바스크립트가 우선시 됨 h3 tag class cls
* JQuery 기본 함수 1> Click : 태그 클릭시 호출 $("p").click( function () { 클릭시 호출 }); */ * id / class 적용 div 태그 안에 있는 p태그만 적용 $('div p').click(function () { alert("div p tag click") }); */ /* // div안에 클래스명이 cls인 태그에만 적용 $('div .cls').click(function () { alert("div p tag click") }); */ > 의 개념 // div태그 안에 존재하는 모든 p(자식 + 자손) $('div p).click(function () { alert("div p tag click") }); // div태그 바로 밑에 존재하는 자식 태그(..
1> JQuery 시작하기 : 제이쿼리는 스크립트문에서 사용할 수 있다. JQuery를 사용 시 페이지를 먼저 로드한 후에 함수를 실행하는 방식과, 함수부터 불러오는 방식이 존재한다. 1 ) 페이지를 로드 후 함수 실행 $(document).ready(function func() { jquery 및 함수 작성 }); 2 ) 함수부터 실행 $(function() { }); 2 > 기본 함수 : JQuery는 함수로 데이터를 모으거나 설정한다. ** id / class / name id : js에서 데이터를 조작할 때 사용하는 고유한 속성, JQuery에서 #으로 표현 EX> $("#ptag").html( '안녕하세요' ); ---> '' 안의 문자열 설정하는 jquer..