ㅁ String 관련 메소드1
- 문자열 데이터에 html 태그를 감싸서 반환
(1) 문자열.bold() : "<b>문자열</b>" 반환
(2) 문자열.italics() : "<i>문자열</i>" 반환
(3) 문자열.small() : "<small>문자열</small>" 반환
(4) 문자열.sub() : "<sub>문자열</sub>" 반환
(5) 문자열.link(href) : "<a href='href'>문자열</a>" 반환
...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2>문자열 관련 html 메소드</h2>
<div id="result1"></div>
<script>
let str1 = "javascript";
const resultEl1 = document.getElementById("result1");
resultEl1.innerHTML = str1 + "<br>";
resultEl1.innerHTML += str1.bold() + "<br>";
resultEl1.innerHTML += str1.italics() + "<br>";
resultEl1.innerHTML += str1.small() + "<br>";
resultEl1.innerHTML += "기존글자" + str1.sub() + "<br>";
</script>
</body>
</html>
elements 탭에서 까보면 문자열이 태그로 감싸져 있음을 확인할 수 있다.
ㅁ String 관련 메소드2
(1) 문자열.toUpperCase() : 대문자로 변환한 새로운 문자열 반환
(2) 문자열.toLowerCase() : 소문자로 변환한 새로운 문자열 반환
(3) 문자열.charAt(index) : index위치의 단일 문자 반환
(4) 문자열.trim()
ㄴ 문자열 시작과 끝에 공백이 제거된 새로운 문자열 반환
ㄴ 한쪽 끝의 공백만 제거하려면 trimStart() 나 trimEnd() 사용
(5) 문자열.concat(string2, string3[, ...., stringN])
ㄴ 호출한 문자열과 전달된 문자열들을 모두 붙여 새로운 문자열로 반환
(단, 문자열 연결시키는 + 또는 +=이 concat 보다 더 우수함)
(6) 문자열.indexOf(searchValue[, fromIndex])
ㄴ 전달된 searchValue(문자열)과 일치하는 첫번째 index 반환, 없으면 -1 반환
ㄴ 옵션 fromIndex : 탐색 시작점의 index, 기본값은 0
(7) 문자열.lastIndexOf(searchValue[, fromIndex])
ㄴ 전달된 searchValue과 일치하는 마지막번째 index 반환, 없으면 -1반환
ㄴ 옵션 fromIndex : 탐색의시작점의 index, 기본값은 +Infinity (양수 무한대 - 마지막 인덱스 수를 몰라서)
(8) 문자열.startsWith(searchString[, position])
ㄴ 전달된 searchString으로 시작할 경우 true, 아니면 false 반환
ㄴ 옵션 position : searchString이 발견될 것으로 예상되는 시작 위치 index, 기본값은 0
(9) 문자열.endsWith(searchString[, length])
ㄴ 전달된 searchString으로 끝날 경우 true, 아니면 false 반환
ㄴ 옵션 length : 찾고자 하는 문자열의 길이, 기본값은 문자열의 전체 길이
(10) 문자열.substring(indexStart[, indexEnd])
ㄴ indexStart <= < indexEnd 범위의 문자열 반환
ㄴ 옵션 indexEnd : 생략시 문자열의 끝까지 반환
(11) 문자열.replace(pattern, replacement)
ㄴ 전달된 pattern(문자열 또는 정규식) 과 일치하는 항목 일부 또는 전체가 replacement로 대치된 새로운 문자열 반환
ㄴ pattern이 정규식이 아닌 문자열일 경우 첫번째 일치 항목만 대치됨
(12) 문자열.split( [seperator[, limit]] )
ㄴ 전달된 구분자를 이용해 여러개의 문자열로 나눈 값을 저장한 배열(Array)를 반환
ㄴ 옵션 separator : 문자열 또는 정규식(나중에 배움) 가능
ㄴ 옵션 limit : 끊어진 문자열의 최대 갯수, 배열의 요소가 limit개가 되면 split을 멈춤
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2>문자열 관련 html 메소드2</h2>
<div id="result2"></div>
<script>
let str2 = "Hello World";
const resultEl2 = document.getElementById("result2");
resultEl2.innerHTML = str2 + "<br>";
resultEl2.innerHTML += str2.toUpperCase() + "<br>";
resultEl2.innerHTML += str2.toLowerCase() + "<br>";
// 문자열의 길이 알아내는 거는 자바처럼 메소드가 아님. 속성에 접근.
resultEl2.innerHTML += "문자열의 길이: " + str2.length + "<br>";
for(let i=0; i<str2.length; i++) {
resultEl2.innerHTML += i + "번째 인덱스: " + str2.charAt(i) + "<br>";
}
resultEl2.innerHTML += "l의 위치: " + str2.indexOf("l") + "<br>";
resultEl2.innerHTML += "5번인덱스부터 탐색: " + str2.indexOf("l", 5) + "<br>";
resultEl2.innerHTML += "뒤에서부터 탐색: " + str2.lastIndexOf("l") + "<br>";
resultEl2.innerHTML += str2.substring(6) + "<br>";
resultEl2.innerHTML += str2.substring(0, 5) + "<br><br>";
let str3 = "사과,바나나,복숭아,키위";
let fruits = str3.split(","); // ["사과", "바나나", "복숭아", "키위"]
for(let i=0; i<fruits.length; i++) {
resultEl2.innerHTML += fruits[i] + "<br>";
}
</script>
</body>
</html>
ㅁ 수학 관련 메소드
(1) Math.abs(x) : x의 절대값 반환
(2) Math.pow(base, exponent) : base를 exponent 거듭제곱한 숫자 반환
(3) Math.sqrt(x) : x의 루트값 반환, x가 음수일 경우 NaN 반환
(4) Math.ceil(x) : x의 올림처리한 값 반환 // 소수점 아래 몇자리 지정 불가.
(5) Math.round(x) : x의 반올림처리한 값 반환
(6) Math.floor(x) : x의 버림처리한 값 반환
(7) Math.random() : 0.0 이상 1.0 미만의 난수 반환
(8) Math.max(value1[, value2[, ..]])
ㄴ 전달된 값들 중 가장 큰 값 반환
ㄴ 숫자가 아닌 값 전달시 NaN 반환
ㄴ 전달값이 없을 경우 -Infinity 반환
(9) Math.min(value1[, value2[, ..]])
ㄴ 전달된 값들 중 가장 작은 값 반환
ㄴ 숫자가 아닌 값 전달시 NaN 반환
ㄴ 전달값이 없을 경우 Infinity 반환
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2>수학 관련 메소드</h2>
<div id="result3"></div>
<script>
const resultEl3 = document.getElementById("result3");
resultEl3.innerHTML = Math.abs(-123) + "<br>";
resultEl3.innerHTML += Math.random() + "<br>";
resultEl3.innerHTML += Math.ceil(123.123) + "<br>";
resultEl3.innerHTML += Math.round(123.123) + "<br>";
resultEl3.innerHTML += Math.round(123.123, 2) + "<br>"; // 매개변수 1개 있는 메소드인데 오류안남.
resultEl3.innerHTML += Math.floor(123.567) + "<br>";
</script>
</body>
</html>
- 자바스크립트는 자유도가 높아서 매개변수 없는 메소드에 매개변수를 전달한다거나 매개변수를 더 전달해도 오류가 나지 않음.
ㅁ 형변환 관련 메소드
- 자바스크립트는 자동 형변환을 잘 지원하는 편이지만, 직접 형변환을 해야할 때가 있다.
(1) number를 string으로 변환
- number + ''" // 빈문자열을 더하기
- String(number) // 자바스크립트에서 제공하는 String 객체 변수 [이부분만 강의] 쓴다.
(2) string을 number로 변환
- Number(string)
- [Number.]praseInt(string)
- [Number.]parseFloat(string)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2>형변환 관련 메소드</h2>
<div id="result3"></div>
<script>
// (1) number를 string으로 변환
let i = 10;
let str = String(i);
console.log(i, typeof i);
console.log(str, typeof str);
// (2) string을 number로 변환
let j = Number(str); // "10" -> 10
console.log(j, typeof j);
console.log(parseInt(str));
console.log(parseFloat(str));
// parseInt와 parseFloat 차이점
str = "2.74";
console.log(str);
console.log(Number(str));
console.log(parseInt(str)); // 2 (무조건 정수형태)
console.log(parseFloat(str)); // 2.34 (문자열이 실수면 실수형태, 정수면 정수형태)
// Number와 parseInt 차이점
str = "10000원";
console.log(Number(str)); // NaN (숫자가 아닌 문자가 포함되어있으면 NaN 반환)
console.log(parseInt(str)); // 10000 (문자를 제외한 숫자값만 반환)
console.log(parseFloat(str)); // 10000
str = "10000.1원";
console.log(Number(str)); // NaN
console.log(parseInt(str)); // 10000
console.log(parseFloat(str)); // 10000.1 (문자를 제외한 숫자값만 반환)
</script>
</body>
</html>
- parseInt는 무조건 정수 형태.
parseFloat은 문자열이 실수면 실수 형태, 정수면 정수 형태.
- Number(str)은 문자열에 숫자가 아닌 문자가 있으면 NaN 반환.
parseInt와 parseFloat은 문자열에 문자가 있어도 문자는 제외하고 숫자만 반환.
(이 때 parseInt는 정수만 반환. parseFloat은 실수 형태면 실수, 정수 형태면 정수만 반환)
ㅁ 연습
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2>연습</h2>
정수1 : <input type="number" id="num1"> <br>
정수2 : <input type="number" id="num2"> <br>
<button onclick="fnSum();">덧셈</button>
<br><br>
<div id="result">결과 없음</div>
<script>
function fnSum() {
const num1Input = document.getElementById("num1"); // value값이 아닌 input 요소 객체다.
const num2Input = document.getElementById("num2");
const resultDiv = document.getElementById("result"); // 결과출력div 요소객체
if( num1Input.value && num2Input.value ) {
let sum = num1Input.value + num2Input.value;
resultDiv.innerHTML = "덧셈결과: " + sum;
}
else {
resultDiv.innerHTML = "숫자를 입력해주세요.".bold();
}
}
</script>
</body>
</html>
- 덧셈결과가 이상하다.
사용자가 숫자만 입력했다하더라도 input 요소의 value 속성값은 무조건 string타입이기 때문이다.
- 텍스트상자에 있는 value값을 가져오면 항상 문자열 데이터다.
<script>
function fnSum() {
const num1Input = document.getElementById("num1"); // value값이 아닌 input 요소 객체다.
const num2Input = document.getElementById("num2");
const resultDiv = document.getElementById("result"); // 결과출력div 요소객체
if( num1Input.value && num2Input.value ) {
let sum = Number(num1Input.value) + Number(num2Input.value);
resultDiv.innerHTML = "덧셈결과: " + sum;
}
else {
resultDiv.innerHTML = "숫자를 입력해주세요.".bold();
}
}
</script>
- Number로 문자열을 숫자로 형변환하면 덧셈이 정상적으로 수행된다.
<script>
function fnSum() {
const num1Input = document.getElementById("num1"); // value값이 아닌 input 요소 객체다.
const num2Input = document.getElementById("num2");
const resultDiv = document.getElementById("result"); // 결과출력div 요소객체
if( num1Input.value && num2Input.value ) {
let sum = Number(num1Input.value) + Number(num2Input.value);
resultDiv.innerHTML = "덧셈결과: " + sum;
}
else {
resultDiv.innerHTML = "숫자를 입력해주세요.".bold();
}
// 초기상태로 돌려두기
num1Input.value = "";
num2Input.value = "";
}
</script>
- 값을 입력하고 덧셈 버튼을 누르면, 결과가 나오고 초기화까지 진행됨.
