Code Playground

< h1 > Code Playground </ h1 >

-URL 제어하기- 브라우저의 현재 URL 조회var now_url = location.href; 브라우저의 현재 페이지를 지정된 URL로 이동한다.window.location = 'URL'location.href = 'URL' 현재 페이지를 새로고침한다.location.reload(); 웹 브라우저 history의 이전 페이지로 이동한다.history.back(); 웹 브라우저 history의 다음 페이지로 이동한다.history.forward(); -웹 브라우저의 정보 조회- : 웹 브라우저의 이름, 버전정보, 운영체제 정보 등이 포함된 문자열 값 var agent = navigator.userAgent; 이 값에 특정 단어가 포함되어 있는지 여부를 판단하여 브라우저나 운영체제 종류, 모바일/PC 여..

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

조금 더 아래에 밑줄이 생깁니다 원래 밑줄입니다 .underline1 { text-decoration: underline; text-underline-position: under; } .underline2 { text-decoration: underline; } 보통의 경우 디자인적으로 밑줄 간격을 띄우기 위해서text-decoration: underline보다는 border-bottom을 쓰거나 아니면 가상클래스 :after를 걸어서 작업하는데이번 프로젝트에서는 글자가 2줄로 떨어지는 경우가 있어 맨 밑에 있는 줄에만 밑줄이 생기는 문제가 생겼다. 그래서 text-decoration: underline;으로 작업하고text-underline-position: under; 속성을 주어 최대한 밑으로 떨어..

$(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..

@font-face { font-family: 'pass'; font-style: normal; font-weight: 400; src: url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAATsAA8AAAAAB2QAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAABWAAAABwAAAAcg9+z70dERUYAAAF0AAAAHAAAAB4AJwANT1MvMgAAAZAAAAA/AAAAYH7AkBhjbWFwAAAB0AAAAFkAAAFqZowMx2N2dCAAAAIsAAAABAAAAAQAIgKIZ2FzcAAAAjAAAAAIAAAACAAAABBnbHlmAAACOAAAALkAAAE0MwNYJ2hlYWQAAAL0AAAAMAAAADYPA..

변수를 영어로 하면 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가 리턴됨.함수의..