html은 정적이다. 한 번 화면에 출력되면 언제나 그 모습 그대로이다.
반면에 우리가 알고 있는 여러 프로그램들은 사용자 조작에 반응해서 움직인다.
사람들은 웹페이지도 게임처럼 동적으로 사용자와 상호작용할 수 있게 되기를 원했고,
그래서 "java script" 기술이 태어나게 되었다.
html이 정보라는 멈춰있는 이미지를 그리는 것이라면, 자바스크립트는 정보라고 하는 그 이미지를 마치 영화처럼 움직이게 한다.
-유튜브 '생활코딩' 中
자바 스크립트란?
- 자바스크립트는 사용자와 상호작용하는 언어
- 웹 브라우저는 한번 화면에 출력되면 자기 자신을 바꿀 수 없다, 하지만 자바스크립트를 사용하면 자바스크립트의 코드에 따라 웹 브라우저를 바꿀 수 있다.
- 즉, 자바스크립트는 html을 제어하는 언어다. 웹페이지를 동적으로 만든다.
자바스크립트로는 아래와 같은 동작이 가능하다.
<input>이라는 태그로 버튼이나 체크박스를 만들 수 있고, value로 만들어진 버튼이나 체크박스에 이름을 줄 수 있다. onclick과 같은 이벤트 속성 안에 자바스크립트를 넣어주면 사용자가 클릭했을때 어떤 반응이 나타난다.
<input type="checkbox" onclick="alert('체크했습니다')">
<!-- 체크박스에 클릭하면 '체크했습니다' 알림창이 뜹니다 -->
기본적으로 자바스크립트는 html을 위해 동작하는 언어이다. 어떻게 하면 html과 완전히 다른 문법을 가진
자바스크립트를 html안에 넣을 수가 있을까?
먼저 웹브라우저에게 html 코드로 자바스크립트가 시작된다고 알려주는데, 이 때 사용되는 것이 <script> 태그이다.
- <style>태그 안에는 반드시 css 문법이 오듯이, <script>태그 안에는 반드시 자바스크립트 문법이 온다.
- onclick 속성 값으로는 반드시 자바스크립트가 오고, style 속성 값으로는 반드시 css가 온다.
<!-- html 문서에서 -->
<style>
<!-- 여기에서는 css문법을 적용한다 -->
<span style="color: blue;">java script</span>
</style>
<script>
<!-- 여기에서는 자바 스크립트 문법을 적용한다 -->
document.write(1+1);
<!-- 웹페이지에 글씨를 출력할 때 사용하는 java script -->
</script>
이벤트란?
자바스크립트가 사용자와 상호작용을 하는데 이벤트는 핵심적인 역할을 한다.
<body>
<!-- 경고창 뜨게 만들기 -->
<input type="button" value="hi" onclick="alert('hi')">
</body>onclick이란 아주 특별한 속성이다. html 설명서에는 onclick 속성 값으로는 반드시 자바스크립트가 와야 한다고 적혀있으며, onclick 속성 값은 웹브라우저가 기억하고 있다가 onclick 속성이 위치하고 있는 태그에 사용자가 클릭했을때(위의 예제에서는 'button'을 클릭했을때) 기억하고 있던 자바스크립트 코드를 문법대로 해석하여 웹브라우저가 동작한다.
웹브라우저 위에서 일어나는 일들을 사건, 이벤트라고 하며,
어떤 이벤트가 일어났을 때 어떤 자바스크립트가 실행되도록 하는 것이 onclick 이다.
웹브라우저에서 일어나는 이벤트에는 어떤 것들이 있을까?
- 무언가를 클릭하는 일, onclick
- 글씨를 입력해서 내용이 변하는 것, onchange
- 키를 누르는 것, onkeydown
<body>
<input type="button" value="hi" onclick="alert('hi')">
<input type="text" value="id" onchange="alert('id 입력 성공')">
<input type="text" value="password" onchange="alert('pw 입력 성공')">
<input type="text" value="키보드 입력" onkeydown="alert('누르기')">
</body>
</html>on 으로 시작되는 것들이 이벤트이며, 웹브라우저 위에서 일어나는 이벤트를 적용하여
사용자와 상호작용할 수 있는 코드를 만들수가 있다. *예전에는 onload, onclick, onmouseover와 같이 기본적이고도 단순한 이벤트만을 사용했으나, 웹 기술의 발전에 따라 touch나 gesture와 같은 새로운 이벤트들이 빠르게 늘어났다고 하며 하나의 표준만으로는 이벤트 전체 목록을 정의할 수 없는 상황이라고 한다.
아래의 사이트에서 이벤트의 종류를 확인할 수 있다.
https://www.w3schools.com/jsref/event_onchange.asp
onchange Event
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
데이터 타입(자료형)
컴퓨터 프로그램에서는 데이터를 처리하는 것이 아주 중요한 기능이고, 데이터를 잘 처리하고 분류하기 위해
상당히 많은 노력을 하고 있다. 자바스크립트 언어에는 어떤 형태의 데이터들이 있을까?
데이터 타입이란, 프로그래밍 언어에서 사용할 수 있는 데이터의 종류를 말한다.
자바스크립트의 데이터 타입은 원시 타입과 객체 타입으로 나뉠수 있다.
- 원시 타입(primitive data type)
- 객체 타입(object type 혹은 reference type이라고 부름)
- object
이 중 Number 데이터타입과 String 데이터타입에 대해서 알아보자.
Number 데이터타입(숫자 타입)에서 아주 중요한 것은 연산이다.
1+1의 경우 +는 왼쪽의 값과 오른쪽의 값을 더해서 하나의 값을 만든다는 점에서 이항 연산자라고 부른다.
이항연산자 중 산술을 하기 때문에 산술 연산자이다.
String 데이터타입(문자 타입)의 문자는 따옴표로 감싸주며, 문자를 처리하기 위해 사용할 수 있는 명령 기능들을 가지고 있다. length나 indexOf()와 같은 기능들이다. property로 사용하기도 하며, method로 사용하기도 한다.
document.querySelector
https://www.w3schools.com/jsref/met_document_queryselector.asp
HTML DOM querySelector() Method
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
html 안에는 여러가지 요소들이 존재하고, 각 요소들을 제어하기 위해서는 해당 요소가 가리키는 선택자가 무엇인지 알아야 한다.
자바스크립트에서 css의 선택자를 가져오기 위해서는 document.querySelector를 사용한다.
document.querySelector('선택자');
<!-- body 태그를 선택자로 가져오는 경우 -->
document.querySelector('body');
<!-- example이라는 이름의 class 선택자를 가져오는 경우 -->
document.querySelector('.example');이렇게 가져온 선택자에 style 속성을 적용할 수 있다.
<!-- body 태그의 배경색을 yellow로 설정한다 -->
document.querySelector('body').style.backgroundColor='yellow';따라서 버튼을 눌렀을때 배경색을 바뀌게 하려면 다음과 같이 작성한다.
<body>
<input type="button" value = "클릭하면 노랑으로 바뀜" onclick="
<!-- onclick 안에 자바 스크립트 코드 작성 -->
document.querySelector('body').style.backgroundColor='yellow';
">
</body>
해당 게시글은 '생활코딩' 님의 자바스크립트 강의를 참고하였습니다.
출처 https://www.youtube.com/watch?v=dPRtcRwKo-Y&list=PLuHgQVnccGMBB348PWRN0fREzYcYgFybf
'WEB' 카테고리의 다른 글
| WEB(5) : Java Script - 배열, 함수, 객체 (0) | 2021.12.21 |
|---|---|
| WEB(5) : Java Script - 조건문, 반복문 (0) | 2021.12.21 |
| WEB(3) : CSS (0) | 2021.12.19 |
| WEB(2) : 웹의 역사와 웹 서버(Web Server), 웹 호스팅(Web hosting) (0) | 2021.12.14 |
| WEB(1) : HTML (0) | 2021.12.14 |
