'AI Bootcamp/JavaScript' 카테고리의 글 목록

AI Bootcamp/JavaScript

[JavaScript] Variable 2022.01.29
[JavaScript] Data Type 기본형 & 참조형 & Class 정리 2022.01.29
[JavaScript] script 작성 위치 정리 2 2022.01.29
[JavaScript] script 작성 위치 정리 2022.01.29

[JavaScript] Variable

2022. 1. 29. 02:16

JavaScript Variable

Const 상수

* const는 재할당 불가능

 <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
 
	// 상수
	const n = 100;
	n = 200; // 변경 불가
    // Uncaught 
    // TypeError: Assignment to constant variable.
	
	
</script>
</head>
<body>
 
</body>
</html>

Data 자동 형변환

 <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
	<script type="text/javascript">
		// 1. 문자열과 산술연산자 연산
			console.log("10" + 3); // 연결
			console.log("10" - 3);
			console.log("10" * 3);
			console.log("10" / 3);
			
		// 2. true/false가 아닌 임의의 값도 논리값으로 처리 가능하다.
		// false로 처리되는 값 : 0, "", NaN, null, undefined
		// true로 처리되는 값 : 위 5가지를 제외한 나머지 값은 true로 처리된다.
		if(""){
			console.log("true");
		}else{
			console.log("false"); //0, "" 빈문자열, undefined, NaN false로 찍힌다.
		}
	
	</script>
 
</head>
<body>
 
</body>
</html>

typeof 연산자

 <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
 
	var name ="홍길동";
	var age =20;
	var height= 179.9;
	var weight =69.5;
	var isMarried = true;
	var phone=["010","011"];
	var email=["naver@naver.com","naver@gmail.com"];
	var address = null;  // null은  값이 정해져 있지 않는 경우
	
	var pets={ 
			"cat":"야오옹",
			"dog":"멍머엉"
	};
	var f = function(){};
	var f2 = null;
	var f3;
	
	console.log(typeof name);		// "string"
	console.log(typeof age);		// "number"
	console.log(typeof height);		// "number"
	console.log(typeof weight);		// "number"
	console.log(typeof isMarried);		// "boolean"
	console.log(typeof phone);		// "object"
	console.log(typeof email);		// "object"
	console.log(typeof address);		// "object"
	console.log(typeof pets);		// "object"
	console.log(typeof cat);		// "object"
	console.log(typeof dog);		// "object"
	console.log(typeof f);			// "function"
	console.log(typeof f2);			// "object"
	console.log(typeof f3);			// "undefined"
 
 
 
</script>
</head>
<body>
 
</body>
</html>

var

javascript ES5버전까지의 변수 선언 방식

 <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	// var 키워드
	
	// 변수 선언
	var num;
	console.log("var:", num); //undefined
	
	// 변수 초기화
	num = 10;
	console.log("var:", num); //10
	
	num = "홍길동";
	console.log("var:", num); //홍길동
	
</script>
</head>
<body>
 
</body>
</html>

 <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	// var 키워드
	
	// 변수 선언
	// 변수 초기화
	// 1. var는 변수명 중복이 가능하다.
	var num = 10;
	var num = 10;
	console.log("var:", num); //undefined
	
	// 2. 함수 scope
	
	if(true){
		var m = 20;
		console.log("블럭안:", m);
	}
	console.log("블럭밖:", m);
 
	function fun() {
		var x = 10;
		console.log("fun:", x);
	}
	fun();
	// console.log(x); //에러 , 함수 블록 불러서
		
	console.log("///////////////////")
	// 3. 호이스팅
	console.log(n); // undefined
	var n = 10;
	console.log(n); // 10
	
	
	
	
</script>
</head>
<body>
 
</body>
</html>

let

 <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	// let 키워드 (ES6)
	
	// 변수 선언
	let num;
	console.log("let:", num); //undefined
	
	// 변수 초기화
	num = 10;
	console.log("let:", num); //10
	
	num = "홍길동";
	console.log("let:", num); //홍길동
 
</script>
</head>
<body>
 
</body>
</html>

 <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	// let 키워드 (ES6)
	
	// 변수 선언
	// 변수 초기화
	// 1. let은 변수명 중복이 안된다.
/* 	let num = 10;
	let num = 20; // 에러 이유?
	console.log("let:", num);  *///undefined
	//Uncaught SyntaxError: Identifier 'num' has already been declared
	
	// 2. 블럭 scope
	
	if(true){
		let m = 20;
		console.log("블럭안:", m);
	}
	/* console.log("블럭밖:", m); 에러이유? 블럭 안에서 선언된 것은 안에서만 사용 가능*/
	// Uncaught ReferenceError: m is not defined
    // at let2.html:23
	
    function fun() {
		let x = 10;
		console.log("fun:", x);
	}
	fun();
	// console.log(x); // 에러이유? 블럭 안에서 선언된 것은 안에서만 사용 가능
 
 	console.log("///////////////////")			
	// 3. 호이스팅 불가 
	/* console.log(n); */ // 에러이유? hosting을 수행하지만 초기화 되기 전을 참조
	let n = 10;
	console.log(n);
 
</script>
</head>
<body>
 
</body>
</html>

'AI Bootcamp > JavaScript' 카테고리의 다른 글

[JavaScript] Data Type 기본형 & 참조형 & Class 정리 (0)	2022.01.29
[JavaScript] script 작성 위치 정리 2 (0)	2022.01.29
[JavaScript] script 작성 위치 정리 (0)	2022.01.29

[JavaScript] Data Type 기본형 & 참조형 & Class 정리

2022. 1. 29. 02:05

 <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
 
<script type="text/javascript">
 
	// 1. 기본형
	console.log("수치(정수):", 20);
	console.log("수치(실수):", 3.14);
	
	console.log("문자(하나의문자):", 'A', "A");
	console.log("수치(문자열):", 'ABC', "ABC");
	
	console.log("논리데이터:", true, false);
	console.log("undefined(초기화 되지 않은 상태):", undefined);
	console.log("null(값이 없음):", null);
	console.log("NaN(Not a Number):", NaN);
	
	// 2. 참조형
	console.log("객체:(객체배열)", [10,20,30], ["a", "b"], [10, "a"]);
	console.log("객체:(JSON객체)", {"name":"홍길동", "age":20});
	
	// ES6
	// 클래스
	class Person{
		// 생성자
		constructor(name, age)
		{
			this.name = name;
			this.age = age;
		}
	}
	
	var p = new Person("홍길동", 20);
	
	console.log("클래스:", p.name, p.age)
	console.log("함수(익명함수):", function(){});
	
</script>
 
</head>
<body>
 
</body>
</html>

'AI Bootcamp > JavaScript' 카테고리의 다른 글

[JavaScript] Variable (0)	2022.01.29
[JavaScript] script 작성 위치 정리 2 (0)	2022.01.29
[JavaScript] script 작성 위치 정리 (0)	2022.01.29

[JavaScript] script 작성 위치 정리 2

2022. 1. 29. 01:57

 <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
 
<script type="text/javascript">
	window.onload=function(){
		console.log("head 태그 안에서 p태그: ", document.getElementById("userid")); // 접근하는 방법
	};
</script>
 
</head>
<body>
	<script type="text/javascript">
		// 자바 스크립트 코드 작성 
		// 인터 프리터 - 순차적 실행 
		// DOM 생성 후 접근 가능
		console.log("body 태그 안에서 p태그 위: ", document.getElementById("userid")); // 접근하는 방법
	</script>
 
	<p id="userid">홍길동</p>
 
 
	<script type="text/javascript">
		// 자바 스크립트 코드 작성
		console.log("body 태그 안에서 p태그 밑: ", document.getElementById("userid")); // 접근하는 방법
	</script>
</body>
</html>

window.onload = 함수
→ 실행 시점은 HTML DOM TREE가 모두 실행된 후에 실행된다.
HTML DOM TREE가 모두 실행 : body 안의 모든 태그가 실행

'AI Bootcamp > JavaScript' 카테고리의 다른 글

[JavaScript] Variable (0)	2022.01.29
[JavaScript] Data Type 기본형 & 참조형 & Class 정리 (0)	2022.01.29
[JavaScript] script 작성 위치 정리 (0)	2022.01.29

[JavaScript] script 작성 위치 정리

2022. 1. 29. 01:34

script 작성은 <head></head>에서 작성하는 것을 많이 사용한다.

 <html>
<head>
 
	<script></script>	<!-- 1. 가장 많이 사용 -->
    
    <script src = "scripttest.js"></script> <!-- 2. 외부에서 가져올 경우 -->
</head>
<body>
 
 
	<script></script>   <!-- 3.  body 안에서 scipt 작성할 경우 하단 </body> 전에 작성  
    					페이지 로딩을 더 빠르게 하기 위해 어중간한 위치면 
                        		Java Script 때문에 페이지 열리는 속도가 느려짐 -->
</body>
</html>

'AI Bootcamp > JavaScript' 카테고리의 다른 글

[JavaScript] Variable (0)	2022.01.29
[JavaScript] Data Type 기본형 & 참조형 & Class 정리 (0)	2022.01.29
[JavaScript] script 작성 위치 정리 2 (0)	2022.01.29

PREV 1 NEXT

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

deeprun

AI Bootcamp/JavaScript

[JavaScript] Variable

JavaScript Variable

Const 상수

Data 자동 형변환

typeof 연산자

var

let

'AI Bootcamp > JavaScript' 카테고리의 다른 글

[JavaScript] Data Type 기본형 & 참조형 & Class 정리

'AI Bootcamp > JavaScript' 카테고리의 다른 글

[JavaScript] script 작성 위치 정리 2

'AI Bootcamp > JavaScript' 카테고리의 다른 글

[JavaScript] script 작성 위치 정리

'AI Bootcamp > JavaScript' 카테고리의 다른 글

+ Recent posts

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>Insert title here</title>
	<script type="text/javascript">

	// 상수
	const n = 100;
	n = 200; // 변경 불가
	// Uncaught
	// TypeError: Assignment to constant variable.


	</script>
	</head>
	<body>

	</body>
	</html>

	<html>
	<head>

	<script></script> <!-- 1. 가장 많이 사용 -->

	<script src = "scripttest.js"></script> <!-- 2. 외부에서 가져올 경우 -->
	</head>
	<body>


	<script></script> <!-- 3. body 안에서 scipt 작성할 경우 하단 </body> 전에 작성
	페이지 로딩을 더 빠르게 하기 위해 어중간한 위치면
	Java Script 때문에 페이지 열리는 속도가 느려짐 -->
	</body>
	</html>