[공통교육-웹기초] JavaScript 3/3

지상준·2022년 3월 25일

Daegu AI School

목록 보기

3/53

1. 학습한 내용

① 문자열 보간

var topics = ['html', 'css', 'js'];
console.log('topics[0] is ' + topics[0]); // topics[0] is html
console.log(`topics[0] is ${topics[1]}`); // topics[1] is css

② querySelectorAll()의 반환값 사용

let as = document.querySelectorAll('a'); // 모든 a 태그를 NodeList로 반환
// 반환된 값의 각 요소를 index로 접근 가능하다.
for (var i = 0; i < as.length; i++) {
	as[i].style.color = 'black';
}

// Ramda 적용 !! 위 코드랑 같은 기능
document.querySelectorAll('a').forEach(a => a.style.color = 'black');

③ input 태그의 타입이 버튼의 click 이벤트 trigger

for 문

<html>
<body>
	<script>
		var tag = '';
		for(var i = 0; i < 2000; i++) {
			tag = tag +
				`<input type="button"
      			onclick="this.style.backgroundColor='red';" value="${i}">`
		}
		document.write(tag);
	</script>
</body>
</html>

배열

<html>
<body>
	<script>
		var tag = Array.from({length: 2000}, (_, index) => 
			`<input type="button"
			onclick="this.style.backgroundColor='red';" value="${index}">`).join('');
        document.write(tag);
	</script>
</body>
</html>

console에서 모든 버튼 click 이벤트 발생시키기

document.querySelectorAll('input[type="button"]').forEach(input => input.click())

console에서 101~199버튼 click 이벤트 발생시키기

let inputs = document.querySelectorAll('input')
for (let i=0; i < inputs.length; i++) {
    if (i > 100 && i < 200)
        inputs[i].click();
} // console 창에서 [shift + enter] 키를 입력하면 개행된다.

④ 함수 Function

함수는 서로 연관된 코드를 그룹핑해서 이름을 붙인 것 이다
함수의 이점으로는, 코드가 간결해진다
가독성이 좋아진다
유지보수가 편해진다

// 함수 구현
function a_z() {
	var c = 'a'.charCodeAt(0);
	for (var i = 0; i <= 'z'.charCodeAt(0) - 'a'.charCodeAt(0); i++)
	console.log(String.fromCharCode(c++));
}
a_z(); // abcdefghijklmnopqrstuvwxyz
// 내장 함수 사용
var tmp = String.fromCharCode(...[...Array('Z'.charCodeAt(0) - 'A'.charCodeAt(0) + 1).keys()].map(key => key + 'A'.charCodeAt(0)));
console.log(tmp); // ABCDEFGHIJKLMNOPQRSTUVWXYZ

⑤ 객체 JSON

let person = {
	name: 'egoing',
	city: 'seoul',
	job: 'developer'
}
console.log(person.name, person.city, person.job); // egoing seoul developer

let MyMath = {};
MyMath.PI = 3.14;
MyMath.sum = (val1, val2) => val1 + val2;
console.log(MyMath.PI); // 3.14
console.log(MyMath.sum(10, 20)); // 30