본문 바로가기
HTML form 태그 submit 실행 전 다시 한번 확인 후 데이터 전달하기 JSON 파일 불러올 때가 엊그제 같은데 계획한 작업이 마무리되어 갑니다. 웹페이지를 구성하고 맨 마지막 페이지에 사용자들과 소통할 창구로 사용될 기능인 메시지 발송 폼을 추가하고자 합니다. 사용자로부터의 무분별한 메시지 발송을 걸러 내기 위해 form 태그의 submit 버튼에서 재확인하는 함수를 간단하게 작성해 봅니다. (항상 그렇듯 알고 나면 단순한데 알기 전엔 도통 이해가 안 가는 현상들이 꽤 있습니다. 에러메세지가 없는 에러가 해결하기 더 어렵습니다.) 이름, 이메일, 제목, 내용을 사용자로부터 입력받는 form 태그를 구성합니다.(form 태그를 구성하는 것만으로도 잘못 입력된 양식의 데이터(숫자, 텍스트, 이메일, 전화번호 등)를 걸러낼 수 있습니다.) form 태그로 구성된 데이터를 전송하.. 2021. 12. 13.
JSON 오브젝트 객체 파일 불러오기 - 자바스크립트(JavaScript) 지난번 비교적 간단한 웹페이지를 만들 때 사용된 오브젝트 또는 배열은 볼륨이 크지 않아 스크립트 내에서 선언하고 사용할 수 있었습니다. 지금 작업하는 스크립트에는 그보다 훨씬 큰 데이터가 필요하고, 데이터 분석을 요구하는 코딩을 하게 된다면 어쩔 수 없이 마주치게 될 JSON 파일을 자바스크립트에서 불러와 사용하는 방법에 대해 살펴봅니다.(지금까지 살펴본 바 대용량 데이터 파일은 파이썬-판다스가 정말 짱입니다.) 제 경우 엑셀로 된 자료를 JSON 타입의 오브젝트로 변환 후 data.json으로 저장하여 사용했습니다. 참고하세요~! // data.json 읽어오기 data =readTextFile("../js/data.json", function(text){ var data = JSON.parse(tex.. 2021. 12. 13.
웹 페이지 만들고 배포하기 – 자바스크립트(JavaScript) HTML로 웹 페이지를 구성하여 사용자 입력을 받은 데이터를 자바스크립트로 가공하여 특정한 값을 출력하는 간단한 웹 서비스(민망합니다.)를 만들었습니다. 자바스크립트로 사용자 입력을 제어하고 함수를 통해 계산하고 JSON 타입의 오브젝트 배열에 접근하여 자료를 참조도 해봅니다. 이번 웹 페이지를 작성하며 자바스크립트의 문법과 스크립트가 어떤 구조로 실행되는지를 조금 맛본 것 같습니다. 스크립트 언어라 쉽게만 생각했는데 자바스크립트의 장점과 단점을 모두 경험하는 좋은 계기가 되었네요. 아직 부족한 것이 많지만 그동안 작성된 스크립트를 아래와 같이 소개해 봅니다. 엑셀 데이터 몇 가지를 JSON 타입의 오브젝트 배열로 만들어 const 선언을 통해 상수를 만듭니다. 그리고 torque_calc()함수 내에서.. 2021. 12. 13.
변수 & 함수 스코프(scope)의 개념 이해 - 자바스크립트(Javascript) 스코프(scope)란 말 그대로 범위를 나타냅니다. 전역변수(Global Variable)와 지역변수(Local Variable)의 유효범위에 대해 살펴봅니다. 예를 들어 함수를 작성하고 실행할 때 함수 내에서 계산된 값을 굳이 retrun이라는 명령어로 전역에 반환하는 이유는 함수 내에서 정의된 변수는 지역변수이기 때문입니다. 전역변수로 정의된 변수는 함수 내외부 어디에서나 사용할 수 있지만 함수 내에서 정의된 변수 또는 함수(함수 내의 함수)는 해당 함수의 범위 안에서만 사용할 수 있는 점이 다릅니다. var score=100, global_var=1; function my_func(){ var score=50; console.log(score, global_var); } my_func(); // 5.. 2021. 12. 13.
함수(Function) 이해하기 - 자바스크립트(Javascript) 프로그래밍을 진행하다 보면 해당 프로그램에서 자주 사용하는 코드가 존재하기 마련입니다. 이럴 때 매번 동일한 코드를 계속 작성하게 되는 불편함을 함수를 통해 해결할 수 있습니다. 프로그래밍 언어에 입문하는 초보자들이 처음 맞이하는 벽(?)이 함수라고도 볼 수 있습니다. 찬찬히 뜯어보면 그리 어려운 내용이 아니지만 함수를 처음 접하는 분들에게는 어렵다고 생각될 수도 있는 개념입니다. 전역변수, 지역변수, 호출, 리턴 등 생소한 용어들도 함수를 배우는 초보자들에겐 부담일 수도 있지만 프로그래밍 언어를 학습하는 분들이라면 넘어야 할 작은 산이라 생각하시고 천천히 둘러보시기 바랍니다. 자바스크립트에서 함수를 선언할 때 가장 쉬운 방법으로 아래와 같이 두 가지 방법을 사용합니다. 일반적인 함수 선언 방법 변수를 .. 2021. 12. 13.
브라우저 & 윈도우 객체 사용하기 - 자바스크립트(Javascript) 자바스크립트에서 사용 가능한 내장 객체 중 브라우저에 내장된 객체에 대해 살펴봅니다. 브라우저 객체 모델(Browser Object Model : BOM)은 웹 브라우저와 관련된 객체의 집합(window, location, screen, history, navigator, document)을 의미합니다. 오늘은 브라우저 객체에 대해 살펴봅니다. window 객체는 브라우저의 창을 의미하며, 다양한 메서드로 이 창을 제어할 수 있습니다. window 객체의 메서드 종류에 대해 살펴봅니다. 메서드 종류 설명 alert( ) 경고 상자 표시 atob( ) 암호화된 문자열을 복호화(base - 64) btoa( ) 문자열을 암호화(base - 64) clearInterval( ) setInterval( )로 설.. 2021. 12. 13.
배열 객체와 문자열 객체 살펴보기 - 자바스크립트(Javascript) 지금까지는 하나의 변수에는 하나의 데이터를 저장했습니다. 하지만 배열 객체는 하나의 변수명에 인덱스(index)를 이용하여 여러 데이터를 저장할 수 있게끔 합니다. 오늘은 배열 객체 & 문자열 객체에 대해 살펴봅니다. 배열 객체를 생성할 때 아래와 같이 3가지 방법을 사용합니다. person1은 배열 객체를 선언하고, person2와 person3에는 여러 개의 데이터(숫자형, 문자형)를 입력하고 출력해 봅니다. 현재 선언된 배열 객체에 입력된 값과 인덱스 번호는 아래와 같습니다. 인덱스 번호 0 1 2 person1 배열 객체만 선언되고 값은 없음 person2 1 이 3 person3 일 2 삼 반복문을 이용하여 배열 객체에 임의의 데이터를 입력하고 출력해 봅니다. document.write("배열 .. 2021. 12. 13.
자바스크립트(Javascript) - 내장 객체(built-in Object) 살펴보기 자바스크립트에서 사용할 수 있는 객체에 대해 살펴봅니다. 우선 프로그래밍 언어에는 C++, 자바(Java), PHP 언어 등과 같이 클래스를 생성하고 함수를 상속할 수 있는 객체지향 언어(Object-Oriented Programming language)와 자바스크립트와 같이 그렇지 못한 객체 기반(Obeject-based) 언어가 있습니다. 객체지향과 객체 기반의 차이를 쉽게 이해하자면 객체지향언어는 클래스의 상속과 재조합이 가능한 반면 객체 기반 언어는 객체지향언어에서의 기능을 전혀 제공하지 않습니다. 파이썬도 인터프리터 언어이면서 클래스의 정의와 상속이 가능한 언어이기 때문에 객체지향 프로그래밍 언어라 할 수 있습니다. 그래서 저는 파이썬을 공부할 때 컴파일 언어인 C++과 인터프리터 언어의 장점이.. 2021. 12. 13.
조건문(if~else), 선택문(case), 반복문(while, for) – 자바스크립트(Javascript) 조건문은 특정한 조건식에서 참(true)과 거짓(false)을 구별해 각 조건에 맞는 코드를 실행하게 됩니다. 조건식은 앞서 살펴본 다양한 연산자들을 사용하여 조건식을 만들고 조건에 부합할 때와 그렇지 않을 때의 코드를 작성하여 실행하는 것을 의미합니다. 선택문과 반복문도 특정한 조건식에 기반하여 실행됩니다. 여기서 특정한 조건이란 무조건 반복 또는 일정한 조건에서 부합할 때에 반복 등 다양한 방법으로 코드를 실행시킬 수 있습니다. 자바스크립트에서 사용되는 조건문과 반복문에 대해 살펴봅니다. 조건문에서 가장 일반적으로 사용되는 if 문에 대해 살펴봅니다. if (조건식) { 실행문 } 예를 들어 if ( 1 < 2 ) { document.write("1이 2보다 작다"); }에서 1 2021. 12. 13.

티스토리툴바