JavaScript
-
자바스크립트 기본 - 값으로서의 함수와 콜백JavaScript/생활코딩 2018. 12. 4. 15:31
값으로서의 함수와 콜백 - https://opentutorials.org/course/743/6508 자바스크립트에서는 함수도 객체다. 일종의 값이다.var a = "value" 에서 value를 a에 담을 수 있다. 기서은 value가 값이기 때문이다.자바스크립트의 함수가 다른 언어의 함수와 다른 점은 함수가 값이 될 수 있다는 점이다. 아래의 두 줄은 같은 의미이다. 함수를 값으로 사용할 수 있다는 것이다.var a = function(){}function a(){} 여기에서 a는 객체이며 b는 key(값을 저장하는 그릇)이며 function()은 메소드이다.객체 안에 정의되어 있는 함수는 메소드라고 부른다.a = { b:function(){ }}; 아래 예제를 통해 함수가 다른함수의 인자로 가는 것..
-
자바스크립트 기본 - 함수지향, 유효범위JavaScript/생활코딩 2018. 12. 3. 14:22
함수지향 - https://opentutorials.org/course/743/6583 함수지향 카테고리의 하위 수업들은 함수형 언어로서 자바스크립트의 면모를 다룬다. 자바스크립트의 핵심적인 도구는 함수이며 함수에 대한 이해 없이는 자바스크립트를 잘 다루기 어렵다. 또한 자바스크립트에서 함수는 객체를 이해하는 데 가장 중요한 기초를 이룬다. 유효범위 - https://opentutorials.org/course/743/6495 유효범위(Scope)은 변수의 수명을 의미한다. 전역변수와 지역변수 전역변수에 대한 예제이다.var vscope = 'global'; //함수 밖에서 vscope을 선언한다.function fscope(){ alert(vscope); //함수 안에서 vscope을 실행한다.}fsc..
-
웹브라우저 자바스크립트 - 마우스JavaScript/생활코딩 2018. 12. 3. 13:57
마우스 - https://opentutorials.org/course/1375/6766 마우스 이벤트는 pc환경에서 주로 사용하는 이벤트이다. 이벤트 타입웹브라우저는 마우스와 관련해서 다양한 이벤트 타입을 지원한다. click클릭했을 때 발생하는 이벤트. dblclick더블클릭을 했을 때 발생하는 이벤트mousedown마우스를 누를 때 발생mouseup마우스버튼을 땔 때 발생mousemove마우스를 움직일 때mouseover마우스가 엘리먼트에 진입할 때 발생mouseout마우스가 엘리먼트에서 빠져나갈 때 발생contextmenu컨텍스트 메뉴가 실행될 때 발생(마우스 오른쪽버튼을 누르면 보이는 화면이 컨텍스트 메뉴이다) 키보드 조합마우스 이벤트가 호출될 때 특수키(alt, ctrl, shift)가 눌려진 ..
-
웹브라우저 자바스크립트 - 문서로딩JavaScript/생활코딩 2018. 11. 30. 17:14
문서로딩 - https://opentutorials.org/course/1375/6765 자바스크립트를 실행할 때 어떤 타이밍에 실행해야지 문서의 엘리먼트들에게 문제없이 명령을 실행할 수 있는가와 관련되어 있다. 아래 예제를 실행시키면 값은 null이 나온다.그 이유는 브라우저는 위->아래로 코드를 실행하는데 script부분의 id값 target은 위에서 찾을 수 없는 값이기 때문이다. Hello 위의 스크립트를 정상적으로 출력하는 방법은 아래와 같다.1. script태그를 p태그 아래에 위치시킨다.2. window객체의 onload를 사용한다.3. window객체의 addEventListener를 사용한다. 아래는 3번방법을 이용한 것이다.이 방법은 웹페이지창의 모든 코드들을 읽고 난 뒤 실행된다.그런..
-
웹브라우저 자바스크립트 - 이벤트 타입, 폼JavaScript/생활코딩 2018. 11. 30. 15:20
이벤트 타입이란 이벤트의 종류이다.웹브라우저는 많은 종류의 이벤트 타입을 제공하고 있다. 폼이라는 이벤트 타입이 있다. 폼은 사용자가 입력한 정보를 서버로 전송할 때 사용하는 html태그이다. submit - 폼에 사용자가 어떤 정보를 입력하고 정보를 서버로 전송할 때 발생하는 이벤트 name change - 폼 태그의 value값이 바뀔 때 발생하는 이벤트 입력창에 사용자가 텍스트를 입력하고 마우스 포인트를 입력창 밖으로 빠져나왔을 때 addEventListener이 발생한다. blur, focus
-
웹브라우저 자바스크립트 - 기본동작의 취소JavaScript/생활코딩 2018. 11. 30. 14:52
기본동작의 취소 - https://opentutorials.org/course/1375/6769 웹브라우저의 구성요소들은 각각 기본적인 동작 방법을 가지고 있다. - 텍스트 필드에 포커스를 준 상태에서 키보드를 입력하면 텍스트가 입력된다.- 폼에서 submit 버튼을 누르면 데이터가 전송된다.- a 태그를 클릭하면 href 속성의 URL로 이동한다. 이러한 기본적인 동작들을 기본 이벤트라고 하는데 사용자가 만든 이벤트를 이용해서 이러한 기본 동작을 취소할 수 있다. inline inline방식으로 취소하는 방법 prevent event on opentutorials property 방식 property방식으로 취소하는 방법 prevent event on opentutorials addEventListen..
-
웹브라우저 자바스크립트 - addEventListener()JavaScript/생활코딩 2018. 11. 30. 13:59
addEventListener() - https://opentutorials.org/course/1375/6761 ie8이하버전은 attachEvent 메소드를 사용해야 한다. 아래 예제는 ie8이하에서도 사용가능한 코드이다.var t = document.getElementById('target');if(t.addEventListener){ //if문을 통해서 addEventListener가 사용가능한 브라우저에서는 이 코드가 사용된다. t.addEventListener('click', function(event){ alert('Hello world, '+event.target.value); }); } else if(t.attachEvent){ //addEventListener가 사용불가능한 ie8이하 ..