[ JavaScript ] 변수 생성 및 데이터 정리
2024. 4. 25. 19:09ㆍ· FRONT-END/└ JS
환경 : Visual Studio Code
[ JavaScript ]
- javascript를 의도적으로 head 자리에 배치해서 가장 먼저 실행되도록 구현하는 것이 일반적이다.
- console.log("Hello Javascript!");
└ 자바의 System.out.println()같은 출력 명령으로 콘솔창에서 확인 가능하다. - 변수를 만들 때 자료형을 고려하지 않는다 (자료형 개념은 있지만, 구분하지 않음)
- 코드를 실시간 번역하는 형태(스크립트 방식)
[ 집중적으로 볼 코드 ]
<script type="text/javascript">
a = 10;
b = "hello";
console.log(" a = " + a);
console.log(" b = " + b);
//자바스크립트는 코드를 실시간 번역하는 형태를 취한다(스크립트 방식)
//정말 말도 안 되는 오류만 아니면 다 해준다
console.log(a * b);//NaN : Not a Number
// console.log(c); //말도 안 되는 에러(없는 변수 달라고 하기)
//그래서... 특이한 값들은 무엇이 있나?
var d;
console.log(d);//undefined - 변수에 값이 들어간 적이 없다는 뜻
var f = null;
console.log(f);//null - 참조 대상이 없다는 뜻
var g = 10 / 0;
console.log(g);//Infinity - 무한대
var h = -10 / 0;
console.log(h);//-Infinity - 무한대
var i = new Array(5);
console.log(i);
//자바스크립트는 연산 결과가 "숫자(Number)"이다.
console.log(10/3); //3
</script>| undefined | 변수에 값이 들어간적이 없음 |
| null | 참조 대상이 없음 |
| (-)Infinity | 무한대 |
[ 전체 코드 ]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Javascript 예제</title>
<!-- 구글 폰트 -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap" rel="stylesheet">
<!-- 내가 구현할 스타일 -->
<link rel="stylesheet" type="text/css" href="../css/commons.css">
<link rel="stylesheet" type="text/css" href="../css/test.css">
<!-- font awesome 아이콘 CDN -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<style>
</style>
<script type="text/javascript">
a = 10;
b = "hello";
console.log(" a = " + a);
console.log(" b = " + b);
//자바스크립트는 코드를 실시간 번역하는 형태를 취한다(스크립트 방식)
//정말 말도 안 되는 오류만 아니면 다 해준다
console.log(a * b);//NaN : Not a Number
// console.log(c); //말도 안 되는 에러(없는 변수 달라고 하기)
//그래서... 특이한 값들은 무엇이 있나?
var d;
console.log(d);//undefined - 변수에 값이 들어간 적이 없다는 뜻
var f = null;
console.log(f);//null - 참조 대상이 없다는 뜻
var g = 10 / 0;
console.log(g);//Infinity - 무한대
var h = -10 / 0;
console.log(h);//-Infinity - 무한대
var i = new Array(5);
console.log(i);
//자바스크립트는 연산 결과가 "숫자(Number)"이다.
console.log(10/3); //3
</script>
</head>
<body>
<div class="container w-500">
<div class="cell center">
<h1>자바스크립트의 데이터</h1>
</div>
<div class="cell">
</div>
</div>
</body>
</html>
개인 공부 기록용입니다:)
728x90
'· FRONT-END > └ JS' 카테고리의 다른 글
| [ JavaScript ] 전화 키패드 만들어 보기 (태그 제어 이해) (0) | 2024.04.30 |
|---|---|
| [ JavaScript ] 태그 제어 (0) | 2024.04.29 |
| [JavaScript] 함수 호출 기능 (0) | 2024.04.27 |
| [ JavaScript ] 조건문과 반복문 (0) | 2024.04.26 |
| [ JS / ajax ] 첨부파일 이미지에 대한 정보를 통해 이미지를 불러오기 (0) | 2024.03.07 |