문자열 메소드 문제
1번
문제1. 다음 보기에 있는 텍스트 필드에 작성한 문자열의 길이를 알아올 수 있도록 구현하시오
<fieldset>
<legend>보기</legend>
<input type="text" placeholder="글자를 작성해보세요" size=100 id="text1">
</fieldset><br>
<div id="result1"> </div>
<button onclick="stringLength();"> 확인하기</button>
function stringLength() {
var txt = document.getElementById("text1");
//입력한 값을 선언한다
var divre=document.getElementById("result1");
//입력한 값을 가지고올 필드를 변수로 선언한다
divre.innerHTML=txt.value.length;
//필드안의 값을 앞서 가지고온 입력값의 length로 넣어준다
2번
문제2. 다음 보기에 있는 문자열을 ,(콤마) 를 기준으로 잘라내어 하나하나 출력하시오
(동작 결과는 정답을 확인하셔도 됩니다.)
<fieldset>
<legend>보기</legend>
<label id="la1">콜라,사이다,햄버거,피자,한약</label>
</fieldset><br>
<div id="result2"> </div>
<button onclick="stringSplit();"> 확인하기</button>
function stringSplit() {
var str=document.getElementById("la1").innerHTML;
//보기값을 변수로 선언한다.
var div2=document.getElementById("result2");
//입력값을 출력할 필드값을 변수로 선언한다.
for(var i =0; i<str.split(",").length; i++){
div2.innerHTML+=(i+1)+"."+str.split(",")[i]+" ";
//for문으로 보기값을 ,를 기준으로 나눠 몇개인지 알아, 그만큼 반복하게 한다
//필드변수 안에 나눠진 보기값을 하나씩 출력한다.
//str.split(,) 은 가지고있는값,split(나눌기준)이며 나누어진값은 배열로 만들어져
//[i]로 인덱스를 넣어주면 순서대로 확인할수 있다.
}
}
3번
문제3. <br>
글자를 입력후 입력 버튼을 클릭하면 <br>
메시지공간에 출력하고 대문자버튼,소문자버튼을 <br>
클릭하면 해당 입력값을 대/소문자로 바꾸어 주어라<br>
(입력 버튼을 클릭하면 입력창 값을 가져오고 입력창에 내용은 비워라!)
<fieldset>
<legend>입력창</legend>
<input type="text" id="memo" size="50" />
</fieldset><br>
<div id="result3"> </div>
<button onclick="memoPrint();">입력</button>
<button onclick="memoUpper();">대문자로 변경</button>
<button onclick="memoLower();">소문자로 변경</button>
var div3 = document.getElementById("result3");
//답을 출력할 영역을 선언한다
var memo1 = document.getElementById("memo");
//입력한 값을 선언한다.
function memoPrint(){
//버튼을 눌렀을때
print1 = div3.innerHTML=memo1.value;
//필드에 선언값을 출력하고 그걸 재 정의하여 삭제하여도 문제 없게 한다.
memo1.value=null;
//입력한 값을 가지고와 출력하고 입력영역은 삭제한다
}
function memoUpper(){
print1= div3.innerHTML=print1.toUpperCase();
//가지고 온 값을 대문자로 만든다
}
function memoLower(){
div3.innerHTML=print1.toLowerCase();
//가지고 온 값을 소문자로 만든다
}
간이계산기 만들기
<h2>간이 계산기 만들기</h2>
첫번째 값 : <input id="num1"><br>
두번째 값 : <input id="num2"><br>
<input type="button" value="+" onclick="calculator(this.value);">
<input type="button" value="-" onclick="calculator(this.value);">
<input type="button" value="x" onclick="calculator(this.value);">
<input type="button" value="/" onclick="calculator(this.value);">
<input type="button" value="%" onclick="calculator(this.value);"> <br><br>
계산결과 : <span id="calc"></span>
<script>
function calculator(operator) {
var no1 = document.getElementById("num1").value;
//1d에 입력된값을 가져온다.
var no2 = document.getElementById("num2").value;
//2에 입력된 값을 가져온다.
var resultset=document.getElementById("calc");
//결과를 출력할 필드를 가져온다
//스위치 케이스문 활용
switch(operator){
case "+":
var result = Number(no1)+Number(no2);
//1과 2값은 입력시 string이기때문에 Number로 형변환한다.
resultset.innerHTML=result;
//계산값을 rseult필드에 출력한다.
break;
case "-": var result = Number(no1)-Number(no2);
resultset.innerHTML=result;
break;
case "x": var result = Number(no1)*Number(no2);
resultset.innerHTML=result;
break;
case "/": var result = Number(no1)/Number(no2);
resultset.innerHTML=result;
break;
case "%": var result = Number(no1)%Number(no2);
resultset.innerHTML=result;
break;
}
}
</script>JS로 색깔, 사이즈 변경하기
문제1
<h3> 문제 1. 색상 선택후 변경 버튼을 클릭하면 색상이 변경되도록 만들어 보시오</h3>
<div id="div1"> </div>
<input type="color" id="selectColor">
<button onclick="colorChange();">변경</button>
<script>
function colorChange(){
var selCol=document.getElementById("selectColor").value;
//color에 선택한 색상값을 가지고 온다
var divarea=document.getElementById("div1");
//출력할 필드 값을 가지고온다.
div1.style.backgroundColor=selCol;
//필드의 배경색상을 색상값으로 변경한다
}
</script>
문제2
<h3> 문제 2. 버튼에 따른 크기 조절이 가능하게 만들어 보시오 </h3>
<div id="div2"> </div>
<button onclick="halfSize();">50x50</button> <button onclick="defaultSize();">원본(100x100)</button> <button onclick="doubleSize();">200x200</button>
<script>
function halfSize(){
var divsize = document.getElementById("div2");
//크기조절할 필드를 가지고온다.
divsize.style.width="50px";
divsize.style.height="50px";
//style을 임용하여 크기를 조정한다.
}
function defaultSize(){
var divsize = document.getElementById("div2");
divsize.style.width="100px";
divsize.style.height="100px";
}
function doubleSize(){
var divsize = document.getElementById("div2");
divsize.style.width="200px";
divsize.style.height="200px";
}
</script>JS를 활용한 표 만들기
<h1> 자동 테이블 만들기 </h1>
<h5> 힌트 : 반복문은 자바랑 같습니다. 다만! 변수만 var 데이터형이라는걸 기억해주세요 </h5>
테이블 행의 갯수 : <input type="text" size="1" id="rowNum"> <br>
테이블 열의 갯수 : <input type="text" size="1" id="colNum"><br>
<button onclick="table_make();">테이블 생성</button>
<script>
function table_make() {
var rowtd=Number(document.getElementById("rowNum").value);
var coltr=Number(document.getElementById("colNum").value);
//표를 만들기 위하 입력한 값을 가지고 온다.
coltd="";
for(var i=0;i<rowtd;i++){
coltd+="<td></td>";
}
//반복문으로 행의 갯수만큼 td태그를 만든다 +=로 반복된만큼 추가된다.
tabtag1="";
for(var i=0;i<coltr;i++){
tabtag1+="<tr>"+coltd+"</tr>";
}
//위에 만든 td태그를 안에 넣어 열의 수 만큼 반복문으로 tr태그도 늘린다.
document.write("<table border='1' width='500px' height='500px'>");
document.write(tabtag1);
document.write("</table>")
//write로 태그를 완성한다.
}
</script>표에 열, 행 숫자 추가하기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>학생정보 입력</title>
</head>
<body>
<h1> 자동 테이블 만들기(숫자넣기) </h1>
<h5> 힌트 : 반복문은 자바랑 같습니다. 다만! 변수만 var 데이터형이라는걸 기억해주세요 </h5>
테이블 행의 갯수 : <input type="text" size="1" id="rowNum"> <br>
테이블 열의 갯수 : <input type="text" size="1" id="colNum"><br>
<button onclick="table_make();">테이블 생성</button>
<script>
function table_make() {
var rowtd=Number(document.getElementById("rowNum").value);
var coltr=Number(document.getElementById("colNum").value);
coltd="";
for(var i=0;i<rowtd;i++){
coltd+="<td class='td1'></td>";
}
tabtag1="";
for(var i=0;i<coltr;i++){
tabtag1+="<tr class='td2'>"+coltd+"</tr>";
}
//////위와 같다, 다만 문자를 넣어주기위해 class값을 추가했다.
document.write("<table border='1' width='500px' height='500px'>");
document.write(tabtag1);
document.write("</table>")
var td1Value = document.getElementsByClassName("td2");
//td클래스를 가진 객체를 전부 가지고 온다.
var td1Value2 = "";
for(i=0;i<td1Value.length;i++){
//그 객체의 수만큼 반복한다.
td1Value2 = td1Value[i].childNodes;
//객체 아래 자식들도 전부 가지고 온다.
for(j=0;j<td1Value2.length;j++){
td1Value3=td1Value2[j];
td1Value3.innerHTML=(i+1)+"열 "+(j+1)+"행";
//자식들의 innerHTML에 반복문의 i와 j만큼 문자열을 추가한다
}
}
}
</script>
</body>
</html>- 열의 값을 가진 tr은 class로 가지고 왔기때문에 첫번째 tr은 tr[0]같은 배열로 지정된다.
- for문을 사용하여 tr[0]안에 있는 td에게 1열이라는 값을 추가하게 한다
- td또한 마찬가지로 td[0]에게는 1행이라는 값을 넣게 한다.
- 이런식으로 indext값을 활용하여 인덱스값 +1의 열과 행 값의 문자를 넣는것이다.
JS로 입력한 값 출력하기
hello world