자바스크립트(JavaScript)의 특징
- 모든 웹 브라우저에서 작동함
- 웹 브라우저에는 자바스크립트 소스를 실행할 수 있는 자바스크립트 엔진이 포함되어 있기 때문
- ctrl + shift + J 를 통해 자바스크립트 콘솔을 열어 간단한 코드를 실행해볼 수 있음
- 웹 브라우저에서 실행 결과를 즉시 확인할 수 있음
- 풀스택 웹 개발 뿐 아니라 다양한 용도의 프로그램을 만들 수 있음
- 다양한 자바스크립트 공개 API를 사용할 수 있음
- 다양한 공개 API 및 라이브러리, 프레임워크를 사용할 수 있음
(프레임워크 : 기본으로 제공하는 소스를 수정 및 추가하여 웹 프로그램을 만들 수 있게 미리 준비된 환경)
★자바스크립트(javascript)와 자바(java)는 다른 언어★
라이브스크립트
초기에 가장 대중화 됐던 ‘넷스케이프’ 브라우저에서 웹 문서를 좀더 동적으로 만들기 위해 개발한 언어
(무려 10일만에!)
자바스크립트
라이브스크립트가 선 마이크로시스템즈로 넘어가면서 새로 붙인 이름
(당시에 ‘자바’가 인기있는 언어였기 때문에, 좀더 친숙하게 보이도록!)
자바스크립트와 ECMAScript
- 초기 자바스크립트와 마이크로소프트의 JScript가 서로 경쟁할 당시, 자바스크립트 측에서 브라우저 상의 스크립트 기술 표준 규격을 제정해 달라고, ECMA에 ‘자바스크립트’를 제출함.
- 그리고 ECMA에서 자바스크립트를 기반으로 표준 채택. (공식명칭 : ECMAScript)
- ECMAScript는 자바스크립트를 기반 으로 표준화된 스크립트 언어
- 자바스크립트는 ECMAScript 표준 사양을 따르는 가장 유명한 언어 (JS 외에도 여러 스크립트 언어가 있음)
왜 ES6를 이야기할까?
- 1997년에 ECMAScript 초판이 채택된 후 ‘ES2’와 ‘ES3’처럼 ES 뒤에 판 번호를 붙여서 구별
- 이후 ‘ECMAScript 2015’처럼 연도를 붙인 것을 공식적인 이름으로 결정
- 기존의 자바스크립트는 단순히 웹 브라우저의 동적인 효과를 위해 개발된 언어였고 아주 단기간에 개발된 언어였기 때문에 활용 범위가 좁았음
- HTML5가 등장할 즈음 웹 개발에 새로운 변화가 찾아왔고, 모든 브라우저에서 지원하는 자바스크 립트를 확장시켜야 할 필요성이 생김
- 이 변화를 수용해서 나온 것이 ES6(ES2015)
- ES6 이후부터 일반적인 개발 언어처럼 복잡한 개념이 추가되었는데, 기존 자바스크립트를 확장한 것이기 때문에 옛날 개념들을 하나씩 버리면서 새로운 개념들로 교체해 나가는 중
- ECMAScript는 1년마다 업데이트되고 있음
웹 개발과 자바스크립트
클라이언트와 서버
사이트가 동작하는 것은, 서버 컴퓨터와 클라이언트 컴퓨터 간에 정보를 주고 받으면서 그 결과를 사용자에게 보여 주는 것
프런트엔드 개발과 자바스크립트
프런트엔드(front-end) 란?
- 앞(front)에 있어서 사용자에게 보이는 부분을 가리킴
- 웹 사이트나 애플리케이션에서 내용을 작성하고 화면을 디자인하는 것부터 사용자의 동작에 반응해서 결과를 만드는 것들이 모두 프런트엔드 개발의 역할
- 최근의 웹 사이트는 사용자와 실시간으로 정보를 주고 받으면서 애플리케이션처럼 동작하기 때문에 그만큼 프런트엔드 개발이 중요함
- 프런트엔드 개발에서 자바스크립트의 기능도 함께 강력해지고 있음 (프레임워크와 라이브러리가 많이 등장)
| 종류 | 기능 | 관련 URL |
| React | 페이스북에서 만든 라이브러리로, 사용자 인터페이스를 만들 수 있음 | reactjs.org |
| Vue.js | 사용자 인터페이스를 만들어 주는 프레임워크로, 웹 애플리케이션을 만들 수 있음 | vuejs.org |
| Angular | 구글에서 개발한 프레임워크로, 수많은 기능을 지원하기 때문에 큰 규모의 웹사이트 개발에 적합 | angular.io |
그 외 참고하기 좋은 사이트 : 위키백과 - 유명한 웹사이트에 사용되는 프로그래밍 언어들
유명한 웹사이트에 사용되는 프로그래밍 언어들 - 위키백과, 우리 모두의 백과사전
위키백과, 우리 모두의 백과사전. 가장 인기 있는 웹사이트들은(또는 가장 많이 방문하는) 공통적으로 동적인 웹사이트라는 요소를 가지고 있다. 동적 웹사이트의 구축 과정에는 일반적으로 서
ko.wikipedia.org
자바스크립트 적용법
인라인 스크립트
• HTML 태그 안에 직접 작성하는 방식
• 팝업 창을 열고 닫거나, 알림 메시지를 표시할 때처럼 간단한 명령을 처리할 경우 인라인 스크립트를 자주 사용
<body> <button onclick = "alert('알림 메시지가 표시됩니다.')">클릭!</button> </body>
내부 스크립트
- 웹 문서에서 <script> 태그와 </script> 태그 사이에 실행할 자바스크립트 소스 작성
- <script> 태그는 웹 문서에서 모든 곳에 위치할 수 있고 삽입된 위치에서 바로 스크립트가 실행됨
- 한 문서 안에 여러 개의 <script> 태그를 사용할 수 있음
- 내부 스크립트는 주로 </body> 태그 앞에 사용함
<body>
<p>새로 고침해 보세요</p>
<script>
function random(number) {
return Math.floor(Math.random() * number);
}
function bgChange() {
const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')＇;
document.body.style.backgroundColor = rndCol;
}
bgChange();
</script>
</body>
인라인 스크립트와 내부 스크립트의 단점
같은 자바스크립트 소스를 여러 웹 문서에서 사용해야 할 경우, 똑같은 소스를 반복해서 삽입해야 함.
만일 수정해야 한다면 소스가 포함된 모든 문서를 다 찾아다니면서 하나씩 수정해야 함.
→ 자바스크립트 소스를 작성할 때 외부 스크립트 파일로 저장해서 링크하는 방법을 많이 사용함.
→ 마크업과 구별되기 때문에 스크립트 소스를 관리하기 쉬움.
외부 스크립트
- HTML 문서에서 <script> 태그를 사용해서 외부 스크립트 연결
- 외부 스크립트 파일 확장자 : .js
<script src=“스크립트 파일 경로”></script>- 외부 스크립트 파일 안에는 <script> 태그 없이 자바스크립트 소스만 작성함
- 따로 js 폴더를 만들어 저장하는 것이 좋음 (외부 css 파일을 css 폴더에 저장하는 것처럼~)
| external.html | js\changeB.js |
| <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> ... <link rel="stylesheet" href=“css/main.css"> <style>...</style> </head> <body> <p>새로 고침해 보세요</p> <script src=“js/changeBg.js"></script> </body> </html> |
function random(number) { ... } function bgChange() { ... } bgChange(); |
- <!DOCTYPE html>
- 현재 문서가 웹 문서라는 사실을 알게 됨. HTML표준에 맞춰서 문서를 해석하기 시작
- <html lang="ko"> ~ </html>
- HTML 태그의 순서와 포함관계 분석
- <head>~</head> 태그 사이에는 어떤 태그가 있는지
- <body>~</body> 태그 사이에는 어떤 태그가 있는지
- 태그와 태그 간의 포함 여부 등
- HTML 태그의 순서와 포함관계 분석
- 태그 분석하면서 따로 분류해 두었던 외부 스타일 시트나 문서 안의 스타일 정보를 분석하면서 화면에 표시함
- <script src=“js/changeBg.js"></script>
- <script> 태그를 만나면 자바스크립트 해석기에게 스크립트 소스를 넘김
- 자바스크립트 코드 실행
'언어 > 자바스크립트(Java Script)' 카테고리의 다른 글
| [자바스크립트] 스코프 (0) | 2024.07.30 |
|---|---|
| [자바스크립트] 변수 / 자료형 / 형변환 (0) | 2024.07.30 |
| [자바스크립트] 개발 환경 세팅 (0) | 2024.07.30 |
| [자바스크립트] 함수 (0) | 2024.07.30 |
| [자바스크립트] 객체 / 클래스 / 프로토타입 (0) | 2024.07.29 |
댓글