JS 튜토리얼

제이에스 홈 JS 소개 JS 어디로 JS 출력 JS 문 JS 구문 JS 코멘트 JS 변수 제이에스렛 JS 상수 JS 연산자 JS 산술 JS 할당 JS 데이터 유형 JS 함수 JS 객체 JS 이벤트 JS 문자열 JS 문자열 메서드 JS 문자열 검색 JS 문자열 템플릿 JS 번호 JS 숫자 메서드 JS 배열 JS 배열 메서드 JS 배열 정렬 JS 배열 반복 JS 배열 상수 JS 날짜 JS 날짜 형식 JS 날짜 가져오기 메서드 JS 날짜 설정 방법 JS 수학 JS 랜덤 JS 부울 JS 비교 JS 조건 JS 스위치 JS 루프 In에 대한 JS 루프 의 JS 루프 JS 루프 동안 JS 브레이크 JS 이터러블 JS 세트 JS 맵 JS 유형 JS 유형 변환 JS 비트와이즈 JS 정규 표현식 JS 오류 JS 범위 JS 호이스팅 JS 엄격 모드 JS 이 키워드 JS 화살표 함수 JS 클래스 JS JSON JS 디버깅 JS 스타일 가이드 JS 모범 사례 JS 실수 JS 성능 JS 예약어

JS 버전

JS 버전 JS 2009(ES5) JS 2015(ES6) JS 2016 JS 2017 JS 2018 JS IE / 엣지 JS 연혁

JS 객체

객체 정의 개체 속성 개체 메서드 개체 표시 개체 접근자 객체 생성자 개체 프로토타입 객체 반복 가능 객체 세트 객체 맵 개체 참조

JS 함수

기능 정의 기능 매개변수 함수 호출 함수 호출 기능 적용 함수 클로저

JS 클래스

수업 소개 클래스 상속 클래스 정적

JS 비동기

JS 콜백 JS 비동기 JS 약속 JS 비동기/대기

JS HTML DOM

DOM 소개 DOM 메서드 DOM 문서 DOM 요소 DOM HTML DOM 양식 DOM CSS DOM 애니메이션 DOM 이벤트 DOM 이벤트 리스너 DOM 탐색 DOM 노드 DOM 컬렉션 DOM 노드 목록

JS 브라우저 BOM

JS 창 JS 화면 JS 위치 JS 연혁 JS 네비게이터 JS 팝업 경고 JS 타이밍 JS 쿠키

JS 웹 API

웹 API 소개 웹 양식 API 웹 기록 API 웹 스토리지 API 웹 작업자 API 웹 가져오기 API 웹 지리적 위치 API

JS 아약스

AJAX 소개 AJAX XMLHttp AJAX 요청 AJAX 응답 AJAX XML 파일 AJAX PHP AJAX ASP AJAX 데이터베이스 AJAX 애플리케이션 AJAX 예제

JS JSON

JSON 소개 JSON 구문 JSON 대 XML JSON 데이터 유형 JSON 구문 분석 JSON 문자열화 JSON 객체 JSON 배열 JSON 서버 JSON PHP JSON HTML JSON JSONP

JS 대 jQuery

jQuery 선택기 제이쿼리 HTML 제이쿼리 CSS 제이쿼리 DOM

JS 그래픽

JS 그래픽 JS 캔버스 JS 플로틀리 JS 차트.js JS 구글 차트 JS D3.js

JS 예제

JS 예제 JS HTML DOM JS HTML 입력 JS HTML 객체 JS HTML 이벤트 JS 브라우저 JS 편집기 JS 연습 JS 퀴즈 JS 인증서

JS 참조

자바스크립트 객체 HTML DOM 객체


자바스크립트 변수

JavaScript 변수를 선언하는 4가지 방법:

  • 사용 var
  • 사용 let
  • 사용 const
  • 아무것도 사용하지 않음

변수란 무엇입니까?

변수는 데이터를 저장(데이터 값 저장)하기 위한 컨테이너입니다.

이 예에서 x, y, 및 는 키워드 z로 선언된 변수입니다 .var

예시

var x = 5;
var y = 6;
var z = x + y;

이 예에서 x, y, 및 는 키워드 z로 선언된 변수입니다 .let

예시

let x = 5;
let y = 6;
let z = x + y;

이 예에서 x, y, 및 z는 선언되지 않은 변수입니다.

예시

x = 5;
y = 6;
z = x + y;

위의 모든 예에서 다음을 추측할 수 있습니다.

  • x는 값 5를 저장합니다.
  • y는 값 6을 저장합니다.
  • z는 값 11을 저장합니다.

JavaScript 변수는 언제 사용합니까?

항상 , 또는 를 사용하여 JavaScript 변수를 var선언 let하십시오 const.

var키워드는 1995년부터 2015년까지 모든 JavaScript 코드에 사용되었습니다.

let및 키워드 const2015년에 JavaScript에 추가되었습니다.

이전 브라우저에서 코드를 실행하려면 var.


JavaScript const는 언제 사용합니까?

일반적인 규칙을 원할 경우: 항상 변수를 const.

변수의 값이 변경될 수 있다고 생각되면 를 사용 let하십시오.

이 예에서 price1, price2, 및 total는 변수입니다.

예시

const price1 = 5;
const price2 = 6;
let total = price1 + price2;

두 개의 변수 price1및는 키워드 price2 로 선언됩니다 .const

이들은 상수 값이며 변경할 수 없습니다.

변수 totallet키워드로 선언됩니다.

변경할 수 있는 값입니다.


대수학처럼

대수학에서와 마찬가지로 변수는 값을 보유합니다.

let x = 5;
let y = 6;

대수와 마찬가지로 변수는 표현식에 사용됩니다.

let z = x + y;

위의 예에서 합계가 11로 계산되었음을 추측할 수 있습니다.

메모

변수는 값을 저장하는 컨테이너입니다.



자바스크립트 식별자

모든 JavaScript 변수고유한 이름 으로 식별 되어야 합니다 .

이러한 고유한 이름을 식별자 라고 합니다 .

식별자는 짧은 이름(예: x 및 y)이거나 더 설명적인 이름(연령, 합계, totalVolume)일 수 있습니다.

변수(고유 식별자)의 이름을 구성하는 일반적인 규칙은 다음과 같습니다.

  • 이름에는 문자, 숫자, 밑줄 및 달러 기호가 포함될 수 있습니다.
  • 이름은 문자로 시작해야 합니다.
  • 이름은 $ 및 _로 시작할 수도 있습니다(그러나 이 자습서에서는 사용하지 않습니다).
  • 이름은 대소문자를 구분합니다(y와 Y는 다른 변수임).
  • 예약어(예: JavaScript 키워드)는 이름으로 사용할 수 없습니다.

메모

JavaScript 식별자는 대소문자를 구분합니다.


할당 연산자

JavaScript에서 등호( =)는 "같음" 연산자가 아니라 "할당" 연산자입니다.

이것은 대수학과 다릅니다. 다음은 대수학에서 의미가 없습니다.

x = x + 5

그러나 JavaScript에서는 x + 5의 값을 x에 할당하는 것이 완벽합니다.

(x + 5의 값을 계산하고 그 결과를 x에 넣습니다. x의 값은 5만큼 증가합니다.)

메모

"같음" 연산자는 ==JavaScript와 같이 작성됩니다.


자바스크립트 데이터 유형

JavaScript 변수는 100과 같은 숫자와 "John Doe"와 같은 텍스트 값을 보유할 수 있습니다.

프로그래밍에서 텍스트 값을 텍스트 문자열이라고 합니다.

JavaScript는 많은 유형의 데이터를 처리할 수 있지만 지금은 숫자와 문자열만 생각하십시오.

문자열은 큰따옴표나 작은따옴표 안에 작성됩니다. 숫자는 따옴표 없이 작성됩니다.

숫자를 따옴표로 묶으면 텍스트 문자열로 처리됩니다.

예시

const pi = 3.14;
let person = "John Doe";
let answer = 'Yes I am!';

자바스크립트 변수 선언

JavaScript에서 변수를 생성하는 것을 변수 "선언"이라고 합니다.

var또는 let키워드 를 사용하여 JavaScript 변수를 선언합니다 .

var carName;
또는:
let carName;

선언 후 변수에는 값이 없습니다(기술적으로는 undefined).

변수에 값을 할당 하려면 등호를 사용합니다.

carName = "Volvo";

선언할 때 변수에 값을 할당할 수도 있습니다.

let carName = "Volvo";

아래 예에서는 변수를 생성하고 carName"Volvo" 값을 할당합니다.

그런 다음 id="demo"인 HTML 단락 내부의 값을 "출력"합니다.

예시

<p id="demo"></p>

<script>
let carName = "Volvo";
document.getElementById("demo").innerHTML = carName;
</script>

메모

스크립트 시작 부분에 모든 변수를 선언하는 것은 좋은 프로그래밍 방법입니다.


하나의 진술, 많은 변수

하나의 명령문에서 많은 변수를 선언할 수 있습니다.

다음으로 명령문을 시작하고 var변수를 쉼표로 구분 합니다 .

예시

let person = "John Doe", carName = "Volvo", price = 200;

선언은 여러 줄에 걸쳐 있을 수 있습니다.

예시

let person = "John Doe",
carName = "Volvo",
price = 200;

값 = 정의되지 않음

컴퓨터 프로그램에서 변수는 종종 값 없이 선언됩니다. 값은 계산해야 하는 것일 수도 있고 사용자 입력과 같이 나중에 제공될 것일 수도 있습니다.

값 없이 선언된 변수는 값을 갖습니다 undefined.

undefined변수 carName은 다음 명령문 실행 후 값을 갖습니다 .

예시

let carName;

JavaScript 변수 재선언

로 선언된 JavaScript 변수를 다시 선언하면 var값이 손실되지 않습니다.

변수 carName는 다음 명령문을 실행한 후에도 여전히 "Volvo" 값을 가집니다.

예시

var carName = "Volvo";
var carName;

메모

let또는 로 선언된 변수는 다시 선언할 수 없습니다 const.

이것은 작동하지 않습니다:

let carName = "Volvo";
let carName;

자바스크립트 산술

대수학과 마찬가지로 =및 같은 연산자를 사용하여 JavaScript 변수로 산술을 수행할 수 있습니다 +.

예시

let x = 5 + 2 + 3;

문자열을 추가할 수도 있지만 문자열이 연결됩니다.

예시

let x = "John" + " " + "Doe";

또한 이것을 시도하십시오:

예시

let x = "5" + 2 + 3;

메모

숫자를 따옴표로 묶으면 나머지 숫자는 문자열로 처리되어 연결됩니다.

이제 다음을 시도하십시오.

예시

let x = 2 + 3 + "5";

자바스크립트 달러 기호 $

JavaScript는 달러 기호를 문자로 취급하므로 $를 포함하는 식별자는 유효한 변수 이름입니다.

예시

let $ = "Hello World";
let $$$ = 2;
let $myMoney = 5;

달러 기호를 사용하는 것은 JavaScript에서 흔하지 않지만 전문 프로그래머는 JavaScript 라이브러리에서 주 기능의 별칭으로 사용하는 경우가 많습니다.

예를 들어 JavaScript 라이브러리 jQuery에서 기본 기능 $은 HTML 요소를 선택하는 데 사용됩니다. jQuery $("p");에서 "모든 p 요소 선택"을 의미합니다.


자바스크립트 밑줄(_)

JavaScript는 밑줄을 문자로 취급하므로 _를 포함하는 식별자는 유효한 변수 이름입니다.

예시

let _lastName = "Johnson";
let _x = 2;
let _100 = 5;

밑줄을 사용하는 것은 JavaScript에서 그다지 일반적이지 않지만 전문 프로그래머 사이에서는 "비공개(숨겨진)" 변수의 별칭으로 밑줄을 사용하는 것이 관례입니다.


연습으로 자신을 테스트하십시오

연습:

라는 변수를 carName만들고 값 Volvo을 할당합니다.

var  = "";