/**
 *	1차 함수
 *	@param x, a, b, c, d - x가 a에서 b까지 변할 때 타겟은 c부터 d까지 변한다.
 *	@return y 타겟 값
 */
function linearFunc(x, a, b, c, d){
	var y = (d-c)/(b-a)*(x-a)+c;
	return y;
}
Posted by august5pm
,
document.write(window.location.hash);
document.write(window.location.pathname);
document.write(window.location.hostname);
document.write(window.location.href);



예제 도메인) http://www.example.com:8080/search?q=devmo#test



1. Properties


 Property

 Description 

 Example 

 hash

 주소값에 붙어있는 anchor값 반환

 #test

 host

 URL의 도메인과 포트 반환

 www.example.com:8080

 hostname

 URL의 도메인 반환

 www.example.com

 href

 URL 반환

 http://www.example.com:8080/search?q=devmo#test

 origin

 프로토콜 + URL의 도메인 + 포트

 http://www.example.com:8080

 pathname

 URL 경로 반환

 /search

 port

 서버포트 반환

 8080

 protocol

 프로토콜 반환

 http:

 search

 URL에 붙은 매개변수 반환(물음표 뒤의 값)

 ?q=devmo



2. Methods


 Method

 Description 

 assign(url)

 새로운 주소 이동

 reload(forceget)

 현재 페이지 새로고침

 replace(url)

 새로운 주소 이동 (세션 히스토리가 남지 않기 때문에 back 버튼으로 이동 불가) 



예제 1) 새 페이지로 이동하기


window.location.assign("http://www.example.com"); // or
window.location = "http://www.example.com";



예제 2) 현재 페이지 새로고침


window.location.reload(true);



예제 3) replace()를 사용하여 새 페이지로 이동하기


function reloadPageWithHash() {
  var initialPage = window.location.pathname;
  window.location.replace('http://example.com/#' + initialPage);
}


'프로그래밍 > javascript' 카테고리의 다른 글

[javascript] 10의 자리 체크  (0) 2016.11.17
[javascript] 1차 방정식  (0) 2016.11.17
[javascript] 1차 함수  (0) 2016.11.17
[javascript] HTML 에서 파라미터 가져오기  (0) 2015.02.03
[javascript] D-Day 구하기  (0) 2015.01.28
Posted by august5pm
,


(이미지출처 - 한빛미디어 :  http://www.hanb.co.kr/)

 








오랜만에 목차만 보고 설레이는 책이 생겼다. 바로 [인사이드 자바스크립트]. 플래시에서 액션스크립트라는 언어로 화면의 오브젝트를 움직이는 것을 보고 신기한 모습에 반하여 액션스크립터로 웹쪽에 뛰어들었다. 그러나 그 재미도 잠시. 사실 고인이 되신 스티브잡스가 IOS에서 플래시를 배제시켰을 때만 해도 이렇게나 빨리 웹쪽에서 사라질 것이라고는 생각도 못했었다. 플래시의 대항마로 HTML5가 거론 되었고, 웹의 프론트 단을 동적으로 생성하며, 플래시와 비슷한 인터랙션을 주기 위해서는 자바스크립트가 필요하다는 것을 알게되어 그 때부터 조금씩 공부하기 시작했다. 다행이도 자바스크립트의 첫 느낌은 플래시 액션스크립트 2.0과 비슷하다는 느낌이어서 어렵지 않게 다가갈 수 있을 것 같았다. 그러나 깊게 들어 갈 수록 다름이 느껴졌고, 더이상 눈내리게 하거나 글씨를 번쩍이게 하는 곳에 쓰이는 언어가 아님을 알 수 있었다. 그리고 현재 Node.js를 통해 서버까지 구성할 수 있는 자바스크립트의 능력에 놀라지 않을 수 없었다.

 

플래시 프로젝트가 줄면서 반대로 자바스크립트로 프론트 단을 구성하는 프로젝트가 조금 씩 늘어나는 상황에 자바스크립트에 대한 기본 개념이 담긴 책이 필요해서 선택하게 된 것이 [더글라스 크락포드의 자바스크립트 핵심 가이드] 이다. 내용이 좋다는 이야기를 많이 들어서 선택하게 되었는데 기본 개념이 부족했던 나에게는 내용이 사실 조금 어려웠다. 그래도 그 책의 도움을 받아 자바스크립트의 코딩 기법을 많이 배울 수 있었고, 실제 프로젝트에 적용하려고 노력을 많이 했다. 자바스크립트로 여러 건의 프로젝트를 진행해 온 지금에서도 기본을 제대로 알고 싶다는 마음이 어딘가에 항상 자리잡고 있었다. 그러던 중 [인사이드 자바스크립트]라는 책을 알게 되었고, 책 소개 글과 목차를 보고서 내게 꼭 필요한 책이라는 생각에 너무나 설레였었다.

 

우선 이 책은 보통 다른 책들과 마찬가지로 자바스크립트의 소개, 개발 환경등으로 시작 한다. 그리고 반갑게도 hello javascript로 예문을 시작한다. 어떤 언어를 시작 하던 hello를 처음 찍어 냈을 때의 그 희열감이란 알만한 사람들은 다 알 것이다. 그 예문 자체는 정말 기초적인 것이지만 내가 바라던 출발선부터 시작한다는 느낌에 그냥 반가웠던 것 같다. 그리고 한장 한장 넘겨가면서 자신도 모르게 고개를 끄덕이며 '아...그렇구나', '이래서 이렇게 쓰는거구나' 라는 말들을 반복해서 내뱉었던 것 같다.

 

이 책의 장점으로는

 


첫째, 쉬운 개념 정리


내 회사 책꽂이에는 자바스크립트 관련된 책들이 여러 권 있다. 그 책들을 읽으면서 이해가 가지 않는 부분들도 많았었는데, 이 책을 읽으면서 가장 처음 들었던 느낌은 그 책들에 비해서 내용이 쉽다는 것이다. 덕분에 몇 장 읽어보고 내용이 어렵다는 핑계로 책장을 다시 덮어서 모셔두는 일은 없었다. 부끄러운 일이지만 내용이 어려운 책들에는 손이 자주 가지 않는 것이 사실이다. 그러한 책들은 책꽂이에서 오래 잠들어 있는 경우가 많은데 이 책은 옆에 두고 궁금한 내용을 찾아보거나 처음부터 쭈욱 개념을 훑기에 좋았다.

 

 

둘째, 그림 및 표가 많이 삽입되어 있다.


어쩌면 첫번째 내용을 뒷 받침 하는 것일 수도 있다. 글만 잔뜩 있기 보다는 그림들을 많이 곁들여서 내용을 좀 더 쉽게 이해할 수 있도록 도움을 주고 있다.

 

 

셋째, 기본에 충실함


프로젝트를 진행하다 보면 잘 모르는 부분에 대해서는 검색을 통하여 구현을 하곤 한다. 하지만 그 부분을 '왜' 그렇게 처리해야 하는 것인지에 대해서는 모를 때도 종종 있다. 그럴 때면 기본 개념과 원리에 대한 갈망이 더욱 커지곤 했다. 이 책을 읽으면서 위에서도 한번 언급 했듯이 '아...그렇구나', '이래서 이렇게 쓰는거구나' 라는 말들을 자주 내 뱉었던 것 같다. 그만큼 기본 개념에 대한 정리가 잘 되어 있다고 생각된다.

 

 

액션스크립트 3.0을 하던 사람으로써 내게는 자바스크립트에서도 객체와 상속이라는 개념이 항상 숙제였는데 이 책에서 말하고 있는 개념을 활용하여 앞으로 하나하나 적용해 볼 생각이다. 그리고 자바스크립트를 하면서 자주 사용하게 되는 라이브러리인 Jquery의 코드 분석에 대한 내용도 흥미로웠다. 어떤 것이든 알고 사용하는 것과 모르고 사용하는 것에는 큰 차이가 있다고 느끼기 때문이다.

 

이 책은 나 처럼 평소에 자바스크립트에 대한 기본 개념과 원리에 대해 궁금해 하거나 공부해 보려는 사람들에게 도움이 될 수 있는 책인 것 같다. 

Posted by august5pm
,


(이미지출처 - 한빛미디어 :  http://www.hanb.co.kr/)

 

스티브 잡스의 말 한마디로 HTML5의 유명세가 시작되지 않았나 생각합니다.

오래 된 이야기지만 애플에서 '플래시는 앞으로도 받아들이지 않을 것이며, HTML5로 충분히 대체가 가능하다' 라고 이야기를 하여 플래시 개발자로써 위기의식까지 느끼며 스티브 잡스의 영향력이 대단하구나 라는 것을 새삼 깨달을 수 있었습니다.

 

처음에는 HTML5로 인해서 웹에서의 플래시 영향력이 작아지지는 않을까 걱정도 되었지만 나중에는 걱정이 관심으로 바뀌면서 HTML5를 한번 공부해 보고 싶다는 생각이 들었습니다. 플래시와 HTML5를 잘 알면 서로의 장점들만 잘 활용할 수 있지 않을까 싶었습니다. 그러던 중 이번에 한빛미디어의 '한번에 배우는 HTML5 + 자바스크립트' 라는 책을 접하게 되었습니다.

 

우선 책의 표지는 하얀색 바탕의 깔끔한 디자인입니다. IT책도 디자인이 많이 예뻐졌구나 라는 생각이 들더군요.

 

이 책의 첫장은 HTML의 기본구조와 CSS, Javascript의 기본적인 사용법에 대하여 간단하게 설명함으로써 HTML, CSS, Javascript를 모르는 사람도 기본 개념을 익히고 시작할 수 있도록 구성되어 있습니다. 그리고 2장부터는 게임을 한개씩 만들어가면서 HTML5에 대한 개념을 익혀 나가도록 되어 있습니다.

 

이 책의 장점으로는

 

첫째, 코드에 색상이 입혀져 있어서 식별이 쉽고 가독성이 좋다 입니다.

둘째, 코드 한줄 한줄 마다 주석이 달려 있어서 해석이 쉬었습니다.

셋째, 실용적인 예제를 통해 게임을 만들면서 HTML5의 개념 이해 및 javascript의 프로그래밍 방법까지 배울 수 있어 좋았습니다.

 

오랜만에 액션스크립트 이외의 언어와 함께한 즐거운 시간이었습니다.

Posted by august5pm
,