728x90
반응형
✔ 자바스크립트 대화상자
- alert()
//비표준은 내 화면에서만 보이고 다른 사용자에게 안보이는 경우도 있다
사용자에게 메시지를 보여주고, 확인을 기다림
BOM(Browser Object Model)
window.alert()
alert();
- confirm()
사용자에게 메시지를 보여주고, 확인이나 취소를 누르면 그 결과를 불린값으로 반환(선택창이 2개로 보이는 - 반응형)
const result = confirm('확인이나 취소를 누르세요)
- prompt()
사용자에게 메시지를 보여주고, 사용자가 입력한 문자열을 반환
// 자바에서의 scanner 역할과 유사하다
❗ 입력받은 값은 문자형으로 저장된다
const result = prompt('문자를 입력하세요');✔ 대화상자
<!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>대화상자</title>
<script>
// alert('안녕하세요. 자바스크립트!');
// const result = confirm("확인 또는 취소를 눌러주세요"); // 나오기는 하지만
//T,F를 모일려면 출력을 해야겠지?
// console.log(result);
const name = prompt("당신의 이름을 입력하세요");
console.log(name);
console.log(typeof(name));
const age = prompt("당신의 나이을 입력하세요");
console.log(age);
console.log(typeof(age));
</script>
</head>
<body>
<h2>대화상자</h2>
</body>
</html>
✔ 문제.
이름과 국어점수, 수학점수, 영어점수를 입력받아 총점과 평균을 구하는 문서를 작성
(단,prompt를 사용해서 console에 결과를 출력)<!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>학생성적</title>
<script>
// 문제.
// 이름과 국어점수, 수학점수, 영어점수를 입력받아 총점과 평균을 구하는 문서를 작성
// (단,prompt를 사용해서 console에 결과를 출력)
const name =prompt("이름을 입력하세요")
console.log(`${name}님`);
const kor = Number(prompt("국어점수 : "));
console.log(`국어점수 : ${kor}점`);
const math = Number(prompt("수학점수 : "));
console.log(`수학점수 : ${math}점`);
const eng = Number(prompt("영어점수 : "));
console.log(`영어점수 : ${eng}점`);
const tot = kor+eng+math;
const avg = tot/3;
console.log(`총점 : ${tot}점`);
console.log(`평균 : ${avg}점`);
// console.log(` 총점 : ${parseInt(kor)+parseInt(math)+parseInt(eng)}`)
// console.log(` 평균 : ${(parseInt(kor)+parseInt(math)+parseInt(eng))/3}`)
</script>
</head>
<body>
<h2>학생성적</h2>
</body>
</html>
✔ 연산자(Operate)
1. 산술 연산자
+, -, *, /, %, **(제곱)
2 ** 2
2. 비교 연산자
>, < >=, <=, ==, != , ===(두 식 값이 같고, 타입까지 같으면 참),
!== (두 식의 값이 다르고, 타입까지 다르면 참)
'3' * '3' = 9
'3' == 3 -> true (자바스크립트)
'3' === 3 -> false (형이 다르기 때문 - 자바스크립트)
3. 대입 연산자
=, +=, -=, *=, /=, %=, **=
4. 증감 연산자
++변수, --변수, 변수++, 변수--
5. 논리 연산자
&&, ||, !
6. 비트 연산자
&, |, ^, <<, >>
7. 삼항 연산자
변수 = 조건식 ? 반환값1 : 반환값2
✔ 제어문
1. 조건문
if 문
if(조건식){
조건식의 결과가 true일 때 실행할 문장;
...
}
if~else 문
if(조건식){
조건식의 결과가 true일 때 실행할 문장;
...
}else{
조건식의 결과가 false일 때 실행할 문장;
}
if~else if~else문
if(조건식1){
조건식의 결과가 true일 때 실행할 문장;
...
}else if(조건식2){
조건식2 결과가 true일 때 실행할 문장;
}
...
}else{
모든 조건식의 결과가 false일 때 실행할 문장;
}
switch 문
switch(변수){
case 값1:
변수롸 값1이 같을 경우 실행할 문장;
...
break;
case 값2:
변수롸 값2이 같을 경우 실행할 문장;
...
break;
...
default:
변수와 모든 값이 다를 경우 실행할 문장;
...
}✔ if문
const age = Number(prompt('나이를 입력하세요'))
// if(age>19){
// console.log(`성인입니다.`)
// }else if(age > 14){
// console.log(`청소년입니다.`)
// }else if(age>6){
// console.log(`어린이입니다.`)
// }else{
// console.log(`유아입니다.`)
// }
if(age>19)console.log(`성인입니다.`)
else if(age > 14)onsole.log(`청소년입니다.`)
else if(age>6)console.log(`어린이입니다.`)
else console.log(`유아입니다.`)
// 한줄 표기 이상 무
✔ switch 문
let input = prompt('아동, 청소년, 성인 중 하나를 고르세요')
switch(input){
case '아동':
input +=': 입장료 무료' // '아동 : 입장료 무료'
break;
case '청소년' :
input += ': 입장료 15000원'
break
case '성인' :
input += ': 입장료 25000원'
break
default :
alert("입력값을 확인하게요")
input= '입력값 확인!'
}
console.log(input)
2. 반복문
while 문
while(조건식){
조건식의 결과가 true인 동안 반복할 문장;
...
}
do ~ while 문
do{
조건식의 결과가 true인 동안 반복할 문장;
...
}while(조건식);
for 문
for(초기값; 조건식; 증감식){
조건식의 결과가 true인 동안 반복할 문장;
...
}
continue 문
- 반복중인 루트 내에서 사용하여 해당 루프의 나머지 부분을 건너뛰고 다음 조건식의 판단으로 넘어감
break 문
- switch문 또는 반복중인 루프 내에서 사용하여 해당 문장을 완전히 종료시키고 다음에 위치한 실행문으로 이동✔ while, for 문
// const dan = Number(prompt('원하는 단을 입력하세요'))
// console.log(`${dan}단`)
// let i =1;// const인 경우에는 i가 변화하기 때문에 한번 반복 후 오류발생!!!
// while(i<=9){
// console.log(`${dan} * ${i} = ${dan*i}`);
// i++
// }
const dan = Number(prompt('원하는 단을 입력하세요'))
console.log(`${dan}단`)
for(let i =1; i <= 9; i++){
console.log(`${dan} * ${i} = ${dan*i}`);
}
반응형
'JavaScript' 카테고리의 다른 글
| JavaScript(history, navigator, node, 문서객체모델/노드) (0) | 2022.11.09 |
|---|---|
| JavaScript(date, window, setTimeout, setInterval, 시계만들기, location, form) (0) | 2022.11.07 |
| JavaScript(화살표 함수, 객체, 프로토타입, Math/String함수) (0) | 2022.11.07 |
| JavaScript(배열, 사용자정의함수, 호이스팅, 주민등록번호 문제) (0) | 2022.11.04 |
| JavaScript (기본, 변수, 데이터타입) (2) | 2022.11.04 |