-
자바스크립트(배열,제어문)-22.04.06HTML 2022. 4. 6. 17:51728x90
<배열>
js폴더 만들고 .js형태 파일 만들기
<array.html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link rel="stylesheet" href="../css/outStyle.css"> <style> div { border: 3px dotted gold; height: 20px; margin: 10px; padding: 10px; } </style> </head> <body> <script src="../js/array.js"></script> <h4>리터럴로 배열 생성</h4> <input type="button" value="생성" onclick="proc1()"> <br> <div id="d1"></div> <h4>생성자로 배열 생성</h4> <input type="button" value="생성" onclick="proc2()"> <br> <div id="d2"></div> <input type="button" value="생성" onclick="proc3()"> <br> <div id="d3"></div> </body> </html><array.js>
function proc1() { //리터럴로 배열 생성 var fruit=["사과","포도",100,12.34,true,"복숭아"]; //document.getElementById('d1').innerText=fruit; print(fruit,"d1"); //var는 그 함수내에서만 사용 가능한 변수이므로 매개변수로 값 넘겨준다. } function proc2() { //생성자로 배열 생성 var fruit=new Array("참외","수박","키위"); //document.getElementById('d2').innerText=fruit; print(fruit,"d2"); } function proc3() { var fruit= new Array(); fruit[0] ="귤"; fruit[1] ="앵두"; fruit[2] ="샤인머스캣"; fruit[3] ="자두"; fruit[4] ="복숭아"; document.getElementById('d3').innerText=fruit; } function print(f,id){ var ff=""; for(var i=0; i<f.length; i++){ if(i!=0) ff+="/"; ff+=f[i]; } document.getElementById(id).innerText=ff; }
<연산해보기>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link rel="stylesheet" href="../css/outStyle.css"> <style> div{ border: 3px dashed green; height: 100px; margin: 5px; } </style> </head> <script> function print() { //prompt를 통해 반환 받는 값의 타입은 String //window.prompt("필수항목","옵션항목"); 윈도우는 생략 가능 var a= parseInt(prompt("값을 입력 하세요","A")); var c= prompt("연산자를 입력하세요","+,-,*,/"); var b= parseInt(prompt("값을 입력 하세요","B")); //페이지 꺼버리기 if(a==null || b==null || c==null) return false; //if문 /* var sum = ""; if(c == '+'){ sum = a + b; }else if(c == '-'){ sum = a - b; }else if(c == '*'){ sum = a * b; }else if(c == '/'){ sum = a / b; }else{ alert("+,-,*,/ 중 하나의 연산자를 입력하세요") print(); }*/ //switch문 var sum = ""; switch (c) { case '+': sum=a+b; break; case '-': sum=a-b; case '*': sum=a*b; break; case '/': sum=a/b; default: break; } //result영역에 출력하기 //document.getElementById('result').innerText=sum; //id태그 있을 때 document.getElementsByTagName('div')[0].textContent+=sum; //id태그 없을 때 } </script> <body> <h4>prompt를 통해 값 2개와 연산자를 입력 받고 출력하세요</h4> <button type="button" onclick="print()">출력하기</button> <!-- <div id="result"></div> id태그 존재할때 --> <div></div> </body> </html>
=>{ }가 잘 맞는지 확인필수~~~
document.write("등급 A");은 내용을 덮어쓰이므로 그냥 확인용으로만 사용하도록 한다.
<등급 출력하기>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link rel="stylesheet" href="../css/outStyle.css"> <script> function grade(){ var score = prompt("성적을 입력하세요","0~100사이 정수"); //swtich /* switch(score/10){ case 10: case 9: document.write("등급 A"); break; case 8: document.write("등급 B"); break; case 7: document.write("등급 C"); break; case 6: document.write("등급 D"); break; case 5: case 0: document.write("등급 F"); break; } */ //console.log(score/10); //if - switch보다 세밀한 조건을 사용 score = score/10; if(score == 10 || score >= 9.0 && score <= 9.9){ // document.write("등급 A"); document_.getElementsByTagName('div')[0].innerText = "등급 A"; }else if(score >= 8.0 && score <= 8.9){ document.write("등급 B"); }else if(score >= 7.0 && score <= 7.9){ document.write("등급 C"); }else if(score >= 6.0 && score <= 6.9){ document.write("등급 D"); }else if(score > 10){ document.write("알 수 없는 학점"); }else{ document.write("등급 F"); } } </script> </head> <body> <h4>성적을 입력 후 등급 출력</h4> <input type="button" value="등급확인" onclick="grade()"> <div></div> </body> </html>
<구구단 문제>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link rel="stylesheet" href="../css/outStyle.css"> <style> table, td { border:1px solid black; } </style> </head> <script> document.write("<h1>구구단표</h1>"); document.write("<table>"); for (var i = 1; i <= 9; i++) { document.write("<tr>"); document.write("<td>" + i + "</td>"); for (var j = 2; j <= 9; j++) { document.write("<td>" + i * j + "</td>"); } document.write("</tr>"); } document.write("</table>"); </script> <body> </body> </html>
728x90'HTML' 카테고리의 다른 글
자바스크립트 호이스팅, ES6백틱-22.04.07 (0) 2022.04.07 자바스크립트 반복문2,함수-22.04.07 (0) 2022.04.07 자바스크립트,HTML요소 접근-22.04.06 (0) 2022.04.06 HTML 유용한 정보 (0) 2022.04.06 CSS레이아웃-22.04.05 (0) 2022.04.05