HTML과 JavaScript
HTML - 큰 틀, 내용
CSS - 틀 꾸미기, 세부적인 디테일 꾸미기 기능
Java Script - 동적 기능, 사용자와 상호작용 할 수 있는 기능을 추가
1. 자바스크립트는 사용자와 상호작용을 하는 언어이다.
2. 웹브라우저는 한번 화면에 출력되면 자기자신을 바꿀 수 없다.
하지만 JavaScript 코드를 이용하면 태그에 style 속성이 추가되면서 태그의 디자인을 바꿔줄 수 있다.
예를 들면 다크모드 버튼을 통해 웹 브라우저 전체 화면을 어둡게 변경할 수 있다.
웹 브라우저한테 'html의 코드로 JavaScript를 시작합니다'라고 알려줘야할때,
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title></title>
</head>
<body>
<h1>Java Script</h1>
<script>
document.write('hello word');
</script>
<h1>HTML</h1>
hello word
</body>
</html>
document.write()태그를 사용하면 웹브라우저에 hello word를 출력한다.
그냥 hello world를 입력하는거랑 무슨 차이인데? 라고 물어볼 수 있다. 확실히 겉으로 보이는 모습은 같은 모습처럼 보일것이다.
위에서 웹브라우저는 한번 화면에 출력되면 변경할 수 없다고 하였다.
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title></title>
</head>
<body>
<h1>Java Script</h1>
<script>
document.write(1+1);
</script>
<h1>HTML</h1>
1+1
</body>
</html>
여기서 JavaScript와 HTML의 차이가 나타난다.
같은 1+1을 입력했지만 JavaScript에선 1+1의 결과값을 표시하고, HTML은 적은 그대로 1+1을 표시한다.
JavaScript는 좀 더 동적인 이미지를, HTML은 정적인 이미지를 생각하면 좋다.
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title></title>
</head>
<body>
<input type="button" value="hi" onclick="alert('hi')">
</body>
</html>type="button" 을 통해 버튼을 생성하고
value="hi" 을 통해 버튼의 이름을 지정하고
onclick="alert('hi') 을 통해 클릭 시 뜨는 경고창에 표시할 문구를 적는다.
onclick은 뒤에 붙는 속성값으로 반드시 JavaScript가 와야한다.
onclick의 속성값은 웹 브라우저가 기억하고 있다가 onclick의 속성이 위치하고 있는 해당 태그에 (위 코드에서 input type="button"부분) 즉 버튼을 사용자가 클릭했을때 기억하고 있던 JavaScript코드를 JavaScript의 문법에 따라 해석해서 웹브라우저가 동작한다.
이렇게 웹 브라우저 위에서 일어나는 일을을 이벤트(event)라고 한다.
이벤트의 종류는 다양하게 있지만 대표적으로 자주쓰는것은 20개정도 있다.
이벤트를 사용하면 웹 페이지에 텍스트를 입력하고, 특정 버튼을 클릭할 때 경고창을 띄우는등 사용자와 상호작용 할 수 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title></title>
</head>
<body>
<input type="button" value="hi" onclick="alert('hi')">
<input type="text" onchange="alert('changed')">
<input type="text" onkeydown="alert('key down!')">
</body>
</html>
<input type="button" value="hi">
👉 'hi'버튼을 클릭하면 'hi'경고창이 뜬다.
<input type="text">
👉텍스트박스에서 내용이 변경된 후 포커스를 벗어나면 'changed'경고창이 뜬다.
<input type="text">
👉텍스트박스에 아무 문자를 입력하면 'key down!'경고창이 뜬다.
위 코드에서 알 수 있듯이
onclick
onchange
onkeydown
...
등등 'on'으로 시작하는 속성들은 이벤트(event)이다.
JavaScript를 실행하는 또다른 방법이 있다.
👉'콘솔' 기능을 이용하자
웹페이지에 검사>콘솔
어떤 코드를 실행 해야되는 가벼운 상황이 있을 수 있다.
그럴때 이용하는것이 콘솔이다.
웹 페이지에서 검사->콘솔창에서 가능하며
elements 탭에서 esc를 누르면 밑에 콘솔창이 뜬다.
마치 계산이 필요할때 계산기 이용하는것처럼 내가 파일을 따로 만들지 않고도 JavaScript 코드를 즉석에서 실행할 수 있다.
예를 들어, 해당 웹페이지의 특정 문단의 텍스트가 몇글자인지 알고싶을때 사용할 수 있다.
-해당 문단을 ''로 묶으면 해당 부분이 문자가 된다.
-.length 명령을 이용해서 문자의 개수를 알아낸다.
이를 응용하면 경고창을 띄울 수 있는 명령어 alert()를 통해 글자 수 팝업을 띄울 수 있다.
번거롭지 않게 즉석에서 실행할 수 있다.
이 방식은 해당 웹페이지를 대상으로 실행된다.
