자바스크립트는 HTML의 부족한 점을 채워주고 웹사이트를 동적으로 만들 수 있습니다. 자바스크립트를 공부하기에 앞서 자바스크립트 특징과 문법 등 기초적인 내용을 정리해 봤습니다.
1. 자바스크립트란 ?
ECMA
▶ 기술 및 통신업계 국제적 비영리 표준기관
▶ ECMAScript6 - ES6. ECMA 기술 규격에 정의된 표준화된 스크립트 프로그래밍 언어
HTML에서 CSS, JavaScript 호출
▶ HTML — 보통 <Head> 안에서 CSS 호출, <Body> 마지막 자바스크립트 호출
▶ CSS — <link rel = "stylesheet" href="ooo.css">
▶ JavaScript — <script src = "ooo.js"></script>
자바스크립트가 할 수 있는 일
▶ 웹 사이트를 동적으로 만들 수 있습니다.
▶ 웹 브라우저에서 실행되는 프로그램을 만들 수 있습니다.
▶ 서버를 구성하고 서버용 프로그램을 만들 수 있습니다.
자바스크립트 특징
▶ 모든 웹 브라우저에서 작동하고 웹 브라우저에서 실행결과를 즉시 확인할 수 있습니다.
▶ 풀스택 웹 개발과 다양한 용도의 프로그램을 개발할 수 있습니다.
▶ 다양한 자바스크립트 공개 API와 라이브러리 프레임워크를 사용할 수 있습니다.
2. 자바스크립트 기초
호출
$(document).ready(fuction() {
...
});head 사이에 쓸 경우 문서들이 모든 태그들이 로드된 다음 호출하라는 코드
라이브러리
▶ html5 캔버스 - <canvas id = "ooo"> </canvas>
▶ Paper.js 라이브러리
<script src = "http://cdnjs.cloudflare.com/ajax/libs/paper.js/0.9.25/paper-full.min.js"> </script>
파일
▶ .js — uncompressed버전
▶ .min.js — 용량 최소화 버전으로 5배 이상의 차이가 납니다.
▶ vsdoc.js — 비주얼스튜디오 제품군을 위한 보조파일
개발도구
▶ Git -
▶ 노드 - 브라우저 밖에서 자바스크립트를 실행
▶ 걸프 (Gulp) - 자바스크립트 빌드. 반복적인 개발작업을 자동화
▶ 바벨 - ES6 -> ES5 변환하는 트랜스컴파일러
▶ ES린트 - 실수를 최소화 해주는 프로그램
3. 자바스크립트 문법
출력
▶ window.alert() -
▶ innerHTML - 선택된 html 요소의 내용이나 속성값 등을 손쉽게 변경
▶ document.write() -
▶ console.log - 로그출력
따옴표
▶ 큰따옴표 작은따옴표 둘 다 가능합니다.
▶ 일괄적으로 한가지 따옴표만 쓰고 싶은 경우 이스케이프 문자 \ 를 사용
리터럴, 변수, 상수, 데이터타입
▶ 변수 선언
- var - 전역 범위, 함수 범위로 var 변수는 재선언, 업데이트 될 수 있습니다.
- let - 블록 범위. 해당 블록 내에서만 사용 가능하고 업데이트만 가능합니다.
- const - 블록 범위로 상수값을 가지면 업데이트, 재선언 불가능합니다.
▶ 식별자
- 변수, 상수, 함수이름
- 시작 : 글자, 달러기호, 밑줄
- jQuery 는 달러기호 자체를 식별자로 사용합니다.
▶ 리터럴 - 숫자형리터럴, 문자형리터럴
▶ 원시타입과 객체타입 - 문자열, 숫자, 불리언, null, underfined, 심볼
▶ 숫자 - 배정도 부동소수점 숫자(더블)
▶ 배열 - 특수 객체, 유연
▶ 날짜, 맵, 셋, 정규표현식 - 특수객체타입
제어문
▶ while -
▶ if-else -
▶ do while -
▶ for -
- for in :
- for of : 컬렉션의 요소에 루프 실행
▶ continue -
▶ break -
▶ return -
표현식과 연산자
▶ 산술연산자 -
▶ 비교연산자 -
- == : 비교 전에 동일한 자료형으로 자동 변환합니다.
- === : 같은 자료형인지도 비교합니다.
▶ 논리 연산자 - AND, OR, NOT
▶ 조건연산자 -
▶ 쉼표 연산자 -
▶ 비트 연산자 -
▶ type of -
▶ void -
▶ 할당연산자 -
▶ 객체와 배열연산자 -
▶ delete 연산자 - 피연산자인 객체, 객체의 프로퍼티, 배열의 요소등을 삭제
함수
기능별로 여러 명령을 묶어 놓은 것
▶ 함수 정의 - function 함수명() { ... }
▶ 익명함수 정의 - 참조변수 = function 함수명() { ... }
▶ 매개변수 있는 함수 정의 - 참조변수 = function 함수명(매개변수1, 매개변수2, ... ) { ... }
▶ 매개변수 없는 함수 정의 -
- 참조변수 = function 함수명( ) { arguments; }
- 매개변수 정의 없을 때 데이터가 넘어 올 경우 arguments 배열에 저장됩니다.
▶ 함수 호출 -
- 함수명 ();
- 참조변수 ();
- 함수명 (데이터1, 테이터2, ...);
▶ 함수표현식 -
▶ 메서드 - 객체의 프로퍼티인 함수
▶ this, call, apply, bind -
▶ 내장함수 -
- encodeURI() / encodeURIComponent() : 문자를 유니코드값으로 인코딩
- decodeURI() / decodeURIComponent() : 유니 코드값을 디코딩해 다시 문자화
- parseInt() : 문자열데이터 -> 정수형 데이터
- parseFloat() : 문자열데이터 -> 실수형 데이터
- String() : 문자형 데이터 반환
- Number() : 숫자형 데이터 반환
- Boolean() : 논리형 데이터 반환
- isNaN() : 숫자가 아닌 문자가 포함 시 true를 반환
- eval() : 문자형 데이터를 따옴표가 없는 자바스크립트 코드로 처리
- isFinite() : 전달한 값이 유한한 수인지 검사
스코프
▶ 정적스코프와 동적스코프전역스코프블록스코프
배열과 배열처리
▶ push() - 배열의 제일 끝에 새로운 요소를 추가.
▶ map과 filter 메서드 -
▶ reduce 메서드 -
맵과 셋
▶ 맵 - 데이터구조, 키와 값을 연결하는 것을 말합니다.
▶ 위크맵 - 위크맵은 키가 반드시 객체여야하며, 키는 가비지콜렉션에 포함가능합니다.
예외와 에러처리
▶ error -
▶ try catch finally -
이터레이터, 제너레이터
▶ 이터레이터 - 책갈피개념 (지금 어디 있는지)
▶ 제너레이터 - 이터레이터를 사용 자신의 실행을 제어
비동기적 프로그래밍
1) 콜백
2) 프로미스
3) async / await
jQuery
▶ DOM(문서객체모델)과 이베트객체가 호환성이 떨어지는 문제를 해결
▶ 쉽고 편리한 애니메이션 효과 기능 구현
▶ DOM조작, Ajax 요청실행 라이브러리
노드
▶ 서버에서 자바스크립트를 사용할 목적으로 개발되었습니다.
▶ 모듈 - 코어, 파일, npm
▶ 스트림 - 스트림형태의 데이터를 다루는 객체
▶ 웹서버 -
▶ 파일시스템접근 -
▶ precess -
| 관련포스트 |
| JavaScript | 자바스크립트 그래픽 |
| JavaScript | 자바스크립트 개발도구 |
| JavaScript | jQuery 셀렉터와 동작 |
'웹 개발 > 웹프로그래밍' 카테고리의 다른 글
| HTML | 콘텐츠 삽입 태그 iframe, embed, object 비교 (102) | 2024.07.26 |
|---|---|
| Javascript | 사용자 정의 객체와 이벤트 객체 (81) | 2024.04.10 |
| Javascript | 자바스크립트 객체 (내장, DOM, BOM) (33) | 2024.04.05 |
| Javascript | 비동기 처리 (콜백, 프로미스, await) (74) | 2024.04.01 |
| Javascript | jQuery 유용한 플러그인과 라이브러리 소개 (53) | 2024.03.25 |
| Javascript | jQuery UI 소개와 사용방법 (34) | 2024.03.22 |
| 파일업로드 dropzone.js 으로 손쉽게 구현하기 (84) | 2024.03.20 |
| JavaScript | 클릭 시 복사 버튼 만들기 (clipboard.js) (34) | 2023.09.30 |
댓글