JavaScript

HTML과 JS(script태그, 이벤트, 콘솔)

jin_li 2023. 1. 14. 01:17

JS를 도입하기에 앞서, 우선 HTML과 CSS, JavaScript 사이의 관계와 역할을 간단히 비유해보면

 

웹페이지라는 문장에서

HTML은 명사, CSS는 형용사, JavaScript는 동사 역할을 한다.

 

"몬생긴 고양이가 꿈실거린다." 라는 문장에서

'고양이'는 HTML, '몬생긴'은 CSS, '꿈실거린다'는 JavaScript 로 표현된다.

 

HTML과 CSS로 웹페이지에 정보를 담고 꾸미는 법을 배웠으니

이제 JS로 웹페이지의 동작을 구현하는 법을 배울 차례다. 

 

 

 

 

script 태그

 

<script></script> 안에 자바스크립트 문법을 쓰면 된다.

 

 

웹브라우저는 HTML 코드를 읽어내려오다가 <script> 태그를 보게 되면, HTML을 읽는 걸 멈추고 JS 파일을 다운로드하고 실행시킨 후에 나머지 HTML 코드를 읽는다.

 

 

 

 

 

이벤트

 

웹브라우저 위에서 일어나는 일들을 사건, 이벤트 라고 한다.

 

웹 브라우저에서 이벤트가 일어났을 때, JS로 실행되게 하는 속성이 onclick 이다. 

 

onclick의 속성값은 JS의 문법으로만 구성되어야 하고, 이를 통해 사용자와 상호작용하는 웹페이지를 만들 수 있다.

 

 

 

첫 번째 input 태그 : 웹페이지에서 hello 버튼 눌렀을 때

 

 

두 번째 input 태그 : 웹페이지에서 첫 번째 텍스트창에 아무거나 쳤을 때

 

 

세 번째 input 태그 : 웹페이지에서 두 번째 텍스트창에 아무거나 쳤을 때

 

 

 

 

 

콘솔

 

데이터 처리할 때 유용한 도구인 듯...?

귀찮... 더 알게되면 쓰겠음. 패스. 일단 빠르게 훑은 뒤 자세하게 봐야겠다. 

 

.length를 통해 문자열의 길이를 alert창으로 확인했다. 

 

 

 

 

아래는 변수와 대입연산자에 대해 간단히 정리한 사진이다.

 

변수를 쓸 때, 변수 앞에 var을 붙여주는 게 좋다.

 

그거 말고는 파이썬과 똑같았다.

 

대입연산자

 

'JavaScript' 카테고리의 다른 글

객체  (0) 2023.03.01
함수  (0) 2023.02.25
반복문  (2) 2023.02.19
조건문  (0) 2023.01.27
태그 선택  (0) 2023.01.15