사자자리
[웹기초] 생활코딩 JavaScript 1 ~ JavaScript 8 본문
HTML의 등장 이후, 사람들은 사용자와 상호작용하는 웹페이지를 만들고 싶어했다. 이에 생겨난 기술이 JavaScript이다.
1. JavaScript는 사용자와 상호작용을 하는 언어다.
2. 웹브라우저는 한 번 화면에 출력되면 자기 자신을 바꿀 수 없다. 하지만 JavaScript를 이용하면, JavaScript의 코드에 따라 웹페이지의 디자인을 변경할 수 있다. 따라서 JavaScript는 HTML을 제어하는 언어다.
기본적으로 JavaScript는 HTML 위에서 동작하는 언어다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript</title>
</head>
<body>
<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 ', 1+1);
</script>
<h1>HTML</h1>
Regulus Black
1+1
</body>
</html>
<script> </script>
- 지금부터 JavaScript가 시작된다는 것을 알려주는 태그
- 웹브라우저는 <script> 태그 안쪽에 있는 코드를 JavaScript로 해석한다.
document.write( );
- 출력 명령문. 괄호 안에 내용을 쓴다.
- 문자 출력: 내용을 쌍따옴표("") 또는 따옴표('')로 감싼다.
- 숫자 출력: 그냥 괄호 안에 작성한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>alert</title>
</head>
<body>
<input type="button" value="warning" onclick="alert('warning')">
</body>
</html>
onclick: 버튼을 누르면 창이 뜬다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>alert</title>
</head>
<body>
<input type="text" onchange="alert('warning')">
</body>
</html>
onchange: 박스 안의 내용이 바뀌면 창이 뜬다.
onclick 속성의 값으로는 반드시 JavaScript가 온다.
웹브라우저는 onclick 속성의 속성값을 기억하고 있다가, onclick 속성이 위치하고 있는 태그를 사용자가 실행했을 때, 기억하고 있던 JS 코드를 JS 문법에 따라 해석해서 실행한다.
웹브라우저 위에서 일어나는 일들을 사건, 이벤트라고 한다. 어떤 이벤트가 일어났을 때 어떤 JS가 실행되도록 하는 것이 onclick이다. 웹브라우저에서 일어날 수 있는 대표적인 이벤트는 1. 무언가를 클릭했을 때, 2. 내용이 변했을 때 등등이 있다.
지금까지 우리는 JS를 실행하기 위해서 웹페이지, 즉 파일을 만들었다. 그러나 경우에 따라서는 꼭 파일이 아니어도 어떤 코드를 실행해야 하는 가벼운 상황이 있다. 이런 경우에는 Console을 사용할 수 있다. 웹페이지에서 마우스 우클릭>검사를 누르면 개발자 도구(Developer Tools)가 나온다. 이 Console에서 실행시키는 JS는 웹페이지 안에 삽입된 JS인 것처럼 동작한다. 다시 말해서, JS가 웹페이지를 대상으로 실행된다는 뜻이다. 그 점에서 착안해서 댓글을 단 사람들 중에서 무작위로 몇 명을 뽑는 코드 같은 것을 실행할 수도 있다. Elements에서 esc 키를 누르면 밑에 Console이 뜬다. 이전에 Console에 작성했던 코드는 위쪽 화살표를 누르면 다시 뜬다.
.length: 몇 글자인지 알려주는 기능
컴퓨터에서는 데이터를 처리하는 것이 매우 중요하다. JS의 데이터 타입 중 대표적인 것인 문자와 숫자다. 데이터 타입은 한국어로 자료형이라고 한다.
숫자 데이터 타입은 그냥 쓰면 된다. 숫자 데이터 타입에서 가장 중요한 것은 산술 연산자다.
문자열은 큰따옴표나 따옴표로 감싼다. 이 length와 같은 것을 properties라고 부른다. method라고 하는 형태도 존재한다.
length: 몇 글자인지 알려준다.
toUpperCase(): 문자열들은 대문자로 바꿔준다.indexOf: 문자열이 시작되는 위치를 알려준다.trim(): 띄어쓰기를 제거해준다.
변수와 대입연산자. 변수라는 것은 바뀔 수 있는 어떤 값이라고 할 수 있다.
위의 사진에서 "x"와 "y"가 변수이고, "="이 대입 연산자이다.
위는 변수의 필요성을 보여주는 사례이다. 원하는 부분에 변수를 입력하고 변수의 값만 바꾸면, 일일이 다 찾아서 바꾸지 않아도 된다. 실행을 유보하고 엔터를 치고 싶을 때는 Shift + Enter를 친다.
변수의 이름을 설정할 때, 앞에 variable의 약자인 var을 붙이는 것이 좋은 습관이다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript</title>
</head>
<body style="background-color: black; color: white;"> <!--CSS 속성인 style로 night 모드 구현-->
<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 ', 1+1);
</script>
<h1>HTML</h1>
Regulus Black
1+1
</body>
</html>
<body style="background-color: black; color: white;">을 입력하여 CSS로 배경을 검은색, 글자를 하얀색으로 바꾸면 웹브라우저는 언제나 다크모드일 것이다. HTML은 한 번 화면에 표시되면 자기를 바꿀 능력이 없는 정적인 언어다. 하지만 JS를 사용하면 웹브라우저와 사용자가 상호작용하게 할 수 있다. 이 기능을 실행하기 위해 다음 시간에
1. CSS의 가장 본질적이고 중요한 문법을 살펴본다.
2. JS를 이용해서 제어하고자 하는 태그를 선택하는 방법을 알아본다.
'웹기초 > 생활코딩 WEB 2 - JavaScript' 카테고리의 다른 글
| [웹기초] 생활코딩 JavaScript 30 ~ JavaScript 35 (0) | 2022.06.26 |
|---|---|
| [웹기초] 생활코딩 JavaScript 22 ~ JavaScript 29 (0) | 2022.06.19 |
| [웹기초] 생활코딩 JavaScript 15 ~ JavaScript 21 (0) | 2022.05.29 |
| [웹기초] 생활코딩 JavaScript 9 ~ JavaScript 14 (0) | 2022.05.22 |
