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

[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 학습하기 좋은 사이트)
 


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
Basic JS - Home (JS입문) + Javascript Framework (프레임워크) 종류
Basic JS - Intro (JS소개)
Basic JS - Where To (JS위치) - JS구문 / JS코드위치 / JS사용법 ※ JS외부링크 주의사항
Basic JS - Output (JS출력= JS쓰기) ★★★★★
Basic JS - Syntax (JS구문) ★
Basic JS - Statement (JS구문= JS명령문)
Basic JS - Comment (JS주석)
Basic JS - Variable (JS변수) ★★★★★
Basic JS - Operator (연산자) - JS연산자 ★★★★★
Basic JS - Data Type - 데이터유형 ★★★★★ (= 데이터형식 = 데이터타입 = 데이터종류 = 자료형…
Basic JS - Function - JS함수 ★★★★★ ※ 일반함수 특징 2
Basic JS - Object - JS객체 ★★★★★
Basic JS - Scope - JS유효범위 (= JS접근범위 = 변수 종류) ★★★★★★★★★★
Basic JS - Event - JS이벤트 (= JS코드실행방법) ★★★★★
Basic JS - Strings - JS문자열
Basic JS - String Methods - JS문자열메서드
Basic JS - Number - JS숫자
Basic JS - Number Method - JS숫자메서드
Basic JS - Math 객체 - JS수학객체 (= JS산수객체 = Math객체 = Math Object = 매스 …
Basic JS - Dates - JS날짜
1/3
목록
찾아주셔서 감사합니다. Since 2012