Code Playground

< h1 > Code Playground </ h1 >

회사에서는 대부분 jQuery를 사용해서웬만한 이벤트 구현을 하다보니그냥 자바스크립트로는 아무것도 할 수 없게 되었다. 아주 간단한 기능인데도순수하게 자바스크립트로만 구현하려니꽤나 머리가 아프다..ㅠㅠ 이렇게 제이쿼리에 의존하고 있었다니..많이 반성하며 요즘 열심히 공부하고 있는 중이다. 매주 일요일에 자바스크립트 스터디를 하고 있는데지난번 스터디 때 Dom에 대해서 배웠고 그 부분을연습해보고자 간단한 To Do List를 구현해보기로 하였다! 일단 아래와 같이 모양을 만들어주었다.예제지만 괜히 이쁘게 만들고 싶은 마음에 웹폰트도 검색해서 나름 예뻐보이는 걸로 넣어보았다ㅋㅋ To Do List 추가 check To do List 청소하기 숙제하기 선택 삭제 마지막 항목 삭제 전체 삭제 이제 구현해야될 사..

$(document).bind('keypress', function(event) { if( event.which === 65 && event.shiftKey ) { alert('you pressed SHIFT+A'); } }); shift, ctrl, alt, meta 키와 일반 키를 동시에 눌렀을 때 위와 같은 방식으로 이벤트를 줄 수 있다.event.shiftKeyevent.ctrlKeyevent.altKeyevent.metaKey [keyCode 표] KeyCodebackspace8tab9enter13shift16ctrl17alt18pause/break19caps lock20escape27(space)32page up33page down34end35home36left arrow37up arrow38..

변수를 영어로 하면 Variable이다.그리고 variable은 "다양한, 변화할 수 있는"이라는 뜻을 가지고 있다,즉, 변수(變數)는 수학에서 수식에 따라서 변하는 값을 의미한다, w3schools에서 variable에 대해 검색하면 다음과 같이 나온다. "JavaScript variables are containers for storing data values." 즉, 자바스크립트의 변수는 데이터 값을 저장하는 데 쓰이는 공간이다.그리고 그 값은 계속해서 변할 수 있다. 변수는 variable의 앞 3글자를 따서 var라는 형태로 선언된다. var x = 1; 저렇게 선언하는 순간 컴퓨터의 메모리에는 x라는 공간이 생겨나고 그 공간에 1이라는 숫자가 할당된다. 변수의 종류에는 기본형(원시형)과 참조형..

-Math 내장 객체- -> 수학과 관련된 기능을 제공한다. ...javascript int abs(int param); ... -param의 절대값을 리턴한다. ...javascript int max(int a, int b); ... -a와 b 중에서 큰 값을 리턴한다. ...javascript int min(int a, int b); ... -a와 b 중에서 작은 값을 리턴한다. ...javascript int round(Number num) ... -num을 소수점 첫째 자리에서 반올림한 결과를 리턴한다. ...javascript int floor(Number num); ... -소수점 이하 값을 버린다. (parseInt를 대신 쓸 수 있음) ...javascript int ceil(Number ..

-객체- 하나의 변수 안에 또 다른 변수들과 함수들을 기능의 성격에 따라 하나의 그룹으로 묶어서 포함시켜 놓은 형태. 객체는 웹 페이지에 보여지는 모든 것이 될 수 있다.HTML 태그가 JS에서는 객체로 인식될 수 있다.즉, HTML 태그 안에는 변수와 함수가 내장되어 있다는 의미가 된다. 객체 안에 포함된 변수를 프로퍼티 혹은 멤버변수라고 한다. 객체 안에 포함된 함수를 메서드(method)라고 한다.메서드 안에서 같은 객체 내의 프로퍼티나 다른 메서드에 접근하기 위해서는 this 키워드를 사용한다. ...js //비어있는 임의의 변수 = 객체 var foo = {}; //프로퍼티 정의 foo.num1 = 100; foo.num2 = 200; //메서드 정의 foo.sum = function() { r..

-내장함수- 자주 사용되어지는 공통 기능들에 대하여 미리 구현되어진 함수. 웹 브라우저에 미리 내정되어 있으므로 개발자는 함수의 정의 없이 함수를 호출하고 적절한 리턴값을 받아 활용할 수 있다. eval(문자열)주어진 문자열을 수식으로 변환하여 리턴한다.eval("1+1"); -> 1+1계산Number(문자열)주어진 문자열의 변수가 숫자모양일 경우 실제 숫자형으로 변환하여 리턴한다.주어진 문자열이 100.1일 경우 실수 100.1을 리턴parseInt(문자열)주어진 문자열의 변수가 숫자모양일 경우 실제 숫자형으로 변환하여 리턴한다.주어진 문자열이 100.1일 경우 정수 100을 리턴isNaN(문자열)주어진 문자열이 숫자형식이 아니면 true, 숫자형식이면 false를 리턴!isNaN: 숫자형식이면 tru..

-프로그램의 흐름제어(2) -반복문- [1] for 문 : 반복적인 작업 처리! for(초기식; 조건식; 증감식) {...반복 수행할 명령...} 1. 초기식을 수행2. 조건식을 판별- 참인 경우 {}안을 수행- 거짓인 경우 {}을 빠져나감.3. 참인 경우 {}을 수행하고 증감식으로 이동4. 증감식을 수행 후 다시 조건식으로 이동.-2번부터 반복 ex) 1에서 100까지의 합 구하기var sum=0; for (var i=1;i 함수 호출 - 파라미터(매개변수)는 함수가 실행되기 위해 주어지는 조건값.파라미터를 명시할 경우 필요한 만큼 콤마로 구분하여 변수를 선언. - 리턴(return)은 함수가 호출된 위치에 결과값을 돌려주기 위한 키워드.값(변수)을 명시하지 않을 경우 undefined가 리턴됨.함수의..

[1] Javascript 작성 방법: HTML 소스 코드에 포함되는 형태로 작성된다. [2] HTML 소스코드에 포함시키기:다음의 코드를 HTML 소스코드 안에 명시. 일반적으로 에 위치한다. ... [3] 외부 파일에 대한 참조를 포함시키기:``` [4] 콘솔: 웹 브라우저에서 화면에 표시되는 것과 관계없이 어떠한 내용을 출력하기 위한 공간. [5] 변수데이터를 저장하기 위한 키워드. 변수를 사용하기 위해서는 선언과 할당의 과정이 필요하다. ```javascriptvar 변수이름; // 변수의 선언변수이름 = 값; // 선언된 변수에 값 할당``` [6] 선언과 할당을 결합한 형태...javascriptvar 변수이름 = 값;... 변수의 이름은 영어+숫자+언더바의 조합으로 구성한다.띄어쓰기가 필요한..