본문 바로가기

Frontend57

19. JSON (JSON 기본구조, XML, JSON 관련함수) ○ JSON - JavaScript Object Notation - 비동기식 통신(문자단위 통신)에서 XML을 대체하는 포맷이다 - AJAX, NoSQL DB 등에서 주로 사용되는 포맷(표기법) - 배열을 객체화 ○ JSON 기본구조 - 속성:값 쌍으로 데이터가 구성되어 있다 - 속성(name, property, key), 값(value) - name구성시 " '기호는 생략가능하다 - {}안에 데이터를 저장한다 - 형식) {name:value, "name":value, 'name':value, ~~~} {driver:"OracleDriver", "username":"system", 'password':1234} ○ XML 문법 - 여는 태그와 닫는 태그로 구성 (반드시 둘 다 있음) - custom ta.. 2022. 6. 19.
08. jQuery, moment.js 오픈소스 (날짜 자동 생성, 아날로그 시계) ○ 오픈소스 인기 순위 - https://stats.js.org/ ○ moment.js - 자바스크립트의 내장객체 Date()의 복잡성을 단순, 다양하게 사용하기 위한 자바스크립트 기반 오픈소스 - 다운로드 링크 : https://momentjs.com - moment-with-locales.js 다운로드 (우클릭>다른 이름으로 링크 저장) - moment.js 오픈소스 ○ 날짜 데이터 자동 생성 - 예) 회원가입 시 생년월일 입력하는 드랍다운 목록 날짜 데이터 자동 생성 생년월일 : 년 월 일 ○ 아날로그 시계 만들기 - 참고 (시간 1=0.001초) ① setTimeout() : 일정한 시간 후에 작업을 한번 실행 (특정시간이후 한 번 실행) setTimeout('함수', 특정시간) ② setInte.. 2022. 6. 7.
07. jQuery, 요소 생성 (append, prepend) ○ 요소(element) 생성 - 요소(element) : HTML의 모든 태그 (참고 : CSS기본용어 ) - 요소를 생성하는 이유 ① 문자 단위의 통신에 많이 사용하기 때문(비동기식) → AJAX ② 댓글 더보기 등 무한 스크롤링하기 위해 - 요소를 생성 및 추가 ① 부모.append(자식), 자식.appendTo(부모) : 요소를 끝에 추가 ② 부모.prepend(자식), 자식.prependTo(부모): 요소를 앞에 추가 ○ 테이블 요소 생성하는 법 - 클릭했을 때 에 테이블 생성 요소 생성 테이블 생성 ① 문자열 이용 ② append(), prepend() 이용 2022. 6. 7.
06. jQuery, this & index ○ this - 선택한 요소 자신을 가리킴 - $(this) : jQuery에서 this객체 접근 버튼1 버튼2 ○ index - index() : 해당 요소의 인덱스 가져오기 버튼1 버튼2 ● PRACTICE 연습문제 Q) 각 버튼을 클릭했을 때, 해당 버튼의 정보를 에 출력하기 - : 해당 버튼 인덱스 - : 해당 버튼 배경색 - : 해당 버튼 글자 this 연습 멋진 핑크 쿨한 파랑 네온 녹색 클릭한 버튼정보 클릭한 버튼의 index : ? 클릭한 버튼의 뒷배경색 : ? 클릭한 버튼의 글자 : ? 2022. 6. 7.
05. jQuery, each반복문 ○ jQuery에서 기존요소 접근 vs 새로운 요소 생성 - $("html태그") : 에 있는 요소들 중에서 해당 요소에 접근 (기존 요소 찾기) - $("") : 에 새로운 해당 요소를 생성 $("li") // 에 있는 요소에 접근 $("") // 에 새로운 요소를 생성 ○ jQuery의 each반복문 - for( in ) {} 또는 for( : ) {} 과 동일한 결과 - 형식) $.each(배열, function(){ 실행할 코드 }); | $(배열).each(function(){ 실행할 코드 }); $("li").each(function(){//li안의 요소들을 처음부터 끝까지 하나씩 꺼내온다 var result=$(this).text(); }); ● PRACTICE 연습문제 Q) each 반복문.. 2022. 6. 7.
04. jQuery, css() 함수 / prop()와 attr() 함수 ○ css() - css() : jQuery에서 스타일 접근 함수 대한민국 - 형식 (jQuery에서는 대부분 getter와 setter함수 개념을 같이 사용) ① $(선택자).css(속성명); : getter 개념 ② $(선택자).css(속성명, 속성값); : setter 개념 ③ $(선택자).css({속성명:속성값, 속성명:속성값, 속성명:속성값, ... }); : 여러 개의 속성을 한꺼번에 세팅(JSON) 색상입력 크기얻기 여러개의 속성을 한번에 변경 ○ prop()와 attr() - 요소의 속성에 접근하는 함수 ( property → prop() / attribute → attr() ) - → 요소(element) - src, alt, title → 속성(attribute) title얻기 src변.. 2022. 6. 3.

티스토리툴바