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

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

2. 학습내용 중 어려웠던 점

  • Nothing

3. 해결방법

  • Nothing

4. 학습소감

  • 유명한 생활코딩의 이고잉 강사님의 강의 내용을 들을 수 있어서 영광입니다.
[백준 C++] 2344 거울
[판다스] 왕초보 판다스 - 개념과 시리즈, 데이터프레임 만들기

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage