변수
자바스크립트는 자료형이 고정되어 있지 않은 동적타입 언어이기 때문에 변수를 선언할때 별도의 자료형을 명시하지 않아도 된다.
1) 자료형
내부적으로는 Primitive(기본형)과 Object(객체형)이 있으며 각각 다음과 같습니다.
Primitive
- Boolean: true, false
- null: 빈 값
- undefined: 변수에 값이 할당되지 않았을 때 나타남.
- Number: 숫자형으로 정수와 부동 소수점, 무한대 및 NaN(숫자가 아님)등.
- String: 문자열
Object
- Reference 타입
- 클래스 뿐만 아니라, 배열과 함수, 사용자 정의 클래스도 모두 Object.
- JSON(Java Script Object Notation)의 기본 구조.
1) 변수 선언
- 변수의 이름은 대소문자를 구별하며, 여러 변수를 한번에 선언할 수 있다.
- 기본적으로는 소문자로 시작하고 단어가 바뀌면 바뀐 단어의 첫번째 글자를 대문자로 적는 camel case를 사용한다.
- 지역변수와 전역변수가 있다.
var box;
box = 100;
box = 30;
document.write(box);var, let, const
- var는 지역변수 개념으로 함수 범위에서 유효하며, var를 선언하지 않으면 자동으로 전역변수가 됨.
- let은 값의 재할당이 가능하고 const는 재할당이 불가능.
- const로 선언된 배열이나 객체의 경우 배열값의 변경/추가, 객체의 필드 변경등은 가능함.
var box = 'box1';
console.log(box); // box1
var s = 100;
var t = Number("100"); // 문자열 100을 숫자형 100으로 변환
document.write(s + "<br>");
document.write(t);다음은 let과 const 예 입니다.
let box = 'box1';
const paper = 'paper1';
console.log(box); // box1
console.log(paper); // paper1
if (true) {
let box = 'box2';
console.log(box); // box2 - if문 안에서만 작용
}
console.log(box); // box1
bar = 'bar2'; // errorhoisting
- 자바스크립트에서 모든 변수 선언은 호이스트 되고 함수의 경우 함수명이 선언된 형식은 호이스팅 되며 변수에 할당된 형태(익명함수)는 호이스팅 되지 않습니다.
자바스크립트 변수에 있어 변수의 선언이 위치와 상관없이 최상위 레벨로 끌어올려진다고 이해할 수 있습니다.
변수 count가 호이스트 되어 변수는 선언되고 값이 할당되지 않은 undefined로 표시된다.
document.write(count + "<br>"); // undefined
var count = 0;
myFnc(); // hello1
function myFnc() {
count++;
document.write("hello" + count + "<br>");
}String 변수
- 자바스크립트는 " ",' ' 를 사용할 수 있으며 \ 를 이용하여 ""안에 ""를 표시할 수 있다..
var string;
string = "책에\"자바스크립트는 대소문자를 구분해야 합니다.\"라고 나와 있다."
//'책에"자바스크립트는 대소문자를 구분해야 합니다."라고 나와 있다.'
document.write(string);
출력문
- 자바스크립트는 HTML 문서의 구성요소에 동적으로 출력하거나 웹브라우저의 경고창을 이용해 출력하는 형태가 출력문으로 볼 수 있다.
1) HTML 문서에 출력
- document.write() : 괄호 안의 내용을 웹브라우저에 출력 한다.
<script>
document.write("책에\"자바스크립트는 대소문자를 구분해야 합니다.\"라고 나와 있다.");
</script>2) HTML 문서의 특정부분에 출력
- 기존 HTML 소스를 유지하며 특정 부분만 변경 된다.
<script>
var fColor = ["red", "blue", "green", "orange"]
var j=0;
function fontColor() {
j++;
if(j >= color.length) {
j = 0;
}
var pTag = document.getElementById("theP");
pTag.style.color = fColor[j]
console.log(j);
};
</script>
<body>
<p id="theP">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</p>
<button onclick="fontColor();">글자색 바꾸기</button>
</body>3) Alert 창을 이용한 출력
<script>
alert("미세먼지 저감 조치에 따른 차량 2부제를 시행합니다.");
</script>4) 브라우저 콘솔창을 이용한 출력
- console.log()를 사용하며 결과 확인은 웹브라우저의 콘솔창에 나타나게 된다.
<script>
var box = "box1";
console.log(box);
</script>
'HTML, CSS, javascript > 이론' 카테고리의 다른 글
| javascript - 기초 (3) (0) | 2022.07.06 |
|---|---|
| javascript - 기초 (2) (0) | 2022.07.05 |
| ScrollTop (0) | 2022.06.22 |
| side-menu (0) | 2022.06.22 |
| 반응형 (0) | 2022.06.16 |
