===과 == 의 차이
ex) 1=="1"
->true
1==="1"
->false
자바처럼 사용하려면 =을 3개 써야함
isNaN
숫자가 아니면 true값을 반환
실습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>
</head>
<body>
<script>
//이름 입력
let name = prompt('이름을 입력하세요');
//만약 이름이 입력이 안되었다면.
if(name === ''){
name = prompt('입력해주세요');
}
console.log(name);
alert(`${name}님 안녕하세요`);
</script>
</body>
</html>결과화면
실습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>
</head>
<body>
<script>
let num = Number(prompt('숫자입력'));
if(isNaN(num)){
alert('숫자를 입력해 주세요')
} else {
if (!(1 <= num || num <= 100)){
alert('1이상 100이하를 넣어주세요')
} else {
for (let i =1; i<= 100; i++){
//log 엔터
console.log(i);
}
alert('완료되었습니다')
}
}
</script>
</body>
</html>결과화면
실습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>Document</title>
</head>
<body>
<style>
.red{
color: red;
}
.blue{
color: blue;
}
.green{
color: green;
}
</style>
<script>
let text = prompt('텍스트 값을 입력해 주세요');
if (text === '' ){
text = prompt('입력해주세요');
}
if (!(text === '')){
document.write("<div id = 'inputText'><h1>" + text + "</h1></div>");
document.write("<button onclick='changeRed()'>빨강</button>");
document.write("<button onclick='changeBlue()'>파랑</button>");
document.write("<button onclick='changeGreen()'>초록</button>");
}
function changeRed(){
alert('빨간색으로 변경됩니다');
let $inputText = document.getElementById('inputText');
$inputText.className = 'red';
}
function changeBlue(){
alert('파란색으로 변경됩니다');
let $inputText = document.getElementById('inputText');
$inputText.className = 'blue';
}
function changeGreen(){
alert('초록색으로 변경됩니다');
let $inputText = document.getElementById('inputText');
$inputText.className = 'green';
}
</script>
</body>
</html>
결과화면
실습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>Document</title>
</head>
<body>
<style>
#menu1{
border: 1;
background-color: gray;
color: white;
width: 200px;
height: 70px;
text-align: center;
line-height: 70px;
position: absolute;
border: 1px solid black;
}
#menu2{
border: 1;
background-color: gray;
color: white;
width: 200px;
height: 70px;
text-align: center;
line-height: 70px;
position: absolute;
left: 300px;
border: 1px solid black;
}
#menu3{
border: 1;
background-color: gray;
color: white;
width: 200px;
height: 70px;
text-align: center;
line-height: 70px;
position: absolute;
left: 600px;
border: 1px solid black;
}
</style>
<div id = "menu1" onclick="changeStyle1()">html</div>
<div id = "menu2" onclick="changeStyle2()">css</div>
<div id = "menu3" onclick="changeStyle3()">javascript</div>
<script>
function changeStyle1(){
let $menu1 = document.getElementById('menu1');
$menu1.style.color = "black";
$menu1.style.backgroundColor = "white";
let $menu2 = document.getElementById('menu2');
$menu2.style.color = "white";
$menu2.style.backgroundColor = "gray";
let $menu3 = document.getElementById('menu3');
$menu3.style.color = "white";
$menu3.style.backgroundColor = "gray";
}
function changeStyle2(){
let $menu2 = document.getElementById('menu2');
$menu2.style.color = "black";
$menu2.style.backgroundColor = "white";
let $menu1 = document.getElementById('menu1');
$menu1.style.color = "white";
$menu1.style.backgroundColor = "gray";
let $menu3 = document.getElementById('menu3');
$menu3.style.color = "white";
$menu3.style.backgroundColor = "gray";
}
function changeStyle3(){
let $menu3 = document.getElementById('menu3');
$menu3.style.color = "black";
$menu3.style.backgroundColor = "white";
let $menu1 = document.getElementById('menu1');
$menu1.style.color = "white";
$menu1.style.backgroundColor = "gray";
let $menu2 = document.getElementById('menu2');
$menu2.style.color = "white";
$menu2.style.backgroundColor = "gray";
}
</script>
</body>
</html>결과화면
실습5
<!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>
</head>
<body>
<style>
#menu1{
border: 1;
background-color: gray;
color: white;
width: 200px;
height: 70px;
text-align: center;
line-height: 70px;
position: absolute;
border: 1px solid black;
}
#menu2{
border: 1;
background-color: gray;
color: white;
width: 200px;
height: 70px;
text-align: center;
line-height: 70px;
position: absolute;
left: 300px;
border: 1px solid black;
}
#menu3{
border: 1;
background-color: gray;
color: white;
width: 200px;
height: 70px;
text-align: center;
line-height: 70px;
position: absolute;
left: 600px;
border: 1px solid black;
}
</style>
<div id = "menu1" onmouseover="changeStyle1()">html</div>
<div id = "menu2" onmouseover="changeStyle2()">css</div>
<div id = "menu3" onmouseover="changeStyle3()">javascript</div>
<script>
function changeStyle1(){
let $menu1 = document.getElementById('menu1');
$menu1.style.color = "black";
$menu1.style.backgroundColor = "white";
let $menu2 = document.getElementById('menu2');
$menu2.style.color = "white";
$menu2.style.backgroundColor = "gray";
let $menu3 = document.getElementById('menu3');
$menu3.style.color = "white";
$menu3.style.backgroundColor = "gray";
}
function changeStyle2(){
let $menu2 = document.getElementById('menu2');
$menu2.style.color = "black";
$menu2.style.backgroundColor = "white";
let $menu1 = document.getElementById('menu1');
$menu1.style.color = "white";
$menu1.style.backgroundColor = "gray";
let $menu3 = document.getElementById('menu3');
$menu3.style.color = "white";
$menu3.style.backgroundColor = "gray";
}
function changeStyle3(){
let $menu3 = document.getElementById('menu3');
$menu3.style.color = "black";
$menu3.style.backgroundColor = "white";
let $menu1 = document.getElementById('menu1');
$menu1.style.color = "white";
$menu1.style.backgroundColor = "gray";
let $menu2 = document.getElementById('menu2');
$menu2.style.color = "white";
$menu2.style.backgroundColor = "gray";
}
</script>
</body>
</html>결과화면
Yoon_ministop