[ 자바스크립트 ]
HTML : 하이퍼텍스트 마크업 언어 : 웹문서 프레임
CSS : 캐스케이드 스타일 시트 언어 : 웹문서 디자인
JS : 자바 스크립트 : 웹문서 동적 *프로그래밍
-HTML 안에 CSS와 JS 포함
1. 사용처 : 웹프로그래밍, 서버 개발, 소프트웨어 개발(C언어가 더 많이 사용됨)
2. 라이브러리 종류
1) REACT(가장 많음), ANGULAR(서비스 종료), VUE, JQUERY
2) NODE.JS : 2009년 이후 백엔드 역할
3) REACT NATIVE : 앱( 지원중단 )
4) REACT NATIVE WEB : 웹+앱
---> REACT.JS + NEXT.JS + SPRING (트렌디 프론트엔드 스택)
5) NW.JS : 소프트웨어 ( 거의 안 씀 )
3. 사용법
※ 하나의 HTML에 여러개 스크립트 사용 가능
바디 끝나는 지점 앞에 스크립트 삽입 <script> </script>
<script src="외부스크립트파일경로"></script>
- 주의할점 : HTML 없이 JS 파일만으로 실행 불가능.
(방법1) :
1. HTML 파일 내 <body> 마크업 안에서 가장 아래
2. <script> 마크업을 이용하여 JS코드를 작성한다.
*(방법2)* :
1. JS 파일 생성하여 JS코드를 작성한다.
2. HTML 파일 내 <body> 마크업 안에서 가장 아래
3. <script src="JS파일경로"></script>
4. 주석
- HTML : <!-- 주석내용 -->
- CSS : /* 주석내용 */
- JS :
1. /* 여러줄 주석내용 */
2. // 한줄 주석내용
[ JS 실행 확인 ]
- 브라우저(크롬)에서 F12 (개발자도구)
-> source 탭에서 .js 파일 여부 확인
-> console 탭에서 .js 출력 메시지 확인
[ 기본 필수 용어 ]
1. 데이터 ( Data / 자료 ) : 사실이나 값을 그대로 나타낸 객관적 자료
-> 예] (사람) 나이, 키, 시력, 이름 등 (제품) 가격, 제품명 등
2. *리터럴( Literal ) : 프로그래밍 언어(JS/JAVA/PY/C)에서 소스코드(작성한 코드)에 직접 표현한 값
-> 컴퓨터는 이진법을 쓰기에, 프로그래밍언어 회사들은 0과 1로 조합한 미리 만들어진 단어가 필요하다.
-> JS는 'a'를 모르기에 개발자가 사용할 수 있도록 정해진 값을 넣어주는 것.( 상수 = 수정 불가한 고정값 )
-> 종류 : 9(숫자), a(문자), true(참) < 자료의 타입/종류 >
3. 자료형 : 프로그래밍언어에서 자료들을 분류하는 방법
-> 왜? 데이터를 처리하는데 효율적으로 하기 위함 : <분리수거>
-> 각 프로그래밍언어 별로 다르다.
[ JS 자료형 ]
1. 숫자형( Number ) : 10(정수), 3.14 (실수)
2. 문자열 ( String ) : "" 또는 ''로 감싼 자료 / 사과 vs "사과"
console vs "console" ( 콘솔은 정해진 문자열이라 괜찮다 )
3. 불리언 ( Boolean ) : true 또는 false *소문자만 가능
4. 배열 ( Array ) : [ 자료, 자료, 자료 ] 대괄호 안에 쉼표 구분하여 여러 자료들을 감싼 자료
5. 객체 ( Object ) : { 속성명 : 자료, 속성명 : 자료 } 중괄호 안에 쉼표 구분하여 이름과 값이 한 쌍을 이루는 자료
6. 특수 :
undefined : 자료가 할당되지 않은 상태
null : 자료가 존재하지 않음
* 생각해보기 1
[ 10 , 'A' , "사과" , 3.14 ]
1. 위 코드에서 자료는 몇 개? / 5개 (배열까지 자료)
* 생각해보기 2
[ { 이름 : "김현수" } , 'A', 3.14 ]
1. 위 코드의 자료는 몇 개? / 5개 ( "김현수", {}, 'A', 3.14, [])
2. 위 코드의 리터럴은 몇 개? 3개 ( "김현수" , 'A', 3.14 )
** 미리 정해진 기능이 포함된 특수문자/문자열 : 키워드
[] , {} , console , Number, String , if , for 등
[ 변수와 상수 ] : 하나의 자료를 저장하는 메모리 공간
1. 변수
let 변수명 = 자료;
2. 상수
const 변수명 = 자료;
[ 출력함수 ]
1. console.log( 출력할 자료 또는 변수명 ) : 브라우저 개발자도구 console탭 출력
2. alert ( 출력할 자료 또는 변수명 ) : 브라우저의 알림창 출력
[ 입력함수 ]
1. confirm( "메시지" ) : [확인][취소] 알림창, true 또는 false 반환
let 변수명 = confirm();
2. prompt( "메시지" ) : 텍스트 입력창, 입력받은 텍스트 반환
let 변수명 = prompt();
JS 자료형은 미리 결정하지 않고 코드 실행 동안 결정되기에, 동적 타입 언어이다.
강력한 자료형 체크는 '타입스크립트'와 자바, C+에서 가능하다. 오류를 막을 수 있음.
자바스크립트, 파이썬에서는 느슨한 자료형 체크를 한다. 편하지만 일관성있는 변수 유지가 어렵다.
[ 문자열 : 템플릿 리터럴 ] : 문자열 과 변수또는식 연결하는 표현
방법1) "문자열" + 변수명 + "문자열"
*방법2*) `문자열 ${ 변수명 } 문자열`
[ 문자열 : 이스케이프 문자 ] : \백슬래시 이용한 특수 기호
\\ : 백슬래시 출력
\' : 작은따옴표 출력
\" : 큰따롬표 출력
\n : 줄바꿈 처리
\t : 탭(들여쓰기) 처리
[ 배열 ]
1. 여러 자료들을 순서대로 저장하는 *자료*
2. 인덱스 : 배열내 저장된 자료들의 순서번호 , *0번시작된다*
3. 사용법
(1) 선언 : let/const 변수명 = [ 자료 , 자료 , 자료 ]
(2) 호출 : 변수명 or 변수명[인덱스]
(3) 수정 : 변수명 = [ 새로운배열 ] or 변수명[인덱스] = 새로운값
(4) 배열내 자료 총개수 : 변수명.length
[ 배열 : 자주 되는 함수]
1. 변수명.push( 새로운값 ) : 배열내 새로운 요소 추가
2. 변수명.splice( 인덱스 , 개수 ) : 배열내 지정한 인덱스부터 개수 요소 삭제
3. 변수명.indexOf( 찾을값 ) : 배열내 '찾을값' 존재하는 인덱스 번호 반환 , 없으면 -1 반환
[ 자료형 형변환 ]
1. 자동 타입변환
(1) "문자열" * 1 : "문자열" -> 숫자형 변환
(2) "문자열" + 숫자형 : "문자열"+숫자형 -> 문자열 변환
2. 수동 타입변환
(1) Number( ) : 문자열 -> 숫자형
(2) parseInt( ) : 문자열 -> 숫자형(정수)
(3) parseFloat( ) : 문자열 -> 숫자형(실수)
(4) String( ) : 그외타입 -> 문자열
(5) Boolean( ) : 문자열 -> 논리형
[ 연산자 ]
1. 산술연산자 : +더하기 -빼기 *곱하기 /나누기 %나머지
2. 연결연산자 : +연결
3. 비교연산자 : >초과 <미만 >=이상 <=이하 ==같다 !=같지않다 , 강력비교( === , !== )
4. 논리연산자 : &&이면서 ||이거나 !부정
5. 대입연산자 : =대입 , +=더한후대입 , -= *= /= %=
6. 증감연산자 : ++변수명 , 변수명++ , --변수명 , 변수명--
7. 삼항연산자 : 조건 ? 참 : 거짓 , (중첩) 조건1 ? 참1 : 조건2 ? 참2 : 거짓일때
[ 조건문 ] : 특정 조건의 논리(true/false) 결과에 따라서 명령어 처리한다.
1. if(조건) 참일 때 코드
2. if(조건){ 참일 때 코드; }
3. if(조건){ 참일 때 코드;
} else{ 거짓일 때 코드; }
4. if(조건1){ 참1일 때 코드;
} else if(조건2){ 참2일 때 코드;
} else if(조건3){ 참3일 때 코드;
} else{ 거짓일 때 코드; }
5. if( 조건A ){
if ( 조건B ){ }
else{ }
}else{
if( 조건B ){ }
else{ }
}
<조건문>
- 회원가입 할 때 아이디가 중복여부 판단,
아이디목록 = ['qwe', 'asd', 'zxc']
새로운아이디 = 'asd'
if( 아이디목록.indexOf( 새로운아이디) != -1){
현재 사용중인 아이디입니다.
}
[ 반복문 ] : 특정한 조건의 논리 결과가 true일 때 명령어들을 반복 처리.
1. for ( 초기값 ; 조건문 ; 증감식 ){
명령어(코드);
}
2. 실행순서 : (1) 초기값 -> (2) 조건문 true -> (3) 명령어 -> (4) 증감식
-> (5) 조건문 true -> (3) 명령어 -> (4) 증감식
-> (5) 조건문 true -> (3) 명령어 -> (4) 증감식
~~~~~~~~
-> (5) 조건문 false -> 반복문 종료
* 주의할 점 : 조건이 true일 때만 실행되므로 조건식과 증감식 관계가 무조건 true일 때 무한루프(stack overflow)에 빠짐
3. 배열과 반복문 관계 break , continue
(1) 배열의 인덱스는 자료들을 0부터 순서대로 저장 1씩 증가된 번호 부여
(2) 마지막 인덱스 : 변수명.length -1
for (let index = 0; indext <= 변수명.length - 1 ; index++ ){
변수명[index];
}
4. for 중첩
for( ){
for( ) {}
}
* 주의 : 상위 for문 1번 반복할 때, 하위 for문 전체 반복됨.
예] 구구단 : 단 마다 곱 출력, 곱 마다 단 출력 ( 선택 : 관례적 2x1 -> 2x2)
2x1 2x2 2x3 2x4 2x5
3x1 3x2 3x3 3x4 3x5
4x1 4x2 4x3 4x4 4x5
for(단){
for(곱) {} 2x1 -> 2x2 -> 2x3 -> 2x4
}
for(곱){
for(단) {} 2x1 -> 3x1 -> 4x1 -> 5x1
}
5. 반복문 제어 키워드
(1) continue : 가장 가까운 for{}의 증감식 흐름 이동
(2) break : 가장 가까운 for{}의 탈출/종료 흐름 이동
(3) for( ; ; ) : 무한루프
[ 프로그래밍 관점 ]
- 프로그래밍 구성하기 위한 접근 방식
1. 절차지향 프로그래밍 , C언어
(1) 함수(절차) 이용한 순서가 정해진 작업
2. 객체지향 프로그래밍 , JAVA/JS/PYTHON/C++
(1) 객체(데이터/기능)을 하나로 묶어서 처리하는 작업 ( 하드웨어 - 반도체 개발 늦다. )
(2) 코드의 재사용 , 확장설 , 복잡하다
[ 객체 ]
1. 정의
(1) 객체(Object) : 주체(나/대상)가 아닌 다른 실체(타인)
주체(Subject) : '나/대상'라는 실체 , 중심
(2) 예시1] : '김현수' 강사( 해당 클래스를 진행하는 주체 )
'김현수' 주체 기준으로 '유재석' 수강생 객체 ( 해당 클래스를 듣는 수강생 객체 )
--------------
'유재석' 수강생( 주체 ) <---------> '김현수' 강사 (객체)
2. 생활 속 객체란? 모두(물리적 개념, 논리적 개념 : 어떤 대상을 정의[데이터/기능] 가능한 것 )
- 공기 객체 , 안경 객체 , 컴퓨터 객체 , 강의 객체 , 사람 객체 \ 전부
---> 개발자(주체자) 관점에서 컴퓨터 속(객체)를 만든다.
[ JS 객체 ]
1. 종류
(1) 클래스 기반의 객체 : class(객체 만들기 위한 틀/설계도) JAVA에서 필수
(2) 클래스가 없는 객체 : { }
2. 배열과 객체 차이점
(1) 배열 :
[ ] , 인덱스(index) , 자료 순서 있음 , 여러 개의 목록
(2) 객체 :
{ } , 속성명(property) , 자료 순서 없음 , 하나의 정보
* 주의할점 : 변수는 배열과 객체 자료를 1개 저장하는 메모리 공간
const var1 = [ 10 , 'hello' ] - 자료 2개를 저장하는 배열 자료 1개를 변수에 저장
const var2 = { pros1 : 10 , pros2 : 'hello } - 자료 2개를 속성으로 구분하여 객체 자료 1개를 변수에 저장
-> 변수 vs 자료( 자료형 : 숫자/문자열/불리언/특수/배열/객체 )
const var3 = 10 , 'hello -> 이렇겐 안 되고 대괄호로 묶어 변수 처리해야한다. 또는 중괄호로 묶어 객체 처리한다.
* 예시] 제품목록
1) const 제품목록 = [ [ '콜라' , 1000 ] , [ '사이다' , 2000 ] , ]
2) const 제품목록 = { { name : '콜라' , price : 1000 } , { name : '사이다' , 3000 } }
3) const 제품목록 = [ { name : '콜라' , price : 1000 } , { name : '사이다' , 3000 } ]
-> 정보를 만들 때는 객체화하고, 동일한 객체를 여러개 묶을 때는 배열
3. 사용법
(1) 객체 선언 : 속성명과 자료를 한 쌍으로 '엔트리(entry)'라 하고 ,(쉼표) 구분하여 여러개 엔트리 {}를 감싼다.
{ 속성명 : 자료1 , 속성명 : 자료2 }
* 속성명(properties) : 하나의 객체에서 중복 불가능 , 특수문자를 포함한 경우는 ""or'' 감싼다.
* 자료(value) : 리터럴(숫자/문자열/불리언), 배열, 객체, 함수
(2) 객체도 *하나*의 자료로서 변수에 대입될 수 있다.
let 변수명 = { }
const 상수명 = { }
(3) 객체 호출
- 객체 전체 : 변수명
- 객체내 특정한 속성값1 : 변수명.속성명
- 객체내 특정한 속성값2 : 변수명['속성명']
- 관련 함수
-> Object.keys( 변수명 ) : 객체내 모든 속성명(key)를 배열로 반환
-> Object.values( 변수명 ) : 객체내 모든 자료(value)를 배열로 반환
-> Object.entries( 변수명 ) : 객체내 모든 엔트리(entry)를 배열로 반환
(4) 객체내 속성 다루기.
- 속성 추가 : 변수명.속성명 = 자료
- 속성값 수정 : 변수명.속성명 = 자료
- 속성 삭제 : delete 변수명.속성명
- 속성 확인 : '찾을속성명' in 변수명 , 찾을 속성명 존재하면 true , 아니면 false
(*) 관례적으로 서로 다른 의미의 자료들은 객체로 묶어주고 동일한 의미의 자료들은 배열 묶는다.
(*) 배열 : 인덱스로 자료를 구분 , 객체 : 속성명으로 자료를 구분
[ 배열과 객체 ]
- 배열 내 여러 객체로 이뤄진 형식 : [ {} , {} , {} , {} ]
예] 학생1 = { 이름 : '유재석' , 나이 : 40 }
학생2 = { 이름 : '강호동' , 나이 : 31 }
-> 학생1의 이름 : console.log(학생1.이름) < 변수명.속성명 >
학생목록 = [ 학생1 , 학생2 ]
-> 학생1의 이름 : console.log(학생목록[0].이름); < 변수명[인덱스].속성명 >
- 배열 내 모든 객체 조회
for( let i = 0; i <= 배열변수.length - 1; i++){
let 객체 = 배열변수[i];
}
예] 특정한 배열에서 원하는 값 찾으시오. = for문 써라 ㅎㅎ
for( let i = 0; i <= 학생목록.length - 1; i++){
if(학생목록[i].나이 >= 40){
}
}
- 변수의 특징 : { } 안에서 선언(let/const)된 변수는 { } 밖으로 나갈 수 없다. < 지역변수 >
지역변수 장점 : 특정한 범위 내에서만 사용 -> 범위를 벗어나면 변수는 사라진다. -> '메모리'를 효율적으로 쓸 수 있다.
let A = 1;
for( let i = 0; i <= 학생목록.length - 1; i++ ){
let B = 2;
console.log(i) // [O]
console.log(B) // [O]
console.log(A) // [O]
}
console.log(i); // [X] for 안에서 선언된 인덱스 변수이므로 호출 불가능.
console.log(B) // [X] for 안에서 선언된 B 변수이므로 호출 불가능
console.log(A); // [O] 지역이 같으므로 호출 가능.
[ 함수 ] : 이벤트/행동 , 밥먹기
- 변수는 하나의 자료 저장 : let 변수명 = 자료;
- 함수는 명령어/코드 저장 : function 함수명(){ 로직 }
1. 정의 : 특정한 { }중괄호 안에 미리 정의된 코드/명령어
2. 목적
(1) 재사용
(2) 매개변수에 따른 서로 다른 실행 결과
(3) 매개변수/지역변수는 함수가 실행되면서 할당되고 종료되면서 (자동)사라진다.
-> 함수 실행 중에만 변수를 사용한다.(*효율적*)
3. 사용법
(1) 함수 (정의/선언) 만든다.
function 함수명( 매개변수 , 매개변수 ...){ } // 매개변수 수는 개발자 선택임
(2) 함수 (사용)호출한다.
함수명( 인자값 , 인자값 ...);
4. 주요 키워드
(1) 매개변수 : 함수 호출 시 함수 안으로 들어오는 자료/값을 저장하는 변수 (행동x)
(2) 실행문{} : 함수 호출될 때 처리되는 코드/명령어들 , (행동o)
(3) 반환값 : 함수 종료될 때 호출한 곳으로 반환/리턴되는 값 (행동x) 무조건 자료 1개. 아님 배열 넣는가
5. 선언하는 방법
function 함수명( 매개변수 ){
다양한코드들;
return 반환값;
}
6. 사용/호출하는 방법
(1) JS파일에서 호출하는 방법
- 함수명( 인자값 ); : 정해진 매개변수에 따라 인자값
- let 결과 = 함수명(); : 함수 실행 후 반환값을 변수에 저장
(2) HTML파일에서 호출하는 방법
- < 마크업 이벤트속성명="함수명()" > : HTML에서 이벤트가 발생하면 정해진 함수가 실행
HTML은 반환하지 않기 때문에, 이벤트 발생만 하고 결과가 돌아오진 않을 것.
[ DOM 객체 ] : document(HTML) object(객체) model(표준)
1. 정의 : 문서객체표준, HTML 마크업들을 객체처럼 다루기 *객체는 속성(property)과 함수(function)를 포함
2. 내장객체 : document
3. 주요 속성과 함수
(1) document.querySelector('선택자'); : HTML 마크업 객체 반환 함수, 반환값 : 객체1개
(2) document.querySelectorAll('선택자'); : HTML 마크업 객체 반환 함수, 반환값 : 배열1개(여러개)
* 선택자(CSS동일) : <마크업명> , .클래스명 , #ID명 ,
(3) (마크업객체).innerHTML : <마크업> **여기** </마크업> 에 HTML 문자열 대입
사용불가능 마크업 : <input /> , <img /> (혼자 열고 혼자 닫으면 불가능)
(4) (마크업객체).value : <마크업 value="**여기**" /> 에 자료 대입/호출
사용가능 마크업 : <input /> , <select > , <textarea> 등등
(5) (마크업객체).style : <마크업 style="**여기**" /> 에 CSS 문법 대입/호출
(6) (마크업객체).src : <마크업 src="**여기**" /> 에 파일(소스) 경로(바이트) 대입/호출
사용가능 마크업 : <img /> , <audio /> 등
(7) (마크업객체).remove() : HTML에서 지정 마크업 지우기
(8) (마크업객체).classList 소괄호 없으면 자료 , 소괄호 있으면 함수
(마크업객체).classList.add() : 지정 마크업에 클래스 추가
(마크업객체).classList.remove() : 지정 마크업의 클래스 삭제
(마크업객체).classList.toggle() : 지정 마크업에 클래스 추가 혹은 (존재하면)삭제
(마크업객체).classList.contains() : 지정 마크업에 클래스 존재 여부 TRUE/FALSE 반환
* 연산식 혹은 호출식이 길어졌을 때는 중간 결과를 변수에 담아서 확인
예1]
let 변수명A = document.querySelector('선택자')
let 변수명B = 변수명A.value
VS
let 변수명B = document.querySelector('선택자').value
예2]
let 변수명A = 3+2
let 변수명B = 변수명A * 5
VS
let 변수명B = (3+2) * 5
(9) (마크업객체).files[0] : 지정 마크업의 업로드된 파일객체 반환
사용가능마크업 : <input type ="file" />
( + 파일객체 URL 주소 만들기 함수)
- URL.createObjectURL( 파일객체 )
- 반환값 : http://127.0.0.1:5500/day18/1_%EC%8B%A4%EC%8A%B514.html
- 사용처 : 백엔드에 업로드 하기 전 *미리보기 기능*
[ 날짜/시간 객체 ]
- new Date() : 현재 시스템(PC)의 날짜와 시간을 갖는 객체 반환
1. let now = new Date() : 날짜/시간 객체
2. now.getFullYear() : 현재 연도 반환 함수
3. now.getMonth() : 현재 월 반환 함수 * 1월은 0부터 시작하므로 +1
4. now.getDay() : 현재 요일 반환 함수 * 일요일 0부터 시작. 토요일 6
5. now.getDate() : 현재 월의 일 반환 함수
[ 웹스토리지 ]
- HTML(JS포함) 새로고침 또는 페이지 최초요청 모든 JS변수는 초기화된다.
1. 정의 : 브라우저(크롬/엣지) 내 외부저장소 *도메인(웹주소)마다 별도
2. 종류
(1) sessionStorage : 브라우저가 실행되는 동안만 저장 -> 자동 삭제됨
(2) localStorage : 브라우저가 종료된 후에도 저장 -> 별도로 삭제해야함
3. 사용법
sessionStorage객체, localStorage객체
(1) .setItem( '속성명/key' , 값/value ); : 웹스토리지에 자료 저장
(2) .getItem( '속성명/key' ); : 웹스토리지에서 자료 호출
(3) .removeItem( '속성명/key' ); : 웹스토리지의 특정 자료 삭제
(4) .clear(); : 웹스토리지의 모든 자료 삭제
* 속성명/key는 문자열만 가능 * value는 리터럴만 가능( 객체 , 배열 불가능 )
[ JSON ]
- JavaScript Object Notation : 자바스크립트 객체 문법 형식
1. 정의 : 문자열과 객체 변환 기능 제공
2. 사용법
(1) JSON.stringify( 자료 ); : 객체(배열) 타입 -> 문자열 타입 변환
(2) JSON.parse( 자료 ); : 문자열 타입 -> 객체(배열) 타입 변환
* 브라우저(http)는 객체지향 언어가 아니다. (크롬/엣지)는 객체 모르고 문자열은 안다.
3. 활용처
(1) 웹스토리지 ( JWT )
// 저장
let 배열변수 = []
localStorage.setItem( '속성명' , JSON.stringify( 배열변수 )) -> 브라우저에 문자열 타입으로 자료 저장하기
// 호출
let 배열변수 = JSON.parse(localStorage.getItem( '속성명' )) -> 브라우저에서 객체(배열) 타입으로 자료 호출하기
* 소괄호 안부터 연산 시작한다
(2) 비동기통신 ( *나중에 배워요 (JS외부페이지) )
[ interval ]
1. 정의 : 시간적인 간격에 따른 특정 함수 실행
2. 사용법 :
(1) setInterval( 함수명 , 밀리초 ); : 특정함수 밀리초마다 실행
- 밀리초 : 1/1000초
- 반환값 : interval 객체 반환
(2) clearInterval( interval 객체 ); : 특정 interval 중지
3. 예시
let 변수명 = setInterval ( 함수명, 밀리초 );
clearInterval( 변수명 );
[ 부트스트랩 ] : HTML/CSS/JS 라이브러리 , https://getbootstrap.com
[ Chart.js ] : 차트(시각화) 라이브러리 , https://www.chartjs.org
라이브러리는 설치(CDN)를 해야 사용 가능합니다
[ CDNJS] : CDN을 모아둔 곳 , https://cdnjs.com/
카테고리 없음
자바스크립트 정리
반응형
반응형