51일차 Study

스터디 주제

- 자바스크립트 리뷰

- 자바스크립트 예제 풀이

 

스터디 내용 

 

<< JavaScript >>

객체 관점 프로그래밍 : 클래스의 개념이 없음.

자바와의 차이점 : 자바는 객체지향의 원리 4가지를 쓰고

자스는 4가지 원리가 없기 때문에 지향이 되질 않음.

 

실행순서

인터프리터에 의해 순차적으로 실행됨.

Web Document Reading >> HTML Parsing(DOM Parser - DOM Tree) -해석 >> JavaScript 실행 >> CSS Style이 DOM 트리(박스모델)에 적용됨 >> HTML(DOM Tree)이 Rendering 됨(페이지 출력) - 이벤트 발생 : 등록된 이벤트 핸들러 (JavaScript) 실행

 

자바스크립트는 한 줄에 작성된 코드를 하나의 명령으로 인식하여 처리 => 명령 마지막에 ; 생략 가능

자바스크립트는 브라우저를 window 객체로 표현하여 속성과 메소드 제공

 

변수선언

var : 재선언 가능 - 규칙 없음

let : 동일한 이름의 변수 선언시 에러 발생 - 규칙 있음

const num=100; → 상수 로 변수 사용 (자바의 final)

값 대신 표현 되는 이름( ex) max 를 100이라 선언하면 max 호출시 100이 나오는 것)

{//블록 기호를 이용하여 영역을 구분
			var num1=100;//블럭 외부에서 사용 가능
			let num2=200;//블럭 외부에서 사용 불가능
			const num3=300;//블럭 외부에서 사용 불가능
}

연산자

<p>최우선 연산자 : () [] {} .</p> <p>단항 연산자 : + - ++ -- ! new typeof</p> <p>산술 연산자 : * / % + -</p> <p>관계 연산자 : > < >= <= == === != !==</p> <p>논리 연산자 : && ||</p> <p>대입 연산자 : = *= /= %= += -=</p>

형변환

<script type="text/javascript">
		//+ 연산자는 두 피연산자의 자료형이 모두 숫자인 경우 산술 연산 처리
		//alert(20+10);
		
		//+ 연산자로 논리값을 연산할 경우 false는 0으로 true는 1로 변환되어 연산 처리
		//alert(20+true);
		
		//+ 연산자는 두 피연산자 중 하나라도 문자값인 경우 문자값 결합 처리
		//alert("20"+10);
		//alert(20+"10");
		//alert("20"+"10");
		
		//+ 연산자를 제외한 나머지 산술 연산자는 모든 피연산자를 숫자값으로 자동 형변환하여 산술 처리
		//alert(20-10);
		//alert("20"-10);
		//alert(20-"10");
		//alert("20"-"10");
		
		//NaN(Not a Number) : 숫자형으로 형변환 할 수 없는 경우 표현되는 상수
		// => NaN를 산술 연산 처리하면 결과값으로 NaN 제공
		//alert("abc"-10);//NaN
		
		//Number(string) : 문자값을 전달받아 숫자값으로 변환하여 반환하는 클래스 함수 - NaN 발생 가능
		alert(Number("20")+10);
		
		
	</script>

제어문

<p>선택문 - if, switch</p> <p>반복문 - for, while</p> <p>기타 - break, continue</p>

함수

: 값을 전달받아 처리하는 명령의 모임 - 기능 제공

1. 선언함수 : 함수명을 명시하여 선언하는 함수

function display1() {
		alert("선언함수의 명령 실행");
	}

1. 익명함수 : 함수명을 명시하지 않고 선언하는 함수

→ 이벤트 처리시 사용

(function() {
		alert("익명 함수의 명령 실행");
	})();

지역변수 & 전역변수

함수 안에서 선언시

function b() {
var a; // 지역변수
a; // 전역변수
}

함수밖에서는

{
var a; // 전역변수
a; // 전역변수
}

매개변수

매개변수 여부와 상관없이 호출 가능 → 다형성 개념 적용 X

 

<< JavaScript 예제 풀이 >>

스터디원들과 리뷰를 마친 후 각자 만든 예제를 풀고 협업툴 '잔디'를 이용하여 문제풀이 수행.

 

1번 문제)

var x =0;

function fun1(){
x = 1;
}

function fun2(){
y = 1;
fun1();
return 2;
}

function fun3(a){
y=3;
a();
}

var z = fun3(fun2);

alert(z); // 1번답 :
alert(x); // 2번답 :
alert(y); // 3번답 :

 

정답 : undefined , 1, 1 ?

 

2번 문제)

function calculate(command, a, b) <- 를 사용하여command : add(더하기) , substract(빼기) , divide(몫) , multiply(곱하기) , remainde(나머지) 매개변수를 호출하여 호출시키기

정답 : 

function calculate(command, a, b) {
			switch (command) {
			case "add": alert(a+b); break;
			case "substract": alert(a-b); break;
			case "multiply": alert(a*b); break;
			case "remainde": alert(a%b); break;
			}
		}
		
		calculate("add",2,3);
		calculate("substract",3,2);
		calculate("multiply",2,3);
		calculate("remainde",4,2);

3번 문제)

function _out() {
var display2 = function () {
alert("2");
return 1;
}
}

alert(_out()); // 1번 문제

function display_(goguma) {
goguma(); // 2번 문제
}

display_(function () {
alert("1");
});

정답 : 

 

 

4번 문제)

sum함수의 매개변수에 시작값"1"과 종료값 "2022"을 넣고 시작값 부터 종료값(1+2+3...)의 합을 구해서 메세지 창에 출력하라!

정답 : 

var tot=0;
		function sum(a,b) {
			for(i=a;i<=b;i++) {
				tot+=i
			}
			alert(tot);
		}
		
		sum(1,2022);

 

5.

1번
alert(50+"25");
alert(50-"25"); 의 결과값을 각각 구하시오
-----------------------------------------------
2번
var tot=0;
var i=0;
for(var i=1;i<=100;i++) {
tot+=i;
}
var u=i+10;
alert(u);
의 결과는?
----------------------------------------
3번
var glovalVar=100;
function aa() {
glovalVar=200;
var localVar=300;
}
glovalVar와 localVar의 값은?
---------------------------------
4번
function sum(num1, num2) {
alert("합계 = "+(num1+num2));
}
일때
sum(234,16,1,23);
의 값은?
------------------------------------
5번
function outerDisplay() {
function display() {
alert("display 함수의 명령 실행-1");
}
}
display(); 의 결과는?
---------------------------------------

 

정답 : 1번 : 5025, 25 2번 : 10 3번 : 200, undefined 4번 : alert("합계= "250) 5번 : undefined