Code Playground

< h1 > Code Playground </ h1 >

하.. 너무 이해하기 어렵고 힘들었는데 최대한 MDN이랑 W3Cschools 글을 읽고 또 읽어서 이해한 내용을 정리해보려고 한다. 내가 정리한 내용들은 모두 아래 링크로 들어가면 나온다. Closures A closure is the combination of a function and the lexical environment within which that function was declared. developer.mozilla.org JavaScript Function Closures JavaScript Closures JavaScript variables can belong to the local or global scope. Global variables can be made local (pr..

오늘은 input박스에 숫자를 입력했을 때 여러가지 이벤트 주는 것을 구현해보려고 한다. 키보드를 입력하는 것과 동시에 이벤트가 발생해야하므로 keyup이벤트를 사용할 예정이다. 1. 숫자 3자리마다 ,(콤마)찍기 2. 숫자와 콤마를 제외한 나머지 문자를 입력할 수 없도록 막기 3. 0으로 시작하지 못하게 제한하기 먼저 숫자 3자리마다 콤마를 찍기 위해 아래와 같은 함수를 만들어보았다. function insertComma(num) { if(num.length

Do it! 웹 프로그래밍을 위한 자바스크립트 기본편 Review 발간된지 얼마 안 된 Do it! 시리즈의 따끈따끈한 신간을 보고 매우 큰 반가움을 느꼈다. 이유는 두 가지가 있는데 일단 Do it! 시리즈 자체가 유명하다. 책이 워낙 쉽게 잘 만들어져서 코딩 첫 입문서로 많이 추천받은 시리즈이기도 하다. 두 번째는 "자바스크립트"라는 최근 IT업계의 트렌드가 반영된 신간이기 때문이다. Do it 시리즈 중에 제일 유명한 책 중 하나가 "Do it! 자바스크립트 + 제이쿼리 입문"이다. 내가 처음으로 코딩을 배웠을 때 학원 강사님이 추천해준 책 리스트 1번에 있던 책이다. 전에 일하던 회사에서 신입 한 명이 요즘 제이쿼리를 공부하고 있다면서 이 책을 보여주기도 했었다. 그만큼 유명하지만 이 책이 내 관..

1. if문 / if - else문 if(조건식) { // 조건식이 true인 경우 } else { // 조건식이 false인 경우 } 조건식이 만족하면 바로 아래로, 조건문이 만족하지 않으면 else문으로 빠지는 형태이다. else문은 생략가능하다. 제일 많이 쓰고 가장 중요한 제어문 중에 하나이다. if-else문의 명령어가 한 줄이면 {}는 생략가능하다. if(조건식) //명령어 else //명령어 다음은 자바스크립트에서 false로 인식하는 값들이다. (이를 falsy한 값이라고 표현한다.) 0 "", '' (빈값) NaN undefined null 위 값들을 제외한 모든 값들은 다 true로 인식한다. (truthy한 값이라고 표현.) console.log(!!'hello'); 예를 들면 위 값..

# 나이 계산기 input박스에 태어난 연도를 입력하고 버튼을 클릭하면 아래에 나이가 출력된다. 입력하지 않고 버튼을 클릭했을 경우 "태어난 연도를 입력하세요" 문구 출력하고 input박스가 focus된다. dom, 연산자 연습 HTML: SUBMIT 당신의 나이는: SCRIPT: document.querySelector('#testAgeBtn').addEventListener('click', function() { var birthYear = document.querySelector('#testUserYear').value; if(! birthYear) { alert('태어난 연도를 입력하세요'); document.querySelector('#testUserYear').focus(); } else { ..

1. 기초 산술연산자 분류 연산자 이름 기호 설명 사칙 연산자 더하기 + 두 값을 더한다. 빼기 - 앞의 값에서 뒤의 값을 뺀다. 곱하기 * 두 값을 곱한다. 나누기 / 앞의 값을 뒤의 값으로 나눈다. 나머지 연산자 나머지 % 앞의 값을 뒤의 값으로 나눈 나머지 값 증감 연산자 증가 ++ 변수의 값을 1 증가 감소 -- 변수의 값을 1 감소 # 증감연산자의 위치 증감연산자가 피연산자 앞에 위치 ex) ++a 전체 수식 처리하기 전에 적용됨 증감연산자가 피연산자 뒤에 위치 ex) a++ 전체 수식의 처리가 끝난 뒤 적용됨 var a = 10; var b = a++ + 5; console.log(a, b);// a = 11, b = 15가 출력됨 var a = 10; var b = ++a + 5; conso..

스크롤이 몇 퍼센트 움직였는지 구하는 방법: var percent = ($(window).scrollTop() / ($(document).height() - $(window).height())) * 100;

만드는데 거의 3일 정도 걸렸던 스톱워치이다.. 휴.. 처음 간단하게 시작 / 스톱 버튼을 만들었을 때는 그렇게 어렵지 않았다. 문제는 재시작, 기록, 리셋 등등의 기능을 넣으면서부터 꼬이기 시작하고 시간이 뒤죽박죽 난리가 나고..;; 일단 HTML태그는 다음과 같다. 00 : 00 . 00 START STOP 내가 최초로 생각한 방법은 자바스크립트의 Timestamp값을 이용하는 것이었다. 내가 생각한 스톱워치 알고리즘을 적어보면 다음과 같다. 시작 버튼을 누르는 순간에 변수A에 현재시간을 불러오고 그 시간을 timestamp값으로 저장한다. 그리고 시작 시점부터 1ms 마다 계속해서 현재시간의 timestamp값을 새로 불러와 B에 저장한다. B에서 A를 뺀 timestamp값을 분, 초, 밀리초로 ..

오늘은 간단하게 자바스크립트를 이용하여 시계를 만들어보려고 한다. 먼저 HTML과 CSS 코드는 다음과 같다. : . . . * { box-sizing: border-box; } .clock { width: 300px; height: 300px; margin: auto; padding-top: 75px; background: #000; text-align: center; } .clock .time_box { width: 100%; padding-left: 10px; } .clock span { color: #fff; } .txt_lg { font-size: 75px; } .txt_sm { font-size: 20px; } .date_box { font-size: 15px; } #day { display:..

1번 탭 2번 탭 3번 탭 Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american a..