출력
| document.write('출력할 메세지') | 이미 실행된 document를 덮어 씌워버리므로 사용하지 않음 |
| document.querySelector('').innerText = "출력할 메세지" | 주소값을 찾아 해당 곳에 출력하는 메세지를 띄움 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
div{
height: 100px;
border : 2px solid pink;
margin: 20px;
padding: 30px;
font-size: 2.0rem;
}
</style>
<script type="text/javascript">
document.write('안녕하세요~~');
// function show() { }
// let show = function () { }
let show = () => {
// document.write("곧 수업끝나요"); // 다 없어짐
// id = helloshow 검색 - 출력
document.querySelector('#helloshow').innerText = "수업끝나기 15분 전";
}
</script>
</head>
<body>
<pre>
document.write("곧 수업끝나요");
실제 실행시에는 사용하면 안된다
이미 실행된 document를 새로운 document로 덮어진다
</pre>
<div id="result">hello</div>
<br><br>
<div id="helloshow"></div>
<button onclick="show()">확인</button>
</body>
</html>변수
| 변수 | 재선언 가능 여부 | 값 변경 가능 |
| var | O | O |
| let | X | O |
| const | X | X |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
div{
height: 100px;
border : 2px solid pink;
margin: 20px;
padding: 30px;
font-size: 2.0rem;
}
</style>
<script>
const fncProc1 = () =>{
var v1 = "홍길동";
let v2 = "개나리";
const v3 = "진달래";
// 출력내용 변수
// let disp = "v1 = " +v1+"<br> v2 = "+v2+"<br> v3 = "+v3;
var disp = `v1 = ${v1} <br> v2 = ${v2} <br> v3 = ${v3}`;
document.getElementById('result1').innerHTML = disp;
v1="이순신";
v2="라일락"; // 재 선언은 불가능하나 값 변경 가능
// Assignment to constant variable.
// v3="바닐라"; // 재 선언 & 값 변경 불가능
var disp = `v1 = ${v1} <br> v2 = ${v2} <br> v3 = ${v3}`;
document.getElementById('result1').innerHTML = disp;
}
</script>
</head>
<body>
<div id='result1'>
</div>
<input type="button" value="확인" onclick="fncProc1()">
</body>
</html>변수 범위
| 전역변수 | 함수 밖에서 선언된 변수 모든 함수에서 변수를 사용할 수 있다. |
var / let / const |
| 지역변수 | 함수 내부에서 선언된 변수 선언된 함수(블럭) 내부에서만 사용할 수 있다. |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
div{
height: 100px;
border : 2px solid pink;
margin: 20px;
padding: 30px;
font-size: 2.0rem;
}
</style>
<script type="text/javascript">
// let vres="";
window.onload=function(){
vres = document.getElementById('result1') // let var 생략하면 전역변수
}
// 오늘의 날짜생성
let today = new Date();
const dateShow = () => {
let disp = `오늘은 ${today} 입니다<br>`;
disp += `${today.toLocaleString()}`
vres.innerHTML = disp;
//document.write(disp);
}
</script>
</head>
<body>
<div id="result1"></div>
<button onclick="dateShow()">확인</button>
</body>
</html>입력
| window.prompt('알림', '기본값') | 팝업창을 띄워 직접 입력을 받는 방식 |
| .document.getElementById('띄울 곳 id').(value/innerText/innerHTML) = document.getElementById('input id').value; |
input type="text"로 받아 받은 value값을 주소값을 찾아 해당 곳에 출력하는 메세지를 띄움 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
div{
height: 100px;
border : 2px solid pink;
margin: 20px;
padding: 30px;
font-size: 2.0rem;
}
</style>
<script type="text/javascript">
//prompt로 입력
const calcPro = () => {
// 변수를 생략해도 되지만 나중에 각각 작업시에 변수 이름이 겹칠 수 있기 때문에
// 생략되면 전역변수 취급이 되기 때문에 주로 let을 사용하기
//입력
first = parseInt(window.prompt("첫번째 수 입력","1~100사이"));
second = parseInt(window.prompt("두번째 수 입력"));
// window.alert(first+second);
// 출력내용
disp = `첫번째 수 ${first}<br>`;
disp += `두번째 수 ${second} <br>`;
disp += `합 : ${first+second}<br>`;
window.document.getElementById('result1').innerHTML = disp;
}
//input으로 입력
const inputCalc = () => {
let num1 = parseInt(document.getElementById('su1').value);
let num2 = parseInt(document.getElementById('su2').value);
let sum = num1+num2;
window.document.getElementById('res').value = sum;
// 출력내용 34 + 26 = 27
dis = `${num1} + ${num2} = ${sum}<br>`;
window.document.getElementById('result2').innerHTML = dis;
}
</script>
</head>
<body>
<div id="result1"></div>
<button onclick="calcPro()">확인</button>
<hr color="red">
첫번째 수 <input id="su1"><br>
두번째 수 <input id="su2"><br>
결과 <input id="res"><br>
<div id="result2"></div>
<button onclick="inputCalc()">확인</button>
</body>
</html>조건문
if
java와 유사
if(조건) / else if(조건) / esle
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="../CSS/public.css">
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
const proc1 = () => {
// 첫번째 수 입력
let su1 = prompt("첫 번째 수 입력");
// 연산자 입력
let op = prompt("연산자 입력");
// 두번째 수 입력
let su2 = prompt("두 번째 수 입력");
let res = 0;
// 비교
if(op==='+'){ // 더하기 할때만 변환 필요
res=parseInt(su1)+parseInt(su2);
} else if(op=='-'){
res=su1-su2;
} else if(op=='/'){
res=su1/su2;
res=res.toFixed(2); //소숫점 2자리 출력
} else if(op=='*'){
res=su1*su2;
} else{
alert('연산자 오류입니다');
// document.getElementById('result1').innerText = "연산자 오류";
return;
}
res=res.toLocaleString(); // ,로 출력
//출력 내용 34+23=57
let disp = ` ${su1} ${op} ${su2} = ${res} <br>`;
document.getElementById('result1').innerHTML = disp;
}
</script>
</head>
<body>
<div class="box">
<h3>두 개의 정수와 연산자를 입력(prompt)해서 계산 하는 프로그램</h3>
<input type="button" value="확인" onclick="proc1()"> <br> <br>
<div id="result1"></div>
</div>
</body>
</html>switch
<!DOCTYPE html>
<html>
<head>
<link rel="shortcut icon" href="../images/check.png">
<link rel="stylesheet" href="../CSS/public.css">
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
const proc1 = () => {
// 첫번째 수 입력
let su1 = prompt("첫 번째 수 입력");
// 연산자 입력
let op = prompt("연산자 입력");
// 두번째 수 입력
let su2 = prompt("두 번째 수 입력");
let res = 0;
// 비교
switch(op){
case "+":
res=parseInt(su1)+parseInt(su2);
break;
case "-":
res=su1-su2;
break;
case "*":
res=su1*su2;
break;
case "/":
res=su1/su2;
res=res.toFixed(2); //소숫점 2자리 출력
break;
default:
alert('연산자 오류입니다');
return;
}
res=resPro(res);
// res=res.toLocaleString(); // ,로 출력
//출력 내용 34+23=57
let disp = ` ${su1} ${op} ${su2} = ${res} <br>`;
document.getElementById('result1').innerHTML = disp;
}
function resPro(res) {
res=res.toLocaleString();
return res;
}
const proc2 = () => {
let today = new Date();
// alert(today.getDay());
let day ="";
switch (today.getDay()) {
case 0:
day="일요일";
break;
case 1:
day="월요일"
break;
case 2:
day="화요일"
break;
case 3:
day="수요일"
break;
case 4:
day="목요일"
break;
case 5:
day="금요일"
break;
case 6:
day="토요일"
break;
default:
break;
}
let disp = `오늘은 ${today.toLocaleString()} <br>`;
disp+= `${day} 입니다`;
document.getElementById('result2').innerHTML = disp;
}
</script>
</head>
<body>
<div class="box">
<h3>두 개의 정수와 연산자를 입력(prompt)해서 계산 하는 프로그램</h3>
<input type="button" value="확인" onclick="proc1()"> <br> <br>
<div id="result1"></div>
</div>
<div class="box">
<h3>날짜 생성 - new Date()<br> getDay()를 이용하여 요일 구하기 (0~6 값 리턴)</h3>
<input type="button" value="확인" onclick="proc2()"> <br> <br>
<div id="result2"></div>
</div>
</body>
</html>점수를 받아 학점을 출력하는 예시
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="../CSS/public.css">
<!-- href="http://ip주소(localhost)/webpro/css/public.css" -->
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
const proc1 = () => {
let score = prompt("점수를 입력하세요");
//점수범위를 확인
if(!(score<=100&&score>=0)){
alert("점수 범위에서 벗어났습니다");
return;
}
let num = parseInt((score/10).toFixed(0));
switch (num) {
case 10:
res = "A";
break;
case 9:
res = "A";
break;
case 8:
res = "B";
break;
case 7:
res = "C";
break;
case 6:
res = "D";
break;
default:
res="F";
break;
}
let disp;
disp = ` 점수 : ${score} <br>`
disp+=`학점 : ${res} <br>`;
document.getElementById('result1').innerHTML = disp;
}
</script>
</head>
<body>
<div class="box">
<h3>정수 입력(prompt)해서 학점을 계산하는 프로그램</h3>
<input type="button" value="확인" onclick="proc1()"> <br> <br>
<div id="result1"></div>
</div>
</body>
</html>반복문을 사용한 가위바위보 예시
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="../CSS/public.css">
<!-- href="http://ip주소(localhost)/webpro/css/public.css" -->
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
function proc1() {
let user1;
let user2;
// 첫번째 사람
while(true){
user1 = prompt("use1의 가위 바위 보를 입력해주세요");
if(user1!="가위"&&user1!="바위"&&user1!="보"){
alert("잘못된 입력입니다.");
continue;
}
break;
}
// 두번째 사람
while(true){
user2 = prompt("user2의 가위 바위 보를 입력해주세요");
if(user2!="가위"&&user2!="바위"&&user2!="보"){
alert("잘못된 입력입니다.");
continue;
}
break;
}
if(user1==user2){
res="비겼습니다.";
} else if((user1=="가위"&&user2=="보")||(user1=="주먹"&&user2=="가위")||(user1=="보"&&user2=="주먹")){
res="user1가 이겼습니다!";
} else{
res="user2가 이겼습니다!";
}
disp = ` user1 : ${user1} <br>`
disp+= ` user2 : ${user2} <br><br>`
disp+=`결과 : ${res} <br>`;
document.getElementById('result1').innerHTML = disp;
}
</script>
<body>
<div class="box">
<h3>두 사람의 가위바위보를 입력(prompt)해서 승패를 출력하는 프로그램</h3>
<input type="button" value="확인" onclick="proc1()"> <br> <br>
<div id="result1"></div>
</div>
</body>
</html>다중 반복문
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../CSS/public.css">
<style type="text/css">
td{
width: 50px;
height: 50px;
text-align: center;
}
</style>
<script>
function proc1() {
let disp = `<table border="1">`;
// 줄 (행) 생성 - <tr>
for(let i =1; i<10;i++){
disp += `<tr>`;
// 칸 (열) 생성 - <td>
for(let j=1;j<10;j++){
disp += ` <td> ${i*j} </td>`;
}
disp += `</tr>`;
}
disp +=`</table>`;
document.querySelector('#result1').innerHTML=disp;
}
</script>
</head>
<body>
<div class="box">
<h3>다중 반복문을 이용하여 구구단 테이블 작성</h3>
<input type="button" value="확인" onclick="proc1()"> <br> <br>
<div id="result1"></div>
</div>
</body>
</html>for / in
1. 객체 선언 key : value 형태로 선언
2. for (let i in 객체이름){ }
3. 객체이름[key] = > 객체이름[ ${ i } ] ex. myCar[model]
value = > ${ 객체이름[ i ] } ex. BMW
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="../CSS/public.css">
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
const proc1 = () =>{
// 객체를 선언 { 키(name) : value, 키(name) : value, 키(name) : value}
const myCar = {make : "BMW", model : "X5", year : 2020 };
let str ="";
for(let i in myCar){
str += `myCar[${i}] : ${myCar[i]} <br>`
}
document.querySelector('#result1').innerHTML=str;
}
</script>
</head>
<body>
<div class="box">
<h3>객체 속성과 값 <br>
{ 키(name) : value, 키(name) : value, 키(name) : value} <br>
for ~ in</h3>
<input type="button" value="확인" onclick="proc1()"> <br> <br>
<div id="result1"></div>
</div>
</body>
</html>break / continue
'웹프로그래밍 > HTML CSS JavaScript' 카테고리의 다른 글
| [JavaScript] 리터럴 객체 / 동적함수 / 객체생성자함수 (0) | 2024.05.07 |
|---|---|
| [JavaScript] 배열 / 함수 / confirm() (0) | 2024.05.07 |
| [CSS] 레이아웃과 flex (0) | 2024.04.30 |
| [CSS] CSS박스모델 (0) | 2024.04.30 |
| [CSS] 선택자/ 클래스/폰트 등등 (0) | 2024.04.29 |
