SMALL
2.8 (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>전위형과 후위형</title>
</head>
<body>
<script>
let a = 1, b = 1;
let c = ++a;
let d = b++;
// a = 2, b = 2 , c = 2 , d = 1
alert("a: "+ a)
alert("b: "+ b)
alert("c: "+ c)
alert("d: "+ d)
</script>
</body>
</html>
2.8 (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>할당 후 결과 예측하기</title>
</head>
<body>
<script>
let a = 2;
let x = 1 + (a *= 2);
alert("a: " + a + " , x: " + x)
// a: 4, x: 5
</script>
</body>
</html>
2.8 (3) 형 변환
<!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>
</head>
<body>
<script>
alert("" + 1 + 0) // 1
alert("" - 1 + 0) // -1
alert(true + false) // 1
alert(6 / "3") // 2
alert("2" * "3") // 6
alert(4 + 5 + "px") // 9px
alert("$" + 4 + 5) // $45
alert("4" - 2) // 2
alert("4px" - 2) // NaN
alert(7 / 0) // ** Infinity
alert(" -9 " + 5) // ** " -9 5"
alert(" -9 " - 5) // -14
alert(null + 1) // 1
alert(undefined + 1) // NaN
alert(" \t \n" - 2) // ** -2
</script>
</body>
</html>
2.8 (4) 덧셈 고치기
<!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>
</head>
<body>
<script>
let a = prompt("덧셈할 첫 번째 숫자를 입력해주세요.", 1); // 기본값은 문자열!
let b = prompt("덧셈할 두 번째 숫자를 입력해주세요.", 2); // 기본값은 문자열!
alert(+a + +b); // +를 변수 앞에 붙여줘서 "숫자형"으로 변환
</script>
</body>
</html>
2.9 비교
<!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>
</head>
<body>
<script>
alert(5 > 4); // true
alert("apple" > "pineapple"); // false
alert("2" > "12"); // ** true
alert(undefined == null); // true
alert(undefined === null); // false
alert(null == "\n0\n"); // ** false
alert(null === +"\n0\n"); // false
</script>
</body>
</html>
2.10 (1) if와 문자열 0
<!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>if와 문자열 0</title>
</head>
<body>
<script>
if("0"){
alert('Hello!');
}
// 문자열 0운 true -> 실행
</script>
</body>
</html>
2.10 (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>자바스크립트의 공식 이름</title>
</head>
<body>
<script>
'use strict'
let name = prompt("자바스크립트의 '공식'이름은 무엇일까요?", "");
if (name =="ECMAScript"){
alert("정답입니다!");
} else{
alert("모르셨나요? 정답은 ECMAScript입니다!")
}
</script>
</body>
</html>
2.10 (3) 입력받은 숫자의 부호 표시하기
<!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>
</head>
<body>
<script>
let value = prompt("숫자를 입력하세요.", 0);
if (value > 0){
alert(1);
} else if (value < 0){
alert(-1);
}
else {
alert(0);
}
</script>
</body>
</html>
2.10 (4) 'if'를 '?'로 교체하기
<!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>'if'를 '?'로 교체하기</title>
</head>
<body>
<script>
let a = prompt("a의 값 입력", 0);
let b = prompt("b의 값 입력", 0);
let result = (+a + +b < 4) ? '미만' : '이상';
alert(result)
</script>
</body>
</html>
2.10 (5) 'if..else'를 '?'로 교체하기
<!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>'if..else'를 '?'로 교체하기</title>
</head>
<body>
<script>
let login = prompt("직함을 입력하세요.", "");
let message = (login == '직원') ? '안녕하세요.' :
(login == '임원') ? '환영합니다.' :
(login == '') ? '로그인이 필요합니다.':
'';
alert(message)
</script>
</body>
</html>
2.11 (1) 다음 OR 연산의 결과는 무엇일까요?
<!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>다음 OR 연산의 결과는 무엇일까요?</title>
</head>
<body>
<script>
alert( null || 2 || undefined );
// ** 2 (첫번째 truthy 반환)
</script>
</body>
</html>
2.11 (2) OR 연산자의 피연산자가 alert 라면?
<!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>OR 연산자의 피연산자가 alert 라면?</title>
</head>
<body>
<script>
alert( alert(1) || 2 || alert(3) );
// 결과: alert(1) 실행 후 2 나옴
// alert 메서드는 값 반환 X : undefined
// 2가 첫번째 truthy 값
</script>
</body>
</html>
2.11 (3) 다음 AND 연산의 결과는 무엇일까요?
<!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>다음 AND 연산의 결과는 무엇일까요?</title>
</head>
<body>
<script>
alert( 1 && null && 2 );
// 첫번째 falsy 값인 null 출력
</script>
</body>
</html>
2.11 (4) AND 연산자의 피연산자가 alert 라면?
<!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>AND 연산자의 피연산자가 alert 라면?</title>
</head>
<body>
<script>
alert( alert(1) && alert(2) );
// 결과: alert(1) 실행 후, undefined 나옴
// alert메소드는 값 반환 X -> undefined
// undefined가 첫번째 falsy 값
</script>
</body>
</html>
2.11 (5) OR AND OR 연산자로 구성된 표현식
<!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>OR AND OR 연산자로 구성된 표현식</title>
</head>
<body>
<script>
alert( null || 2 && 3 || 4 );
// ** null || 3 || 4 (&& 둘다 true일 때 마지막 연산자 출력)
// 첫번째 truthy 값 -> 3
</script>
</body>
</html>
2.11 (6) 사이 범위 확인하기
<!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>
</head>
<body>
<script>
const age = 23;
if(age >=14 && age <=90){
alert("14세 이상 90세 이하입니다.")
} else{
alert("범위에 속하지 않습니다.")
}
</script>
</body>
</html>
2.11 (7) 바깥 범위 확인하기
<!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>
</head>
<body>
<script>
const age = 7;
if (age<14 || age>90){
alert(age+"는 범위에 속하지 않습니다.")
} else{
alert(age+"는 범위에 속합니다.")
}
const myAge = 11;
if ( !(myAge>=14 && myAge <=90)){
alert(myAge+"는 범위에 속하지 않습니다.")
} else{
alert(myAge+"는 범위에 속합니다.")
}
</script>
</body>
</html>
2.11 (8) " if "에 관한 고찰
<!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>"if"에 관한 고찰</title>
</head>
<body>
<script>
if (-1 || 0) alert( 'first' );
// -1 => truthy (실행) **
if (-1 && 0) alert( 'second' );
// 0 => falsy (실행X) **
if (null || -1 && 1) alert( 'third' );
// null || 1 => 1 => truthy (실행) **
// OR: 첫번째 truthy AND: 첫번째 falsy
</script>
</body>
</html>
2.11 (9) 로그인 구현하기
<!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>
</head>
<body>
<script>
let login = prompt("Who's there?", "");
if(login == "Admin"){
let password = prompt("Password?", "")
if(password == "TheMaster"){
alert("Welcome!")
} else if (login == '' || login == null){
alert("Canceled")
} else {
alert("Wrong password")
}
} else if(login == '' || login == null){
alert("Canceled")
} else{
alert("I don't know you")
}
</script>
728x90
'JavaScript' 카테고리의 다른 글
[모던 JavaScript] 2.17 ~ 3.2 과제 정리 (0) | 2022.11.18 |
---|---|
[모던 JavaScript] 2.12 ~ 2.16 과제 정리 (0) | 2022.11.17 |
[모던 JavaScript] 1.1 ~ 2.6 과제 정리! (0) | 2022.11.15 |
[FrontEnd2] JS 연습문제 (대수의 법칙 _ 주사위) (0) | 2022.06.05 |
[FrontEnd2] JS 연습문제 (객체) (0) | 2022.06.05 |
댓글