Web

[javascript] 객체

1. 개요 프로그램의 대상이 되는 현실세계의 어떠한 것을 프로그램에 맞게 구체화(추상화) 시켜놓은 것을 객체라고 할 수 있습니다. 예컨대 '자동차'를 자바스크립트에서 객체화한다면 다음과 같이 할 수 있습니다. var myCar = { car_name : '승용차', car_color : '파란색', car_number: '00가0000' }; alert(myCar.car_name); 예제에서 객체는 중괄호를 통해 car_name등의 키와 승용차라는 속성으로 myCar라는 객체를 생성하였습니다. 이때 키는 '문자열' 형태로 표현하거나 특수문자, 공백 등을 포함할 수 있습니다. 그러나 그렇게 그런경우 대괄호로 키값을 묶어줘야 하는 경우도 있으니 주의해야 합니다. 2. 속성 위 예제에서 객체에 키와 속성을 어..

[javascript] 함수

1. 개요 일련의 처리과정을 하나의 코드로 묶어 사용하는 것을 함수라고 하며 기본적으로 다음과 같은 형태로 작성됩니다. function 함수명() { 처리내용 } 2. 익명 함수 위에서 처럼 함수를 정의할 때는 함수명이 있는 것이 기본이지만 다음과 같이 함수명이 없는 형태로 선언하는 경우를 익명 함수라고 합니다. var myfunc = function() { var i = 10; var j = 20; alert(i + j); }; myfunc 변수를 사용해 함수 자체를 대입함으로써 함수 데이터형의 변수를 사용하게 됩니다. 혹은 다음과 같은 방법으로 익명 함수를 대체할 수도 있습니다. var myfunc = () => { var i = 10; var j = 20; alert(i + j); }; functi..

[javascript] 반복문

1. while while안의 조건 결과가 true이면 내부에 문장을 계속해서 실행합니다. var i = 1; var j = 0; while (i

[javascript] 조건문

1. if 가장 자주 사용되는 조건문으로 참/거짓에 따라 처리를 분기하여 실행합니다. var i = 10; if (i == 10) { alert('i는 10'); } else { alert('i는 10이 아님'); } 조건은 if 다음에 괄호를 통해 넣으며 조건이 참이면 바로 아래 문장을, 거짓이면 else 이하 문장을 실행하게 됩니다. 각 실행 문장이 단 한 줄인 경우 중괄호({})는 생략할 있으며 거짓인 경우에 그 어떤 처리도 필요하지 않으면 else자체도 생략할 수 있습니다. var i = 10; if (i == 10) alert('i는 10'); 조건이 2개 이상 필요하다면 else if 문을 사용할 수 있습니다. var s = prompt('입력하세요.', ''); var i = Number(s..

[javascript] 기본 사항

1. 용어의 이해 (1) 표현식과 문장 표현식은 값을 만들어내는 구문입니다. 예컨대 1234 1 + 2 'abc' 위 구문은 1234, 3, 'abc'의 값을 나타내므로 표현식이라 할 수 있습니다. 반면 문장은 이러한 표현식을 통해 실제 자바스크립트(javascript)의 구문을 아래와 같이 만든 것입니다. var i = 1 + 2; alert('값은 ' + i + '입니다.'); 문법상 자바스크립트는 문장의 끝에 세미콜론(;)을 필요로 하지 않지만 C언어처럼 ;으로 끝나는 것이 관례입니다. (2) 키워드 자바스크립트 내부에서 특정한 용도로 사용되는 단어들을 '키워드'라고 부릅니다.(자바스크립트뿐만 아니라 다른 언어들도 '키워드'라는 단어를 동일한 의미로 사용합니다.) 이를테면 var는 키워드 중 하나로..

[javascript] 개요

1. 개요 자바스크립트(javascript)는 기본적으로 클라이언트의 웹브라우저상에서 실행되는 프로그래밍 언어입니다. 썬 마이크로 시스템즈의 자바(JAVA)와 이름이 같지만 전혀 다른 언어임에 주의해야 합니다. 자바스크립트는 사실 ECMAScript가 본래 명칭입니다. 유럽 컴퓨터 제조 협회(European Computer Manufacturer's Association)가 붙인것으로 표준이기는 하지만 아직까지는 자바스크립트라는 명칭이 훨씬 더 많이 사용되고 있습니다. 2. 활용범위 자바스크립트는 처음에는 웹브라우저에서 실행되는 용도로 탄생했지만 현재는 데스크탑 응용프로그램부터 모바일 개발, 서버 개발, 게임 등 광범위하게 사용되는 언어로 발전했습니다. (1) 웹개발 단순한 HTML 문서를 벗어나 하나의..

[HTML5&CSS3] SVG

SVG(Scalable Vector Graphics)는 벡터 그래픽을 표현하는 데 사용되는 태그입니다. 우선 SVG를 사용해 그래픽을 표현하려면 SVG태그를 통해 그래픽으로 표현할 영역을 잡아야 합니다. 그런 다음 svg태그 안에서 실제 표현할 그래픽을 작성합니다. 이번에는 원을 그려보도록 하겠습니다. SVG와 일반 이미지의 차이점은 이미지는 확대하면 품질이 깨지게 되지만 SVG는 벡터 방식이라 확대해도 깨지지 않고 품질을 계속 유지한다는 이점이 있습니다. 안타깝게도 본인이 이해하고 있는 SVG의 수준이 낮아서 본래 SVG에 관한 글을 올릴 생각이 없었으나 간단히 소개하는 정도로만 마무리하려고 합니다.

[HTML5&CSS3] Less 스타일시트 - 내장 함수

1. 색상 변환 관련 색상의 변환과 관련해 사용할 수 있는 함수로는 대략 다음과 같은 것들이 있습니다. lighten 지정된 색상을 밝게합니다. darken 지정된 색상을 어둡게 합니다. saturate 지정된 색상을 두드러지게 합니다. desaturate 지정된 색상을 두드러지지 않게 합니다. fadein 지정된 색상을 투명하게 합니다. fadeout 지정된 색상을 불투명하게 합니다. fade 지정된 색상을 반투명하게 합니다. spin 지정된 색상의 속성을 변경합니다. mix 지정된 색상을 섞습니다. 위 함수는 공통적으로 '색상, % 단위' 형식으로 값을 전달받으며 예외적으로 mix는 첫 번째와 두 번째 모두 색상을 파라미터 값으로 받습니다. @color : #FFF000; div:nth-child(1..