이 글은 부스트코스에서 제공하는 생활코딩 강의를 기반으로 정리한 내용입니다.
1. WEB과 Javascript, HTML
1. 태초에 HTML이 존재하였지만 정적인 이미지, 정적인 기능만을 제공하였다.
2. 동적, 즉 사용자와 반응하는 웹을 만들기위해 JavaScript가 탄생했다고 한다.
2. Javascript의 역할
Javascript의 가장 중요한 역할는 사용자와 상호작용할 수 있게 하는 것입니다. 아래의 웹페이지에서 사용자가 night/day 버튼을 누를 때마다 페이지의 색깔이 바뀌는 것을 그 예시이죠.
* JS 실행하는 방법 (크롬 기준으로)
: 웹 페이지에서 '오른쪽 버튼 > 검사'를 누르면 새로운 창이 뜨게 됩니다. 여기에서 Elements 탭을 보면, 페이지를 구성하는 HTML 태그들이 나와 있습니다.
* Elements 탭
: HTML 태그들의 모음
document.querySelector('body').style.backgroundColor='black'- document : 현 페이지
- querySelector : 현 페이지, 원하는 엘리멘트(객체) 선택
=> 코드 해설
문서(document)에서 body라는 태그를 선택(Selector)합니다. 그리고 난 후 style 속성값에서 backgroundColor를 'black'으로 설정한다는 뜻입니다.
3. HTML과 JS의 만남 : script 태그
[ JavaScript의 사용과, HTML과의 차이]
* JS는 HTML위에서 동작하는 언어이다.
따라서 HTML안에 JS가 동작하는 공간을 명시해 주어야 한다.
Script 태그
<body>
<script>
document.write('hello, world!');
</script>
</body>
JS와 HTML의 차이
<body>
hello, world!
</body>위의 js 구문과 HTML 구문의 실행결과는 같다.
하지만 HTML은 정적(쉽게말해 텍스트?.. 여기서는) JS는 동적인데,
예를들어, 아래의 코드를 실행하면 JS는 연산을 처리한 결과를 도출한다.
<body>
<script>
document.write(1+1);
</script>
1+1
</body>
4. HTML과 JS의 만남 : 이벤트
[JavaScript에서의 이벤트]
Javascript와 사용자의 상호작용, 이벤트(Event)
이벤트 : 웹 브라우저에서 일어나는 유용한 사건
Onclick 속성
HTML 태그 안에서 onclick 속성은 javascript 코드를 가지게 됩니다. 그리고 onclick이 포함된 태그가 클릭되었을 때 이 javascript 코드에 따라서 웹 브라우저가 동작됩니다. 즉, 위의 코드에서 웹 브라우저는 alert('hi') 라는 코드를 기억하고 있다가, 사용자가 클릭하면 이를 실행해주는 것입니다.
이렇게 웹 브라우저에서 일어나는 유용한 사건을 이벤트(Event)라고 합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Page Title</title>
</head>
<body>
<!-- onclick 속성 안에는 반드시 JavaScript가 와야한다 -->
<!-- 웹브라우저는 onclick 안에 Js를 기억해 두었다가 실행하는 이벤트 -->
<input type="button" value="hi" onclick="alert('hi')">
<!-- 주어진 값이 바뀌면 실행하는 이벤트 'onchange' -->
<input type="text" onchange="alert('change')">
</body>
</html>이벤트들
이 외에도 on~~으로 시작하는 이벤트 10~20개 정도가 있다고 합니다.
5. HTML과 JS의 만남 : 콘솔
[JavaScript를 실행하는 또 다른 방법 '콘솔']
앞에서 Javascript를 실행하는 한 가지 방법인 이벤트(Event)에 대해서 배워봤습니다. 이번에는 또 다른 방법인 콘솔(Console)에 대해서 알아보겠습니다.
(크롬에서)
웹 브라우저에서 오른쪽 버튼 > 검사 를 누르면 뜨는 창을 잘 살펴보면 Console이라는 이름의 탭이 보일 겁니다. 이 콘솔을 이용하면 파일을 만들지 않고도 바로 Javascript 코드를 실행할 수 있습니다.
-> 콘솔창에서 js 문법을 작성하고 엔터를 치면 바로 실행할 수 있습니다!
'JavaScript > 문법' 카테고리의 다른 글
| [부스트코스] 6. 자바스크립트 기초 (자바스크립트 객체 'JavaScript Object' ) (0) | 2021.07.21 |
|---|---|
| [부스트코스] 5. 자바스크립트 기초 (자바스크립트 함수 'Function' ) (0) | 2021.07.21 |
| [부스트코스] 4. 자바스크립트 기초 (자바스크립트 제어문 part 2. " 배여열과 반복문" ) (0) | 2021.07.20 |
| [부스트코스] 3. 자바스크립트 기초 (자바스크립트 제어문 part 1. " 비교연산자, 조건문" ) (0) | 2021.07.20 |
| [부스트코스] 2. 자바스크립트 기초 (웹과 자바스크립트 part 2. 'CSS 제어하기') (0) | 2021.07.18 |