티스토리 뷰
full screen 캡쳐하는 방법
f12 > ctrl+shift+p > capture > fullscreen..
자바스크립트(Javascript) ; 스크립트 언어(대화형 언어)
1.퍼즐 조각처럼 코드 형태로 HTML 페이지에 내장된다.
2.컴파일 과정 없이 브라우저 내부의 자바스크립트 처리기(인터프리터)에 의해 바로 실행된다.
※ 개발이 발전됨에 따라 컴파일 과정이 가능해졌으며, Node.js(Node라는 명령어로 작업)로 서버환경을 구축한다.
컴파일 언어 > 페이지 단위로 통채로 번역 VS 스크립트 언어 > 한 줄씩 번역
컴파일과 컴파일언어는 다름.
컴파일 : 번역파일 만드는 과정
| .java(사람 언어) | .class(컴퓨터 언어) |
| javac명령어 | java명령어 (jdk11이상부터 java명령어 하나로 가능) |
| 번역파일을 만들고 | 실행(ctrl + f11)까지 컴파일 |
인터프리터 : 번역하는 작업 없이(번역 파일 없이) 바로 실행, 번역과 실행을 하나의 작업,
사람의 언어를 번역하면서 실행하는 것. 브라우저 안에 내장되어 있음.
자바 = 객체
자바는 커피이름 >> 커피(class) 원두,콩(객체)
자바스크립트 : 객체 개념이 있는 스크립트 언어
js의 복잡연산 VS 간단연산 기준 >> DB조회 여부, 복잡 연산은 컴파일 작업이 있어야 효율적임.
컴파일러; 번역->번역파일을 실행
인터프리터; 번역+실행 한번에 > 단순한 연산
복잡한 연산 > Node.js를 통해서 컴파일 작업을 거친다.
(보통 DB조회는 자바로 할 것임 / 기초적인 이론이므로 배운다.)
| [index.html] | [웹브라우저] | |
| <style> CSS </style> <script> 자바스크립트 코드 </script> |
> 인터프리터 |
> 자바스크립트 실행 |
동적데이터,정적데이터와
동적페이지(눌렀을때 화면이 바뀌고,.. 연산이 필요함(js)),정적페이지는 전혀 다른 말!
웹 페이지에서 자바스크립트의 역할
: 웹 페이지는 3가지(HTML, CSS, JS) 코드가 결합되어 작성된다.
: 자바스크립트는 사용자의 입력을 처리하거나 웹 애플리케이션을 작성하는 등 웹 페이지의 동적 제어에 사용된다.
- 사용자의 입력 및 연산
HTML 폼은 입력 창만 제공하고,
키, 마우스의 입력과 연산은 오직 자바스크립트로만 처리가 가능하다.
- 웹 페이지 내용 및 모양의 동적 제어
HTML 태그의 속성이나 콘텐츠, CSS 속성 값을 변경하여
웹 페이지에 동적인 변화를 일으키는 데에 활용된다.
- 브라우저 제어
브라우저 윈도우의 크기나 모양 변경, 새 윈도우나 탭 열기, 다른 웹 사이트 접속,
브라우저의 히스토리 제어 등 브라우저의 작동을 제어하는 데 활용된다.
- 웹 서버와의 통신(Ajax)
웹 페이지가 웹 서버와 데이터를 주고 받을 때 활용된다.
(Ajax, Asynchronous Javascript And XML
동기화 > 여러 쓰레드가 접근할 때 단일처럼 하나씩 접근하게 바꿔주는 것. 사용자가 요청할 때 응답이 끝나야 들어감.
비동기화 > 동시에 요청을 보낼 때 동시에 응답을 받을 수 있게끔 부분 수정이 필요할 때 ajax 통신을 사용.)
- 웹 애플리케이션 작성(API)
자바스크립트 언어로 활용할 수 있는 많은 API를 제공하므로,
웹 브라우저에서 실행되는 다양한 웹 애플리케이션을 개발할 수 있다.
회의를 통해서 API를 결정, 만들고 쓰고는 회사에서 하라는 대롴ㅋㅋㅋ
================================================================================
JS 환경 구축
- Node.js 설치
https://nodejs.org/ko/download/
LTS 설치(오랫동안 서비스 해준다 > 안정적인 버전) / 알집파일 안 받아도 됨. 여러 개 쓸 일이 많이 없음.
아이콘 무료로 쓸 수 있는 사이트
https://www.iconfinder.com/
================================================================================
자바스크립트를 작성할 수 있는 위치
1.HTML 태그의 이벤트 리스너 속성에 작성
HTML 태그에는 마우스가 클릭되거나 키보드의 키가 입력되는 등의 이벤트가 발생할 때
처리하는 코드를 등록하는 리스너 속성이 있다.
속성: 태그안에 map구조로 사용할 수 있는 영역
2.<script></script> 내에 작성
<head></head>,<body></body>,body태그 밖 등 어디든 들어갈 수 있다.
웹 페이지 내에서 여러 번 작성할 수 있다.
3.자바스크립트 파일에 작성
자바스크립트 코드를 확장자가 .js인 별도의 파일로 저장하고,
<script src=".js경로"></script>
4.URL 부분에 작성
<a>태그의 href 속성 등에도 자바스크립트 코드를 작성할 수 있다.
하지만 href 속성에서 자바스크립트 코드를 쓸 때에는 javascript라는 키워드를 작성해야 한다.
this는 href속성의 자바스크립트에서는 쓸 수 없음. 자기자신을 인식할 수 없음.
자바스크립트의 키워드를 통해서 새로운 자바스크립트 영역을 만들었기 때문.
가장최상위부모 window, this는 가장최상위부모를 가져옴. 내 태그 객체를 전달하지 않는다.
void(0) herf를 실행하지 않겠다. 이벤트 리스너를 사용하기 위해서 막아주기.
================================================================================
자바스크립트로 HTML 요소 출력
자바스크립트 코드로 HTML 요소를 웹 페이지에 직접 삽입하여 브라우저 윈도우에 출력되게 할 수 있다.
이 때 document.write() 혹은 document.writeln()을 사용한다.
write()와 writeln()은 기능 동일함. <pre>태그 안에서는! writeln() 줄바꿈 적용됨.
``는 여러 줄을 하나의 값으로 인식할 때 사용한다. 일반 따옴표는 무조건 한 줄로 작성!
<pre>태그 안에서는 줄바꿈 문자 및 엔터가 그대로 적용된다.
`` 여러 문장을 여러 줄로 쓸 때 사용, 엔터도 값으로 인식함.
"" 한 줄 단위로 인식
pre 태그: 블로그에서 주로 사용
썸머노트
동일한 객체로 여러 번 접근할 때에는 with문을 사용한다.
with(객체명){
필드명;
...
}
================================================================================
자바스크립트 다이얼로그
사용자에게 메세지를 출력하거나, 입력을 받을 수 있는 3가지 다이얼로그가 있다.
- 프롬프트 다이얼로그
prompt("메세지", "디폴트 값");
사용자가 입력한 문자열 값을 리턴하지만 아무 값도 입력하지 않으면 ""을 리턴,
취소나 강제로 닫으면 null을 리턴한다.
"디폴트 값"은 생략이 가능하다.
- 확인 다이얼로그
confirm("메세지");
확인/취소 버튼을 가진 다이얼로그를 출력한다.
확인 true, 취소 혹은 강제로 닫을 시 false를 리턴한다.
모달창
- 경고 다이얼로그
alert("메세지");
================================================================================
데이터 타입과 변수
1.자바스크립트 식별자(이름)
식별자(identifier)란 자바스크립트 개발자가 변수, 상수, 함수에 붙이는 이름이다.
식별자를 만들 때 다음 규칙을 준수해야 한다.
-첫 번째 문자 : 알파벳, 언더바, $문자만 사용 가능
-두 번째 이상 문자 : 알파벳, 언더바, 0-9, $사용 가능
-대소문자 구분 : data와 dAta는 다른 식별자이다.
-키워드(예약어) 사용 불가
| 변수명 | 가능 여부 |
| 6variable | X |
| student_id | O |
| _code | O |
| if | X |
| %calc | X |
| $data | O |
2.문장 구분
세미콜론으로 문장과 문장을 구분한다.
한 줄에 한 문장만 있는 경우 세미콜론을 생략할 수 있다.
| 문장 | 가능 여부 |
| i = i + 1 | O |
| j = j + 1; | O |
| k = k + 1; m = m + 1; | O |
| n = n + 1 p = p + 1 | X |
3.주석
- 한 줄 주석 : //
- 범위 주석 : /* */
4.데이터 타입(typeof()) 무슨 타입인지 모르니까, typeof를 통해서 무슨 타입인지 확인.
*컴파일이나 번역을 하면서 값에 따라 자료형이 바뀜 > 동적 바인딩
*자바 > 정적 바인딩
- 숫자 타입(number) : 42, 3.14, ...
- 논리 타입(bool) : true, false
- 문자열 타입(string) : "안녕", "하세요", "24", 'a', "B", ...
- 객체 레퍼런스 타입(object) : Object, Array, Math, Date, ...
- undefined : 타입이 정해지지 않은 것을 의미한다.
타입이 정해져 있지 않다. 단 한번도 값이 담긴 적이 없다. 값을 담을 수 없는 상태.
- null : 값이 정해지지 않은 것을 의미한다.
미정값.
5.변수
- var 키워드로 변수를 선언한다. > 영역때문에 혼란스러움.
함수 안이면 지역, 함수 밖이면 전역 >> 함수 안밖이 기준임.
var score; //undefined
var year, month, day; //undefined
var address = "춘천시";
- var 키워드 없이 변수를 선언할 수 있다.
age = 20;
사용 가능하나, 만약 위에 age가 이미 선언되어 있다면 값 수정.
var를 반드시 붙여서 선언하는 것이 명료하고, 실수를 막을 수 있기 때문에
var 키워드 없이 선언하지 말자!
※ 대혼란
var age = 20;
var age = 10;
동일하게 써도 값이 수정됨.(var키워드 쓰지 말자 1번 이유)
var 키워드를 사용하더라도 같은 이름으로 선언이 가능하고 두 번째부터는 값만 수정된다.
var키워드를 사용하더라도 여러번 선언이 가능하기 때문에 계속 수정될 수 있다.
자바스크립트: 버전x 연식o > 이크마 = ES
보통 ES5을 사용
지금 배울 연식 ES6
지금 설치한 vscode버전에서 > ES6 디폴트 값
ctrl + ` > 터미널
node 명령어
동적 바인딩 : 컴파일 시 값에 따라 자료형이 동적으로 결정된다.
호이스팅 : 선언을 미리 다 해놓고 사용을 함. 선언된 걸 미리 메모리에 다 올리지만 초기화는 안 됨.
hoisting(호이스팅) : 선언의 위치에 상관없이 존재하면 메모리에 할당된다.
(static은 자바 스크립트에 없지만 스크립트에서 선언부부터 메모리에 할당)
초기화 작업은 호이스팅 되지 않고 선언만 호이스팅된다.
※ var 키워드를 사용하지 않으면 호이스팅되지 않는다. 함수도 사용 가능.
6.지역변수와 전역변수
함수 안에 있으면 지역/ 함수 밖에 있으면 전역
영역 = 스코프
변수의 사용 범위(scope)에 따라서 전역변수(global)와 지역변수(local)로 나뉜다.
var로 선언 시, scope는 반드시 함수의 영역으로만 판단한다.
*전역변수 : 함수 밖에서 선언되거나 함수 안에서 var 키워드 없이 선언.
*지역변수 : 함수 안에서 var 키워드로 선언. 선언된 함수 내에서만 사용 가능.
node에서 전역을 관리하는 애 > global
브라우저 인터프리터(html)에서 전역을 관리하는 애 > window
내가 접근한 번역기에 맞는 전역객체를 리턴 > globalThis > 가독성 좋다. 전역변수의 느낌이 강하다.
---------------
scope.js
Node.js에서는 전역 변수들을 모두 global 객체에서 관리한다.
브라우저에서 사용될 지 Node.js에서 사용될 지 모를 때에는 this 혹은 globalThis를 사용한다.
1. this : 현재 스코프를 관리하는 객체(global 혹은 window)
2. globalThis : 현재 스코프를 관리하는 객체를 리턴(global 혹은 window)
globalThis.x; //this와 globalThis의 사용에 있어서 차이는 없지만, 가독성이 더 좋은 globalThis를 권장한다.
this.x; //전역 변수, 지역 변수와 이름이 같을 경우에는 this를 붙여서 접근 가능
global.x; //전역(ES6 부터 this가 안됨)(지역변수와 이름이 같을 경우에는 global을 붙여서 접근 가능)
var x; //전역 변수(지역변수와 이름이 같을 경우 함수 내에서 접근 불가(ES6부터))
---------------
scope.html
브라우저 인터프리터에서는 전역 변수들을 모두 window 객체에서 관리한다.
브라우저에서 사용될 지 Node.js에서 사용될 지 모를 때에는 this 혹은 globalThis를 사용한다.
1. this : 현재 스코프를 관리하는 객체(global 혹은 window)
2. globalThis : 현재 스코프를 관리하는 객체를 리턴(global 혹은 window)
globalThis.x; // this와 globalThis의 사용에 있어서 차이는 없지만, 가독성이 더 좋은 globalThis를 권장한다.
window.x; // 브라우저의 인터프리터에서는 전역변수를 관리하는 객체가 window이다.
this.x; // 전역변수를 관리하는 객체인 window를 의미한다.
'2022 > js,jquery' 카테고리의 다른 글
| day06[BOM, jQuery] (0) | 2022.09.21 |
|---|---|
| day05[첨부파일,배너] (0) | 2022.09.21 |
| day04[DOM] (0) | 2022.09.16 |
| day03[코어객체,파일입출력] (0) | 2022.09.16 |
| day02[ts,callback,전역함수,객체] (0) | 2022.09.15 |