1. JavaScript란?
1) 개요
자바 스크립트는 넷스케이프라 불리우던 10여년도 전에 웹 브라우저를 위해 나온 언어입니다.
쉬운 사용법과 예제들이 많이 널려있어 익히기도 용이하죠. 자바 스크립트니까 자바와 많이 유사하냐구요?
객체지향이라는 점에서는 그 궤도가 같지만, 사용 문법과 같은 점에서는 많이 다릅니다.
2) 예제
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<!-- JAVA_SCRIPT PRINT -->
<script>
document.write("Hello JavaScript!");
</script>
<!-- FUNCTION -->
<script>
function clickFunction1(){
alert('You Click Button');
}
function clickFunction2(){
var x = 12;
var y = 5;
var result = x + y;
alert(result);
}
</script>
<!-- CLICK_EVENT -->
<form>
<input type="button" value="Click!" onClick="clickFunction1()">
</form>
<form>
<input type="button" value="Click!" onClick="clickFunction2()">
</form>
</body>
</html>
2. jQuery란?
1) 개요
Java Script의 주요한 함수들을 모아놓은 라이브러리가 바로 jQuery입니다. 사용 시에는 $를 통해 호출한다는
점이 특이점인데요. JavaScript 외에도 CSS를 조작할 수 있기 때문에 다방면에서 사랑받는 라이브러리입니다.
2) 사용방법
홈페이지가 업데이트에 따라 변경되는 경우가 많아 설명과 부합할 수 있습니다. 이 점 유념해주세요.
2.1) http://jquery.com/ 에 접속
2.2) 왼쪽 상단에 Download 클릭
2.3) jQuery2.x 부분에서 두 가지 버젼중 하나를 선택하시면 됩니다.
하나는 compressed 버젼이고, 또 다른 하나는 uncompressed 버젼입니다. 영어만 봐도 감이 오시죠.
압축된 버젼은 실제 구현을 한 뒤, 릴리즈하기 위한 목적의 작은 용량 버젼입니다. 반대로 압축이 안 된
버젼은 개발자가 보기 편하게 잘 정리 된 버젼이죠. 압축 된 버젼을 보시면 한줄로 길게 연결 된 코드를
확인하시게 될 겁니다. 보기만 해도 아찔하죠...
2.4) 다운로드 하실 때에는 오른쪽을 눌러서 '다른 이름으로 저장하기'를 선택하시면 됩니다.
3) 예제
<!DOCTYPE html>
<html>
<head>
<script src="jquery-2.0.3.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>
3. AJAX란?
1) 개요
AJAX란 Asynchronous JavaScript and XML의 약자입니다.
웹 페이지를 리로딩 하지 않고도 페이지를 변환할 수 있다는 점이 큰 장점입니다. 왜냐
서버로 데이터를 전송하고 받아오는 과정을 줄일 수 있고, 데이터양도 대폭 줄어들기 때문에
사용자가 받아 보는 시간을 줄일 수 있죠. 요즘처럼 속도가 생명인 웹 브라우저에서는 큰 장점
입니다.
다만 AJAX를 쓸 수 없는 브라우저에서는 문제가 발생할 수도 있고, 페이지에 이동이
없이 통신이 가능하기에 보안측면에서 조금의 약합니다.
그러나 최근엔 활용성이 높아지면서 약점이 많이 보완되고 있고, 약점을 충분히 커버하는 장점
덕분에 최근 대세로 떠오르는 웹 브라우저 개발 방법입니다.
'프론트엔드 > Java Script, jQuery, AJAX' 카테고리의 다른 글
| JavaScript 함수 호출과 매개변수를 이용한 Input 초기화 방법 (0) | 2013.12.18 |
|---|---|
| JavaScript Object 객체 활용법 (0) | 2013.12.18 |
| Javascript Validation Check - input Field Check (0) | 2013.12.18 |
| jQuery Button 예제 (0) | 2013.10.15 |
| Java Script 공부하기 좋은 곳 (0) | 2013.05.25 |
WRITTEN BY
