본문 바로가기
프로그래밍 공부/JS

[lesson] JS - 함수(function), 객체(Object) [일반 객체, core]

by Luna_lua 2021. 9. 2.
반응형

<함수>

function 식별자(param1, param2, ... paramn){ // 인자
		코드 작성
		return 리턴값;
	}

	// function		: 함수 선언 표시
	// 식별자		: 동사로 작성
	// parameter		: 여러 개 있을 때 콤마로 분리하고, 생략도 가능
	// return		: 함수의 실행 종료 후 리턴값을 반환
    
    식별자(param1, param2, ... paramn); //인수

※ 인자란, 인수를 받는 부분이며, 파라미터 혹은 매개변수라고 부른다.
    인수(argument)란, 함수 사용 시 인자로 전달되는 값이다.

 

 

<전역함수 (자바의 내부함수와 같은 내용)>

- eval()
문자열 형태로 수식을 전달 받아서 수식을 계산한다.
eval("2*3+4*6") == 30

- parseInt()
문자열을 숫자로 변환한다.
parseInt("32") === 32

※ === : 값도 같고 타입도 같다

- isNaN()
숫자가 아니면 true, 숫자이면 false
NaN(Not a Number)이라는 값은 숫자가 아님을 나타내는  상수

- isFinite()
숫자면 true, 아니면 false

// 예시 1번 (eval, parseInt)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>전역 함수</title>
</head>
<body>
   <h3>전역 함수</h3>
   <hr>
</body>
<script>
   function checkGlobalFunctions(){
      var result = eval("2*3+4*6");
      var value = parseInt("hello");
      
      document.write("eval('2*3+4*6')은 " + result + "<br>");
      
      if(isNaN(value)){
         document.write("숫자가 아닙니다.");
      }
   }
   
   checkGlobalFunctions();
</script>
</html>

// 예시 2번 (구구단) (parseInt, isNaN)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
   <h1>구구단</h1>
   <h3>입력받은 단 출력</h3>
</body>
<script>
/* 사용자에게 단 수를 입력받은 후 해당 구구단 출력 */
   
    function printGugudan(num){
   
      //사용자가 입력한 값이 실수인지 정수인지 판단
      //true일 때 실수, false일 때 정수
      var check = num - parseInt(num) != 0.0;
      if(!check){
         num = parseInt(num);      
      }
      
      //실수일 때
      //숫자가 아닌 값을 입력했을 때
      //구구단의 범위를 벗어났을 때
      if(check || isNaN(num) || num < 1 || num > 9){
         alert("잘못 입력하셨습니다.");
         return false;
      }
      
      for(let i=1; i<10; i++){
         console.log(num + "*" + i + "=" + (i * num));
      }
      return true;
   }
   
   while(true){
      var num = prompt("단 : ");
      if(num == "null" || num == null){break;}
      if(printGugudan(num)){break;}

	 
	 
	 // 1~n까지의 합을 출력하는 함수
	 /* function printSum(data){
		 var sum =0;
		 for(var i=1;i<=data;i++){
			 sum = sum + i;
		 }
		return sum;
	 }
	 
	 var num =prompt("몇까지 덧셈을 할까요?");
	 console.log(printSum(parseInt(num))); */

	 /* 1 ~ 100까지 중 짝수 출력 */
	 /* function printEven(){
		 for(i=1;i<=100;i++){
			 if(i % 2 == 0){
				 console.log(i);
			 }
		 }
	 }
	 
	 printEven(); */
	 
	 
	 </script>
</html>

 

 

 

 

<자바스크립트 객체>

★ Point! 객체를 배우는것이 JS의 핵심목표!

객체의 고유한 속성을 프로퍼티(property)라고 부르며, 여러 프로퍼티와 값의 쌍으로 표현된다.
객체가 호출하는 함수는 메소드라고 부른다 (이전에 배운 객체없이 사용한 함수는 그냥 함수라고 부른다.)

구분 안에 들어갈 내용
객체 account
프로퍼티 momey:3000
date:2021-09-01
owner:홍길동
number:110-111-222222
code:1234
메소드 deposit()
withdraw()
show_balance()

 

문법 var account ={
momey:3000,
date:2021-09-01,
owner:홍길동,
number:110-111-222222,
code:1234,
deposit:function(){...},
withdraw:function(){...},
show_balance:function(){...}
}		 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>사용자 객체 선언 및 사용</title>
</head>
<body>
</body>

<script>
	var account = {
		owner : "홍길동",
		code : "1234",
		balance : 105000,
		deposit : function(money){this.baance += money},
		withdraw : function(money){this.baance -= money},
		show_balance : function(money){return this.balace}
	};
	
	console.log(account);
	
</script>
</html>

 

<코어객체>

Array, Date 타입등

 

웹페이지나 웹 서버 응용프로그램 어디서나 사용할 수 있다.

코어 객체의 생성은 항상 new 키워드를 사용한다.

 

Array

//[]로 배열 만들기
// OOO.length를 수동으로 길이 값을 조절할 수 있는데, 
// 입력된 값보다 작아지면 입력한 값보다 컸던 인덱스는 사라진다. (조심!)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>[]로 배열 만들기</title>
</head>
<body>
	<h3>[]로 배열 만들기</h3>
</body>

<script>
	var datas = [20, 5, 7, 5, 10];
	
	//datas.length : 변수, 해당 배열의 길이
	
	datas.length = 2;
	docu
	for(let i =0; datas.length; i++){
		document.write(datas[i] + " ");
	}
</script>
</html>


// Array 객체로 배열 만들기

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Array 객체로 배열 만들기</title>
</head>
<body>
	<h3>Array객체로 배열 만들기</h3>
	<hr>
</body>

<script>
	/*var week = new Array(7);
	
	var idx = 0;
	week[idx++] = "월";
	week[idx++] = "화";
	week[idx++] = "수";
	week[idx++] = "목";
	week[idx++] = "금";
	week[idx++] = "토";
	week[idx++] = "일";*/
	
	var week = new Array("월", "화", "수", "목", "금", "토", "일")
	
	console.log(week);
	document.write(week.join("-"));
	
</script>
</html>

 

Core

// Date의 코어객체에서 초를 확인하여 짝수초/홀수초로 색상변경

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>방문시간에 따라 변하는 배경</title>
</head>
<body>
   <h3>방문 시간에 따라 변하는 배경</h3>
   <hr>
</body>
<script>
/*
 *    초를 기준으로 짝수이면 문서의 배경색을 violet으로,
    홀수이면 lightskyblue로 변경
    
 */
   var current = new Date();
    console.log(current);
    
    console.log(current.getSeconds());
    console.log(document);
    if(current.getSeconds() % 2 == 0){
       document.body.style.background = "violet";
    }else{
       document.body.style.background = "lightskyblue";
    }
    
</script>
</html>

 

 

반응형

'프로그래밍 공부 > JS' 카테고리의 다른 글

[lesson] JS - 제이쿼리 (jQuery)  (0) 2023.01.10
[lesson] JS - 데이터 타입과 변수  (0) 2023.01.10
[lesson] JS - 기본 입출력(document, prompt, comfirm, alert)  (0) 2023.01.10
[Lesson]JQUERY - id가 여러개인데 한번에 찾고 싶을때! ${}  (0) 2022.05.11
[lesson] JS - 기본 개요  (0) 2021.09.01

관련글

티스토리툴바