JavaScript / 연산자 / 비교 연산자
변수의 값을 어떤 값 또는 다른 변수와 비교할 때 사용하는 것이 비교 연산자(Cpmparison Operator)입니다. 비교 연산자는 8가지가 있는데, 각 연산자의 의미를 알아보겠습니다.
==
==는 '같다'입니다. 변수 타입과 상관없이 값이 같으면 참입니다. 즉
5 == 5
도 참이고
'5' == 5
도 참입니다.
!=
!=는 '같지 않다'입니다.
===
===는 '엄격하게 같다'입니다. '엄격하게'의 의미는 변수 타입까지 고려한다는 것입니다. 변수의 값 뿐 아니라 변수의 타입까지 같아야 참입니다. 즉
5 === 5
는 참이지만
'5' === 5
는 거짓입니다. 왼쪽 변수는 문자열이고 오른쪽 변수는 숫자이기 때문입니다.
!==
!==는 '엄격하게 같지 않다'입니다. '엄격하게'의 의미는 변수 타입까지 고려한다는 것입니다. 변수의 값 뿐만 아니라 변수 타입까지 달라야 참입니다. 즉
'5' != 5
는 거짓이나
'5' !== 5
는 참입니다.
>
>는 '크다'입니다.
>=
>=는 '크거나 같다'입니다.
<
<는 '작다'입니다.
<=
<=는 '작거나 같다'입니다.
JavaScript / 사업자등록번호, 전화번호 유효성 검사하는 방법
사업자등록번호 유효성 검사 사업자등록번호를 입력하고 전송할 폼을 만들고, 버튼 클릭 시 checkBrn() 함수를 호출한다. <input type="text" name="brn" id="brn"> <input type="button" value="Check" onclick="checkBrn();"> 메시지를 출력할 공간을 만든다. <p id="checkBrnMessage"></p> 입력한 값을 변수 brn에 담는다. var brn = document.getElementById( "brn" ).value; 정규표현식 /^{5}$/를 이용하여 유효성 검사를 한다. 000-00-00000 형식이 맞으면 OK, 그렇지 않으면 NOT OK를 출력한다. if ( /^{5}$/.test( brn ) ) ...
한 줄 주석 한 줄 주석은 //로 만듭니다. // single line comment // 앞은 코드로 처리하고, // 뒤는 주석으로 처리합니다. 예를 들어 var jb = 'hi'; // Comment 라고 var jb = 'hi';는 코드로 인식합니다. 여러 줄 주석 여러 줄을 주석으로 만들 때는 /*와 */로 둘러쌉니다. /* Comment 1 Comment 2 */ 읽기 좋게 다음과 같은 모양으로 만들기도 ...
JavaScript / 조건문 / if, else if, else
특정 조건 만족 시 어떤 작업을 수행하고 싶을 때 사용하는 것이 if, else if, else입니다. 문법 if ( condition1 ) { statement1 } condition1을 만족하면 statement1을 실행합니다. if ( condition1 ) { statement1 } else { statement2 } condition1을 만족하면 statement1을 실행하고, 만족하지 않으면 statement2를 실행합니다. if ( condition1 ) { statement1 } else if ( ...
JavaScript / Object / document.write()
.write() .write()은 문서에 문자, 코드 등을 쓰는 메서드입니다. 문법 document.write( exp1, exp2, ... ) 예제 Hello와 World를 연달아 출력합니다. document.write( 'Hello', 'World' ); 2를 출력합니다. document.write( 1+1 ) 코드는 코드로 인식합니다. document.write( '<p style="font-size: 80px; text-align: center;">Hello</p>' ); 닫는 script 태그에는 \를 붙여서 <\/script>로 씁니다. document.write( '<script>document.write( "Hello" )<\/script>' ); JavaScript / Object / document.writeln()
JavaScript / Object / String.match() / 정규표현식에 맞는 문자열을 찾아 가져오는 메서드
.match() .match()는 정규표현식에 맞는 문자열을 찾아서 배열 객체로 반환합니다. 문법 string.match( regexp ) 만약 정규표현식에 맞는 문자열이 없다면 null을 반환합니다. 예제 Lorem Ipsum Dolor 문자열에서 Lo가 있는지, Lo를 포함한 단어가 있는지, Loi가 있는지 검색하고, 그 결과를 출력하는 예제입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript | match</title> </head> ...
JavaScript / Object / Location / URL 정보 가져오는 객체
location location은 URL 정보를 가져오는 객체입니다. URL 전체 또는 일부의 정보를 가져올 수 있는데, 대표적인 것들은 다음과 같습니다. location location.host location.hostname location.href location.pathname location.protocol 예제 URL이 https://example.codingfactory.net/script/script.html 일 때, 각 객체 속성이 어떤 값을 가져오는지 알아보는 예제입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> h1 { ...
JavaScript / Object / Math.max(), Math.min()
Math.max(), Math.min() Math.max()는 주어진 값 중에서 최댓값을, Math.min()은 최솟값을 반환합니다. 문법 Math.max( number1, number2, number3, ... ) Math.min( number1, number2, number3, ... ) 예제 1 10, 20, 30 중에서 최댓값과 최솟값을 구합니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> body { font-family: Consolas, monospace; } </style> </head> <body> <script> document.write( '<p>Math.max( 10, 20, 30 ) : ' + Math.max( 10, 20, 30 ) + '</p>' ); document.write( '<p>Math.min( 10, ...
JavaScript / JavaScript를 HTML 문서에 삽입하는 방법
HTML 문서에 직접 삽입 HTML 문서 안에 <script> 태그를 만들고, 그 안에 사이에 코드를 넣는 방법입니다. <script> alert ("Hello"); </script> 이 방법은 몇 개의 페이지에 JavaScript를 사용하거나, JavaScript 코드가 짧은 경우에 유용합니다. 스크립트 파일을 만든 후 불러오기 JavaScript 코드를 담은 파일을 만든 후 HTML 문서에 연결시키는 방법입니다. 다음과 같은 내용의 파일을 만들고 hello.js라는 이름으로 저장합니다. (스크립트 파일의 ...
JavaScript / Event / onsubmit / 폼 전송하기 전에 작업 수행하게 하는 이벤트
JavaScript의 onsubmit 이벤트를 이용하면 폼의 값을 전송하기 전에 어떤 작업을 하게 할 수 있습니다. 간단한 예제로 어떻게 작동하는지 알아보겠습니다. 예제 1 간단한 회원 가입 페이지를 만듭니다. 전송 버튼은 input 태그로 만듭니다. Register를 클릭하면 ok.html로 이동합니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> ...
JavaScript / 함수 / 함수 선언하고 호출하기
함수 선언하기 방법 1 function functionName( argument1, argument2, ... ) { // Do Something } 방법 2 var functionName = function( argument1, argument2, ... ) { // Do Something }; 함수 호출하기 functionName( value1, value2, ... ); 방법 1로 함수를 선언한 경우, 함수 호출은 함수 선언 전 또는 함수 선언 후에 할 수 있습니다. functionName( value1, value2, ... ...