이벤트란, 브라우저에서 일어나는 사용자의 입력 작업이나 시스템 상황의 변화 등의 사건이다. 바인딩이란? 서로 묶어서 연결해준다는 뜻이다. 이벤트 바인딩이란, 이벤트와 이벤트 실행 시 어떤 일이 벌어질지 알려주는 함수(콜백 함수)와 묶어서 연결해 준다는 뜻이다. 이때의 콜백함수를 이벤트 핸들러라고 한다. JavaScript에서는 3가지 방법으로 이벤트를 바인딩할 수 있다. 1. HTML요소의 attribute에 이벤트 핸들러 대응 2. DOM 요소의 property로 이벤트 핸들러 대응 3. addEventListener 메소드를 이용하여 요소(EventTarget)에 이벤트를 바인딩하고 이벤트 핸들러 지정 (가장 권장되는 방법) ①자바스크립트로 함수를 작성하고, html 요소의 속성으로 함수를 등록하는 ..

먼저 html에 canvas 태그 작성해주고, 자바스크립트에서 getElementById로 canvas 태그 읽어준 뒤 canvas 변수에 getContext() 함수 사용하고, "2d" argument 주었다. const canvas = document.getElementById("jsCanvas"); const ctx = canvas.getContext("2d"); boolean 자료형의 painting 변수를 false값으로 선언해준 후, painting이 true가 되면 (onMouseDown함수 실행 === !painting ) canvas API에서 데려온 beginlPath()와 moveTo(x,y)를 실행한다. painting이 다시 false가 되면 (onMouseUp함수 실행) line..

Spread operator는 ES6에서 도입된 문법으로 array의 내용을 효과적으로 spread할 수 있다. 변수 앞에 '...'를 작성하여 spread 문법을 이용한다. spread 문법을 사용하여 기존 변수나 객체가 가지고 있는 값을 변경하지 않고도 추가적인 값을 넣어줄 수 있다. const lion = { name : 'lion', // key : value로 오브젝트 생성 size : 'big', isAggresive : true, weight : 200 } // spread 문법 사용하여 lion 변수가 포함된 새로운 변수를 생성 const animals = [ { ...lion, }, { name : 'cat', size : 'big', isAggresive : true, weight : ..

함수는 일련의 과정을 문(statement)으로 구현하고 코드 블록으로 감싸서 하나의 실행 단위로 정의한 것이다. 프로그래밍 언어의 함수도 입력을 받아서 출력을 내보낸다. 이때 함수 내부로 입력을 전달받는 변수를 매개변수(parameter), 입력을 인수(argument), 출력을 반환값(return value)이라 한다. 함수는 값이며, 여러 개 존재할 수 있으므로 특정 함수를 구별하기 위해 식별자인 함수 이름을 사용할 수 있다. 자바스크립트에서는 함수를 "일급 객체"로 분류한다. 일급 객체란 변수에 저장될 수 있는 모든 요소를 총칭하는 단어이고 아래와 함수를 변수에 저장해서 사용할 수 있다. ** 일급 객체 ** let foo = function() { return 1; } 1. 파라미터가 여럿인 경..

1. mouseenter 시 display가 block이 되는 함수 실행, mouseleave 시 display가 none이 되는 함수 실행 // #listWrap에 mousenter시 // .list의 .css() "display"를 block으로 // mouseleave시 display 속성을 none으로 바꾸게 // 이벤트를 2개 설정 $("#listWrap").mouseenter(function() { // 메뉴 펼쳐지게 $(".list1").css("display","block"); }); $("#listWrap").mouseleave(function() { // 메뉴 접혀지게 $(".list1").css("display","none"); }); 2. .hover(함수1{}, 함수2{})로 작성..

안에 넣기 js 파일이 크고, 인터넷이 느릴 시 웹사이트를 노출하기까지 많은 시간이 걸린다. 안에 넣기 js에 의존적인 컨텐츠라면 사용자가 정상적인 페이지를 보기 전까지, 서버에서 자바스크립트를 보내고 받아오는 시간을 오래 기다려야 한다. 안에 넣고 asyn라는 속성 이용하기 asyn(boolean, default:true)를 사용하게 되면 html 다운로드 전에 js 파일이 실행되게 된다. html 파싱과 js의 다운로드를 병렬로 처리하기 때문에 바디 끝에 사용하는 것보다는 다운로드 받는 시간을 절약할수 있지만, html 다운 전에 js가 실행되기 때문에 dom 조작 시점에 html이 정의되어있지 않을 수 있다. [실행 순서] 1) 브라우저가 html을 순차적으로 파싱 2) 순차적으로 파싱하다가 asy..