coderbear's log

자바스크립트

우리가 매일 접속하는 웹사이트는 크게 3가지 요소로 구성된다. ‘HTML(Hyper Text Markup Language)’, ‘CSS(Cascading Style Sheets)’, ‘자바스크립트(Javascript)’다. HTML은 웹페이지의 큰 뼈대를 제공하고, CSS

terms.naver.com

- ECMAscript : 유럽 컴퓨터 제조업자 협회(ECMA)에서 제정된 자바스크립트 언어 표준

# use strict

자바스크립트의 유연성 때문에 유지보수 어려움(버그 찾기 어려움)이라는 단점을 보완하기 위해

ES5 이후 지원하는 엄격모드(Strict Mode)를 사용하는 방법이다.

//Tip : Lint - 개발자의 의도에 맞는 코딩 스타일을 지정하면

이를 기준으로 의도치 않은 실수 등을 알려주는 도구

ex) ESLint - js 린트 프로그램명

ex) 문법적 오류가 있으나 자바스크립트 언어의 유연성으로 인해 정상 출력된다.

num=5; // 변수를 선언하지 않고 사용
console.log(num);

- 내장함수 : 자바스크립트 엔진에 내장된 함수

지금까지는 개발자가 함수를 정의하고 호출문을 사용해 함수 안에 있는 코드를 실행했다.

하지만 내장 함수는 개발자가 함수를 직접 선언하지 않아도 된다.

즉, 자바스크립트에 이미 내장된 함수는 바로 호출할 수 있다.

함수명	설명	예시
parseInt()	문자열 데이터를 정수형 데이터로 반환	parseInt("5.12"); // 5 parseInt("15px"); // 15
parseFloat()	문자열 데이터를 실수형 데이터로 반환	parseFloat("5.12"); // 5.12 parseFloat("65.5%"); // 65.5
String()	문자형 데이터로 반환	String(5); // "5"
Number()	숫자형 데이터로 반환	Number("5"); // 5
Boolean()	논리형 데이터로 반환 0이 false 나머지는 true	Boolean(5); // true Boolean(null); // false
isNaN()	is Not a Number의 약자이며 숫자가 아닌 문자가 포함되어 있으면 true를 반환	isNaN("5-3"); // true isNaN("53"); // false
eval()	문자형 데이터를 따옴표가 없는 자바스크립트 코드로 처리	eval("15 + 5"); // 20

- Hoisting : 함수 선언이 호출보다 아래 있더라도

함수 선언을 위에서 선언한 것과 동일하게 인식하여 결과가 동일하게 출력된다.

ex)

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset = "UTF-8">
<title> 함수 </title>
<script>
	var count = 0;

	myFnc();
	
	function myFnc() { // 호출문이 위에 있어도 에러 발생하지 않음 (Hoisting 가능)
		count++;
		document.write("hello" + count,"<br>");
	}        
	
	myFnc();
	
	var theFnc = function() { // 호출문이 위에 있으면 에러 발생한다. (Hoisting 불가)
		count++;
		document.write("bye" + count,"<br>");
	}
	
	theFnc();
</script>
</head>
<body>
</body>
</html>

ex)

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset = "UTF-8">
<title> 함수 </title>
<script>
	var color=["white", "yellow", "aqua", "purple"];
			
	var i=0;
	function changeColor() {
		i++;
		if(i >= color.length) {
			i = 0;
		}
		
		var bodyTag = document.getElementById("theBody");
		bodyTag.style.backgroundColor = color[i];
	}
</script>
</head>
<body id="theBody">
  <button onclick="changeColor();">배경색 바꾸기</button>
</body>
</html>

ex)

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset = "UTF-8">
	<title> 함수 </title>
	<script>
		function myFnc(name, area) {
			document.write("안녕하세요. " + name + "입니다.", "<br>");
			document.write("사는곳은 " + area + "입니다.", "<br><br>");
		}
		
		myFnc("홍당무", "서울");
		
		myFnc("깍두기", "부산");
	</script>
</head>
<body>
</body>
</html>

ex)

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset = "UTF-8">
<title> 함수 </title>
<script>
	var rightId = "korea";
	var rightPw = "1234";
	function login(id, pw){
		if(id == rightId){
			if(pw == rightPw){
				document.write(id + "님 방문을 환영합니다");
			}else{
					alert("잘못된 비밀번호입니다.");
			}
		} else {
			alert("존재하지 않는 아이디입니다.");
		}
	}

	var userId = prompt("아이디를 입력하세요.", ""); // prompt - 자바스크립트 내 입력 받을 시 사용
	var userPw = prompt("패스워드를 입력하세요.", "");

	login(userId, userPw);
</script>
</head>
<body>
</body>
</html>

ex)

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset = "UTF-8">
<title> 함수 </title>
<script>
	function testAvg(arrData){
		var sum = 0;    
		for(var i = 0; i < arrData.length; i++) { // arrData.length = 2
			sum += Number(prompt(arrData[i] + " 점수는?", "0")); // Number(내장함수) - 문자열을 숫자로 변환시킴
		}

		var avg = sum / arrData.length;
		return avg;
	}

	var arrSubject = ["국어", "수학"]; // 배열
	var result = testAvg(arrSubject); // 배열을 인수로 보내줌

	document.write("평균 점수는 " + result + "점 입니다");
</script>
</head>
<body>
</body>
</html>

ex) 이미지 갤러리 활용 예시

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset = "UTF-8">
<title> 함수 </title>
<style>
	*{margin: 0;padding: 0;}
	#galleryZone {text-align: center;}
	#galleryZone input[type="image"]{margin:0 8px;}
</style>
<script>
	var num = 1;
	function gallery(direct) {
		if(direct) { // 0이 오면 false, 나머지는 true
			if(num == 8) return;
			num++;
		} else {
			if(num == 1) return;
			num--;
		}

		var imgTag = document.getElementById("photo");
		imgTag.setAttribute("src","images/pic_" + num + ".jpg"); // 클릭 시 뒤의 숫자가 바뀌면서 새로운 이미지를 불러오게 됨
	}
</script>
</head>
<body>
	<div id="galleryZone">
		<p><img src="images/pic_1.jpg" id="photo" alt=""></p>
		<p>
			<button onclick="gallery(0)">이전</button> 
			<button onclick="gallery(1)">다음</button>
		</p>
	</div>
</body>
</html>

ex) 재귀함수 예시

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset = "UTF-8">
<title> 함수 </title>
<script>
	var num = 0;
	function testFnc(){ // 재귀함수
		num++;
		document.write(num, "<br>");
		if(num == 10) return;
		
		testFnc();
	}
	testFnc();
</script>
</head>
<body>
</body>
</html>

ex)

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset = "UTF-8">
<title> 함수 </title>
<script>
	var num = 100;
	function menu( ) {
		num += 100;
		alert(num);
	}
	menu();

	function menu( ) { // 동일 이름의 함수 정의함, 위의 선언된 함수 무시된다. (Hoisting)
		alert(num);
	}
</script>
</head>
<body>
</body>
</html>

- 자바스크립트는 함수 내 함수를 정의하는 것이 가능하다.

ex) 함수 내 함수 정의

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        function myFnc(){
            alert("전역함수");
        }

        function outerFnc(){ 
            function myFnc(){
                alert("지역함수");
            }
            myFnc();        // 지역 함수 호출
        }

        outerFnc();
        myFnc();            // 전역 함수 호출
    </script>
</body>
</html>

- 즉시 실행 함수 (자주 쓰이는 형태)

ex)

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset = "UTF-8">
<title> 함수 </title>
<script>
	// 즉시 실행 함수
	(function() {
		var num = 100;
		function menu( ) {
			num += 100;
			alert(num);
		}
		menu( );
	}()); // )()과 ()) 모두 가능

	(function(){
		var num = 100;
		function menu( ) {
			alert(num);
		}
	}( ));
</script>
</head>
<body>
</body>
</html>

- 객체 생성자 함수

ex)

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset = "UTF-8">
<title> 함수 </title>
<script>
	function CheckWeight(name, height, weight) {		// 객체 생성자 함수(Object Constructor Function)
		this.userName = name;
		this.userHeight = height;
		this.userWeight = weight;
		this.minWeight;
		this.maxWeight;

		this.getInfo = function() { // 참조값이  getInfo에 들어감
			var str = ""
				str += "이름: " + this.userName + ", ";
				str += "키: " + this.userHeight + ", ";
				str += "몸무게: " + this.userWeight + "<br>";
				return  str;
		}
		this.getResult = function( ) {
			this.minWeight = (this.userHeight - 100) * 0.9 - 5;
			this.maxWeight = (this.userHeight - 100) * 0.9 + 5;

			if(this.userWeight >= this.minWeight && 
			this.userWeight <= this.maxWeight) {
				return "정상 몸무게입니다";
			} else if(this.userWeight < this.minWeight) {
				return "정상 몸무게보다 미달입니다";
			} else {
				return "정상 몸무게보다 초과입니다";
			}
		}
	}

	var jang = new CheckWeight("장보리", 168, 62);		// 객체 생성
	var park = new CheckWeight("박달재", 180, 88);
	console.log(jang);
	console.log(park);

	document.write(jang.getInfo());
	document.write(jang.getResult() +"<br>");
	document.write(jang.getResult === park.getResult);
</script>
</head>
<body>
</body>
</html>

- 메모리 절약을 위한 프로토타입 사용하기

위의 예제를 통해 생성자 함수를 선언하여 객체를 생성하고 속성과 함수를 등록해 보았다.

하지만 앞에서 배운 대로 객체를 생성하면 객체를 생성한 만큼 함수가 등록된다.

그리고 함수를 여러 개 등록하면 메모리 공간을 많이 차지하여 메모리를 낭비하게 된다.

이럴 때는 객체 생성자 함수에 프로토타입(Prototype)을 사용하여 등록하면 메모리 낭비를 줄일 수 있다.

프로토타입(Prototype)의 사전적 의미는 '원형'이다.

자바스크립트에서 '원형'은 객체 생성자 함수를 의미한다.

프로토타입을 사용하여 등록한 함수는 원형(객체 생성자 함수)에서 생성된 객체를 공유할 수 있다.

즉, 여러 개의 함수를 등록할 필요가 없다.

# 함수 형태

- 기본형

function 함수명(매개변수1, 매개변수2, ... 매개변수n){
           this.속성명 = 새 값;
}

- 프로토타입

함수명.prototype.함수명 = function(){
           자바스크립트 코드;
}

- 변수 선언

var 참조 변수(인스턴스 네임) = new 함수명();

ex)

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset = "UTF-8">
<title> 함수 </title>
<script>
	function CheckWeight(name, height, weight) {
		this.userName = name;
		this.userHeight = height;
		this.userWeight = weight;
		this.minWeight;
		this.maxWeight;
	}
	CheckWeight.prototype.getInfo = function() { // 프로토타입으로 생성
		var str = ""
		str += "이름: " + this.userName + ", ";
		str += "키: " + this.userHeight + ", ";
		str += "몸무게: " + this.userWeight + "<br>";
		return  str;
	}
	CheckWeight.prototype.getResult = function( ) {
		this.minWeight = (this.userHeight - 100) * 0.9 - 5;
		this.maxWeight = (this.userHeight - 100) * 0.9 + 5;

		if(this.userWeight >= this.minWeight && 
		this.userWeight <= this.maxWeight) {
			return "정상 몸무게입니다";
		} else if(this.userWeight < this.minWeight) {
			return "정상 몸무게보다 미달입니다";
		} else {
			return "정상 몸무게보다 초과입니다";
		}
	}    
	var jang = new CheckWeight("장보리", 168, 62);
	var park = new CheckWeight("박달재", 180, 88);
	console.log(jang);
	console.log(park);

	document.write(jang.getInfo());
	document.write(jang.getResult(), "<br>");

	document.write(jang.getResult === park.getResult);

</script>
</head>
<body>
</body>
</html>

728x90

저작자표시

'Web > javascript' 카테고리의 다른 글

[필기정리]Day52 - let, const, symbol 등 (0)	2020.09.04
[필기정리]Day51-2 - Hoisting, 자바스크립트 실습문제 등 (0)	2020.09.04
[필기정리] Day50-2 - 자바스크립트 예시 및 문제 (0)	2020.09.03
[필기정리] Day50-1 - array sort, 유효성체크 (0)	2020.08.31
[실습문제] JavaScript로 달력 만들기 (0)	2020.08.19

coderbear

[필기정리]Day51-1 - 자바스크립트의 역사, use strict 등

'Web > javascript' 카테고리의 다른 글

티스토리툴바