JavaScript / Object / String.toUpperCase(), String.toLowerCase()
목차
.toUpperCase()
문법
.toUpperCase()는 대문자로 변환하는 메서드이다. 예를 들어 다음은 ABC를 반환한다.
'abc'.toUpperCase()
예제 1 - 대문자로 변환하여 출력
- 문자열 Aaa를 대문자로 변환하여 출력한다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>JavaScript</title>
<style>
* {
font-family: Consolas, monospace;
font-size: 20px;
}
</style>
</head>
<body>
<script>
document.write( 'Aaa'.toUpperCase() );
</script>
</body>
</html>
예제 2 - 폼에 입력 시 대문자로 변환
- 폼에 문자를 입력할 때 실시간으로 대문자로 변환한다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>jQuery</title>
<style>
* {
font-family: Consolas, monospace;
font-size: 20px;
}
</style>
<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<p>
<input type="text" name="tuc" id="tuc">
</p>
<script>
$( '#tuc' ).on( 'keyup', function() {
var tuc = $( '#tuc' ).val();
$( '#tuc' ).val( tuc.toUpperCase() );
} );
</script>
</body>
</html>
.toLowerCase()
문법
.toLowerCase()는 소문자로 변환하는 메서드이다. 예를 들어 다음은 abc를 반환한다.
'ABC'.toLowerCase()
예제 1 - 소문자로 변환하여 출력
- 문자열 Aaa를 소문자로 변환하여 출력한다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>JavaScript</title>
<style>
* {
font-family: Consolas, monospace;
font-size: 20px;
}
</style>
</head>
<body>
<script>
document.write( 'Aaa'.toLowerCase() );
</script>
</body>
</html>
예제 2 - 폼에 입력 시 소문자로 변환
- 폼에 문자를 입력할 때 실시간으로 문자로 변환한다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>jQuery</title>
<style>
* {
font-family: Consolas, monospace;
font-size: 20px;
}
</style>
<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<p>
<input type="text" name="tlc" id="tlc">
</p>
<script>
$( '#tlc' ).on( 'keyup', function() {
var tlc = $( '#tlc' ).val();
$( '#tlc' ).val( tlc.toLowerCase() );
} );
</script>
</body>
</html>
JavaScript / Object / String.concat() / 문자열을 이어 붙이는 메서드
.concat() .concat()은 문자열을 이어 붙이는 메서드입니다. 문법 string1.concat( ) string1은 필수 요소, string2 등은 선택 요소입니다. 인수가 문자열이 아닌 경우 먼저 문자열로 변환한 다음 string1에 연결합니다. 예를 들어 'ab'.concat( 'cd', 'ef' ) 는 abcdef입니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> body { font-family: Consolas, monospace; } </style> ...
JavaScript / Object / document.title / 문서의 제목을 가져오거나 변경하는 속성
.title .title 속성으로 문서의 제목을 가져오거나 변경할 수 있습니다. 문법 1 document.title 문서의 <title> 태그의 내용을 반환합니다. 문법 2 document.title = 'ABC' 문서의 <title> 태그의 내용을 ABC로 바꿉니다. 예제 문서의 제목 JavaScript를 출력하고, 제목을 CODING FACTORY로 바꿉니다. <!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>' ...
JavaScript / Object / .innerText, .innerHTML
.innerText .innerText은 특정 요소의 텍스트를 가져오거나, 특정 요소의 텍스트를 변경한다. 문법 1 - 내용 가져오기 element의 내용을 가져온다. element.innerText id의 값이 xyz인 요소의 내용을 변수 jb에 저장한다. var jb = document.getElementById( 'xyz' ).innerText; 예제 1 id의 값이 jb인 요소의 텍스트를 가져와서 출력한다. 태그 등은 제외한 텍스트만 가져온다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> ...
JavaScript / Object / Element.setAttribute() / 요소의 속성 값을 정하는 메서드
.setAttribute() .setAttribute()는 선택한 요소(element)의 속성(attribute) 값을 정합니다. 문법 element.setAttribute( 'attributename', 'attributevalue' ) attributename에는 속성 이름을, attributevalue에는 속성값을 넣습니다. 예를 들어 document.getElementById( 'xyz' ).setAttribute( 'title', 'This is title' ) id 값이 xyz인 요소의 title 속성을 This is title로 정합니다. 만약 이미 속성값이 존재한다면 그 값을 지우고 새 값을 적용합니다. 예제 id 값이 abc인 요소의 href 속성값을 변경하는 예제입니다. <!doctype html> <html lang="ko"> ...
JavaScript / Object / document.querySelectorAll() / 특정 CSS 선택자를 가진 모든 요소 선택하는 메서드
.querySelectorAll() .querySelectorAll()은 특정 CSS 선택자를 가진 모든 요소를 배열로 가져오는 메서드입니다. 문법 document.querySelectorAll( 'selector' ) 예를 들어 document.querySelectorAll( '.abc' ) 는 클래스 값이 abc인 모든 요소를 가져옵니다. document.querySelectorAll( '.abc, .def' ); 클래스 값이 abc 또는 def인 모든 요소를 가져옵니다. 예제 1 클래스 값이 abc인 요소 중 두번째 요소의 색을 빨간색으로 만듭니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> ...
JavaScript / Object / Date / 당월 말일 구하는 방법
다음은 2022년 3월 1일이다. Date( 2022, 2, 1 ) 날짜 자리에 0이 들어가면 전달 말일이다. 즉 다음은 2022년 2월 28일이다. Date( 2022, 2, 0 ) 이를 이용하여 현재 달의 말일을 구할 수 있다. 다음은 오늘 날짜를 출력하는 것이고... <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> ...
JavaScript / window.matchMedia() / CSS 미디어쿼리를 자바스크립트에 사용하는 메소드
window.matchMedia() CSS는 미디어쿼리를 이용해서 접속하는 웹브라우저의 가로 크기에 따라 다른 설정을 할 수 있습니다. 자바스크립트에서도 window.matchMedia()를 이용해서 접속하는 웹브라우저의 가로 크기에 따라 다른 작업을 할 수 있습니다. 반응형 웹디자인을 할 때 유용한 메소드입니다. 문법 window.matchMedia( mediaQueryString ) mediaQueryString : CSS 미디어쿼리를 입력합니다. window는 생략할 수 있습니다. 예를 들어 window.matchMedia( '( min-width: 500px )' ) 는 500px 이상을 뜻합니다. 속성 .media : mediaQueryString을 ...
JavaScript / window.open / 새 창 띄우기, 부모 창과 자식 창 사이 값 전달하기
window.open으로 새 창을 띄우고, 부모 창에서 자식 창으로, 자식 창에서 부모 창으로 값을 전달하는 방법을 정리한다. 부모 창이 parent.html, 자식 창이 child.html이다. 새 창 띄우기 문법은 다음과 같다. window.open( url, windowName, windowFeatures ); url : 새 창에 들어갈 문서 주소 windowName : 윈도우 이름 windowFeatures : 새 창의 특성 예를 들어 다음은... window.open( "child.html", "Child", "width=400, height=300, top=50, left=50" ...
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 ) ) ...
현재 날짜와 시간 가져오기 Date()로 현재 날짜와 시간을 가져온다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> body { font-family: Consolas, monospace; font-size: ...