본문 바로가기

Web108

화면을 동적으로 꾸며보자 !!! Javascript Animation Library mojs 소개 유용하게 사용할 수 있을 것 같은자바스크립트 애니메이션 라이브러리를 소개해 드려요.보통 웹페이지를 만들 때 동적인 view를 컨트롤하기란 쉽지 않은데그럴 때 사용해도 참 좋을 것 같은 동적뷰를 위한 라이브러리!! 사이트는 여기에요.http://mojs.io/ 튜토리얼과 예제들이 너무 잘 나와있어서따로 설명드릴 것은 없을 것 같아요.사실 필자도 아직 사용해보지 않았어요. 포스팅 하고 천천히 사용해볼 예정! 사용법은 다음과 같이 js를 다운로드 후 참조시키고 저렇게 선언하여 사용하면 되는 것 같네요. 점점 커지는 동그라미부터 이거는 한 글자, 한 글자 통통 튀면서l o v e 가 그려져요.아래 동영상처럼 진행사항을 알려주는 바(Bar) 보이시나요?이건 캡쳐사진이라 구현동작을 보여드릴 순 없겠네요. 직접 사이.. 2016. 10. 24.
[Javascript] JSON sample data / 제이슨 샘플 데이터 JSON 샘플 data들을 모아보았다. 테스트할때 유용하게 사용하자. {"markers": [ { "point":new GLatLng(40.266044,-74.718479), "homeTeam":"Lawrence Library", "awayTeam":"LUGip", "markerImage":"images/red.png", "information": "Linux users group meets second Wednesday of each month.", "fixture":"Wednesday 7pm", "capacity":"", "previousScore":"" }, { "point":new GLatLng(40.211600,-74.695702), "homeTeam":"Hamilton Library", "aw.. 2016. 10. 20.
[Javascript] JSON 개념 잡자! / JSON.parse(), JSON.stringify() JSON이란? JSON이란 Javascript Object Notation의 줄인 말로 쉽게 보면 데이터를 표시하는 포맷이라고 생각하면 쉽다. 자바스크립트 언어로부터 파생되어 자바스크립트 구문의 형식을 따르지만 독립적인 데이터형 포맷이기 때문에 C, C++, 자바, 파이썬 등 다양한 프로그래밍 언어에서 JSON을 활용할 수 있다. JSON은 key : value 형식으로 포맷이 정해져 있으며 주로 비동기 브라우저/서버통신을 위해 사용된다.(Ajax를 통한 데이터 교환의 데이터 포멧으로 사용됨) 항상 큰 따옴표인 “ 로 묶어서 사용한다. 따라서 DATA 값에서 역슬래시(\)와 큰 따옴표(“)는 JSON DATA 인식문제로 사용할 수 없다. \b 백스페이스\f 폼 피드\n 개행\r 캐리지 리턴\t 탭\" 따.. 2016. 10. 20.
[Javascript] javascript uuid / 자바스크립트 UUID 생성 / 랜덤아이디 생성 generateUUID: function () { var d = new Date().getTime(); var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) { var r = (d + Math.random()*16)%16 | 0; d = Math.floor(d/16); return (c=='x' ? r : (r&0x7|0x8)).toString(16); }); return uuid; 2016. 10. 14.
[AngularJS 시작-3] JAVASCRIPT FRAMEWORK / Filters 3.8 예제(8) _ Filters 추가 1. uppercase, lowercase 대소문자 변환| 필터 파이프 문자를 사용하여 식에 더해 줄 수 있다. The name is {{ lastName | uppercase }} 2. orderBy 데이터 정렬 Looping with objects: {{ x.name + ', ' + x.country }} Looping with objects:Joe, DenmarkBirgit, DenmarkMargareth, EnglandMary, EnglandJani, NorwayHege, NorwayKai, NorwayCarl, SwedenGustav, Sweden3. filter 특정 문자가 들어간 데이터 추출‘i’ 가 속한 데이터만 추출해준다. {{ x }} 4. te.. 2016. 10. 7.
[AngularJS 시작-2] JAVASCRIPT FRAMEWORK / 비동기통신 $HTTP ajax 통신을 이용해 controller를 호출하여 (비즈니스 로직)데이터를 주고받고, 화면에 그려보는걸 해본다. AngularJs에서는 ajax를 대신해 앵귤러의 내장객체인 $http를 사용하여 백그라운드 데이터 통신을 구현할 수 있다. $http는 jQuery와 상당히 유사한 구조를 가지고 있기에ajax를 많이 사용해본 사람이면 쉽게 이해할 수 있다. 화면단 소스는 다음과 같다.controller는 뷰와 데이터 모델 사이를 연결해주는 작업을 수행해준다.$scope와 $http를 controller에 인젝션하여 사용한다. load item list {{item.ITEM}} {{item.PRICE}} controller에서는 response로 줄 test data를 생성했다.일반적으로 service,d.. 2016. 10. 7.

티스토리툴바