Web/JavaScript

자바스크립트 - HTML AJAX

AJAX가 무엇이고 왜 필요한 가? AJAX는 Asynchronous Javascript and Xml의 약자로서 번역하면 비동기적 자바스크립트와 xml이 됩니다. 여기서 사용되는 비동기적 이라는 용어의 뜻은 AJAX의 동작이 웹페이지와 서버의 연결에 지장을 주지 않은 상태로 이루어 진다는 것을 의미합니다. AJAX는 다음과 같은 곳들에 사용됩니다. 1. 페이지가 로드된 후 웹 서버에서 데이터 읽기 2. 페이지를 다시 로드하지 않고 웹 페이지 업데이트 3. 백그라운드에서 웹 서버로 데이터 보내기 일반적으로 우리가 사용하는 http 프로토콜은 클라이언트 측에서 요청(Request)을 보내고 서버의 응답(Response)을 받으면 클라이언트측과 서버단의 연결이 끊어지도록 되어있습니다. 그렇기 때문에 클라이언..

자바스크립트 - HTML BOM

HTML BOM BOM은 Browser Object Model의 약자로서 웹브라우져를 제어하기 위해서 웹브라우져가 제공해주는 객체들을 의미합니다. 즉, BOM을 사용하면 웹브라우져를 제어할 수 있고 그 중간과정에서 자바스크립트를 사용합니다. 그렇기 때문에 우리는 자바스크립트 상에서 이 BOM을 사용함으로서 웹 브라우져의 여러동작들을 프로그래밍수준에서 제어할 수 있습니다. window 객체(window object) window 객체는 모든 브라우져에서 지원됩니다. 이 window 객체는 웹 브라우져의 창/프레임을 나타냅니다. 우리가 사용하는 모든 전역 자바스크립트 객체, 함수 그리고 변수는 자동으로 window 객체의 멤버가 됩니다. 예를들어서 전역변수는 window 객체의 속성이고, 함수는 window..

자바스크립트 - HTML DOM

javascript는 HTML DOM 이라는 개념을 통해서 html 문서 내에 존재하는 모든 tag에 접근하고 이를 변경할 수 있습니다. 따라서 이 DOM의 개념에 대해서 정확하게 이해하고 넘어가는 것은 대단히 중요 합니다. 문서객체모델(DOM - Document Object Model) html을 위한 Standard Object Model, Programming Interface html element에 어떻게 접근하고, 내용을 변경하고, 추가하고, 삭제하는 지에 대한 표준 html 문서의 전체적인 구조를 Object Tree의 형태로 표현한 모델 웹 페이지가 웹 브라우져를 통해서 로딩될 때, 브라우져는 해당 페이지에 대한 DOM을 생성하여 유지하게 된다. 그리고 이를 javascript와의 사용을 ..

자바스크립트 - Form

데이터 유효성 검사 데이터 유효성 검사는 페이지 양식을 서버로 제출하기 이전에 사용자 입력값이 정확하며 문제가 없음을 확인하는 절차로서 페이지가 정상적으로 동작하고 서버단에서 잘못된 데이터로 문제가 일어나는 것을 막기 위해서 반드시 필요한 절차 입니다. 물론 위의 문제를 예방하기 위해서 양식이 서버측으로 전달된 후에 서버측에서도 데이터 유효성 검사를 수행합니다. 하지만 서버로 잘못된 형식의 양식을 제출한 후에 서버에서 유효성 검사를 하는 것 보다는 웹 브라우져에서 유효성 검사를 수행한 후에 문제가 있을 경우 미리 양식제출을 차단하는 것이 바람직합니다. 웹 브라우져에서 유효성 검사가 이루어지기 때문에 이를 "클라이언트 측 유효성 검사"라고 표현하기도 합니다. 이번 글에서 다룰 내용은 자바스크립트를 이용해서..

자바스크립트 - 정규식(Regular Expressions)

정규식(Regular Expressions) 정규식은 검색패턴을 형성하는 일련의 문자를 말하는 것으로서 이 검색패턴은 문자열에서 특정 텍스트를 조회하거나 변경할 때 유용하게 사용할 수 있습니다. 정규식은 단일 문자이거나 더 복잡한 패턴일 수 있습니다. 자바스크립트에서 이 정규식 또한 객체로 분류 됩니다. 자바스크립트에서 사용하는 정규식은 다음의 형식을 가집니다. /pattern/modifiers; 정규식의 사용 자바스크립트에서 정규식은 문자열에 사용되는 메소드 search(), replace()와 함께 많이 사용됩니다. search()와 replace()가 동작하는 데 기본적으로 문자열에 대한 탐색이 진행되기 때문인데 여기에 정규식을 결합하면 보다 더 유연하고 융통성 있게 코드를 작성하는 것이 가능해 집..

자바스크립트 - 반복문, break, continue

자바스크립트에서도 반복해야할 작업들을 효율적으로 처리할 수 있는 반복문을 지원합니다. 반복문의 내용은 다른 프로그래밍 언어(C, C++, Java 등)에서의 내용과 거의 동일합니다. 그렇기 때문에 이번 글에서는 다른 프로그래밍 언어에서의 반복문과 자바스크립트에서의 반복문과의 구별되는 내용, 그리고 반복문과 깊은 관계를 가지는 break, continue 문에 대해서 다루도록 하겠습니다. For / In Loop 일반 for 문과 유사한 반복문이며, 객체의 속성을 반복할 때 유용하게 사용할 수 있습니다. var person = {fname:"John", lname:"Doe", age:25}; var text = ""; var x; for (x in person) { text += person[x]; } F..

자바스크립트 - Math 객체

우리는 프로그램을 작성할 때 수학적인 연산을 프로그램으로 구현해야하는 경우가 많습니다. 자바스크립트에서는 Math 객체를 사용하면 숫자에 대한 수학적 연산을 복잡한 구현없이 편리하게 수행할 수 있습니다. Math 객체에서 지원하는 메소드의 종류는 다음과 같습니다. 메소드(Method) 내용 Math.round(x) 입력된 x의 값을 가장 가까운 정수로 반올림 Math.pow(x, y) x의 값을 y의 거듭제곱으로 변환 (ex. Math.pow(8, 2) == 64) Math.sqrt(x) x의 제곱근을 반환 Math.abs(x) x의 절댓값을 반환 Math.ceil(x) x의 값을 올림 Math.floor(x) x의 값을 내림 Math.sin(x) 각도 x 만큼의 sin 값을 반환(radian 값) Ma..

자바스크립트 - 날짜 객체 (Date Object)

Date 객체 다음과 같이 자바스크립트에서 Date 객체를 사용하면 현재 시간정보를 사용할 수 있습니다. 기본적으로 자바스크립트는 웹브라우져의 시간대를 사용하고 날짜 전체 텍스트를 문자열로 표시합니다. var date = new Date(); 위의 코드처럼 Date객체를 이용해서 현재 시간정보를 가져오면 변수 객체 date에 현재 시간에 대한 정보가 다음의 형식으로 저장됩니다. Date 객체 생성 Date 객체는 new Date() 생성자를 이용해서 만들어 집니다. 새로운 날짜 객체를 만드는 방법에는 4가지가 있습니다. new Date() new Date(year, month, day, hours, minutes, seconds, milliseconds) new Date(milliseconds) new ..

자바스크립트 - 배열(Array)

배열(Array) 자바스크립트에서 배열은 다음과 같이 단일 변수에 여러개의 값을 저장할 때 사용합니다. var fruit = ["Apple", "Melon", "Banana"]; 배열은 한 번에 둘 이상의 값을 가질 수 있는 특수한 변수로서 많은 양의 값을 하나의 변수에 저장할 수 있고 인덱스를 바탕으로 배열에 저장된 값들에 접근할 수 있습니다. 배열을 만들기 배열을 만들때는 다음과 같은 구조로 코드를 작성합니다. var array_name = [item1, item2, ...]; 객체를 정의할 때와 마찬가지로 공백과 줄바꿈은 크게 중요하지 않으며 코드의 가독성을 높이기 위해 다음과 같이 작성해도 무방합니다. var array_name = [ item1, item2, item3 ]; 또한 다음과 같이 n..

자바스크립트 문자열(String)

문자열(String) 자바스크립트에서 문자열(String)은 따옴표 안에 쓰여진 0개 이상의 문자를 말합니다. 즉 자바스크립트에서는 "", ''도 모두 문자열에 해당합니다. 문자열과 따옴표 그리고 다음과 같이 문자열을 표현할 때에는 큰따옴표나 작은 따옴표를 사용할 수 있습니다. var fruitName1 = "Melon"; var fruitName2 = 'Melon'; 문자열을 둘러싼 따옴표와 서로 일치하지 않는다면 다음과 같이 문자열 안에 다른 종류의 따옴표를 사용할 수 있습니다. var str1 = "Hello World!"; var str2 = "Hello 'World'!"; var str3 = 'Hello "World"!'; 단, 다음과 같이 입력하는 경우 문자열을 제대로 인식하지 못하게 됩니다...