Web Basic/JavaScript
자바스크립트 - HTML AJAX
자바스크립트 - HTML AJAX
2020.07.31AJAX가 무엇이고 왜 필요한 가? AJAX는 Asynchronous Javascript and Xml의 약자로서 번역하면 비동기적 자바스크립트와 xml이 됩니다. 여기서 사용되는 비동기적 이라는 용어의 뜻은 AJAX의 동작이 웹페이지와 서버의 연결에 지장을 주지 않은 상태로 이루어 진다는 것을 의미합니다. AJAX는 다음과 같은 곳들에 사용됩니다. 1. 페이지가 로드된 후 웹 서버에서 데이터 읽기 2. 페이지를 다시 로드하지 않고 웹 페이지 업데이트 3. 백그라운드에서 웹 서버로 데이터 보내기 일반적으로 우리가 사용하는 http 프로토콜은 클라이언트 측에서 요청(Request)을 보내고 서버의 응답(Response)을 받으면 클라이언트측과 서버단의 연결이 끊어지도록 되어있습니다. 그렇기 때문에 클라이언..
자바스크립트 - HTML BOM
자바스크립트 - HTML BOM
2020.07.31HTML BOM BOM은 Browser Object Model의 약자로서 웹브라우져를 제어하기 위해서 웹브라우져가 제공해주는 객체들을 의미합니다. 즉, BOM을 사용하면 웹브라우져를 제어할 수 있고 그 중간과정에서 자바스크립트를 사용합니다. 그렇기 때문에 우리는 자바스크립트 상에서 이 BOM을 사용함으로서 웹 브라우져의 여러동작들을 프로그래밍수준에서 제어할 수 있습니다. window 객체(window object) window 객체는 모든 브라우져에서 지원됩니다. 이 window 객체는 웹 브라우져의 창/프레임을 나타냅니다. 우리가 사용하는 모든 전역 자바스크립트 객체, 함수 그리고 변수는 자동으로 window 객체의 멤버가 됩니다. 예를들어서 전역변수는 window 객체의 속성이고, 함수는 window..
자바스크립트 - HTML DOM
자바스크립트 - HTML DOM
2020.07.28javascript는 HTML DOM 이라는 개념을 통해서 html 문서 내에 존재하는 모든 tag에 접근하고 이를 변경할 수 있습니다. 따라서 이 DOM의 개념에 대해서 정확하게 이해하고 넘어가는 것은 대단히 중요 합니다. 문서객체모델(DOM - Document Object Model) html을 위한 Standard Object Model, Programming Interface html element에 어떻게 접근하고, 내용을 변경하고, 추가하고, 삭제하는 지에 대한 표준 html 문서의 전체적인 구조를 Object Tree의 형태로 표현한 모델 웹 페이지가 웹 브라우져를 통해서 로딩될 때, 브라우져는 해당 페이지에 대한 DOM을 생성하여 유지하게 된다. 그리고 이를 javascript와의 사용을 ..
자바스크립트 - Form
자바스크립트 - Form
2020.07.28데이터 유효성 검사 데이터 유효성 검사는 페이지 양식을 서버로 제출하기 이전에 사용자 입력값이 정확하며 문제가 없음을 확인하는 절차로서 페이지가 정상적으로 동작하고 서버단에서 잘못된 데이터로 문제가 일어나는 것을 막기 위해서 반드시 필요한 절차 입니다. 물론 위의 문제를 예방하기 위해서 양식이 서버측으로 전달된 후에 서버측에서도 데이터 유효성 검사를 수행합니다. 하지만 서버로 잘못된 형식의 양식을 제출한 후에 서버에서 유효성 검사를 하는 것 보다는 웹 브라우져에서 유효성 검사를 수행한 후에 문제가 있을 경우 미리 양식제출을 차단하는 것이 바람직합니다. 웹 브라우져에서 유효성 검사가 이루어지기 때문에 이를 "클라이언트 측 유효성 검사"라고 표현하기도 합니다. 이번 글에서 다룰 내용은 자바스크립트를 이용해서..
자바스크립트 - 정규식(Regular Expressions)
자바스크립트 - 정규식(Regular Expressions)
2020.07.28정규식(Regular Expressions) 정규식은 검색패턴을 형성하는 일련의 문자를 말하는 것으로서 이 검색패턴은 문자열에서 특정 텍스트를 조회하거나 변경할 때 유용하게 사용할 수 있습니다. 정규식은 단일 문자이거나 더 복잡한 패턴일 수 있습니다. 자바스크립트에서 이 정규식 또한 객체로 분류 됩니다. 자바스크립트에서 사용하는 정규식은 다음의 형식을 가집니다. /pattern/modifiers; 정규식의 사용 자바스크립트에서 정규식은 문자열에 사용되는 메소드 search(), replace()와 함께 많이 사용됩니다. search()와 replace()가 동작하는 데 기본적으로 문자열에 대한 탐색이 진행되기 때문인데 여기에 정규식을 결합하면 보다 더 유연하고 융통성 있게 코드를 작성하는 것이 가능해 집..
자바스크립트 - 반복문, break, continue
자바스크립트 - 반복문, break, continue
2020.07.28자바스크립트에서도 반복해야할 작업들을 효율적으로 처리할 수 있는 반복문을 지원합니다. 반복문의 내용은 다른 프로그래밍 언어(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 객체
2020.07.28우리는 프로그램을 작성할 때 수학적인 연산을 프로그램으로 구현해야하는 경우가 많습니다. 자바스크립트에서는 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 Object)
2020.07.28Date 객체 다음과 같이 자바스크립트에서 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)
2020.07.28배열(Array) 자바스크립트에서 배열은 다음과 같이 단일 변수에 여러개의 값을 저장할 때 사용합니다. var fruit = ["Apple", "Melon", "Banana"]; 배열은 한 번에 둘 이상의 값을 가질 수 있는 특수한 변수로서 많은 양의 값을 하나의 변수에 저장할 수 있고 인덱스를 바탕으로 배열에 저장된 값들에 접근할 수 있습니다. 배열을 만들기 배열을 만들때는 다음과 같은 구조로 코드를 작성합니다. var array_name = [item1, item2, ...]; 객체를 정의할 때와 마찬가지로 공백과 줄바꿈은 크게 중요하지 않으며 코드의 가독성을 높이기 위해 다음과 같이 작성해도 무방합니다. var array_name = [ item1, item2, item3 ]; 또한 다음과 같이 n..
자바스크립트 문자열(String)
자바스크립트 문자열(String)
2020.07.27문자열(String) 자바스크립트에서 문자열(String)은 따옴표 안에 쓰여진 0개 이상의 문자를 말합니다. 즉 자바스크립트에서는 "", ''도 모두 문자열에 해당합니다. 문자열과 따옴표 그리고 다음과 같이 문자열을 표현할 때에는 큰따옴표나 작은 따옴표를 사용할 수 있습니다. var fruitName1 = "Melon"; var fruitName2 = 'Melon'; 문자열을 둘러싼 따옴표와 서로 일치하지 않는다면 다음과 같이 문자열 안에 다른 종류의 따옴표를 사용할 수 있습니다. var str1 = "Hello World!"; var str2 = "Hello 'World'!"; var str3 = 'Hello "World"!'; 단, 다음과 같이 입력하는 경우 문자열을 제대로 인식하지 못하게 됩니다...
자바스크립트 이벤트(Event)
자바스크립트 이벤트(Event)
2020.07.27이벤트(Event) HTML 이벤트는 HTML 요소에서 발생하는 어떠한 사건을 의미합니다. HTML 이벤트의 예는 다음과 같습니다. HTML 웹 페이지의 로딩이 완료된 경우 HTML 입력필드가 변경된 경우 HTML 버튼을 클릭한 경우 이 이벤트가 발생했을 때 우리는 무언가를 하도록 만들고 싶은 경우가 있습니다. 자바스크립트를 사용하면 이벤트가 감지될 때 코드를 실행할 수 있습니다. 즉, 이벤트에 대한 반응을 할 수 있도록 해줍니다. 이를 통해서 우리는 많은 것들을 구현 할 수 있습니다. 다음과 같이 HTML을 사용하면 자바스크립트 코드가 있는 이벤트 핸들러 속성을 HTML 요소에 추가할 수 있습니다. 위의 코드에서 element는 HTML요소의 이름, event는 event 속성, 자바스크립트로 기록한 ..
자바스크립트 객체(Object)
자바스크립트 객체(Object)
2020.07.27객체(Object) 자바스크립트는 객체지향의 개념을 지원하는 객체지향 프로그래밍 언어입니다. 그래서 자바스크립트에는 객체(Object)라는 개념이 존재합니다. 객체는 우리가 보고 인지할 수 있는 하나의 대상을 말하는 것으로서 이 객체는 속성과 동작을 가집니다. 객체도 변수 입니다. 하지만 객체는 일반 변수와 다르게 많은 값을 포함할 수 있습니다. var car = {type:"Fiat", model:"500", color:"white"}; 위의 코드를 보면 car라는 변수에 type, model, color라는 속성에 각각 Fiat, 500, white 라는 속성값을 할당한 것을 볼 수 있습니다. 그리고 각 값들을 "속성 이름 : 속성값"의 형태로 사용되고 있는 것을 확인할 수 있습니다. 객체 정의 자바..