Web Basic
자바스크립트 - 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 라는 속성값을 할당한 것을 볼 수 있습니다. 그리고 각 값들을 "속성 이름 : 속성값"의 형태로 사용되고 있는 것을 확인할 수 있습니다. 객체 정의 자바..
자바스크립트 함수(Function)
자바스크립트 함수(Function)
2020.07.27이번에는 자바스크립트에서 중요하게 사용되는 함수에 대해서 알아보도록 하겠습니다. 함수란? 자바스크립트에서 함수는 특정 작업을 수행하도록 설계된 코드블록을 말합니다. 그리고 이 함수는 호출되었을 때 자신이 가진 내용을 수행하게 됩니다. function myFunction(p1, p2) { return p1 * p2; // 해당 함수는 인자로 받은 p1, p2에 대한 곱셈값을 반환합니다. } 위의 코드에서 구현한 myFunction 이라는 함수의 경우 p1과 p2라는 2개의 인자를 받아서 이 둘의 곱을 반환합니다. 즉, 입력받은 2개의 인자에 대한 곱셈값 반환. 이것이 함수 myFunction의 기능이 됩니다. 함수를 정의하는 방법 자바스크립트에서는 함수를 정의할 때 function 이라는 키워드를 사용합니..
자바스크립트 문
자바스크립트 문
2020.07.27본 글에서 자바스크립트에 대한 개념의 모든 내용을 다루지 않습니다. 자바스크립트의 경우 이전에 C언어와 같은 프로그래밍언어를 1개 이상 이미 학습한 상태임을 가정하고 다루고 있으니 참고하시기 바랍니다. 이전에 살펴봤던 것처럼 자바스크립트는 현재 정말 많은 곳에 사용되는 프로그래밍 언어입니다. 그리고 바로 이 자바스크립트로 작성된 각각의 명령어들을 우리는 자바스크립트문(JavaScript Statements) 이라고하고, 이 자바스크립트 문이 모여서 구성된 하나의 프로그램을 자바스크립트 프로그램 이라고 합니다. 자바스크립트 프로그램은 많은 자바스크립트 문을 포함하며 작성된 자바스크립트문은 작성된 순서대로 하나씩 수행됩니다. 실제로 자바스크립트 프로그램(및 자바스크립트문)은 종종 자바스크립트 코드 라고 부르..
JavaScript 개요
JavaScript 개요
2020.07.27JavaScript 관련 글을 시작하기에 앞서... 이제 JavaScript 입니다. 사실 이전에 포스팅한 HTML, CSS 관련 글들의 퀄리티가 너무 많이 떨어지는 것 같아서 이를 갈아엎는 과정이 필요하다고 생각했지만 당장 이 글들을 모두 수정하는 것보다는 공부와 포스팅을 이어가면서 지속적으로 수정해나가는 것이 더 효율적일 것 같아서 이렇게 이전의 글들을 수정하기 전에 먼저 JavaScript에 대한 포스팅을 하기로 결정하였습니다. (HTML과 CSS는 최대한 빠른 시일내에 더 좋은 퀄리티의 글로 다시 돌아올 수 있도록 노력하겠습니다!) 자바스크립트(JavaScript)란? 자바스크립트는 웹 개발자가 배워야하는 3가지 언어 중의 하나로서 이전에 살펴본 HTML, CSS에 이은 세번째 언어에 해당합니다...