1. 자바스크립트로 구구단을 짜시오.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <script> document.write("<table border = " + 1 + ">"); document.write("<tr>"); document.write("<td>"); document.write("</td>"); for (var i = 2; i < 10; i++) { document.write("<td>"); document.write(i + "단"); document.write("</td>"); } document.write("</tr>"); for (var j = 1; j < 10; j++) { document.write("<tr>"); document.write("<td>"); document.write(j); document.write("</td>"); for (var i = 2; i < 10; i++) { document.write("<td>"); document.write(i + " * " + j + " = " + i * j); document.write("</td>"); } document.write("</tr>"); } document.write("</table>"); </script> </head> <body></body> </html>
- 결과
💡Hello.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <script> // script src="js/Hello.js" alert("Hello Javascript!!"); // alert("Hello world"); /* alert라는 함수를 사용한 개념*/ // document.write("<h1>안녕하세요1</h1>"); /* 웹 브라우저에 의해 뿌려짐 */ </script> </head> <body> <h1>안녕하세요</h1> </body> </html>
💡Hello.js
// alert("Hello world"); console.log("메롱") // sysout과 같은 기능 console.log("메롱2") console.log("메롱3") console.log("메롱4") console.log("메롱5") console.log("메롱6") document.write("<h1>안녕하세요1</h1>");
- 출력결과
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <script> alert("Hello Javascript!!"); //*1번 var inputPro = prompt("출력창입니다.", "문장을 입력하세요."); // *2-1번 입력창 alert(inputPro); //*2-2번 var inputCon = confirm("진행하시겠습니까?"); // *3-1번 선택창 alert(inputCon); // *3-2번 </script> </head> <body> <h1>안녕하세요</h1> </body> </html>
-
*1번 실행
-
*2-1번 실행
-
*2-2번 실행
-
*3-1번 실행
-
*3-2번 실행
2. 자바 스크립트로 국영수 점수를 입력 받아 , 총점과 평균을 디스플레이 하시오.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <script> //alert("Hello Javascript!!"); var inputPro = prompt("국어 점수", "국어 점수를 입력하세요."); // *1번 입력 document.write("<h1>국어 점수:" + inputPro + "</h1>"); // *3번 var inputPro2 = prompt("수학 점수", "수학 점수를 입력하세요."); // *2번 입력 document.write("<h1>수학 점수:" + inputPro2 + "</h1>"); // *3번 document.write("<h1>총점:" + (Number(kor) + Number(mat)) + "</h1>"); // *4번 합 구하기 (숫자로 형 변환 필요) </script> </head> <body> <h1>안녕하세요</h1> </body> </html>
- *1번 국어 점수 입력
- *2번 수학 점수 입력
- *3번 실행
- *4번 총점 구하기
💡 변수 선언
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script>
var str = "가나다라마바사";
console.log(str);
console.log(str + " " + 'ABCDEFG'); // 쌍따옴표 홑따옴표 상관없이 둘 다 문자열로 인식
var num = 1234;
console.log("num : " + num);
num = 1234.12345;
console.log('num : ' + num);
var boo = true;
console.log("boo : " + boo);
</script>
</head>
<body></body>
</html>
💡JavaScript의 데이터타입
- 변수에는 모든 자료형을 담을 수 있다.
- 자료형: 문자, 숫자, 불리언, 함수, 객체, undefined
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <script> /* 변수에는 모든 자료형을 담을 수 있습니다. 자료형 : 문자, 숫자, 불리언, 함수, 객체, undefined */ var varStr = "ABCDEF"; console.log("varStr : " + varStr); var varNum = 123456; console.log("varNum : " + varNum); var varBoo = false; console.log("varBoo : " + varBoo); var varFun = function fun() {}; // 함수를 변수에 담을 수 있다. console.log("varFun : " + varFun); var varObj = {}; // 객체 console.log("varObj : " + varObj); var varUnd = undefined; console.log("varUnd : " + varUnd); </script> </head> <body></body> </html>
💡변수의 데이터 타입 확인 (typeof 함수)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <script> var varTemp; varTemp = "ABCDEF"; console.log("varTemp : " + varTemp); console.log("varTemp : " + typeof varTemp); // varTemp의 데이터 타입을 확인할 수 있음 varTemp = 123456; console.log("varTemp : " + varTemp); console.log("varTemp : " + typeof varTemp); varTemp = true; console.log("varTemp : " + varTemp); console.log("varTemp : " + typeof varTemp); varTemp = functiTemp() {}; console.log("varTemp : " + varTemp); console.log("varTemp : " + typeof varTemp); varTemp = {}; console.log("varTemp : " + varTemp); console.log("varTemp : " + typeof varTemp); varTemp = undefined; console.log("varTemp : " + varTemp); console.log("varTemp : " + typeof varTemp); </script> </head> <body></body> </html>
- 결과
💡 자료형 변환
- varType = Number(varType);
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <script> // 자료형 변환 var varType = "123"; console.log("varType type : " + typeof varType); console.log("varType : " + (varType + 1000)); varType = Number(varType); // java에서 integer.valueOf(); 와 같은 역할 console.log("varType type : " + typeof varType); console.log("varType : " + (varType + 1000)); </script> </head> <body></body> </html>
개발 연습장