자바스크립트 관련
-
let 객체명 = new Object();는let 객체명 = {}형식으로 대체 가능 -
배열명 = { 명칭 = '내용', 명칭 '내용' }형식으로 배열의 명칭을 정할 수 있음 (객체타입) -
공부하기 (0405 예제5, 0411 예제7)
math.
floor() - 버림으로 처리
ceil() - 올림으로 처리
round() - 반올림으로 처리for of, for in
for of
-
for( let items of 배열명) { 문법 + items }형식으로 배열 객체들을 차례대로 가져올 수 있음 (위의 객체 타입 형태는 사용 불가능) -
for( let [객체명1, 객체명2] of Object.entries(배열명) ) { console.log('for of 구문으로 출력하기: key:'+객체명1+',value:'+객체명2); }형식으로 객체 타입 형태 사용 가능
for in
-
for( let items in 배열명) ( 문법 + items )형식으로 객체 타입 배열들의 명칭을 불러올 수 있음 -
for( let items in 배열명) ( 문법 + obj[items] )형식으로 객체 타입 배열들의 값을 불러올 수 있음
Map()
-
배열을 만들 때 사용되는 문법 중 하나
-
참고 사이트(https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map)
삼항조건식
-
3개의 식이 있다고 하여 삼항조건식 (
조건문 ? 참일 때 : 거짓일 때) 형태 -
참고 사이트(https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Conditional_Operator)
이벤트 리스너
함수타입
1. 선언적 함수
- HTML 문서에
onclic="함수명"속성을 사용하여 호출하는 방법 - JS에
document.getElementById('btn').addEventListener('click',함수명)속성을 사용하여 호출하는 방법addEventListener(a,b,c)
a매개변수: string 타입 이벤트명,
b매개변수: function 타입 값,
c매개변수: boolean 타입 입력 즉, true or false
default : false ( 버블링 ), true ( 캡쳐링 )
- 익명함수
document.getElementById('btn').addEventListener('click',function(){
document.getElementById('box').innerHTML = '익명함수 타입' })
형식으로 사용
- 실습
let outPutText = ''
function getText() {
if (outPutText == '') {
outPutText += document.getElementById('fname').value;
} else {
outPutText += '<br>'+document.getElementById('fname').value;
}
document.getElementById('textarea').innerHTML = outPutText;
}
document.getElementById('btn').addEventListener('click', getText);
-> 밑에 이벤트 실행문 대신, HTML 문서에 onclick="getText()" 속성 사용 가능
.style속성을 뒤에 붙이면, 사용할 수 있는 style 속성들을 알 수 있음
객체명.스타일속성 = '값'형식으로 사용할 수 있음
테이블 출력 실습
document.innerHTML속성을 이용하여 출력
window.onload = function() {
let name = ['홍길동', '박길동', '김길동', '이길동', '최길동'];
let age = [30,18,21,35,38];
let height = [175,180,190,185,178];
let score = [85,88,90,95,95];
// 평균 구하는 함수
function avgFunc(arrayNum) {
let total = 0;
let scoreLeng = arrayNum.length;
let scoreAvg;
for (let i = 0; i < scoreLeng; i++) {
total += arrayNum[i];
}
scoreAvg = total/scoreLeng
return scoreAvg = Math.ceil(scoreAvg);
}
console.log(`나이 평균: ${avgFunc(age)}, 키 평균: ${avgFunc(height)}, 점수 평균: ${avgFunc(score)}`);
// document에 text 출력
let list = `<table>`;
list += '<tr><th>이름</th><th>나이</th><th>키</th><th>점수</th></tr>'
for (let i = 0; i < name.length; i++) {
list += '<tr><td>'+name[i]+'</td><td>'+age[i]+'</td><td>'+height[i]+'</td><td>'+score[i]+'</td></tr>'
}
list += '<tr><th>평균</th><th>'+avgFunc(age)+'</th><th>'+avgFunc(height)+'</th><th>'+avgFunc(score)+'</th></tr>'
list += `</table>`
console.log(list);
document.getElementById('table-wrap').innerHTML = list;
}
-> 함수 호출 방식은 Class나 tag 를 호출하는 방식도 있음
-태그-
let domDiv = document.getElementsByTagName('div')[0]
domDiv.innerHTML = list;
console.log(domDiv);-class- (버튼 클릭 호출 방식)
let domTable = document.getElementsByClassName('table-wrap')[0];
function getTable() {
domTable.innerHTML = list;
}
document.getElementById('get-info').addEventListener('click',getTable)arrow function
-
ES6이상 버전부터 사용 가능한 화살표 함수
-
let arrowFunc = () => { 내용 }형식으로 사용 (생략 가능한 상황 있음) -
참고 사이트(https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/Arrow_functions)
즉시 실행 함수(IIFE)
-
함수 호출 과정 없이 바로 즉시 실행되는 함수
-
(function(){ 내용 }())형식으로 사용
