<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<style>
div {
border: 1px solid red;
height: 150px;
}
</style>
<body>
<h1> 기본 문법 문제</h1>
문제1. 다음 보기에 있는 텍스트 필드에 작성한 문자열의 길이를 알아올 수 있도록 구현하시오
<fieldset>
<legend>보기</legend>
<input type="text" placeholder="글자를 작성해보세요" size=100 id="text1">
</fieldset><br>
<div id="result1"> </div>
<button onclick="stringLength();"> 확인하기</button>
<script>
function stringLength() {
var str = document.getElementById("text1").value;
var result1 = document.getElementById("result1");
result1.innerHTML += "문자열 길이: " + str.length + "<br>";
result1.innerHTML += "문자열 첫 번째 글자: " + str.charAt(0) + "<br>";
result1.innerHTML += "문자열 마지막 글자: " + str.charAt(str.length - 1) + "<br>";
}
</script>
<br><br>
<hr>
<br><br>
문제2. 다음 보기에 있는 문자열을 ,(콤마) 를 기준으로 잘라내어 하나하나 출력하시오
(동작 결과는 정답을 확인하셔도 됩니다.)
<fieldset>
<legend>보기</legend>
<label id="la1">콜라,사이다,햄버거,피자,한약</label>
</fieldset><br>
<div id="result2"> </div>
<button onclick="stringSplit();"> 확인하기</button>
<script>
function stringSplit() {
var menu = document.getElementById("la1").innerHTML;
console.log(la1.value);
var arr = menu.split(",");
var result2 = document.getElementById("result2");
result2.innerHTML = "";
for (var i = 0; i < arr.length; i++) {
result2.innerHTML += (i+1) + " 번째: " + arr[i] + "<br>";
}
}
</script>
</body>
</html>
