HTML / CSS/ JavaScript 정의

*본 게시물은 MDN사이트를 보고 정리 한 참고 자료 입니다.

• HTML

• 웹 페이지 상에서 문단, 제목, 표, 이미지, 동영상등을 정의하고 그 구조와 의미를 부여하는 마크업 언어다.

• CSS

• 배경색, 폰트, 컨텐츠의 레이아웃등을 지정하여, html 컨텐츠를 꾸며주는 스타일 규칙 언어다.

• JavaScript

• 동적으로 컨텐츠를 바꾸고, 멀티미디어를 다루고, 움직이는 이미지등 웹 페이지를 꾸며주도록 하는 프로그래밍 언어다.

JavaScript 기본 개념

var para = document.querySelector('p'); para.addEventListener('click', updateName); function updateName() {  var name = prompt('Enter a new name');  para.textContent = 'Player 1: ' + name; }

• 변수안에 값을 저장할 수 있다. 위의 예시를 보면, 새로운 이름을 만들고자 name이라는 변수안에 ‘Enter a new name’을 표시하는 내용을 저장하도록 했다.

• 프로그래밍에서 ‘문자열’이라고 불리는 문자들도 가능하다. 위 예시를 보면, ‘Playe 1:”이라는 문자열을 name이라고 만든 변수와 결합하여 “Plater 1: Chris”라는 글을 완성할 수있었다.

• 웹 페이지상의 이벤트에 따라 응답하는 코드를 운용할 수 있다. 예제에서 click 이라는 버튼이 눌렸을때, 코드가 실행되고 글이 바뀌는 동작을 만들 수 있다.  

• 무엇보다 자바스크립트의 핵심 중의 핵심은 함수지향적으로 만들어졌다는 것에 관심을 가져야 한다. 소위 Application Programming Interfaces(API)라 불리는 것은 자바스크립트를 사용해 방대하고 수 많은 작업을 할 수 있게 한다.

• API는 이미 만들어진 코드의 집합체라고 볼 수 있으며, 개발자들이 만들기 어렵고 힘든 부분을 쉽게 구현하도록 하는 프로그램이라고 볼 수 있다.

JavaScript 실행 순서

• 자바스크립트는 HTML과 CSS가 결합되고, 웹페이지 상에 올려진 후, 브라우저의 자바스크립트 엔진에 의해 실행된다. 이는 페이지의 구조와 스타일 등을 정해놓고, 자바스크립트가 실행된다는 것과 같은 의미이다.

• 동적으로 사용자 인터페이스를 업데이트하는 자바스크립트의 사용은 Document Object Model API를 통해 HTML과 CSS를 수정하는 것으로 좋은 현상이다. 만약 자바스크립트가 HTML과 CSS 전에 실행되었다면 문제가 분명 발생할 것이다.

• 브라우저에서 자바스크립트를 만났을 때 일반적으로 위에서 아래로 실행된다.

JavaScript 넣는 방법

1. HTML 내부의 자바스크립트

• </body> 태그 전에 다음의 코드를 추가한다.

<script> // JavaScript 내부 코드 </script>

2. 외부의 자바스크립트

• script.js파일을 생성하여 안에 코드를 적어주고 그 파일을 아래 적으면 된다.  

<script src="script.js"></script>

참고 사이트