• 회원가입
  • 로그인
  • 구글아이디로 로그인

[Basic] JS - Home (JS입문) + Javascript Framework (프레임워크) 종류

목차
  1. 웹디자이너 3대 필수 언어
  2. JS 공식홈페이지 / 발전과정
  3. JS 예제
  4. JS 최적화 팁
  5. JS 추천 프레임워크
  6. JS/jQuery 추천 라이브러리
  7. JS PreProcessor (= JS 전처리기)
  8. JS 관련 주소


JS (= JavaScript)
※ 언어 중 가장 중요. (사용자와 상호작용 가능.)
※ 홈페이지를 역동적이고 화려하게 만들 수 있음.
※ 게임 개발, 사물 인터넷 등 분야로 영역 확장 중.
 

웹디자이너 3대 필수 언어


HTML
웹페이지 기본 뼈대


CSS
웹페이지 디자인

JavaScript
 
웹페이지의 내용 변경, html 변경, css 변경 등
동적인 움직임이나 작동 담당
(※ Web. App, Sever, DB도 만들 수 있음. 만능 언어임.)

※ 이하, javascript는 js로 표기
 

JS 공식홈페이지 / 발전과정

1. ECMAscript 공식 홈페이지 (= JS 공식 홈피)

 

 


2. ES (ECMAscript) 

 

ES1 :   1997

ES2 :   1998

ES3 :   1999

ES4 :   2000 - IE의 독자 노선으로 인해 ES 정의가 지지분진해짐. ㅡㅡ

AJAX (2004), jQuery (2006), Chrome (2008) 등 나타나, IE 독자노선 철회.

ES5 :   2009

ES6 :   2015 - default parameter, class, arrow function, let, const

ES7 :   2016

ES8 :   2017

ES9 :   2018

ES10 : 2019

... 계속 진화 중.

 

PS1.
(ES5・ES6) : JS 발전의 분수령. 단, IE8 이하는 지원 X


PS2.
마이크로소프트조차 IE 버리는 추세라, IE는 무시 권장.

※ 엘리 님  (JS1 - JS 발전사) https://youtu.be/wcsVjmHrUQg

 

JS 예제

버튼 클릭 시, 아이디가 homzzang인 요소 찾아, 그 안에 날짜 넣어!

<button type="button"
onclick="document.getElementById('homzzang').innerHTML = Date()">
현재 시간 보기</button>

<p id="homzzang"></p>

결과 보기
※ 위 코드를 서버에 직접 올리셔야 Date() 함수 작동 
 

JS 최적화 팁

 

JS 추천 프레임워크

※ (특징/제작자) / 라이선스 / 출시일
 

AngularJS 

Google / MIT / 100105

 

AureliaJS

최신 JS모듈 모음 / MIT / 180214

 

BackboneJS

RESTful JSON 및 Model-View-Presenter 패턴 포함 / MIT /100930

 

EmberJS

또 다른 MVVM/ MIT / 111208

 

KnockoutJS

MVVM (Open Source Model-View-ViewModel) / MIT / 100705

 

MeteorJS

아주 강력 / MIT / 120118

 

ReactJS 

현재 가장 인기・Facebook / MIT/ 130524

 

Svelte

가상 DOM 사용 X / MIT / 161120

 

VueJS

빠르게 성장 / MIT / 130728

 

W3JS

w3schools.com 제작 / FREE / 190401

 


JS/jQuery 추천 라이브러리

 

https://homzzang.com/b/jquery-299 

...To be continued 계속 업데이트 중

 

 

JS PreProcessor (= JS 전처리기)

 

Babel  (※ JS 최신 코드를 ECMAScript 5・6 코드로 변환.)

https://babeljs.io/

 

TypeScript ★
https://www.typescriptlang.org/

 

CoffeeScript

https://coffeescript.org/

 

LiveScript

https://livescript.net/

 

 

JS 관련 주소

 
엘리 님 (JS vs. JAVA 구별)
 
모질라 JS 강의 (= JS 학습하기 좋은 사이트)
 



분류 제목
DOM JS - CSS - 스타일변경
DOM JS - Animation - 애니메이션 (= 동적효과 = 움직임효과)
DOM JS - Events - 이벤트 2
DOM JS - addEventListener() 메서드 ★★★★★ - 이벤트 걸기 (= addEventListen…
DOM JS - Navigation - 노드탐색 (= 요소탐색) ※ 텍스트노드복사
DOM JS - Node - 노드추가, 노드삭제, 노드변경 (= 노드생성, 노드제거, 노드교체)
DOM JS - Collection - HTML요소집합 (= HTML요소묶음)
BOM JS - Window BOM - 윈도우 브라우저객체모델 (BOM: Browser Object Model)
BOM JS - Window Screen 객체 - 화면객체 (= 스크린객체 = screen객체)
BOM JS - Window Location 객체 - 위치객체 (= 로케이션객체 = Location객체) ※ loc…
BOM JS - Window History 객체 - 이력객체 (= 히스토리객체 = History객체 = 뒤로가기 +…
BOM JS - Window Navigator 객체 - 브라우저객체 (= 네이게이터객체 = Navigator객체 =…
BOM JS - Popup Boxes - 팝업상자 (= 팝업박스 = Alert Box + Confirm box + …
BOM JS - Timing Events ★ - 시간간격 코드실행 (= 타이밍 이벤트 = 시간이벤트 = 일정시간별 …
BOM JS - Cookie (쿠키) 사용법 ★★★ - 쿠키 (설정・생성) / 쿠키 (읽기・얻기・가져오기) / 쿠…
AJAX JS - AJAX (아작스) 소개
AJAX JS - AJAX - XMLHttpRequest() 메서드 ★ - 객체생성 (= 아작스/에이잭스 핵심 = X…
AJAX JS - AJAX - open()/send() 메서드 ★ - 서버에 요청 보내기 (GET방식 vs POST방…
AJAX JS - AJAX - Server Response (서버응답) - 콜백함수 사용 예제
AJAX JS - AJAX - XML 아작스 예제 (= xml 데이터 불러와 표만들기)
4/67
목록
찾아주셔서 감사합니다. Since 2012