[javascript] 자바스크립트 첫걸음 - JavaScript가 뭔가요?

 

들어가며

웹 페이지의 기본 구성요소

 

HTML : HTML을 통하여 페이지를 어떻게 보여줄지 구조를 만듦

CSS : 만들어진 구조에 스타일을 입힘 (크기,색상 위치 등)

JAVASCRIPT : HTML 과  CSS로 만들어진 정적인 페이지를 동적으로 동작할 수 있게 만들어 줌 (Slide, Drag&Drop 등)

 

다시 정리하면

 

HTML은 웹 컨텐츠의 구조와 의미를 문단, 제목, 표, 삽입 이미지, 동영상 등으로 정의하고 부여하는 마크업 언어

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

JavaScript는 동적으로 컨텐츠를 바꾸고, 멀티미디어룰 다루고, 움직이는 이미지 그리고 꽤나 많은 다른일들을 할 수 있는 스크립트 언어

 

<p>Player 1: Chris</p>

p {
  font-family: 'helvetica neue', helvetica, sans-serif;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: center;
  border: 2px solid rgba(0,0,200,0.6);
  background: rgba(0,0,200,0.3);
  color: rgba(0,0,200,0.6);
  box-shadow: 1px 1px 2px rgba(0,0,200,0.4);
  border-radius: 10px;
  padding: 3px 10px;
  display: inline-block;
  cursor:pointer;
}

const para = document.querySelector('p');

para.addEventListener('click', updateName);

function updateName() {
  let name = prompt('Enter a new name');
  para.textContent = 'Player 1: ' + name;
}