1129. JS (시계, 계산기, 이벤트, 무명함수, 화살표함수)

하루입니다.

 

---

 

오늘 한 것

1. 어제 리뷰

2. 계산기

3. 함수와 이벤트(15장)

 

 

 

---

 

 

 

tern ctrl space바로 뜨게 하는 법 : delay 0, generic html proposals 체크

 

 

 

자바스크립트 리뷰

 

inline 방식	input type="button" onclick='alert("test')
html 파일 내부의 방식	<script>alert("test")</script>
script 파일 정의 방식	test.js alert("test")	<script src="test.js">

 

var	선언 이전 문장에서도 해당 변수 사용 가능 (호이스팅)
let	변수 선언 이후 문장부터 해당 변수 사용가능
const	상수, 변수 선언 이후문장부터 해당 변수 사용가능
변수 타입	1, 0.1, 'a', '문자열', undefined, null, true/false

 

• 자바스크립트의 변수는 값이 대입될 때 (할당될 때) 정해진다. 동적이다.
• let a;
• let a = 1;
• let a = true;
• let a = '동적이에요'
• 그래서 typeof 사용해서 데이터타입 확인해야 한다.
• 조건문 if / else if / else
• 반복문 

for	while	do-while
유한횟수에 사용하면 좋다. 0번 이상의 반복. 이동문 : break; 반복 중단 이동문 : continue; 반복 생략	무한횟수에 사용하면 좋다. 0번 이상의 반복. while(true) { } 무한으로 돈다. let i = 1; while(i <= 10) {        sum = sum + i;        i++ } while(true) {        if (i >= 0); {              break;        } }	최소 한 번은 수행된다. let i = 2; do {       sum = sum + 1;       i ++; } while(i <= 10); {        break;        } }

 

---

 

 

계산기

숫자타입 변환 내장함수

정수	window.parseInt("10")  window.parseInt(99.9)  Number("100") window.parseInt("100일"); window.parseInt("일100일"); Number("100일"); window.isNaN("aa22bb");	string -> 정수 실수 -> 정수 (반올림) string -> 정수 100, 100까지 변경한다. NaN NaN, 전혀 숫자로 변경되지 않는다. true, 숫자가 아닐 경우 참이다.
실수	window.parseFloat("9.99")  window.parseFloat(999) 정수 -> 실수 Number("99.9")	string -> 실수 정수 -> 실수 실수 -> 정수

 

유효성 검사

• 10/0=Infinity  와 같은 불가능한 계산 걸러야 한다. 나누기 else if 문에 조건을 건다.
• 숫자가 아닌 값 입력하면 "숫자 형태가 아닙니다" 출력하게 한다.
• window.isNaN(숫자 받는 변수) 로 확인해서 값이 true라면 숫자 형태가 아닙니다를, 값이 false라면 숫자변수를 parseInt 혹은 Number로 형변환 후 계산한다.

 

<script type="text/javascript">
let str1 = prompt("연산할 숫자 1 입력: ");
let str2 = prompt("연산할 숫자 2 입력: ");
let op = prompt("사칙연산 /*-+ 중 하나 선택 가능: ");
// prompt는 입력된 모든 것을 문자열로 취급한다.
// 미니과제 : while문을 사용해서 숫자 형태를 입력할 때까지 prompt 뜨게 하기
if(window.isNaN(str1) || window.isNaN(str2)) {
	document.write("<h3>" + "숫자 형태가 아닙니다." + "<h3>");
} else {
	let su1 = Number(str1);	// window.parseInt 사용해도 된다.
	let su2 = Number(str2);
	// 지금 +는 연산자가 아닌 "+"로 보인다. 
	let result;
	if(op == "+") {
		result = su1 + su2;
	} else if (op == "-") {
		result = su1 - su2;
	} else if (op == "*") {
		result = su1 * su2;
	} else if (op == "/") {
		if(su2 != 0) {
			result = su1 / su2;
		} else {
			result = "0으로 나누는 것은 불가합니다."
		}
	}
	
	document.write("<h3>" + su1 + op + su2 + "=" + result + "<h3>");
}
</script>

 

 

---

 

 

함수와 이벤트

function a () {}

실행법 : a();

함수 : 특정 기능을 수행하기 위한 문장을 모은 것.

실행 : 함수를 호출해야 실행된다. 

 

<script type="text/javascript">
	let name2 = "전역변수";		// 어디서든 써도 된다.

	// 파라미터가 없는 함수
	function f1() {
		document.write("<h1>f1함수실행<h1>");
	}
	
    	// 매개변수가 하나인 함수
	function area(radius) {		// 매개변수, 들어오는 값에 따라 타입 바뀐다.
		let name = "원";			// 함수 지역변수
		if (typeof radius == "number") {
			document.write("<h1>area함수실행: 반지름이" + radius  + "인 원의 면적 = " + radius*radius*3.14 + "<h1>");
		}
	}
	
   	 // 매개변수가 두 개인 함수
	function rect(w, h) {
		document.write
		("<h1>rect함수실행: 가로 = " + w  + ", 세로 = " + h +"인 사각형의 면적" + w*h + "<h1>");
	}
 
	f1();
	area(10);
    
	rect(6, 4); 
	// rect함수실행: 가로 = 6, 세로 = 4인 사각형의 면적24
        rect(6); 
        // rect함수실행: 가로 = 6, 세로 = undefined인 사각형의 면적NaN
        rect(6, 4, 2); 
        // rect함수실행: 가로 = 6, 세로 = 4인 사각형의 면적24
</script>

 

 

 

함수 만들다 실수하는 것들

function isThree(su) {
	if(su % 3 == 0) {
		return 				// return할 값이 없다고 생각한다.
		"3의 배수";			// undefined 
	} 
}

function isThree(su) {
	if(su % 3 == 0) {
		return "3의" +	
		"배수";		  		// 이건 가능하다.
	} 
}

 

 

 

무명함수

• 함수도 변수처럼 취급한다. (?)
• 함수에 이름이 없어도 된다. (???)
• 그럼 어케 호출해요
• ( ) 안에 넣으면 즉각실행
• 혹은 변수에 넣어도 된다. (?????)
• 정리하자면, 익명함수는 즉시 실행시킬 수 있고, 혹은 변수 이름이 함수 이름인 것처럼 실행할 수 있다.

	// 무명함수 즉시 실행
	(function(){
		document.write("<h1> 무명함수 실행 중 <h1>");
	})();
	
	// 변수 이름이 함수 이름인 것처럼 사용된다.
	let f2 = function(){
		document.write("<h1> 무명함수(변수로 취급) 실행 중 <h1>");
		return 0;
	};
	
	f2();
	
	// 이렇게도 사용 가능하다. 유연한 문법
	let f3 = f2;
	
	f3();
	f2();
	
	// 함수 내용 출력
	alert(f2);		// 함수 내용을 출력해라 : 코드 내용
	alert(f2());		// 함수 실행 리턴값을 출력해라 : 0
    				// 만약 f2()에 리턴값이 없다면 undefined로 출력된다.

 

 

어이없어 ...

 

 

 

지역변수, 전역변수, 매개변수

• 전역변수는 전체영역에서 사용 가능한 변수이다.
• var a = "전역변수"; 이건 호이스팅 되어서  a라는 변수 자체는 존재하게 된다. 하지만 값까지 넘어가진 않는다. var a;라고 정의한 게 되어서, 정의한 것 위에서 변수를 사용하면 undefined 값이 뜨게 된다. 
• a = "전역변수"라고도 사용 가능하다. 하지만 호이스팅 되지 않아서, 변수를 정의한 부분 위에서 변수를 사용하면 찾을 수 없다는 오류가 발생한다.

var h3 = "<h3>"
var h33 = "</h3>"

document.write(h3 + name2 + h33);
name2 = "그냥전역변수";				// 찾을 수 없다
var name2 = "전역변수 ";		  	// undefined 뜬다
    	
// 이렇게 작동한다
var h3 = "<h3>"
var h33 = "</h3>"
var name;
document.write(h3 + name2 + h33); 		// name2에 undefined 할당된다.
var name2 = "전역변수 ";

 

 

---

 

화살표함수

• 나는 무명 함수! 한번만 호출할 거지. 그래서 이름도 안 줬다.
• 나는 즉각 실행될 수도 있어. 변수에 넣어서 변수마냥 사용할 수도 있어.

 

• ecmascript6 : 리액트 할 거니까 화살표함수 잘 알아야 한다.
• 무명의 함수를 먼저 알아야 한다.
• 익명함수의 또 다른 표현식
• (매개변수) => {}    ---> function 키워드없고 함수명 없다.
• 함수 구현 부분 : 문법적 변화 없다.
• 매개변수가 1개라면 ( ) 생략 가능하다.
• 함수구현부에 return문장이 하나라면 블럭 구조는 생략할 수 있다. return 생략도 가능하다.
• 간결한 함수 표현을 위해 만들어진다.

 

실행시

// function은 생략 가능하다.
// return은 생략 가능하다.

const hi = function() {
	return("안녕하세용");
}

const hi = () {
	return("안녕하세용");
}

const hi = () => {
	"안녕하세용";
}

const hi = () => { "안녕하세용"; }

--------------------------------

let sum = function(a, b) {
	c = a + b;
    return c;
}

let sum = function(a, b) => {
	c = a + b;
    return c;
}

let sum = (a, b) => {
	c = a + b;
    return c;
}

let sum = (a, b) => { c = a + b; return c; }

그런데 애초에 
let sum = (a, b) => { a + b; }
이렇게 하면 된다 ;;

--------------------------------

// 함수를 변수처럼 사용할 수 있기에, alert에 넣어보자.
alert(sum(1, 2));		// 함수 실행 리턴값을 출력한다.	
alert(sum);				// 함수 내용을 출력한다.

 

 

 

---

 

 

자바스크립트의 내장함수

함수의 형태

• function() {}                     함수
• let f2 = function() {}         함수를 변수에 할당
• let f3 = () => {}                  화살표 함수

 

함수 실행 형태

• f1() 호출 수동 실행                   직접 실행하기
• 시간 타이머 자동 실행               setTimeout({ 함수 정의 }, 시간) 
• <input type="button" onclick="f1()">       버튼을 눌렀을 때 연결시킵니다

 

• alert() 같은 것들은 사실 window.alert() 이렇게 쓰는 거다. 
• 윈도우라면 이 함수들 다 사용할 수 있기에 window.는 생략하고 사용하는 거임. 
• setTimeout() 와 setInterval() 는 매개변수로 함수를 받는다. 자동 실행 기능 함수이다. 이는 함수를 변수로 받을 수 있기 때문이다.
• setTimeout({함수 정의}, (시간));
• setInterval({함수 정의}, (시간));

 

시계 만들기

1. 1초씩 표시되는 시계를 만들고 싶다.
2. 1초씩 표시하기 위해서는 window.setInterval({ }, 1000); 함수를 실행해야 한다.
3. 이 함수를 div 안에서 실행하고 싶다. 
4. div에 id를 주고, document.getElementById("id").innerHTML 을 적는다.
5. 4번에 들어가야 할 것은 1초마다 시간이 변경되는 window.setInterval({ }, 1000);  함수이다.

 

1. 1초씩 표시되는 시계를 만들고 싶다.
2. 1초에 한 번씩 수정되어야 하기에, window.setInterval({ }, ( )) 안에 식을 정의할 것이다.
3. 화살표 함수 형태로 적는다. (나중에 리액트 가면 많이 배워서 익숙해져야한다.)
4. 매개변수가 없으므로 () =>
5. 함수 내용에는 id = clock인 div의 html 코드를 수정하는 식이 들어가야 한다.
6. 시간을 표현하는 함수는 new Date().toLocaleTimeString 이다.
7. 5번, 6번을 함수의 정의 부분에 넣는다. 
8. 1초씩 지나가므로 1000을 적는다.
9. 참고 : 여기서 h3는 "<h3>"를 정의한 변수임!

var timer = window.setInterval(() => {
	document.getElementById("clock").innerHTML = h3 + new Date().toLocaleTimeString() + h33;
}, 1000);

 

 

만약 10초가 지나면 중지시키고 싶다면?

1. 멈춰야 하니까 window.setTimeout()을 사용한다.
2. 1초마다 시간 표시를 반복해야 하기에 위의 timer 변수를 사용한다.
3. 인터벌을 멈추게 하려면 window.clearInterval을 사용해야 한다.

window.setTimeout(() => {window.claerInterval(timer)}, 10000);

window.setTimeout(function(){
	window.clearInterval(timer)
	}, 3000);

 

 

 

---

 

이벤트

• document.getElementById("id명").onclick = function() {}

마우스 이벤트

• clock
• dbclick
• mousedown
• mousemove
• mouseover
• mouseout
• mouseip

 

키보드 이벤트

• keydown
• keypress
• keyup

 

문서 로딩 이벤트

• load

 

 

이벤트

• html파일에서 사용자가 동작하거나 브라우저가 변화하는 것
• 브라우저가 로딩되거나, 사이즈가 변하거나, 마우스가 움직이거나, 키보드가 내려가는 등
• 이벤트 소스 = 이벤트 티켓 = 태그(html 요소)
• 이벤트는 종류별로 이름이 있다.
• 이벤트가 발생했을 때 구현되는 함수를 이벤트 처리기 혹은 이벤트 함수라고 한다.
• 타겟.on이벤트종류 = 이벤트 핸들러() {} (혹은 함수 이름)

window.onload = function() {
	// 내용
};

 

 

 

DOM을 이용한 이벤트처리기

• dom의 문법을 사용하여 처리합니다. 
• DOM은 document object model이라는 뜻입니다.
• 자바스크립트는 태그라는 변수타입이 없어서 input, button, id 같은 거 모릅니다. 그래서 객체 형태로 만드려는 것입니다.
• <input type="button" id="i" value="test" />
• document.getElementById("i")    여기까지를 DOM이라고 한다.

 

 

 

 

 

DOM구조와 관련된 메서드

document.getElementById("id이름")	리턴 1개 태그
document.getElementsByTagName("tag이름")	리턴 여러개 태그 배열 (리스트)
document.getElementsByClassName("class이름")
document.querySelector("#id")	리턴 1개 태그
document.querySelectorAll(".class")	리턴 여러개 태그 배열 (리스트)
document.querySelectorAll("tag")
document.querySelector("h1 a")

 

 

 

 

window.onload = function() {
	document.querySelector("#btn1").onmouseover = function(){
		document.getElementById("btn1").value = "버튼10";
		document.getElementById("btn1").style = "width:100px; height:100px; background-color: yellow;";
	}
    
    alert(document.querySelectorAll("h1").length);
    
	for(var i = 0; i < 3;  i++) {
		document.getElementsByTagName("h1")[i].onclick  = function() {
			document.getElementById("h1value").innerHTML = this.innerHTML;
		}
	}
}

 

 

 

 

---

 

 

와우

 

난이도가 급 올라갔다

 

암오케

 

시간이 부족하다. 

 

열심히 합시다

 

오늘 배운 것

자바스크립트 무명함수, 화살표 함수, 계산기, 시계, 이벤트

 

오늘 과제

prompt와 while

소수