자바에서 유용하게 쓰던 문자열 메소드와 수학 메소드를 소개한다.
- String 메소드 -
toUpperCase : 해당 문자열을 전부 대문자로 치환
toLowerCase : 해당 문자열을 전부 소문자로 치환
length : 문자열의 길이를 반환
indexOf : 어떤 문자를 받아 그 문자가 문자열의 앞에서 몇번째에 위치 하는 문자인지 검색
lastIndexOf : 어떤 문자를 받아 그 문자가 문자열의 뒤에서 몇번째에 위치 하는 문자인지 검색
charAt : 문자열의 n번째 문자를 리턴하는 메소드
substring : 문자열을 n1번째 부터 n2 -1 번째 까지 잘라서 보여주는 메소드
split : 문자열을 특정 기준을 잡아 잘라서 배열로 반환 (ex 가, 나, 다, 라, ", " 기준으로 split -> 배열[가, 나, 다, 라])
- Math 메소드 -
abs : 해당 값을 절대값으로 반환
random : 랜덤값 발생
round : 소수 반올림
floor : 소수 버림
ceil : 소수 올림
예제를 직접 하나하나씩 써보고 결과를 확인해보자
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.area1{
border: 1px solid red;
height:450px;
}
.area2 {
border:1px solid red;
height:150px;
}
</style>
</head>
<body>
<h1>String과 Math</h1>
<h3>String</h3>
<p>"" 혹은 ''로 묶여 있는 리터럴이다.<br>
자바스크립트의 내장객체로 String 객체의 기본적인 메소드가 있다.</p>
<button onclick="showStringMethod();">문자열 처리 메소드</button>
<div id="area1" class="area1"></div>
<script type="text/javascript">
function showStringMethod() {
var str1 = "Apple Iphone";
var area1 = document.getElementById("area1");
// 대문자, 소문자로 변경해주는 메소드
area1.innerHTML += "toUpperCase() : " + str1.toUpperCase() + "<br>";
area1.innerHTML += "toLowerCase() : " + str1.toLowerCase() + "<br>";
// 문자열의 길이를 리턴하는 속성
area1.innerHTML += "length : " + str1.length + "<br>";
// 문자열에 n번째 위치 찾는 메소드 (0번부터 시작하므로 1을 더하면 편함)
area1.innerHTML += "문자열에서 e의 위치 : " + (str1.indexOf('e') + 1) + "<br>";
area1.innerHTML += "뒤에서부터 e의 위치 : " + (str1.lastIndexOf('e') + 1) + "<br>";
// 문자열에서 n번째 인덱스에 해당하는 문자를 리턴하는 메소드
for(var i = 0; i < str1.length; i++){
area1.innerHTML += i + "번째 인덱스 : " + str1.charAt(i) + "<br>";
}
// 문자 하나도 문자열이라고 생각
// 문자열의 일부만 리턴하는 메소드 (8부터 10 전까지 자른다.)
area1.innerHTML += "문자열 일부만 리턴 : " + str1.substring(8, 10) + "<br>";
// 문자열을 분리하여 배열로 리턴하는 메소드
var str2 = "사과, 바나나, 복숭아, 키위, 파인애플";
var fruits = str2.split(", ");
area1.innerHTML += "str2 : " + str2 + "<br>";
area1.innerHTML += "fruits : " + fruits + "<br>";
console.log(str2);
console.log(fruits);
}
</script>
<h3>Math</h3>
<button onclick="showMathMethod();">숫자 처리 메소드</button>
<div id="area2" class="area2"></div>
<script type="text/javascript">
function showMathMethod() {
var num1 = -123;
var area2 = document.getElementById("area2");
area2.innerHTML += "절대값 : " + Math.abs(num1) + "<br>";
area2.innerHTML += "임의의 난수 발생 : " + Math.random() + "<br>";
area2.innerHTML += "반올림 : " + (Math.round(123.456 * 100) / 100) + "<br>";
area2.innerHTML += "내림 : " + (Math.floor(123.456 * 100) / 100) + "<br>";
area2.innerHTML += "올림 : " + (Math.ceil(123.456 * 100) / 100) + "<br>";
}
</script>
</body>
</html>
'HTML, CSS, JavaScript, jQuery > 04.Java Script' 카테고리의 다른 글
| [JS]04-008.JS에서의 배열, 배열 메소드(indexOf, concat, join, reverse, sort, push, pop, shift, unshift, slice, splice, toString) (0) | 2018.11.09 |
|---|---|
| [JS]04-007.JS에서의 ===연산자와 == 연산자, !==, !=, Switch Case 문 (0) | 2018.11.07 |
| [JS]04-005.변수 및 자료형(+typeof, 동적 타입 변경 ) (0) | 2018.11.07 |
| [JS]04-004.HTML 태그에 접근하는 방법(Id, 태그 명, name) (0) | 2018.11.06 |
| [JS]04-003.주석, document.write(), inner HTML, console.log() (0) | 2018.11.06 |