티스토리 뷰

UI_UX/JavaScript & JQuery

[JavaScript] 10. String 객체 사용

쟌쥰 2020. 1. 26. 15:54 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<script type="text/javascript">
	function strTest01() {
		var str01 = "String ";
		var str02 = "Test";

		var str03 = str01 + str02;
		alert(str03);

		// concat()
		var str04 = str01.concat(str02, " Java ", "Script!!!");
		alert(str04);
	}

	function strTest02() {
		var num = 12.5;
		var bool = true;
		var result = "String : " + num + bool;

		alert(result + " : " + typeof (result));
	}

	function strTest03() {
		var span = document.getElementById("res");

		var str = prompt("이름을 입력해 주세요");

		// 동등연산자 ==	
		if (str == "kh") {
			span.textContent = str + " 님, 환영합니다.";
		} else if (str == "kh정보교육원") {
			span.textContent = str + " 님, 환영합니다.";
		} else {
			span.textContent = "이름을 확인해 주세요!!";
		}

		// 동등연산자를 사용하면, 비교하는 자료형이 자동으로 형 변환 된다.
		var num = 10;
		if (num == "10") {
			alert("==연산자 사용. 숫자 10이 맞습니다.");
		} else {
			alert("==연산자 사용. 숫자 10이 아닙니다.");
		}

		// === : 엄격한 비교(자동 형 변환이 일어나지 않음!)
		if (num === "10") {
			alert("=== 연산자 사용. 숫자 10이 맞습니다.");
		} else {
			alert("=== 연산자 사용. 숫자 10이 아닙니다.");
		}

		//
		var strObj = new String("kh"); //String 객체
		var strLiteral = "kh"; //그냥 값
		if (strObj == strLiteral) {
			alert("문자가 같다!");
		} else {
			alert("문자가 다르다!");
		}

		if (strObj === strLiteral) {
			alert("문자가 같다." + typeof (strObj) + " , " + typeof (strLiteral));
		} else {
			alert("문자가 다르다." + typeof (strObj) + " , " + typeof (strLiteral));
		}

	}

	function strTest04() {
		var str = "홍길동 이순신 김선달 유재석 강호동 홍길동";
		var prop = prompt("검색할 이름 입력");

		// indexOf : 왼쪽 -> 오른쪽으로 검색 (첫번째 인덱스 반환)
		// lastIndexOf : 오른쪽 -> 왼쪽으로 검색 (첫번째 인덱스 반환)
		// 만일, 검색하는 값이 존재하지 않으면 -1 반환
		alert("indexOf : " + str.indexOf(prop));
		alert("lastIndexOf : " + str.lastIndexOf(prop));

	}

	function strTest05() {
		var str = "문자열 추출하기. 관련 메소드:indexOf,substring.";
		var startIndex = str.indexOf(":");
		var endIndex = str.lastIndexOf(".");

		var res = str.substring(startIndex + 1, endIndex);
		alert(res);

		var splitRes = res.split(",");
		alert(splitRes[0]);
		alert(splitRes[1]);
	}

	function strTest06() {
		var prop = prompt("쉼표로 구분하여 키워드를 입력하세요", "ex)사과,바나나,키위,귤,수박");
		var propArr = prop.split(",");

		var res = "";
		for (var i = 0; i < propArr.length; i++) {
			res += propArr[i] + "<br>";
		}
		document.getElementById("key").innerHTML = res;

	}
</script>


</head>
<body>

	<p>
		문자열 합치기
		<button onclick="strTest01();">클릭</button>
	</p>

	<p>
		다른 자료형 합치기
		<button onclick="strTest02();">클릭</button>
	</p>

	<p>
		문자열 비교하기
		<button onclick="strTest03();">클릭</button>
		<span id="res"></span>
	</p>

	<p>
		문자열 검색하기
		<button onclick="strTest04();">클릭</button>
	</p>

	<p>
		문자열 추출하기
		<button onclick="strTest05();">클릭</button>
	</p>

	<p>
		키워드 나누기
		<button onclick="strTest06();">클릭</button>
	</p>
	<div id="key"></div>




</body>
</html>

'UI_UX > JavaScript & JQuery' 카테고리의 다른 글

[JavaScript] 12. 팝업창, 윈도우, location  (0) 2020.01.26
[JavaScript] 11. JavaScript 배열  (0) 2020.01.26
[JavaScript] 9. Math 객체 사용  (0) 2020.01.26
[JavaScript] 8. Date 객체 사용  (0) 2020.01.26
[JavaScript] 7. trans Object 형변환  (0) 2020.01.26
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/07   »
일 월 화 수 목 금 토
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31
글 보관함