스노우보드 참 좋아하는데 맨날 키보드 앞에만 있네

네이버 스마트에디터를 이용한 글쓰기 기능 구현 오늘은 무료 웹에디터 툴인 스마트에디터(SmartEditor)를 적용하는 방법에 대해 포스팅하고자 한다. 스마트에디터는 네이버에서 배포한 무료 오픈소스로 웹페이지 게시판에 사용자가 작성할 form인 textarea에 적용할 수 있다. 에디터 형식은 아래와 같이 네이버 블로그 및 카페 게시판과 동일하다. 이하 공식 사이트 설명 SmartEdtitor는 JavaScript로 구현된 웹 기반의 WYSIWYG 편집기이다. WYSIWYG 모드 및 HTML 편집 모드와 TEXT 모드를 제공하고, 자유로운 폰트 크기 설정 기능, 줄 간격 설정 기능, 단어 찾기/바꾸기 기능 등 편집에 필요한 다양한 기능을 제공하므로 사용자들은 SmartEdtitor를 사용하여 쉽고 편리하..

jQuery를 이용하여 체크박스 다루기 jQuery를 이용하여 Checkbox, Textarea, Button 을 다루는 실습을 해보자 소스코드1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162 jQuery를 이용하여 체크박스 다루기 function allSelect() { $("input[type='checkbox']").prop('checked', true); } function unSelect() { $("input[type='checkbox']").prop('checked', false); } function check() { var check..

메서드 체이닝(Method Chaining) 메서드 체이닝 메서드가 객체를 반환하게 되면, 메서드의 반환 값인 객체를 통해 또 다른 함수를 호출할 수 있다.이러한 프로그래밍 패턴을 메서드 체이닝이라 한다. 메서드 체이닝의 형태Object.function().function().function() 위와 같이 메서드 체이닝을 통해 하나의 Object 메서드가 순차적으로 메서드 function() 을 Call 하는 형태를 가질 수 있다. 실제 코드를 보자 123456 $(document).ready(function() { $('h1').css('background', 'orange'); $('h1:even').css('color', 'white'); $('h1:odd').css('color', 'red'); ..

전개 연산자(바벨)를 사용한 배열 복사 자바스크립트의 객체 복사에 대해서 잘 모르시는 분은 아래 링크를 통해 이전 게시글을 참고하도록 하자 2017/10/31 - [Programming Note/Javascript] - [JavaScript] 참조 복사와 값 복사 (얕은 복사와 깊은 복사) ECMAScript 6 에서 추가된 전개 연산자(spread operator)를 사용하면 배열의 내용을 복제하거나 병합할 수 있다.전개 연산자를 사용할 수 있는 구문은 다음과 같이 세 가지가 있다. 12345678// 함수 호출용myFunction(...iterableObj); // 배열 리터럴 용[...iterableObj, 4, 5, 6] // 비구조화 용[a, b, ...iterableObj] = [1, 2, 3..

자바스크립트 참조 복사와 값 복사 자바스크립트에서 = 를 이용하여 객체를 복사하면 값을 복사하는게 아니라 그 값의 위치를 참조만 하게 된다. 한번 자세히 알아보도록 하자. 자료형의 값 복사(깊은 복사) 자바스크립트는 기본 자료형(숫자, 문자열, boolean)의 값을 복사할 때 값을 완전히 복사한다. 따라서 =을 이용하여 값 복사를 쉽게 할 수 있다. 아래는 깊은 복사 예제이다. 1 2 3 4 5 6 7 var originalValue = 100; var newValue = originalValue; originalValue = 200; alert(originalValue); alert(newValue); 위 소스코드 1열에서 originalValue에 100의 값이 들어가고, 2열에서 newValue에..

객체 (Object) 오늘은 객체에 대해 공부해보도록 하자.자바스크립트의 거의 모든 것은 객체이다. 기본 데이터 타입인 boolean, number, string, null, undefined를 제외하고 말이다.객체는 배열과 상당히 유사하다. 개요자바스크립트의 기본 자료형은 숫자, 문자열, 불, 객체, 함수, undefined이다. 그러면 배열의 자료형은 무엇일까?1alert(typeof ([])); 응~ 오브젝트야~ 배열은 객체를 기반으로 만들어졌으므로 배열과 객체는 상당히 비슷하다.차이가 있다면 배열은 요소 접근 시 인덱스를 사용하지만, 객체는 키를 사용한다는 점이다. 객체를 생성한 후 콘솔창에 출력한다. 12345678var product = { 제품명 : '7D 건조 망고', 유형 : '당절임',..

클로저 (closure) 클로저란 무엇인가?MDN에서 다음과 같이 정의하고 있다. "A closure is the combination of a function and the lexical environment within which that function was declared." 번역하면 "함수와 함수가 선언된 어휘적 환경의 조합" 이라는 말인데... 무슨소리인지 모르겠다. 보통 함수 내에서 함수를 정의하고, 사용하면 클로저라고 하는데, 그 외에도 정의는 다양하다. 아래의 예제를 통해 이해를 돕도록 하자 [1 단계] 123456789var cnt = 0;function increaseCnt(){cnt++;}increaseCnt(); // cnt == 1increaseCnt(); // cnt == 2..

키워드 var, let 그리고 const 기본ECMAScript 5까지는 식별자에 값을 넣기 위해서는 var 키워드를 사용하여 변수를 정의하는 방법 밖에 없었다.그런데 ECMAScript 6부터 let 키워드를 사용한 변수, const 키워드를 사용한 상수 라는 개념이 추가되었다.사용법은 키워드 '식별자 = 값;' 형태로 선언하며, 값을 넣은 후 식별자를 통해 내부의 값을 사용할 수 있다. var, let, const 키워드를 사용한 변수/상수의 정의 및 출력1234567var variableA = 10;let variableB = 20;const constantC = 30; console.log(variableA);console.log(variableB);console.log(constantC); 식별..

JavaScript의 출력 자바스크립트 실습을 위해 다양한 툴을 이용할 수 있지만, 개인적으로 JSBIN을 추천한다.HTML, CSS, JavaScript를 작성하고 Console, Output을 통해 테스트 할 수 있으므로 학습용도로 상당히 유용하다.별다른 설치 없이 웹상에서 프로그래밍이 가능 ! JSBIN 바로가기 출력 alert : 경고창 출력 confirm : 확인창 출력. 예(true), 아니오(false) 버튼 var temp = confirm('프로세스를 종료하시겠습니까?'); prompt : 입력한 내용을 문자열로 반환. 아무것도 입력 안하면 null 반환 var user_name = confirm('이름을 입력하세요', '워너비'); console.log : 콘솔창에 출력 console...

JavaScript의 데이터 타입과 연산자 1 1. 표현식과 문장표현식 : 값을 만들어내는 코드 50010+20+30+40 * 2 / 2'WannaBe' 하나 이상의 표현식이 모이면 문장이 된다. 문장은 코드를 읽어 들이는 단위가 된다.문장 끝에는 세미콜론을 찍어 문장 종결을 알린다. 500;10+20+30+40 * 2 / 2;'WannaBe'; 세미콜론 ;자바스크립트는 문장 끝에 세미콜론을 입력하지 않아도 프로그램을 실행할 수 있다.그러나 다른 프로그래밍 언어처럼 관례상 입력한다. 2. 키워드자바스크립트에서 쓰이는 키워드를 정리해보았다.당연한 말이지만, 키워드는 식별자로 쓸 수 없다. 사용법 및 설명은 타 언어와 다르지 않아 생략한다. break else instanceof true case false..