codingfarm

nodejs.org/ko/ Node.js는 크롬 V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임입니다. Node.js는 이벤트 기반, 논블로킹 I/O 모델을 사용해 가볍고 효율적입니다. Node.js의 패키지 생태계인 npm은 세계에서 가장 큰 오픈 소스 라이브러리 생태계이기도 합니다. Node.js는 서버로 주로 사용되지만, 그이외의 용도로도 사용이 가능하다. 1. 서버 Node.js를 통해 다양한 자바스크립트 애플리케이션을 실행할 수 있지만, node.js는 서버 어플리케이션을 실행하는데 주로 사용됩니다. 서버 : 네트워크를 통해 클라이언트에 정보나 서비스를 제공하는 컴퓨터 or 프로그램 클라이언트 : 서버로 요청을 보내는 주체(ex : 브라우저, 어플리케이션, 또 다른 서버...) 우리가 웹서..

Top_Bar Bottom_bar A B Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt >ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non p..

..

우측 상단의 $\equiv$ 버튼을 누르면 숨겨진 버튼이 나온다. Main Mobile Toggle 버튼 버튼 버튼 버튼 버튼 버튼 버튼 버튼 버튼 버튼 버튼 버튼 버튼 버튼 버튼 버튼 버튼 Lorem ipsum 2012-12-09 - Birthday Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in magna libero. Sed nec pharetra nunc. Proin eget magna id ipsum eleifend cursus sit amet nec lectus. Nunc quis lacus magna. Aliquam blandit, sapien ut viverra fermentum, elit tortor ornare..

www.w3schools.com/tags/tag_meta.asp 웹브라우저에 특별한 정보를 제공하는 HTML태그이다. 모바일 웹페이지는 화면에 대한 정보를 제공하려고 뷰포트 meta 태그를 사용한다. 대부분의 모바일 장치가 아래 표의 속성을 지원하지만, 일부 모바일 브라우저에서는 target-densitydpi 속성을 지원하지 않는다. 속성 이름 예시 설명 width width=240 width=device-width 화면의 너비 height height=800 height=device-height 화면의 높이 initial-scale initial-scale=2.0 초기 확대 비율 user-scalable user-scalable=no 확대 및 축소의 가능 여부 minimum-scale minimum-..

페이스북은 모바일 웹페이지로 접속하는 사람 수가 스마트폰 애플리케이션으로 접속하는 사람 수의 2배가 넘는다. OS제작 업체에서 제공하는 SDK를 사용해 만든 애플리케이션을 네이티브 애플리케이션이라 한다. 웹으로 만들어진 애플리케이션을 하이브리드 애플리케이션이라 부른다. 하이브리드 애플리케이션으로 만들면 HTML5를 사용해 한번만 개발하면 모든 OS에서 실행 가능하다. 게임을 제외하면 모든 애플리케이션은 하이브리드로 개발 가능하다. 하이브리드 애플리케이션을 제작 가능한 다양한 프레임워크가 있다. 모바일 웹 개발시 주의사항 모바일 OS의 종류가 같아도 내장된 브라우저가 다를 수 있다. 모바일 웹페이지 제작시 아래 내용을 주의해야 한다. over flow 속성을 사용해 스크롤을 넣을 수 없다. 대부분의 스마트..

1. 기능 3개의 다른 이미지를 하나로 압춥축후 분리된것처럼 사용한다. 탭을 누르면 현재 선택한 인덱스 값이 무엇인지 알 수 있어야 한다. 미선택, 선택, 마우스 올림 3개의 상태에 따라 이미지를 따로 적용한다. 2. 이미지 3. 코드 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92..

1. 클로저란? 함수 내부에 만든 지역변수가 사라지지 않고 계속해서 값을 유지하고 있는 상태. 1 2 3 4 5 6 7 8 9 10 11 12 13 function func(){ var count = 1; //일반 지역변수의 경우 함수 호출이 완료되면 사라지지만. $("#btn").on("click", //클로저를 이용하면 함수호출 완료 후 사라지는 //지역변수를 사라지지 않는 데이터 저장소로 만들 수 있다. function(){ count++; alert("count = " + count); } }; } Colored by Color Scripter cs 기본 문법은 아래와 같다. 1 2 3 4 5 6 function 외부함수(){ var 변수A; function 내부함수(){ 변수A 사용; } } c..

1. 콜백 함수란? 1 2 3 4 function 함수이름(calback){ ... callback(결과); } cs 함수 내부의 처리 결과값을 함수 외부로 내보낼 때 사용 일종의 return 문과 비슷한 기능 특정 함수의 매개변수로 콜백 함수를 넘긴 후 처리 결과를 콜백 함수의 매개변수에 담아 콜백함수를 호출한다. 이 구조를 통해 로직 구현 부분과 로직 처리 부분을 나눠 코딩한다. 이에 따라 로직구현부분은 동일하고 로직처리부분을 다양하게 처리해야 하는 경우 유용히 사용 가능하다. 콜백 함수 사용 전: 1 2 3 4 5 6 function 함수이름(calback){ //로직 구현 부분 //로직 처리 부분 } 함수이름(); cs 콜백 함수 사용 후 1 2 3 4 5 6 7 function 함수이름(calb..

1. 중첩함수란? 함수내부에 만들어지는 함수를 중첩함수라 한다. 1 2 3 4 5 6 7 8 9 function outer(){ //inner를 중첩함수라 부른다. function inner(){ //codes... } inner(); } outer(); cs 2. 용도 2-1. 내부 전용 함수 함수 내부에서만 지역변수처럼 사용하기 위해 만들어 쓴다. 일반적으로 아래처럼 이름이 없는 이벤트 리스너로 많이 사용된다. 1 2 3 4 5 6 7 8 function startHello(){ var count = 0; setInterval(function(){ count++; document.write(count + " 안녕하세요.", " "); }, 1000) } startHello(); Colored by C..

1. 함수 분류 함수는 크게 2가지로 나뉘어 집니다. 1. 사용자 정의 함수 사용자가 필요한 기능을 직접 만든 함수 2. 자바스크립트 코어 함수 자바스크립트가 기본적으로 제공하는 함수 ex : parseInt(), parseFloat() 2. 사용 방법에 따른 함수 종류 함수 종류 내용 일반 함수 가장 일반적으로 사용한 함수 중첩 함수 함수 안에 있는 함수 콜백 함수 실행결과값을 리턴이 아닌 매개변수로 넘어온 함수를 호출해서 넘겨주는 방식을 콜백이라 하며 이때 매개변수로 넘어온 함수를 콜백함수라고 한다. 클로저 함수 일반적으로 함수의 호출이 끝나면 함수 내부의 지역변수는 자동으로 사라지지만 클로저 함수는 사라지지 않고 그대로 남는다. 이러한 현상을 클로저라 한다. 멤버 함수 클래스 내부에 만들어지는 함수..

1. function 키워드를 이용하는 방법 1 2 3 4 5 function hello(name){ document.write(name+"님 환영합니다."); return 5; } var integer = hello("honggildong"); cs 2. 함수 리터럴을 이용하는 방법 1 2 3 4 var hello = function(name){ document.write(name+"님 환영합니다."); } hello("ddandongne"); cs 3. Function 객체를 이용해서 정의하는 방법 1 2 var hello = new Function("name", "document.write(name + '님 환영합니다.')"); hello("ddandongne"); Colored by Color S..

타입 리터럴 방식 객체 방식 숫자 var age = 10; var name = new Number(10); 문자 var name = "ddandongne" var name = new String("ddandongne"); 불린 var cold = true; var cold = new Boolean(true); 배열 var aryData = ["data1", "data2", "data3"]; var aryData = new Array("data1", "data2", "data3"); 일반적으로 실무에서는 간결성과 편리성 때문에 리터럴 방식을 즐겨쓴다. 하지만 리터럴방식은 자바스크립트 엔진에 의해서 객체방식으로 자동변환되어 실행된다. 일종의 암시적 형변환이 일어난다고 보면 된다. 함수 리터럴 함수 역시 리터..

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 div.image-container { position: relative; } div.image-container img { position: absolute; left: 0; top: 0; width: 120px; } #btnStar..

요구사항 1. 초기시작위치 : x(left) = 50, y(top) = 200 2. 상,하,좌,우 화살표 버튼을 누를 경우 해당방향으로 50씩 이동 3. 물고기가 움직이는 영역(#panel)밖으로 넘어서면 안됨 구현 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101 body { font-size: 9pt; } #panel { width: 500px; height: 500px; border: 1px solid ..

html에서 체크박스를 만드는 방법은 간단하다. 1 2 3 4 5 6 입력 cs input 타입에 "checkbox"를 넣으면 체크박스가 만들어진다. 그러면 이 기능을 jquery를 이용하여 javascript로 만들어 보자 구현 위 이미지를 체크박스로 사용하겠다. 이미지를 클릭할때마다 2개의 이미지가 각각 전환되게끔한다. 미체크상태 $\rightarrow$ 체크상태로 만드는방법 $체크박스.addClass("check"); addClass()메서드를 이용하여 노드에 크래스를 동적으로 추가할 수 있다. 체크상태 $\rightarrow$ 미체크상태로 만드는방법 $체크박스.removeClass("check"); removeClass() 메서드를 이용하면 노드에 적용된 클래스를 동적으로 제거할 수 있습니다. a..

입력받은 좌표대로 물고기를 움직이게하는 코드를 작성하시오 이때 x값은 0~500, y값은 0~300 의 범위를 가저야하며 이를 벗어날경우 "입력된 값이 너무 큽니다. 다시 입력해주세요" 라고 출력되어야 한다. 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105 body { font-size: 9pt; } #panel { width: 600px; height: 400px; border: 1p..

프롬프트창에 값을 입력받아서 1이면 "당첨! 냉장고", 2이면 "당첨! 세탁기", 3이면 "당첨! TV", 이외의 경우는 모두 "꽝입니다."를 출력하는 코드를 구현한다. 1234567891011121314151617 var ret = window.prompt("두궁두궁! 행운의 번호를 고르세요."); if(ret == "1") document.write("당첨! 냉장고"); else if(ret == "2") document.write("당첨! 세탁기"); else if(ret == "3") document.write("당첨! TV"); else document.write("꽝입니다."); Colored by Color Scriptercs

1. 준비 jQuery를 사용하려면 기본적으로 아래의 2가지 세팅을 해야 한다. 1. jQuery 기능이 들어있는 라이브러리 파일을 연결한다. 2. ready()라는 jQuery 기능을 이용해 초기 시작점을 정한다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 $(document).ready(function(){ //여기에 노드를 다루는 코드를 작성한다. alert("hello world"); }) lorem ipsum Colored by Color Scripter cs 위 코드를 브라우저로 열면 알림창이 뜨는것을 확인 할 수 있다. 2. jQuery를 이용한 노드 찾기 jQuery에는 수많은 노드찾기 기능을 제공한다. 우선은 가장 기초적인 방법을 배워보겠다. jQue..

jQuery란? $\bullet$ HTML 속 클라이언트 사이드 스크립트 언어를 단순화하도록 설계된 크로스 브라우징 JavaScript 라이브러리이다. $\bullet$ jQuery의 문법은 코드 보기, 문서 객체 모델 찾기, 애니메이션 만들기, 이벤트 제어, Ajax 개발을 쉽게 할 수 있도록 디자인되었다. 또한, jQuery는 개발자가 플러그인을 개발할 수 있는 기능을 제공한다. jQuery의 기능 1. DOM $\bullet$ DOM 객체의 필수 프로퍼티와 메서드 $\bullet$ 노드 추가, 삭제, 찾기, 이동시키기 $\bullet$ 스타일 추가, 수정, 값 구하기 $\bullet$ 속성 추가, 수정, 값 구하기 $\bullet$ 이벤트 등록, 제거, 발생시키기 $\bullet$ 위치, 크기와 관..