name 속성값이 user_name인 element를 모두 찾아 내용을 출력
var element = $('div[name="user_name"]');
var size = element.length;
for(i=0;i<size;i++){
console.log(element.eq(i).html());
}
| jquery 부모, 자식, 노드 찾기 (0) | 2015.12.09 |
|---|---|
| javascript에서 callback메서드 이용하기 (0) | 2015.01.25 |
| javascript 변수 선언할 땐 var 좀 써주시면 안될까요... (0) | 2015.01.25 |
$(this).parent(); - 부모
$(this).children(); - 자식
$(this).prev(); - 전노드
$(this).next(); - 다음노드
| jquey 속성값에 만족하는 element 모두 찾기 (0) | 2015.12.09 |
|---|---|
| javascript에서 callback메서드 이용하기 (0) | 2015.01.25 |
| javascript 변수 선언할 땐 var 좀 써주시면 안될까요... (0) | 2015.01.25 |
1. nodejs설치
https://nodejs.org <-- 여기에서 설치한다.
최근에는 환경변수를 따로 수정할 필요없이 설치할때 다 집어 넣어준다. 그냥 설치할 위치를 지정하고 설치고고
참고로 LTS(Long Term Support)란 장기지원버전이라는 뜻이다. 이 LTS는 새로운 버전이 나올때마다 늘 업데이트를 할수없는 이용자들을 위해 필요한 배포판으로 한버전을 오래 이용하더라도 보안같은 안정성을 보장받을 수 있는것이다.
2. nodejs의 기본 명령어
npm init 명령어는 node 프로그램을 시작(initialize)하는 명령어로 package.json 파일을 생성을 돕는다.
package.json 파일은 해당 node 프로그램에 대한 기본 정보를 담고 있는 파일로 nodejs의 프로젝트를 만들때 이용한다.
처음에 만들때 괄호가 있는 부분은 알아서 엔터치면 그괄호내용이 입력되고 괄호가 없는것은 빈""이 입력되거나 항목이 입력되지 않는다.
나중에 직접타이핑하여 수정할 수 있으므로 처음 시작할때부터 세세히 작성할 필요는 없다.
설치 - 모듈을 해당위치의 node_modules폴더에 설치하고 소스 안에서 require해서 사용
npm install module_name
설치 (dependency) - 모듈이 pakage.json에 등록됨
npm install module_name --save
설치 (Global) - 모듈을 전역에 설치해서 쉘에서 사용
npm install -g module_name
제거 - 모듈을 제거
npm uninstall module_name
업데이트 - 모듈을 최신 버전으로 업데이트
npm update module_name
1. Parallax Scrolling이란?
애니메이션이나 게임에서 사용되는 기법으로 우리가 보고 있는 화면을 구성하는 배경이미지와 다른 이미지들간의 움직임이나 동작 시간을 다르게 주어 스크롤이 될 수 있도록 하는 표현 기법이다. Parallax Scrolling을 이용하면 보는 위치에 따라 물체의 위치나 방향의 차이로 인해 사용자에게 역동적인 느낌의 웹사이트를 제공할 뿐만 아니라 3D입체적인 느낌의 웹사이트까지도 제공 가능해졌다.
주로 기업같은 곳의 프로모션 웹페이지의 경우 사용자의 시선을 유도하거나 호기심 유발 등과 같은 효과를 위해 주로 많이 사용하고 있다. 그래서 신제품이나 기업 광고에 만화나 글귀로 스토리텔링을 이용하여 구성을 하는 곳도 있고 또는 화려한 효과를 통해 보는 이들의 시선을 사로잡는 내용을 많이 보인다.
Parallax Scrolling을 사용할 때 가장 큰 장점은 페이지 컨텐츠를 많이 소비하지 않는다. 또 사용자의 시선을 원하는 방향으로 유도시키기 좋으며 흥미를 끌기에 매우 좋다. 하지만 페이지를 구성할때 많은 리소스가 필요한 경우 초기 로딩속도가 느릴 수 있다는 단점이 있고 화면을 구성하고 디자인하기가 굉장히 까다로운 편이다.
마지막으로 너무 창의적인 디자인을 선호하려고 하다가 기본을 잃지 말자. 용도나 환경에 따라 조율을 잘한다면 굉장히 좋은 디자인인것은 확실하다!!
2. Parallax Scrolling 예제 사이트
http://shibui.me/web/scroll/index.html
http://graphicnovel-hybrid4.peugeot.com/start.html
구현을 편하게해주는 라이브러리 : https://github.com/Prinzhorn/skrollr
| sublime text 함수이름 쉽게 찾아가기 (0) | 2015.05.18 |
|---|---|
| web eye tracking pattern - 웹이용시 눈움직임 패턴 (0) | 2014.04.20 |
사용자가 입력하거나 선택할 수 있는 정보는 아니지만 form을 전송할 때 같이 보내주어야 하는 정보를 담을 때 히든 필드(Hidden Field)를 사용합니다. 한가지 예를 들자면 form 사용시 사용자의 아이피를 받아아야 할 경우 히든필드에 넣어서 form을 전송합니다.
<input type="hidden" name="UserIP" value="<?echo $REMOTE_ADDR?>">
<?echo $REMOTE_ADDR?>는 php에서 ip를 가져오는 코드 입니다.
히든필드는 화면에 출력되지 않아 보여주어야하는 form의 형태에는 전혀 영향을 미치지 않지만 분명 값은 존재하고 form을 전송할때 같이전송됩니다. 그래서 자주 이용되는 field기 때문에 기억하고 있다가 활용하는 것이 좋습니다.
| css로 input과 a style 뒤바꾸기 (0) | 2014.07.24 |
|---|---|
| 파비콘 넣기 (0) | 2014.07.20 |
| rem은 무슨 단위 (0) | 2014.07.09 |
| HTML/CSS는 무엇인가? (0) | 2014.03.19 |
플러그인이나 키설정을 따로 할 필요없이 ctrl+r을 눌러 원하는 함수의 자료형과 이름을 치면 찾아준다.
| Parallax Scrolling !!! (0) | 2015.11.17 |
|---|---|
| web eye tracking pattern - 웹이용시 눈움직임 패턴 (0) | 2014.04.20 |
javascript도 객체지향언어이다. 즉, C++이나 Java에서 사용되는 콜백루팅을 구현할 수 있다.
Callback을 구현하여 사용하면 프로그램 동작중에 서브루틴이 외부에서 구현된 함수를 비동기적으로 호출이 가능해진다.
우선 Callback Event 객체를 만든다.
|
1
2
3 |
var CallbackEvent=function(){
this.callback_method;
}; |
cs |
그리고 여기선 Caller에서 메서드를 호출하게 Event를 등록하는 객체를 구현한다.
|
1
2
3
4
5
6 |
var EventRegister=function(event){
this.callbackEvent=event;
this.work=function(){
this.callbackEvent.method();
}
} |
cs |
이제 Callback을 호출하는 method를 구현하여 Event를 등록해보자
|
1
2
3
4
5
6
7
8
9
10
11 |
var EventApp=function(){
this.execution=function(){
var callbackEvent=new CallbackEvent();
callbackEvent.method=function(){
print('caller로 부터 호출됨');
}
var eventRegister=new EventRegister(callbackEvent);
eventRegister.work();
}
}; |
cs |
이제 사용해 볼 차례
|
1
2 |
var eventApp=new EventApp();
eventApp.execution(); |
cs |
이렇게하면 외부에서 구현된 Callback Method가 callee(피호출자)에서 caller(호출자)를 호출하게된다.
제작년에 공부한 내용이 메모장에 적혀있길래 간략히 사용법만 올려본다... 문법은 다르지만 java에서도 이러한 패턴으로 구현하면 된다.
| jquey 속성값에 만족하는 element 모두 찾기 (0) | 2015.12.09 |
|---|---|
| jquery 부모, 자식, 노드 찾기 (0) | 2015.12.09 |
| javascript 변수 선언할 땐 var 좀 써주시면 안될까요... (0) | 2015.01.25 |
그냥 단순히 팝업을 띄우는 javascript 코드를 짜달라고 부탁했다. 그리고 다됏다길래 ctrl+cv 하고 사용하자마자 값이 이상해지기시작...
알고보니 변수 선언을 var로 하지 않고 바로 썻다...(라임이 맞네?ㅋㅋ)
var로 변수 선언을 하지 않을 경우 scope rule을 따르지 않고 암시적으로 global variable이 되어버리는 문제를 간과한 경우라고 볼 수 있다.
변수 선언시 꼭 var를 사용하도록 하자!
이를 제한하는 방법이 한가지 있는데 "use strict"; 이라는 키워드이다. 이는 EXMAScript 5에 추가되었던 기능으로 strict mode 사용시 폐지예정의 기능이나 권장되지 않는 기법의 동작에서 에러 또는 예외가 발생합니다.
그래서 "use strict";를 키워드를 명시하고 var없이 변수선언하면 에러가 발생합니다. 그리고 "use strict";는 scope rule을 따르기 때문에 지역 선언시 해당하는 scope에서만 "use strict"; 규칙이 적용됩니다.
| jquey 속성값에 만족하는 element 모두 찾기 (0) | 2015.12.09 |
|---|---|
| jquery 부모, 자식, 노드 찾기 (0) | 2015.12.09 |
| javascript에서 callback메서드 이용하기 (0) | 2015.01.25 |
<?
function stringCut($str,$length){
$result="";
if(strlen($str)>length){ //strlen함수로 문자열을 구해 자를 길이와 비교
$result = substr($str,0,$length-1); //substr함수로 지정된 길이만큼 문자열을 자릅니다.
$result=$result."..."; //잘려진 문자열 끝에 "..." 붙입니다.
}else{
$result=$str; //문자열길이가 $length값 이하일 경우 그대로...
}
return $result;
}
$str="1234567890";
echo $str."\n";
$str=stringCut($str,8);
echo $str."\n";
?>
찍힌 값을 확인해보면
1234567890
12345678...
| utf-8 euc-kr 문자열 변환문제 (0) | 2014.06.24 |
|---|
<!DOCTYPE html>
<body>
| form 요소의 hidden type field (0) | 2015.06.06 |
|---|---|
| 파비콘 넣기 (0) | 2014.07.20 |
| rem은 무슨 단위 (0) | 2014.07.09 |
| HTML/CSS는 무엇인가? (0) | 2014.03.19 |
|
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | |||
| 5 | 6 | 7 | 8 | 9 | 10 | 11 |
| 12 | 13 | 14 | 15 | 16 | 17 | 18 |
| 19 | 20 | 21 | 22 | 23 | 24 | 25 |
| 26 | 27 | 28 | 29 | 30 | 31 |
