Javascript – Memo

Error: 다음맵, 네이버지도, 구글맵 쥐똥만하게 나오거고 나머지 깨질때

원인
스크립트 로딩 순서 문제
이 지도들은 로딩타이밍에 다이내믹하게 지들 사이즈를 조정하는데

$(“~”).show()
뭐 이런식으로 스크립트로 안보이던걸 보이게 하거나
$(‘~’).(‘width: 100px’)대강 이런거 하면 발생

이런 상태에서 윈도우 크기를 변경 해 보면 스크립트 리로딩되면서 지도가 제대로 표시된다.

해결
1 미리 사이즈를 설정 해 놓는다.
또는
2 사이즈 조절 후 지도를 로딩한다

JavaScript 주소 가져오기

Javascript에서 기본 오브젝트 정보를 가져올 때는 DOM구조를 타고 내려가는게 중요한데

location.href 라고 쓰는것은

window.document.location.href 와 동일하다.

예) http://memo.polypia.net/archives/2183

location.href  http://memo.polypia.net/archives/2183
        .host  memo.polypia.net
        .protocol  http:
        .pathname  /archives/2183

예) http://memo.polypia.net/archives/2183

location.href http://memo.polypia.net/archives/2183

.host memo.polypia.net

.protocol http:

.pathname /archives/2183

요즘은 디버거가 잘 되어 있어서 location만 치면 객체구조를 확인가능하다.

2014 Web UI(JS,CSS) 프레임워크Framework & 라이브러리Library

최근 트렌드로 제시되고 있는놈들하고 기존 사용되던놈들…
여기없거나 설명이 매우 적은것들은 아주최신이라 서비스로 쓰기 좀 안좋을정도거나
오래되서 사용하지않는것들일 가능성이 높음.

PrimeFaces
게시판이나 이런거 등등 다양한 UI제공

Homepage

ICEFaces
PRIME이랑 비슷한것?
http://www.icesoft.org/java/projects/ICEfaces/overview.jsf

RichFaces
Prime이랑 비슷한것역시..
http://www.jboss.org/richfaces

jQuery thermeroller
아코디언모양 메뉴
http://jqueryui.com/themeroller/

960-Grid-System
twitter 직원이 만든듯 싶다. 포토샵이랑 fireworkd에 설치해서 쓰는 템플릿?
대강 이렇게 만들어놓은건 파이어웍스에서 CSS를 자동생성해주는 기능이 아닐까 하는 느낌
http://code.tutsplus.com/tutorials/which-css-grid-framework-should-you-use-for-web-design–net-25
http://960.gs/

AngularJS
구글에서 나온 JS프레임워크
http://angularjs.org/
지원사이트 : http://angular-ui.github.io/
모듈모음 : http://ngmodules.org/
예제 : https://github.com/angular/angular.js/wiki/JsFiddle-Examples
Bootstrap연동 : http://angular-ui.github.io/
Tstacular JS 테스팅프레임웍 : http://testacular.github.io/
AngularJS 팁 : http://deansofer.com/posts/view/14/AngularJs-Tips-and-Tricks-UPDATED
한국유저그룹 : http://angularjs.co.kr/
페이스북그룹 : https://www.facebook.com/login.php?next=https%3A%2F%2Fwww.facebook.com%2Fgroups%2FKorea.AngularJS.User.Group%2F

Backbone.js
https://github.com/jeromegn/Backbone.localStorage
언더스코어 : http://underscorejs.org/
튜토리얼 : http://backbonetutorials.com/
관계형모델 : http://backbonerelational.org/
페이징 : https://github.com/backbone-paginator/backbone-pageable
폼생성 : https://github.com/powmedia/backbone-forms
Mustache템플릿엔진 : http://mustache.github.io/
Bootstrap연동GRID : http://direct-fuel-injection.github.io/bbGrid/
Backbone.js기반 프로젝트 시드 : https://github.com/backbone-boilerplate/backbone-boilerplate
Backbone.js기반 MVC프레임웍 : http://chaplinjs.org/

Prototype

jQuery
다른것들 쓰는데 jQuery만 빼놓을수 없어서…
UI : https://jqueryui.com/
kendoui라던가 뭐 이래저래 jquery기반으로 만들어진 유료라이브러리도 꽤 된다. 역사도 오래되서 버그도 많이없고… 또 익숙하고. SI에 특히 유용.(유지보수관점)

Bootstrap
요즘 거의 대세인 웹디자인 템플릿
http://getbootstrap.com/
템플릿 : https://wrapbootstrap.com/
예제제작도구 : http://bootsnipp.com/
한글사이트 : http://webdesigncss3.com/bootstrap/
적용사례 : http://builtwithbootstrap.com/
테마 : https://wrapbootstrap.com/
테마 : http://www.templatemonster.com/properties/features/bootstrap-templates/
테마 : http://themeforest.net/search?term=bootstrap
테마제작도구 : http://stylebootstrap.info/

blueprint
CSS프레임워크
http://blueprintcss.org/

Foundation
http://foundation.zurb.com

Skeleton
http://getskeleton.com

HTML KickStart
http://99lime.com

HTML5 BoilerPlate
http://html5boilerplate.com

Initializr
http://www.initializr.com

GLYPHICONS
아이콘 사이트.유료무료
http://glyphicons.com/
http://glyphicons.getbootstrap.com/

JavaScript – 이벤트 발생후 화면 다시 로딩

alert("확인되었습니다.");
window.location.reload();

1 2	alert("확인되었습니다."); window.location.reload();

그냥 이렇게 써놓으면 된다.

확인 후 재시작… ajax같은거 사용후에 적용해놓으면 좋다.

상황에 따라 재로딩을 하는 방식이 달라져야한다.

ajax로 추가되는 리스트인 경우는…. 다른방법인데 지금은 생각이 안난다.

JQuery multiple id selector

$("#divNo1,#divNo2").click(function(){
  alert("됐다");
}

$("#divNo1,#divNo2").click(function(){

alert("됐다");

}

Jquery를 이용한 ajax에서 파라미터가 [](배열) 인 경우 파라미터 보내는 방법

http://blog.anyframejava.org/?p=344
요기보고 해결…

자바스크립트 코드

//삭제버튼 클릭
function deleteButtonOnClick()
{
    // deleteCheckBoxClass라는 클래스명을 가진 체크박스중 체크된 체크박스 확인
    var checkedValues = $('.deleteCheckBoxClass:checked').map(function () {
        return this.value;
    }).get();

//배열의 널체크는 이런식으로 해야됨..[0]번값
	if (!checkedValues[0])
	{
		alert('체크박스를 선택하고 클릭하거라');
		return;
	}

	if (confirm('선택한 값을 지울까?'))
	{
        var param =
        {
            topicIds : checkedValues
        };
//요 부분이 핵심...
        jQuery.ajaxSettings.traditional = true;
        $.post("./ajax/delete.ajax", param, successFunction).error(failureFunction);
	}
}

//삭제버튼 클릭

function deleteButtonOnClick()

{

// deleteCheckBoxClass라는 클래스명을 가진 체크박스중 체크된 체크박스 확인

var checkedValues = $('.deleteCheckBoxClass:checked').map(function () {

return this.value;

}).get();

//배열의 널체크는 이런식으로 해야됨..[0]번값

if (!checkedValues[0])

{

alert('체크박스를 선택하고 클릭하거라');

return;

}

if (confirm('선택한 값을 지울까?'))

{

var param =

{

topicIds : checkedValues

};

//요 부분이 핵심...

jQuery.ajaxSettings.traditional = true;

$.post("./ajax/delete.ajax", param, successFunction).error(failureFunction);

}

저 핵심부분이 빠지면 컨트롤러에 값이 제대로 전달되지 않는다. 트래디셔널이라고 하는거 보면 새로운 방법이 뭔가 나온모양인데 잘 모르겠다.

BootStrap 빠르고 간편하고 간지나는 홈페이지 제작

개발자의 고충

디자이너는 너무 비싸다.

의사소통도 힘들다.

직접 디자인을 하면… 촌스럽다.

그래서 이런 불편을 해소해주는 프레임워크? 부트스트랩

http://twitter.github.com/bootstrap/

트위터의 개발자가 만든것으로 디자인을 간편하게 할 수 있도록 도와준다. 네비게이션메뉴, 버튼디자인 등을 간편하게 해 준다. jquery로 노가다 떡칠을 해야 겨우 만들 수 있던 것을 무려 apache 라이센스로 풀어주셨다. 글로벌 회사라면 이정도는 되야하는건가? 요즘 컴퓨터쪽 오픈소스 최신기술 나오는거 보면 요즘 잘나가는 회사들이다. 애플만 없는건가

부트스트랩도 그냥 막 편하기만 한 것은 아니다. 메뉴명이나 클래스명을 좀 알고 있어야 하기 때문에 시행착오도 있고 익히는데 시간이 좀 걸린다. 그래도 오픈소스 개바자들이 관련 툴들을 많이 배포해주니 편하게 감사하게 사용하자. 시간이 되면 자신이 만든것도 공유하고~

1번. 폼 배치하기 – 회원가입 폼 같은거… 굉장한 노가단데… 여기가서 마우스로 클릭클릭하면 쓸 수 있다.

http://bootstrap-forms.heroku.com/#

2번. 부트스트랩용 버튼들

http://charliepark.org/bootstrap_buttons/

http://www.plugolabs.com/twitter-bootstrap-button-generator/