퍼블리싱 아카이브

See the Pen setTimeout(), setInterval() by breeghty (@breeghty) on CodePen. setInterval 함수 사용방법 setInterval(function(){}, ms) setInterval(function(){ console.log("hello world!"); },1000) //1초에 한번씩 콘솔창에 hello world가 출력된다. setInterval 함수 중지 방법(clearInterval(변수)) //1. 변수를 할당한다. let timerFunc = setInterval(function(){ document.getElementById('numCount').innerHTML=count; count--; console.log(count); ..

See the Pen eventhandler by breeghty (@breeghty) on CodePen.

ES6에서 도입된 화살표 함수는 function 키워드 대신 화살표 (=>)를 사용해 좀 더 간략한 방법으로 함수를 선언할 수 있다. 화살표 함수는 항상 익명 함수로 정의한다. const add = (x, y) => x + y; console.log(add(2,5)); 화살표 함수는 기존 함수보다 표현만 간략한 것이 아니라, 내부 동작 또한 간략화되어 있다. 화살표 함수는 생성자 함수로 사용할 수 없다. 기존함수와 this 바인딩 방식이 다르다. prototype 프로퍼티가 없으며 arguments 객체를 생성하지 않는다. // 화살표 함수 예시 const add = (x, y) => x + y; let sayHello = name => `Hello! ${name}!`; let showError = ()..

0. 함수는 왜 쓸까? 함수는 필요할 때 여러번 호출이 가능하다. 코드의 재사용, 유지보수의 편의성, 코드의 신뢰성, 코드의 가독성을 높인다. 함수정의방식으로는 4가지가 있다. 1. 함수선언문 function 함수명 (매개변수_parameter){ 함수내용 } //예시 function add(x,y){ return x+y; } 함수선언문은 함수 이름을 생략할 수 없다. 함수선언문은 표현식이 아닌 문이다. 표현식이 아닌 문은 변수에 할당할 수 없다. 2. 함수표현식 변수 = function(parameter){ //코드 } //예시 let add = function(x,y){ return x+y; }; console.log(add(1,3)); //4 자바스크립트에서 함수는 객체 타입의 값이다. 변수에 할당..

addEventListener 메서드 사용하기 //html Alert Box close! //script id가 close인 요소를 클릭했을 때, 다음 함수가 실행된다는 의미이다. onclick을 직접 사용하는 대신 이렇게 이벤트 리스너를 사용할 수도 있다. 이렇게 onclick이나 addEventListener를 사용하여 이벤트를 실행시키는 메서드가 이벤트 핸들러이다. 이벤트 핸들러를 등록하는 방식에는 세가지가 있다. 1. 어트리뷰트 방식 Click Me! 2. 이벤트 핸들러 프로퍼티 방식 Click Me! 주의) eventlistener에 함수를 대입할 때 $button.onclick = clickEvent ; (o) $button.onclicke=clickEvent(); (x) 3. addEvent..

HTML, Javascript ID Check! Password Check! Close CSS button { padding: 40px; font-size: 48px; color: blue; background-color: yellow; border: none; border-radius: 5px; cursor: pointer; margin-right: 100px; } #alertBtn { display: none; } #text { color: blue; font-size: 36px; background-color: yellow; } /*# sourceMappingURL=alert.css.map */

1. onclick 이벤트 Click Me!! 버튼을 누르면 이벤트가 실행되는 코드. onclick에 직접 자바스크립트 코드를 작성하는 경우도 있지만 보통은 간편하게 사용하기 위해 function을 활용하여 작성한다. 2. function function 함수이름(parameter){ //함수내용 작성 } 3. function & onclick 사용해서 열고 닫는 버튼 만들기(openBtn, closeBtn) Alert Box close! open! .alert-box { background-color: rgb(76, 76, 211); color: yellow; padding: 20px; border-radius: 5px; } open을 누르면 alert box가 보이고 close를 누르면 사라진다. 4..

1. 콜백함수(callback) 나중에 호출되는 함수. 특정 이벤트 발생시, 혹은 특정 시점에 도달했을 시에 시스템에서 호출하는 함수이다. /*jquery*/ $(document).on('click', 'a[href="#"]', function(e){ e.preventDefault(); }); 위 코드는 문서에서 href 속성값이 #인 a태그를 클릭'할 때마다' 다음과 같은 함수를 호출하겠다는 의미이다. 이 경우 function은 콜백함수가 된다. //Javascript window.addEventListener('resize', function(){ console.log('resize event!'); if (window.innerWidth