✅답안과 비교하여 스스로 스크립트 작성 개선점 짚어보기 완료(2022.02.21)
기본 문법 실습1. if문 또는 삼항연산자 사용 ✅
prompt 문구를 각 함수에 담는다.
if문을 쓸 때 세 가지 외에 해당되지 않는 값이 올 경우를 대비하여 else로 처리한다.
삼항연산자의 경우도 마찬가지다. 그밖에 다른 값이 입력될 때를 위해 빈 값을 남겨두도록 한다.
<body>
<p>
prompt로 "당신의 등급은 무엇입니까?" 라는 질문의 답을 받고 (기본 값 : 손님)
"손님"의 경우 "글 읽기",
"일반 회원"의 경우 "글 읽기, 글 쓰기",
"운영자"의 경우 "글 읽기, 글 쓰기, 글 삭제"
라는 값을 변수에 저장하여 아래와 같이 alert로 출력한다.<br>
Ex. 운영자의 경우 글 읽기, 글 쓰기, 글 삭제가 가능합니다.<br>
if문 사용 시, 삼항 연산자 사용 시의 코드를 각각 별도의 함수로 선언하여 내부에 작성하고
호출하여 수행 테스트를 한다.
</p>
<script>
/* 1-1. if문 사용 시 */
function checkPermissionIf(grade) {
let grade = prompt("당신의 등급은 무엇입니까?", "손님");
let permission;
if(grade == "손님") {
permission = "글 읽기";
} else if(grade == "일반 회원") {
permission = "글 읽기, 글 쓰기"
} else if(grade == "운영자") {
permission = "글 읽기, 글 쓰기, 글 삭제"
} else {
permission = "";
}
alert(grade + "의 경우 " + permission + "가 가능합니다.");
}
//checkPermissionIf(grade);
/* 1-2. 삼항 연산자 사용 시 */
function checkPermissionTri(grade) {
let grade = prompt("당신의 등급은 무엇입니까?", "손님");
let permission;
grade == "손님" ? permission = "글 읽기" : grade == "일반 회원" ? permission = "글 읽기, 글 쓰기" : permission = "글 읽기, 글 쓰기, 글 삭제";
alert(grade + "의 경우 " + permission + "가 가능합니다.");
}
//checkPermissionTri(grade);
</script>
</body>
기본 문법 실습2. switch문 ✅
두 개 이상의 조건에서 같은 문구를 출력하게 될 때는 답안에서처럼 간단히 써 볼 수 있겠다.
<body>
<p>
아래 script를 switch문으로 변환한다.
</p>
<script>
function checkBrowser(browser) {
if (browser == 'Edge') {
alert("Edge를 사용하고 계시네요!");
} else if (browser == 'Chrome'
|| browser == 'Firefox'
|| browser == 'Safari'
|| browser == 'Opera') {
alert('저희 서비스가 지원하는 브라우저를 사용하고 계시네요.');
} else {
alert('현재 페이지가 괜찮아 보이길 바랍니다!');
}
}
let browser = prompt("사용하고 계신 브라우저가 무엇인가요?")
browser = browser.toUpperCase();
function checkBroweserSwitch(browser) {
switch(browser) {
case "EDGE" : alert("Edge를 사용하고 계시네요!"); break;
case "CHROME" : alert('저희 서비스가 지원하는 브라우저를 사용하고 계시네요.'); break;
case "FIREFOX" : alert('저희 서비스가 지원하는 브라우저를 사용하고 계시네요.'); break;
case "SAFARI" : alert('저희 서비스가 지원하는 브라우저를 사용하고 계시네요.'); break;
case "OPERA" : alert('저희 서비스가 지원하는 브라우저를 사용하고 계시네요.'); break;
default : alert('현재 페이지가 괜찮아 보이길 바랍니다!');
}
}
checkBroweserSwitch(browser);
</script>
</body>
기본 문법 실습3. while문 ✅
<body>
<p>
아래의 for문(forLoop 함수)을 while(whileLoop 함수)문으로 변경한다.
</p>
<script>
function forLoop (num){
for (let i = 0; i < num; i++) {
console.log('number' + (i+1));
}
}
//forLoop(prompt("반복할 횟수 입력해주세요"));
function whileLoop(num) {
let i = 0;
while(i < num) {
console.log('number' + (i+1));
i++;
}
}
//whileLoop(prompt("반복할 횟수를 입력해 주세요"));
</script>
</body>
기본 문법 실습4. 짝수 확인 ✅
do~while문으로도 작성 가능하다. 조건식 또한 (num % 2 != 0 && num);처럼 나머지 연산자를 통했을 때 결과값이 0이 아니고 입력 받은 num이 있는 동안으로 설정할 수 있다.
<body>
<p>
"반드시 짝수를 입력하세요" 라는 prompt 출력 후
사용자가 짝수가 아닌 값을 입력한 경우 반복문을 사용해 동일한 prompt 창 출력한다.
사용자가 짝수를 입력하거나 취소 버튼을 누른 경우,
혹은 아무것도 입력하지 않고 확인 버튼을 누른 경우엔 prompt 창 출력을 반복하지 않고
입력 받은 값 console로 출력한다.
</p>
<script>
while(true) {
let even = prompt("반드시 짝수를 입력하세요");
if(num % 2 != 0) {
return;
} else {
console.log("입력하신 숫자 : " + num);
break;
}
}
</script>
</body>
'Frontend > JavaScript' 카테고리의 다른 글
| [JavaScript] 객체 | for in | 메소드 | 객체 배열 | filter (0) | 2022.02.19 |
|---|---|
| [JavaScript] 배열 | for of | forEach | map | Array 객체 메소드 (0) | 2022.02.18 |
| [JavaScript] 함수 선언문 | 함수 표현식 | 콜백 함수 | 화살표 함수 (0) | 2022.02.17 |
| [JavaScript] 변수 | 자료형 | 입출력 | 형변환 | 연산자 (0) | 2022.02.16 |
| [JavaScript] 클라이언트 | 서버 | 개발자 도구 | 자바스크립트 개요 (0) | 2022.02.16 |
