어제까지의 내용 복습하기
<!doctype html>
<html>
<head>
<title>WEB</title>
<meta charset="utf-8">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Palette+Mosaic&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- <input type="button" value="night"> -->
<h1><a id="a1" href="index.html">WEB</a></h1>
<div id="container">
<ol>
<li><a id="a2" href="1.html">html</a></li>
<li><a id="a3" href="2.html">css</a></li>
<li><a id="a4" href="3.html">JavaScript</a></li>
</ol>
<div>
<h2>Welcome!</h2>
Hello <a href="http://info.cern.ch/hypertext/WWW/TheProject.html">WEB</a>
</div>
</div>
<script>
function night(){
document.querySelector('body').style.backgroundColor = 'black';
document.querySelector('body').style.color = 'white';
let as=document.querySelectorAll('a');
for(let i=0;i<as.length;i++){
as[i].style.color='white';
}
}
function day(){
document.querySelector('body').style.backgroundColor = 'white';
document.querySelector('body').style.color = 'black';
let as=document.querySelectorAll('a');
for(let i=0;i<as.length;i++){
as[i].style.color='black';
}
}
</script>
<input type="button" value="night" onclick="
let btn2 = this;
if(btn2.value === 'night'){
night();
btn2.value = 'day';
} else {
day();
}
btn2.value = 'night';
">
</body>
</html>오늘은 자바스크립트로 함수를 만들어보았다!
<html>
<body>
<h1>Function</h1>
<script>
function abc(){
console.log('a');
console.log('b');
console.log('c');
}
abc();
</script>
<h1>VAT</h1>
<script>
let 가격 = 1000;
let 부가세율 = 0.1;
let 부가세=가격*부가세율;
console.log(부가세);
function vat(가격,부가세율){ //매개변수, parameter
let 부가세=가격*부가세율;
console.log(부가세);
return 부가세;
}
vat(2000,0.1); //인자, argument, 입력값
</script>
<h1>SUM</h1>
<script>
function sum(val1,val2){
return val1+val2;
}
alert(sum(100,200));
</script>
</body>
</html>수업에서의 자바스크립트 문법은 쉬워서 이해는 잘 되었지만
클라이언트의 명령을 받고 서버가 그에 따른 데이터를 내려주는 자바스크립트 문법이 가물가물하다.
다시 복습해봐야겠다.
안녕하세요!