[웹기초] 생활코딩 JavaScript 9 ~ JavaScript 14
<JavaScript 9> CSS 기초: style 속성
https://www.youtube.com/watch?v=HQgNj50Xt9g&list=PLuHgQVnccGMBB348PWRN0fREzYcYgFybf&index=9
style 속성
- HTML의 문법
- style 속성의 값으로 CSS가 들어온다.
- 특정 태그를 CSS 문법으로 꾸미고 싶을 때 사용한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript</title>
</head>
<body>
<h1 style="background-color: coral; color: powderblue;">JavaScript</h1>
</body>
</html>
<JavaScript 10> CSS 기초 (style 태그)
https://www.youtube.com/watch?v=H2eMtredsK4&list=PLuHgQVnccGMBB348PWRN0fREzYcYgFybf&index=10
<div> </div>
- CSS, JS를 통해서 제어하고 싶은 어떤 내용을 감싸기 위한, 어떠한 기능도 의미도 없는 태그
- 화면 전체를 써서 자동으로 줄바꿈이 된다.
<span> </span>
- CSS, JS를 통해서 제어하고 싶은 어떤 내용을 감싸기 위한, 어떠한 기능도 의미도 없는 태그
- 자동으로 줄바꿈이 되지 않는다.
<JavaScript 12> 제어할 태그 선택하기
https://www.youtube.com/watch?v=5tqfbgfA1LY&list=PLuHgQVnccGMBB348PWRN0fREzYcYgFybf&index=12
document.querySelector()
| document.querySelector("example") | 웹페이지에 있는 모든 example 태그를 선택 |
| document.querySelector(".example") | 웹페이지에 있는 모든 example 클래스를 선택 |
| document.querySelector("#example") | 웹페이지에 있는 모든 example 아이디를 선택 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript</title>
</head>
<body style="background-color: black; color: white;">
<input type="button" value="night" onclick="
document.querySelector('body').style.backgroundColor='black';
document.querySelector('body').style.color='white';">
<input type="button" value="day" onclick="
document.querySelector('body').style.backgroundColor='white';
document.querySelector('body').style.color='black';">
<h1>JavaScript</h1>
<script>
document.write('Regulus Black');
</script>
</body>
</html>
<JavaScript 13> 프로그램, 프로그래밍, 프로그래머
https://www.youtube.com/watch?v=p71PrgY0bbM&list=PLuHgQVnccGMBB348PWRN0fREzYcYgFybf&index=13
HTML과 JS는 둘 다 컴퓨터 언어다. 하지만 JS는 컴퓨터 언어인 동시에 컴퓨터 프로그래밍 언어라고 하고, HTML은 컴퓨터 프로그래밍 언어라고 하지 않는다.
음악회에서, 시간의 흐름에 따라 연주되는 순서를 '프로그램'이라고 했다. 즉, 프로그램이라는 말의 중심에는 순서라는 의미가 깊다. 이 순서를 만드는 행위를 프로그래밍이라고 하고, 이 순서를 만드는 사람을 프로그래머라고 한다.
HTML은 웹페이지를 '묘사'하는 목적의 언어이기 때문에 시간의 순서에 따라서 무엇을 할 필요가 없다. 따라서 HTML은 시간의 순서에 따라 실행되는 기능을 갖고 있지 않다.
하지만 JS는 사용자와 상호작용하기 위해서 고안된 컴퓨터 언어이고, 그러기 위해서는 시간의 순서에 따라서 웹페이지의 여러 기능이 실행되어야 하기 때문에 프로그래밍 형태를 띠고 있다. 이런 점이 HTML과 JS를 다르게 하는 중요한 특징이다.
사람들은 처음에 시간을 나열하는 것으로도 만족스러웠지만, 조건에 따라 다른 순서의 기능이 실행되게 하거나 반복해서 어떤 기능이 실행되도록 하고도 싶어했다. 또, 코드와 순서의 배치가 복잡해짐에 따라 복잡해진 순서를 정리하는 방법도 고안됐다. 앞으로는 이러한 발전을 따라가며, 컴퓨터 프로그래밍 언어라면 가지고 있는 핵심적인 기능들을 살펴볼 것이다.
<JavaScript 14> 조건문 예고
https://www.youtube.com/watch?v=UT2oYysmZjE&list=PLuHgQVnccGMBB348PWRN0fREzYcYgFybf&index=14
토글(toggle)
- 스위치를 on/off 하는 듯한 기능
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript</title>
</head>
<body style="background-color: black; color: white;">
<input type="button" value="night" onclick="
if (document.querySelector('body').dataset.mode === 'day'){
document.querySelector('body').style.backgroundColor='black';
document.querySelector('body').style.color='white';
document.querySelector('body').dataset.mode = 'night';
this.value = 'day';}
else{
document.querySelector('body').style.backgroundColor='white';
document.querySelector('body').style.color='black';
document.querySelector('body').dataset.mode = 'day';
this.value = 'night';
}">
<h1>JavaScript</h1>
<script>
document.write('Regulus Black');
</script>
</body>
</html>
