# javascript 란
JavaScript는 원래 웹 페이지 요소와 상호 작용하도록 설계된 프로그래밍 언어입니다.
- ECMAScript는 핵심 기능을 제공합니다.
- DOM( 문서 개체 모델)은 웹 페이지의 요소와 상호 작용하기 위한 인터페이스를 제공합니다.
- BOM( 브라우저 개체 모델)은 웹 브라우저와 상호 작용하기 위한 브라우저 API를 제공합니다.
JavaScript를 사용하면 웹 페이지에 대화형 기능을 추가할 수 있습니다. 일반적으로 HTML 및 CSS와 함께 JavaScript를 사용하여 양식 확인, 대화형 지도 생성, 애니메이션 차트 표시 등 웹페이지 기능을 향상합니다.
웹 페이지가 로드되면, 즉 HTML과 CSS가 다운로드된 후 웹 브라우저의 JavaScript 엔진이 JavaScript 코드를 실행합니다. 그런 다음 JavaScript 코드는 HTML과 CSS를 수정하여 사용자 인터페이스를 동적으로 업데이트합니다.
최신 JavaScript 엔진은 일반적으로 성능 향상을 위해 JavaScript 코드를 바이트코드로 컴파일하는 JIT(Just-In-Time) 컴파일러로 구현됩니다.
바닐라 자바스크립트(Vanilla JS)는
외부의 라이브러리나 프레임워크를 이용하지 않는 순수 자바스크립트를 말하고. 라이브러리나 프레임워크를 사용하지 않기 때문에, 빠르고 호환성이 좋다는 게 특징입니다
클라이언트 측 :
웹 페이지에서 JavaScript를 사용하면 웹 브라우저에서 실행됩니다. 이 경우 JavaScript는 클라이언트 측 언어로 작동합니다.
서버 측 :
서버 측 환경은 Node.js입니다. 클라이언트 측 JavaScript와 달리 서버 측 JavaScript는 데이터베이스, 파일 시스템 등에 액세스 할 수 있는 서버에서 실행됩니다.
순위
https://survey.stackoverflow.co/2023/#technology
# 작성법
JavaScript는 HTML에서 읽고 사용합니다. HTML 파일의 script 태그 내에 기술해 읽어 들이는 방법과, 외부 파일로서 읽어 들이는 방법이 있습니다.
hHTML 파일의 script 태그에 작성하고 읽는 방법
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
// 코드 작성
</script>
</head>
<body>
<script>
// 코드 작성
</script>
</body>
</html>
외부 파일로 로드하는 방법
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="js/main.js"></script>
</head>
<body>
</body>
</html>
# 출력
콘솔로 출력
console.log(20)
대화상자로 출력
alert(20)
# 주석
주석 처리는 JavaScript의 소스 코드를 일시적으로 비활성화하는 기능입니다.
개발 도중에 또 사용할 가능성이 있는 경우나, 프로그램의 설명을 쓸 때 등에 사용합니다.
// alert("한 줄 주석");
/*
여러 줄 주석처리
alert("주석출력");
*/
# 변수
변수는 데이터를 일시적으로 저장하는 곳입니다. 비유하면 변수는 컵과 같은 것으로, 같은 컵 안에 「물」나 「콜라」등, 내용물을 넣어 바꾸어 사용할 수 있습니다. 그리고 프로그램에서 "컵의 내용을 마시는"라는 명령을 쓸 때 그 내용에 따라 "무를 마시는"나 "콜라를 마신다"와 같이 명령이 바뀝니다.
변수란 특정이름에 특정한 값을 담을 때
변수는 값을 참조하는 이름
변수 이름 규칙
변수 이름은 대소문자를 구분합니다. 즉, message와 는 Message서로 다른 변수입니다.
변수 이름에는 문자, 숫자, 밑줄, 달러 기호만 포함될 수 있으며 공백은 포함될 수 없습니다. 또한 변수 이름은 문자, 밑줄( _) 또는 달러 기호( $).
변수 이름에는 예약어를 사용할 수 없습니다.
ES6부터
let 키워드와 const 키워드 사용
예) let 선언과 재할당 방법
let message;
message = "Hello";
let message = "Hello";
let message = "Hello", counter = 10;
let message , counter ;
message = "Hello";
counter = 10 ;
let : 재선 언 x , 재할당 가능
const : 재선 언 , 재할당 불가능
예) const : 선언과 동시에 초기화
const message = "Hello";
- 변수에 저장할 수 있는 타입
- 타입 확인 typeof
| 타입 | 설명 |
| number | 정수와 실수를 포함하는 모든 숫자 형태 |
| string | 문자열. 쌍따옴표나 홑따옴표의 쌍으로 감싼 모든 형식의 데이터 |
| boolean | 논리형. true(참) 혹은 false(거짓) |
| object | 객체. 함수(Function), 배열 (Array), 날짜 (Date), 정규식 (RegExp) 등을 포함 |
| null | 임의로 비워 놓은 상태를 의미하는 특수한 값 |
| undened | 정의되지 않음. 선언만 하고 값이 할당되지 않은 상태 |
- 스코프
var는 블록 내부에서 선언된 경우에도(예: 루프 또는 조건문) 선언된 전체 함수에서 액세스 할 수 있습니다.
let과 const로 선언된 변수는 블록 범위를 갖습니다 루프나 조건부 등 정의된 블록으로 제한됩니다.
블록 외부에서는 접근이 불가능합니다.
- 재할당
let으로 선언된 변수는 재할당될 수 있습니다.
const로 선언된 변수는 const상수이므로 초기화되면 다시 할당할 수 없습니다.
그러나 변수가 객체나 배열에 대한 참조를 보유하는 경우 const객체나 배열의 속성이나 요소는 수정될 수 있습니다.
- 엄격모드
최상위에 실행
"use strict";
- 형변환
1. 문자형으로 String()
2. 숫자형으로 Number()
3. 불린 형으로 Boolean()
- 숫자 0, 빈 문자열, null, undefined, NaN과 같이 직관적으로도 “비어있다고” 느껴지는 값들은 false가 됩니다.
- 그외의 값은 true로 변환됩니다.
| Number | mdn |
| String | mdn |
| parseInt | mdn |
| toString | mdn |
| toFixed | mdn |
| NaN | mdn |
# 불리언
불리언 형식은 true, false 두 가지이고 조건문은 모든 값을 불리언값으로 변환
0, NaN, null, undefined, 빈문자열은 false로 변환 나머지는 모두 true로 변환
# null과 undefined
변수 선언하고 초기화하면 undefined이고 이런 경우는 보통 함수에서 자주 발생하고 함수를 호출하면서 매개변수를 제공하지 않으면 매개변수는 undefined 값을 갖는다
null 값은 의도적인 값의 빈값을 선언할 때 사용
'javascript+es6' 카테고리의 다른 글
| [ javascript ] 06. 원시타입, 참조타입, 객체 (0) | 2023.09.16 |
|---|---|
| [ javascript ] 05. 템플릿 리터널 , 함수, 내장함수 (0) | 2023.09.14 |
| [ javascript ] 04. 반복문 (0) | 2023.09.13 |
| [ javascript ] 03. 조건문 (0) | 2023.09.13 |
| [ javascript ] 02. 연산자 (0) | 2023.09.11 |