자바스크립트 출력
출력이란 개발자가 사용자에게 웹이나 앱의 화면을 통해 데이터 값을 표현하는 걸 뜻한다.
출력방법에는 2가지가 있다.
1. 대화상자 출력방법
- winodw.alert() = 함수를 통해 알림창을 브라우저에 출력한다.
- winodw.confirm() = 함수를 통해 알림창을 브라우저에 출력해서 확인 버튼과 취소 버튼을 선택할 수 있다.
2. 콘솔 출력(개발자를 위한 출력이다.)
- console.log() = 함수를 통해 콘솔창에 출력한다.
(개발자들이 코딩중에 많이 사용하는 함수로 오류가 발생하는지 개발자가 원하는 함수에 매개변수가 들어가서 잘 작동하는지 등을 체크할 수 있다.)
내부 자바스크립트의 종류
<head>, <body> 안에 JS를 작성한다.
외부 자바스크립트의 종류
<script src = "경로/파일명.js"></script>
자바스크립트 사용법은 CSS기능을 활용할 때랑 같은 방식으로 사용한다.
자바스크립트 적용이 되지 않을 때는 자바스크립트의 순서가 중요하다.
(자바스크립트는 위에서 아래로 읽히기에 위, 아래 순서가 매우 중요하다!)
변수(Variable)
데이터(값)를 저장할 수 있는 메모리 공간을 뜻한다.
x = 5
y = "Hello"
[저장공간명][대입연산자(=)][저장될 값]Java와는 다르게 변수 타입이 필요 없다.
JS
let X = "어떠한 값"(어떤 타입이든 다 가능하다.)JS에서 변수 선언
var(~ES5) 지금은 사용하지 않는다. (이크마, ECMAscript)
-------------(ES6 이후)---------------------
let, const 등 ES6 이후의 것들이 중요하다.
- let
- var
- const
var x = 10;
x = 12;
var x = 52; (중복선언은 안된다. 하지만 var는 오류를 나타내지 않는다.)왜 var를 사용하지 않는지는 아래에서 이유를 찾을 수 있다.
호이스팅
선언 시에 강제로 최상단을 올려서 선언한다.
console.log(x);
var x = 10;
이 문장을
var x;
console.log(x); .....undefine
x = 10;이렇게 호이스팅한다.
변수는 중복 선언이 허용되지 않아서 중복 선언 시, 오류를 나타내야 하는데 var는 이런 것들을 오류로 나타내지 않아 호이스팅이 일어나고 runtime시에 오류가 발견된다.
ES6 이후에 나온 let과 const는 호이스팅이 일어나지 않는 것처럼 작동하게 만들어졌다.
호이스팅이 일어나지만 오류를 나타내기 때문에 일어나지 않는 것처럼 작동하게 만들어진 것이다.
[변수명] = x;
let x = 10;
x = x + 2; // x = 12;
x = 5;상수(constant) => 변하지 않는 수
한번 선언된 상수는 다시 재정의를 할 수 없고, 값도 재할당이 안된다. 한번 정의되면 변경이 안된다.
const 상수명;
상수명 = 값; //undefined
const 상수명 = 값; //ture
상수명 = 값; // undefinedJava에서의 Final 개념과 같다.
자료형(type) 종류
- 숫자형(Number) = 다른 언어와 달리 정수, 실수를 따로 구분하지 않는다. 모든 수를 하나로 표현한다. ex)100, 3.14 등
- 문자형(String) = 따옴표('')나 큰따옴표("")로 둘러싸인 문자(한 글자)들의 집합체이다. 문자의 나열을 뜻한다.
*변수를 가져다 쓸 때
let name = "Hello"
console.log("안녕하세요" + name + "님 반갑습니다!);
이 문장을 ''(따옴표)로 쓰면
console.log('안녕하세요 ${name}님 반갑습니다!)- undefined = 값이 정의되지 않았을 때, 타입이 정해지지 않았을 때 표현된다.
- null = 값이 정해지지 않고, 할당되지 않았을 때, 비어있는 상태, 변수를 초기화한 경우에 표현된다.
- 객체형(Object) = 여러 속성, 여러 값을 하나의 변수에 저장할 수 있도록 해주는 타입이다. 키:값 구조로 이루어져 있다 (JSON형태와 똑같다.)
const apple = {
name : "사과"
hobby : "운동하기"
}
console.log(apple) // object (속성을 나타낸다.)
console.log(apple.name) // 사과- 심볼형(Symbol) = '유일하고 변경 불가능한' 기본값을 만드는 타입이다. 객체 속성의 키 값으로 사용 가능하다.
자바스크립트의 형변환
자동형변환 = 내가 따로 형변환 하지 않아도 자바스크립트 내에서 알아서 암시적 또는 묵시적으로 형변환을 해준다.
숫자 + 문자열 => 문자열
10 + "20" => "1020"강제형변환 = 자동으로 형변환을 지원하지만(자동형 변환) 명시적으로 변환할 필요가 있을 때 사용하는 함수이다.
- Number() : () 안의 문자를 숫자로 변환한다.
- String() : () 안의 숫자나 불린(ture/false)을 문자열로 변환한다.
- Object() : () 안의 모든 자료형을 객체형으로 변환한다.
- parseInt() : () 안의 문자열을 정수로 변환한다.
- parseFloat() : () 안의 문자열을 실수로 변환한다.
let num = "5";
parseInt(num) = 5
'개념정리' 카테고리의 다른 글
| [개념정리 8탄] JavaScript 4번째 (1) | 2022.10.08 |
|---|---|
| [개념정리 7탄] JavaScript 3번째 (2) | 2022.10.08 |
| [개념정리 5탄] JavaScript란? (1) | 2022.10.08 |
| [개념정리 4탄] ifname / input / table / textarea / ul (0) | 2022.10.08 |
| [개념정리 3탄] HTML 문법 (1) | 2022.10.08 |