let x = 0.1 + 0.2; console.log(x); 위의 자바스크립트 코드를 실행시키면 어떤 결과가 나올까요? 상식적으로는 0.3이 나와야 정상이겠습니다만 실제로는 위와 같이 0.30000000000000004라는 결과값이 나옵니다. 바로 자바스크립트의 Number Type이 64비트의 부동 소수점으로 데이터를 저장하기 때문에 부동소수점 문제가 발생한 것입니다. 이번 포스팅에서는 자바스크립트에서 부동 소수점 문제가 발생하는 원인이 무엇이고, 이 문제를 어떻게 해결할 수 있을지에 대해 알아보도록 하겠습니다. ※ 참고로 자바스크립트만 이 부동소수점에 대한 이슈는 자바스크립트에서만 발생하는 특이한 이슈가 아닌 부동소수점을 차용하고 있는 모든 프로그래밍 언어에서 이러한 문제가 발생합니다. 부동 소수점..
객체(Object)란? 자바스크립트는 객체 기반 프로그래밍 언어입니다. 객체를 구성하는 요소로는 속성(Property)과 기능(Method)이 있습니다. 속성과 기능이 있다는 점에서 TV는 객체로 표현될 수 있습니다. 너비와 높이, 색상, 무게와 같은 속성이 있고, TV 켜기, 끄기, 볼륨 높이기, 줄이기와 같은 기능이 있으니 말이죠. 이렇게 자바스크립트에서 이러한 객체를 잘 표현해서 코드화하면 얻을 수 있는 장점들이 많습니다. 이번 포스팅에서는 자바스크립트의 객체에 대해서 알아보도록 하겠습니다. 객체를 사용하면서 얻는 장점 데이터를 구조화시킬 수 있다 : 객체를 사용하면 데이터들을 보다 논리적으로 그룹화하여 구조화할 수 있습니다. 이러한 과정을 통해 코드의 가독성을 높이고 유지보수함에 유리합니다. 데이..
특이하게도 자바스크립트는 타 프로그래밍 언어와는 달리 변수를 선언할 때 데이터타입을 명시적으로 지정하지 않습니다. 자바스크립트(JavaScript)는 동적 타입 언어로써 변수를 선언할 때 변수에 할당된 값에 따라 동적으로 데이터 타입이 자동으로 결정되기 때문입니다. 이렇게 동적으로 데이터 타입을 지정하기 때문에 엄연히 자바스크립트에도 데이터 타입이 존재합니다. 이번 포스팅에서는 자바스크립트의 데이터 타입(DataType)에 대해 알아보도록 하겠습니다. ※ 변수를 선언자 var, let, const에 대해서 궁금하시다면 아래 글을 참고해 주세요. [JavaScript] 변수 선언자 var, let, const의 차이점과 사용법 데이터타입 종류 자바스크립트의 데이터 타입은 크게 기본 데이터 타입(Primit..
프로그래밍 언어에서 데이터를 담을 때는 변수를 선언해야 합니다. 변수는 데이터를 담는 그릇이라고 생각하시면 되고 자바스크립트에도 당연히 변수라는 개념이 존재합니다. 자바스크립트에서 변수를 선언할 때는 var, let, const라는 세 가지 키워드를 활용하여 변수를 선언하는데요. 이 세 가지 키워드들은 그 특성에 차이점이 존재합니다. 이번 포스팅에서는 var, let, const의 차이점과 사용법에 대해 알아보겠습니다. 키워드 var의 특징 var는 ES6의 등장 이전에 변수를 선언하는 데 사용되었던 초기 JavaScript에서의 변수 선언자입니다. var는 재선언이 가능하다. var x = 10; var x = 20; // 재선언 가능 console.log(x); // 20 일반적인 프로그래밍 언어에서..
크롬과 같은 브라우저는 개발자가 소프트웨어를 개발할 때 디버깅을 할 수 있게 하는 "개발자 도구"라는 것을 제공하고 이것이 없으면 개발이 불가능하다 싶을 정도로 모든 개발자들이 사용하는데요. 이 개발자 도구에서 자바스크립트 코드의 결과값을 콘솔에 출력하려면 console을 사용하시면 됩니다. 이번 포스팅에서는 자바스크립트의 console 사용 방법에 대해 알아보도록 하겠습니다. 개발자 도구의 콘솔 사용법 1. 자바스크립트에 console을 직접 넣을 수 있습니다. 이렇게 한다면 웹 사이트를 오픈할 때 콘솔창에 "메시지 출력"이라는 메시지가 출력되겠습니다. 2. 콘솔창은 브라우저에서 [F12]를 눌러 개발자 도구를 열고 "Console" 탭을 선택하면 삽입해두었던 메시지 출력 콘솔 코드가 동작한 것을 확인..
웹 개발을 할 때 HTML문서에서 를 정의하는 경우도 많지만 따로 JavaScript 파일을 .js파일로 별도로 생성해서 연결하는 경우도 있습니다. 이렇게 자바스크립트를 별도로 분리하면 코드의 가독성 향상, 코드의 재사용성과 유지보수성의 향상, 협업의 편리성 증가 등등 다양한 이점을 가지고 있습니다. 이번 포스팅에서는 .js 파일을 .html 파일에 연결하는 방법에 대해 알아보도록 하겠습니다. JavaScript 파일을 별도로 분리하면 좋은 이유 4가지 코드의 가독성 및 유지 보수성 향상 : HTML은 구조를 정의하고, JavaScript는 웹의 동작을 담당합니다. 이렇게 기능이 다른 HTML코드와 JavaScript 코드가 하나의 파일에 혼재되어 있는 것 보다는 JavaScript 코드를 분리하면 코드..
이번 포스팅에서는 자바스크립트를 활용해 접속할때마다 변하는 이미지를 구현해보겠습니다. 작동원리는 자바스크립트 배열에 각각 이미지를 저장해놓고 랜덤함수를 호출해 랜덤으로 배열에 저장되어있는 이미지를 호출하는 방식입니다. 방문할때마다 변하는 이미지 구현하기 예제 이미지 경로에는 자신의 띄워줄 이미지의 경로를 써주시면 됩니다. [JavaScript] 자바스크립트란 무엇인가? [JavaScript] 자바스크립트 배열 선언 및 사용법 총정리 [JavaScript] 라디오버튼 클릭시 원하는 배경색으로 바꾸기 [JavaScript] 회원가입 폼 유효성검사 (정규식)
내가 입력하고싶은 데이터보다도 테이블의 컬럼이 많다면 남는 칼럼들은 그냥 공간만 차지할 뿐입니다. 하지만 데이터만큼 테이블의 Row가 동적으로 생성된다면?? 이 기능은 자바스크립트의 appendChild함수를 이용해 구현할 수 있습니다. 이번 포스팅에서는 자신이 입력하고있는 데이터만큼의 테이블 Row를 자바스크립트를 사용해 동적으로 생성하는 방법에 대해 알아보도록 하겠습니다. 동적으로 테이블 만들기 예제 내 친구 나열하기 자신이 입력한 친구의 숫자에 따라 테이블이 동적으로 생성됩니다. 예제를 다양하게 응용해서 활용해 보세요. [JavaScript] 자바스크립트란 무엇인가? [JavaScript] 자바스크립트 배열 선언 및 사용법 총정리 [JavaScript] 라디오버튼 클릭시 원하는 배경색으로 바꾸기 [..
이번 포스팅에서는 자바스크립트로 배경색을 바꿔보는 방법에 대해 알아보도록 하겠습니다. document.bgColor 함수를 활용해 배경색을 지정해줄 수 있습니다. 예제를 보시면 바로 이해하실 수 있으실겁니다. 이 예제를 응용해 다양하게 활용해보세요. 예제는 라디오버튼에 Value값을 자바스크립트로 넘겨줘서 배경색을 바꾸는 방식입니다. 라디오버튼 클릭시 원하는 배경색으로 바꾸기 예제 노란색 녹색 파란색 빨간색 실행결과 [JavaScript] 동적으로 테이블 만들기 [JavaScript] 방문할때마다 랜덤으로 변하는 이미지 구현하기 [JavaScript] Span태그의 속성(글꼴,색상,크기,스타일) 변경하기
Alert(경고)창 Alert함수는 사용자에게 중요한 내용이나 경고창을 띄워줄 때 주로 사용하는 함수입니다. 여러가지 창 중에서 가장 많이쓰이는 기본적인 형태의 팝업창입니다. alert("어서오세요!"); Prompt(입력)창 Prompt함수는 사용자에게 입력값을 받을 수 있는 창을 띄워주는 함수입니다. 사용자에게 받은 값을 String타입의 리턴값으로 반환해주며 입력값이 없을경우에는 Null값을 리턴합니다. var userInput = prompt("당신의 이름은 무엇인가요?"+""); alert(userInput+"님 환영합니다."); Confirm(선택)창 Confirm함수는 사용자에게 Ture / False 값을 리턴받을 수 있는 팝업창을 띄워주는 함수입니다. 사용자의 액션에 따라 Ture 값과 ..
이번 포스팅에서는 자바스크립트로 HTML Span태그의 글꼴,색상,크기,스타일을 변경시키는 방법에 대해 알아보도록 하겠습니다. 다양한 위젯의 Id를 활용해 활용해 span태그 안에있는 글자를 바꾸는 예제입니다. 다양하게 응용하셔서 활용해보세요. Span태그의 속성 변경 예제 색상: 파랑 노랑 빨강 크기: 1 2 3 4 5 6 취소선 크게 작게 두껍게 기울임 위첨자 아래첨자 소문자로 대문자로 실행방법은 위의 텍스트박스에 문구를 입력하고 바꿀 글자의 색상, 크기, 속성을 설정한 뒤 미리보기를 누르시면 됩니다. [JavaScript] 주민등록번호 유효성 검사 [JavaScript] 회원가입 폼 유효성검사 (정규식) [JavaScript] 배경색 바꾸기 [JavaScript] Alert(경고창), Prompt(..
자바스크립트 유효성검사가 가장 필요한곳은 바로 어디일까요? 아마 회원가입 페이지 일 것 입니다. 웹사이트에서 회원가입을 하려고하면 계속 양식에 어긋난다고 다시 입력해달라는 팝업창들 많이보셨죠? 짜증났던 경험 다들 한번씩 있으실겁니다. 하지만 이 유효성검사를 통해 사용자가 회원가입시 정보를 잘못 입력하는 경우를 막아줄 수 있답니다. 회원가입 폼 유효성검사 예제 SIGN UP 회원기본정보 아이디: ※4-12자의 영문 대소문자와 숫자로만 입력 비번: ※4-12자의 영문 대소문자와 숫자로만 입력 비번확인: 메일주소: ex)wjdxo513@naver.com 이름: 개인정보 주민등록번호: - 예) 123456-1234567 생일: 년 월 일 관심분야: 컴퓨터 인터넷 여행 영화감상 음악감상 자기소개:
주민등록번호에는 유효성 검사 로직이 있습니다. 그 방법은 다음과 같습니다. 맨 마지막 한 자리를 제외하고 각 자릿수의 숫자들에 각각 지정된 숫자들을 곱해서, 그 값을 모두 더합니다. 1 2 3 4 5 6 - 1 2 3 4 5 6 7 X X X X X X X X X X X X X 2 3 4 5 6 7 8 9 2 3 4 5 n1 +n2 +n3 +n4 +n5 +n6 +n7 +n8 +n9 +n10 +n11+n12 =N 각 자릿수에 지정된 수의 곱을 더한 값을 N이라고 하면, N을 11로 나눈 나머지를 11에서 뺀 수가 주민등록번호 마지막 자릿수와 일치하면 정상적인 주민등록번호입니다. 주민등록번호 유효성 검사 예제 주민등록 유효성검사 주민등록번호: - 예) 123456-1234567 [JavaScript] 회원가..