JavaScript / Event / onsubmit / 폼 전송하기 전에 작업 수행하게 하는 이벤트
JavaScript의 onsubmit 이벤트를 이용하면 폼의 값을 전송하기 전에 어떤 작업을 하게 할 수 있습니다. 간단한 예제로 어떻게 작동하는지 알아보겠습니다.
예제 1
- 간단한 회원 가입 페이지를 만듭니다. 전송 버튼은 input 태그로 만듭니다.
- Register를 클릭하면 ok.html로 이동합니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>JavaScript</title>
<style>
input, button { font-family: inherit; font-size: inherit; }
</style>
</head>
<body>
<h1>Register</h1>
<form action="ok.html" method="POST">
<p><input type="text" name="username" placeholder="Username" required></p>
<p><input type="password" name="password" placeholder="Password" required id="pw1"></p>
<p><input type="password" name="password-confirm" placeholder="Confirm Password" required id="pw2"></p>
<p><input type="submit" value="Register"></p>
</form>
</body>
</html>
- form 태그에 onsubmit="jbSubmit();"를 추가합니다. 전송 버튼을 클릭하면 jbSubmit() 함수를 호출하라는 뜻입니다.
<form action="ok.html" method="POST" onsubmit="jbSubmit();">
- jbSubmit()은 비밀번호 두 개를 받아서 알려주는 함수입니다.
<script>
function jbSubmit() {
var pw1 = document.getElementById( 'pw1' ).value;
var pw2 = document.getElementById( 'pw2' ).value;
alert( pw1 + ' vs ' + pw2 );
}
</script>
- 전체 코드는 다음과 같습니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>JavaScript</title>
<style>
input, button { font-family: inherit; font-size: inherit; }
</style>
<script>
function jbSubmit() {
var pw1 = document.getElementById( 'pw1' ).value;
var pw2 = document.getElementById( 'pw2' ).value;
alert( pw1 + ' vs ' + pw2 );
}
</script>
</head>
<body>
<h1>Register</h1>
<form action="ok.html" method="POST" onsubmit="jbSubmit();">
<p><input type="text" name="username" placeholder="Username" required></p>
<p><input type="password" name="password" placeholder="Password" required id="pw1"></p>
<p><input type="password" name="password-confirm" placeholder="Confirm Password" required id="pw2"></p>
<p><input type="submit" value="Register"></p>
</form>
</body>
</html>
- 이제 폼에 정보를 입력하고 Register를 클릭하면 두 개의 비밀번호를 알려주고, [확인]을 클릭하면 ok.html로 이동합니다.
예제 2
- jbSubmit() 앞에 return을 추가합니다.
<form action="ok.html" method="POST" onsubmit="return jbSubmit();">
- 두 개의 비밀번호를 비교해서 값이 다르면 false를, 같으면 true를 반환합니다.
<script>
function jbSubmit() {
var pw1 = document.getElementById( 'pw1' ).value;
var pw2 = document.getElementById( 'pw2' ).value;
if ( pw1 != pw2 ) {
alert( 'Confirm Password!' );
return false;
}
}
</script>
- 전체 코드는 다음과 같습니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>JavaScript</title>
<style>
input, button { font-family: inherit; font-size: inherit; }
</style>
<script>
function jbSubmit() {
var pw1 = document.getElementById( 'pw1' ).value;
var pw2 = document.getElementById( 'pw2' ).value;
if ( pw1 != pw2 ) {
alert( 'Confirm Password!' );
return false;
}
}
</script>
</head>
<body>
<h1>Register</h1>
<form action="ok.html" method="POST" onsubmit="return jbSubmit();">
<p><input type="text" name="username" placeholder="Username" required></p>
<p><input type="password" name="password" placeholder="Password" required id="pw1"></p>
<p><input type="password" name="password-confirm" placeholder="Confirm Password" required id="pw2"></p>
<p><input type="submit" value="Register"></p>
</form>
</body>
</html>
- 값을 입력하고 전송할 때, 두 개의 비밀번호가 같다면 ok.html로 이동합니다.
- 값이 다르다면 아래와 같이 메시지를 띄우고, [확인]을 클릭하면 현재 페이지에 머뭅니다.
JavaScript / 데이터 타입 / 문자열(String)
문자열(String) 문자열을 변수의 값으로 사용하려면 작은 따옴표(') 또는 큰 따옴표(")로 감쌉니다. var jb = 'Lorem ipsum dolor'; var jb = "Lorem ipsum dolor"; 문자열에 작은 따옴표가 있다면 큰 따옴표로, 큰 따옴표가 있다면 작은 따옴표로 감쌉니다. var jb = 'Lorem "ipsum" dolor.'; var jb = "Lorem 'ipsum' dolor."; 만약 작은 따옴표와 큰 따옴표가 같이 있다면 역슬래시를 이용합니다. var jb ...
JavaScript / Object / Array.slice() / 배열의 일부분을 선택하여 새로운 배열을 만드는 속성
.slice() .slice()는 배열의 일부분을 선택하여 새로운 배열을 만듭니다. 문법 array.slice( start, end ) start와 end에는 숫자가 들어갑니다. 배열의 start에 해당하는 요소부터 end 바로 전의 요소까지를 선택하여 새로운 배열을 만듭니다. 예를 들어 jbAry.slice( 2, 5 ); 는 jbAry 배열의 3번째 요소부터 5번째 요소까지 선택합니다. end에 값이 없으면 해당 배열의 마지막 요소까지 선택합니다. 값이 음수면 마지막 요소를 기준으로 선택합니다. 예제 <!doctype html> <html ...
JavaScript / Object / document.getElementsByTagName() / 특정 태그를 가진 요소 가져오는 메서드
.getElementsByTagName() .getElementsByTagName()는 특정 태그를 가진 모든 요소를 선택합니다. 선택된 요소는 유사 배열 객체로 반환됩니다. 문법 1 document.getElementsByTagName( 'tagname' ) 예를 들어 p 태그를 가진 첫번째 요소를 선택하려면 다음과 같이 합니다. document.getElementsByTagName( 'p' ) 예제 1 문서에서 p 태그를 가진 두번째 요소를 jb라는 변수에 넣고, 몇 가지 정보를 출력하는 예제입니다. <!doctype html> <html lang="ko"> <head> <meta ...
JavaScript / 함수 / isFinite() / 매개변수가 유한한 수인지 검사하는 함수
isFinite() isFinite()은 매개변수가 유한값인지 검사하는 함수입니다. 문법 isFinite( value ) value : 검사할 값을 입력합니다. 유한한 숫자이면 true, 무한한 숫자 또는 숫자가 아니면 false를 반환합니다. 예제 123.123은 유한한 숫자이므로 true를 반환합니다. Infinity는 무한한 숫자이므로 false를 반환합니다. Not a Number는 문자이므로 false를 반환합니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> ...
JavaScript / Object / Array.every() / 모든 원소가 조건에 맞는지 검사하는 메서드
.every() .every()는 배열의 모든 원소가 조건에 맞는지 검사하는 메서드입니다. 모든 원소가 조건을 만족하면 true, 하나라도 만족하지 않으면 false를 반환합니다. 예제 배열의 원소를 오름차순으로 검사하고, 조건을 만족하지 않는 원소가 있으면 검사를 중지하고 false를 반환합니다. 모든 원소를 다 검사했는데 조건을 만족하지 않는 원소가 없으면 true를 반환합니다. 원소가 없는 빈 배열은, 조건은 만족하지 않는 원소가 없으므로 무조건 ...
JavaScript / 다른 페이지로 리다이렉트(Redirect) 하기
자바스크립트를 이용해서 특정 URL로 접속했을 때 다른 URL로 이동시킬 수 있다. 다른 URL로 이동시키는 것은 window.location.href 를 이용한다. 예를 들어 window.location.href = 'http://www.abc.com/'; 은 웹브라우저로 접속했을 때 http://www.abc.com/으로 이동시킨다. 만약 http://www.abc.com/으로 접속했을 때 http://www.codingfactory.net/로 이동시키고 싶다면 다음과 같이 한다. if ( window.location == 'http://www.abc.com/' ) { window.location.href='http://www.codingfactory.net/'; } PHP / 다른 페이지로 리디렉션(Redirection)하는 방법
JavaScript / Object / Element.removeAttribute() / 요소의 속성을 제거하는 메서드
.removeAttribute() .removeAttribute()는 요소의 속성을 제거하는 메서드입니다. 문법 element.removeAttribute( attributename ) 예를 들어 document.getElementsByTagName( 'h1' ).removeAttribute( 'class' ); 는 문서의 첫번째 h1 요소의 class 속성을 제거합니다. 예제 첫번째 h1 요소의 class 속성을 제거해서 글자색이 검정색이 됩니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> body { font-family: Consolas, monospace; } .abc { color: red; } </style> </head> <body> <h1 class="abc">Lorem ...
한 줄 주석 한 줄 주석은 //로 만듭니다. // single line comment // 앞은 코드로 처리하고, // 뒤는 주석으로 처리합니다. 예를 들어 var jb = 'hi'; // Comment 라고 var jb = 'hi';는 코드로 인식합니다. 여러 줄 주석 여러 줄을 주석으로 만들 때는 /*와 */로 둘러쌉니다. /* Comment 1 Comment 2 */ 읽기 좋게 다음과 같은 모양으로 만들기도 ...
JavaScript / Object / String.length / 문자열의 길이 반환하는 속성
.length .length는 문자열의 길이를 반환하는 속성입니다. 문법 string.length 예를 들어 'abcd'.length 는 4입니다. 예제 <!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>"1234".length : ' + '1234'.length + '</p>' ); document.write( '<p>"".length : ' + ''.length + '</p>' ); document.write( '<p>"한글".length : ' + '한글'.length + '</p>' ...
JavaScript / 전역변수(Global Variable)와 지역변수(Local Variable)
전역변수와 지역변수 변수는 유효범위에 따라 전역변수(Global Variable)와 지역변수(Local Variable)로 구분할 수 있습니다. 전역변수는 함수 외부에서 선언된 변수로, 프로그램 전체에서 접근할 수 있는 변수입니다. 지역변수는 함수 내부에서 선언된 변수로, 함수가 실행되면 만들어지고 함수가 종료되면 소멸하는 변수입니다. 함수 외부에서는 접근할 수 없습니다. 예제 1 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> ...