coding/javascript (11) 썸네일형 리스트형 0621 / javascript - closure 함수 * js - closure 함수 - 외부에 노출은 줄이고, 함수를 수행동작 처리 시 변수에 단순히 선언 및 정리시에 바로 실행되는 형식을 방지하기 위해 처리하는 기능. ------------------------- function outerFunc(){ var x = 10; var innerFunc = function(){ console.log( x ); } innerFunc(); } var a = outerFunc(); function outerFunc2(){ var x = 10; var innerFunc = function() { console.log( x ); } return innerFunc; } var myInner = outerFunc2(); myInner(); // closure 사용 시 가.. 0618 / javascript - event 속성 * js - event 속성 흔하게 주변에서 볼 수 없는, 웹문서에서 어떠한 변화가 일어나는 시점을 '이벤트' 하는 것. event - callback 함수 ex. evtLi[0].addEventListener ('click', function ( ){ evtLi[0].style.backgroundColor = '#f0a'; var hasClassCk = evtUl.getElementsByClassName( 'act' ).length; if (hasClassCk > 0 ) { evtLi[0].classList.remove('act'); } else { evtLi[0].classList.add('act'); } }); // .addEventListener('click')를 실행하면, 뒤에 function(.. 0616 / javascript - 객체/배열 메소드 * 메소드(method) - '함수처리된 기능을 호출하여 사용한다' 라는 의미로 쓰이며, 어떠한 객체에 불러오는 함수 -------- shift(앞부분에 내용 제거), unshift(앞부분에 내용 추가) pop(뒷부분에 내용 제거), push(뒷부분에 내용 추가) split(name) : name을 기준으로 배열 처리 indexOf(value) : value값이 내용에서 존재하는지, 몇번째 위치해 있는지 파악 join('기호') : 배열로 되어있는 요소들을 기호형태를 기준으로 묶어주는 기능 .sort : 정렬 / .reverse : 순서를 뒤집기 (역순) 0616 / javascript - 반복문 (for, for-in, forEach) * for : 중복으로 처리되는 반복문 * for-in : for(임의변수 in 객체이름) {} (객체 반복) 배열을 for-in 문에 사용하는 것은 성능에 매우 큰 영향으로 사용x for-in 은 배열용이 아니라 {객체}용 * forEach : 각각의 (배열 반복) - 배열.forEach (function (배열의 각 값, 각 값의 순서){ } ); DOM - (document object model) - 선택자 id : document.getElementById('아이디 이름'); class : document.getElementsByclassName('클래스 이름')[순번]; tag : document.getElementsByTagName('태그 이름')[순번]; attribute : documen.. 0616 / javascript - 반복문 * 반복문 - 어떠한 요소나 값이 반복의 성질을 가지고 있다면, 이를 반복사용의 문제를 해결하기 위해 만들어진 기능 ----------- - do { } while ( ) var j = 0; do { console.log('j : ', j ); j += 1 ; } while (j < 5); console.log( j ); ------------- - for var yearSet = function(y) { optionElement = document.createElement('option'); optionElement.setAttribute('value', y ); optionElement.append( y + '년'); yearSelect.appendChild(optionElement); } 1차 식 .. 0615 / javascript - 함수 * 함수 - 여러 공식이 들어있는 것들을 모아서 한번에 수행 할 수 있도록 처리하는 기능 * 함수의 종류 - 기본형태함수 - 기명함수 - 함수선언식 [function 이름 ( ){ } ] - 기본형태함수 - 익명함수 - 함수표현식 [var 이름 = function ( ){ } ] - 특수형태의 함수 - 익명함수지만 생성되자마자 바로 수행 - 즉시실행함수 (IIFE) - 생성자 함수 --------- * 함수에서 기억해야 하는 부분 1. 함수 이름 지정위치 2. return 3. 전역변수 / 지역변수 차이 4. 매개변수 (인수, 인자) 5. 함수는 해당함수를 호출하지 않으면 동작 X ------------- * 기명함수 - 선언식 function 함수이름 ( ){ } ------------- * 익명함수 .. 0615 / javascript - 비교연산 - 해당하는 조건을 비교해서 '참/거짓이냐'를 구분 단순비교 & 삼향연산 -------- // 삼향연산자 // (조건) ?->(앞의 조건에 대해 어떤지 물어봄) 조건의 참 : 조건의 거짓; ( result ) ? k = 'good' : k = 'bad' ; console.log(k); // &&, || // & : and -> 좌/우를 비교해서 모두 참인지 여부 // | : or -> 좌/우를 비교해서 둘 중 하나라도 참인지 여부 파악 var l; // ( false & true ) ? l='good' : l='bad'; ( false && true ) ? l='good' : l='bad'; console.log( l ); ( true || false ) ? l='good' : l='bad'; conso.. 0615 / javascript - 연산자 연산자는 피연산자와 연산자로 나뉨. 4가지 법칙을 기준으로 연산 ------- var n1 = 10; var n2 = 3; console.log(n1, n2); // 덧셈 var plus = n1 + n2; console.log('plus:', plus); // 뺄셈 var minus = n1 - n2; console.log('minus:',minus); // 곱셈 var multi = n1 * n2; console.log('multi:', multi); // 나눗셈 var divide = n1 / n2; console.log('divide:', divide); // 숫자 -> parseInt() / parseFloat() // Math().ceil / Math().floor / Math().round .. 이전 1 2 다음