Html (Hyper Text Markup Language) 은 웹 페이지 상에서 문단, 제목, 표, 이미지, 동영상 등을 정의하고 그 구조와 의미를 부여하는 마크업 언어.
<div> Hello World~? </div>
CSS (Cascading Style Sheet) 는 배경색, 폰트, 컨텐츠의 레이아웃등을 지정하여, HTML 컨텐츠를 꾸며주는 스타일 규칙 언어.
.title {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
word-wrap: break-word; }
JavaScript 동적으로 컨텐츠를 바꾸고, 멀티미디어를 다루는 등의 프로그래밍 언어
var a = document.getElementsByClassName('root')
function notiAlert(){
alert("Noti!!!!")
}
그냥 간단하게 적어둔거. XD
Browser API - 웹 브라우져에 설치된 API들로, 컴퓨터 환경 구성으로 부터 데이터를 보이게 하고 복잡한 일을 함
- DOM (Documnet Object Model) API 동적으로 페이지의 스타일을 정의하는 등 HTML 과 CSS를 알맞게 도정하는 역활을 함,
- Canvas와 WebGL API는 2D 와 3D 그래픽을 만들 수 있도록 해줌,
Third Party API - 브라우져에 기본적으로 설치된 API가 아닌 인터넷에서 개인적으로 정보와 코드를 얻어 프로그래밍한 것
- Google Maps API - 웹사이트에 원하는 지도를 기능을 사용할 수 있는 API
자바스크립트는 HTML과 CSS가 결합되고 웹페이지 상에서 올려진 후, 브라우져의 자바스크립트 엔진에 의해 실행 됨.
이는 페이지의 구조와 스타일등을 정해놓고, 자바스크립트가 실행된다는 것과 같은 의미.
자바스크립트 실행 순서
var para = document.querySelector('p');
para.addEventListener('click', updateName);
function updateName() {
var name = prompt('Enter a new name');
para.textContent = 'Player 1: ' + name;
}
먼저 글 문단을 선택 (1번 줄 - para 변수 할당) 그리고, Event Listener를 통해 (3번줄) 해당 P 태그가 클릭되었을 때, 실행되도록 함.
updateName() 코드 블럭을 실행하여, 사용자에게 이름을 입력받을 pompt를 실행하게 되고, 입력 된 글자를 출력하게 됨.
자바스크립트는 해석형 언어 이기 때문에, 코드가 위에서 아래로 순차적으로 실행되고 그 즉시 결과가 반한 됨.
브라우져에서 동작하기 전에 다른 방식으로 코드를 변환할 필요가 없음.
자바스크립트를 HTML상에서 실행하는 방법
자바스크립트는 CSS와 같은 방식으로 HTML 페이지에 적용 됨.
CSS는 외부의 스타일 시트를 적용하기 <link> 태그에서 사용하거나, <style> 태그를 사용하였으나, 자바스크립트는 오직 <script> 만으로 사용 가능.
* Html 내부의 자바스크립트
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
// JavaScript Code
</script>
</head>
<body>
</body>
</html>
* 외부의 자바스크립트
<script src="script.js"> </script>
외부 파일의 경우, .js 확장자로 저장된 문서를 src를 통해 사용
주석문
브라우저 실행때는 무시되어 넘어가고 다른 개발자로 하여금 어떻게 구성되고, 작동되는지 설명해주는 역활.
* 한줄 주석
<script>
// document.querySelector('P')
</script>
* 여러줄 주석
<script>
/*
document.querySelector('P')
document.getElementsByTagName('p')
*/
</script>
참고 : mozilla.org
'4. Programming > 4.3 JavaScript' 카테고리의 다른 글
| 5. Object (객체) (0) | 2018.06.17 |
|---|---|
| 4. 제어문 (Control flow statement) (0) | 2018.05.28 |
| 3. Operator (연산자) (0) | 2018.05.12 |
| 2. variable (변수) (0) | 2018.04.25 |
| 웹 자바스크립트 에디터 사이트 (0) | 2018.03.03 |
