본문 바로가기

전체 글152

jQuery, 제이쿼리가 무엇인가? jQuery는? 모든 브라우저에서 동작하는 클라이언트 자바스크립트 라이브러리이며, 무료로 사용 가능한 오픈소스 라이브러리이다. JavaScript가 동적 페이지 기능 구현이 가능하지만, 사용하다 보니 구현이 복잡한 부분이 있어서 jQuery라는 라이브러리를 활용하여 조금 더 간단하고 쉽게 자바스크립트를 구현할 수 있게 도와주는 고마운 라이브러리이다. 혹시, 자바스크립트가 무엇인지 궁금하다면 아래 링크 클릭! [JavaScript] - 자바스크립트 기본, JavaScript란? (+ jQuery) 자바스크립트 기본, JavaScript란? (+ jQuery) 웹프로그래밍 웹에서 동작하는 프로그래밍 동적인 HTML 생성 (back) jsp, 서블릿, 스프링, back (front) javascript 서버 .. 2019. 5. 11.
JS 예제 : 접근 기기(데스크탑 / 모바일)에 따른 배경 변경 자바스크립트에서는 해당 웹 서비스에 접근하는 사용자 브라우저에 대한 정보를 가지고 있는 객체가 있다. navigator 객체 navigator 객체는 웹 페이지를 실행하고 있는 브라우저에 대한 정보를 가지고 있음 객체 대표적인 속성 appName 브라우저의 이름 appVersion 브라우저 버전 userAgent 브라우저 전체적인 정보 navigator JS 예제 start.html에 접근하는 브라우저의 상태에 따라 페이지를 이동하게 하는 자바스크립트 예제 만약 접근 브라우저가 데스크탑이면 해당 페이지에 머무르고, 모바일 페이지의 경우 mobileStart.html 페이지로 이동하게 되는 웹 서비스 navigator 객체의 .uwerAgent 속성으로 브라우저의 전체 정보를 확인하여 처리. ㅇ start.. 2019. 5. 11.
JS 예제 : 시간에 따라 이미지 변경( 낮과 밤) 자바 스크립트를 활용하여 시간에 따라 다른 이미지가 나오게 변경이 가능하다. 웹 사이트의 낮과 밤의 아이콘이나 배경을 다르게 설정할 수도 있다. 자바스크립트에는 현재의 날짜와 관련된 정보를 주는 객체가 있다. Date( ) 이것을 new로 생성해서 시간을 가져오고 해당 시간을 활용하여 조건문으로 코드를 작성하면 된다. 날짜 관련 클래스 Date( ) 날짜객체.getHours( ) 만들어진 객체의 시간을 가져오는 메소드 2019. 5. 11.
JavaScript 타이머 설정 , setTimer 자바스크립트로 웹페이지를 구현하다 보면 시간에 따라 동작하는 효과를 만들게 되는 경우가 있다. 그런 경우에 사용하게 되는 타이머 설정 함수가 setTimer이다. setTimer 지금부터 지정한 시간 뒤에 딱 한번 동작 setTimer setTimer(동작 시킬 함수, 시간); setTimer(pro, 5000); 5초 뒤에 pro 함수를 1번 동작하라는 것 setTimer(function( ) { 함수내용 } , 5000); 안에 이름 없는 함수를 넣어서 할 수 있다. ㅁ 지정한 시간마다 반복하여 계속 동작 setInterval setInterval(동작 시킬 함수, 시간); setInterval(pro, 5000); 5초 마다 pro 함수를 동작하라는 것\ 적용하는 방법 직접 주는 것, 별도의 함수를.. 2019. 5. 11.
JavaScript 이벤트 ㅣ window.onload 자바스크립트 이벤트 종류 마우스 이벤트 키보드 이벤트 HTML 프레임 이벤트 HTML 입력 양식 이벤트 유저 인터페이스 이벤트 구조 변화 이벤트 터치 이벤트 ㅇ 고전이벤트 모델 자바스크립트에서 문서 객체의 이벤트 속성을 사용해 이벤트를 연결하는 방법 이벤트 하나에 이벤트 핸들러 하나만 연결 가능 ㅇ 이벤트 발생 객체와 이벤트 객체 이벤트 핸들러 안에서 This 키워드를 사용하면 이벤트가 발생할 객체를 찾을 수 있음 스크립트 위치에 따른 구현 시작 문서 내에 여행지 추천 추천 2019. 5. 11.
JavaScript 함수 만드는 방법 Java Script 함수 함수란 반복 사용하는 코드를 재사용하기 위해 하나의 단위로 묶어 놓은 코드의 집합을 말한다. 자바스크립트 내에 정의된 함수를 "내장 함수"라고 하고, 직접 정의한 함수는 '사용자 정의 함수'라고 한다. 함수 처리가 끝나면 return 문을 통해 결과를 돌려 받을 수 있다. function sum(a, b){ var result = a+ b; return result; } ㅇ 콜백함수 자바스크립트에서는 함수를 매개 변수로 전달할 수 있는데, 이를 콜백 함수라고 한다. 콜백함수는 다른 함수의 인자로써 이용되는 함수나 어떤 이벤트에 의해 호출되어지는 함수를 말한다. 함수 생성하는 방식 2가지 funtion 함수명(매개변수) { 함수내용 }; var 함수명 = function( 매개변.. 2019. 5. 11.
JavaScript DOM : 문서 동적화 기존 HTML만 으로 구성된 웹페이지의 경우 사용자의 동작에 따라 변경되거나 하는 부분이 불가능 한 정적인 페이지였다. 허나 사람들의 요구사항이 늘어나고, 사용자들이 조금 더 편리 하게 사용할 수 있도록 웹 페이지를 동적으로 변화하고 변경하는 기능이 필요했고, 그것을 가능하게 하는 것이 자바스크립이다. 기본적으로 JS에서 DOM을 다루려면 HTML과 CSS에 대한 이해가 있어야 한다. 요소를 선택하기 위해서는 태그에 부여한 id 또는 class로 접근해야 하기 때문에 기본적인 이해가 선행되어야 한다. 웹브라우저에서 HTML 문서 내용을 추가하거나 변경하는 것은 자바스크립만 가능 CSS 속성과 HTML5의 다양한 API 기능 제어 DOM : Document Object Model, HTML 문서 내에 객체.. 2019. 5. 11.
JavaScript 배열 / 객체 기본 JS 배열 자바스크립트의 배열은 유연하게 작동한다. 사이즈가 고정되지 않아서 기존 배열 인덱스를 입력하면 수정이 되고, 새로운 인덱스를 넣으면 값이 추가 된다. ㅇ 배열의 크기 메소드 배열명.length ㅇ 배열메서드 메서드 설명 reverse( ) 배열을 역순으로 정렬 sort( ) 배열 정렬 slice( ) 배열의 일부 선택 concat( ) 배열을 하나로 합침 shift( ) 첫 번째 배열 제거(값을 반환함) unshift( ) 첫 번째 배열 추가 pop( ) 마지막 배열 제거(값을 반환함) join( ) 배열 사이에 지정된 문자열로 구분자 표시 sort( ) 메서드는 함수 안에 매개변수를 전달하지 않으면 알파벳 순으로 정렬 번호순 정렬은 매개변수에 함수식 적용 번호순으로 정렬 : 배열명.sort(.. 2019. 5. 11.
자바스크립트 기본 명령어 총 정리 자바와 비슷하게 동작하지만, 세부적인 명령어 등의 차이가 있기 때문에 한번씩 사용하면서 참고하면 좋다. ㅁ 변수 선언 var : 변수(생략 가능) 함수 내에서 var를 하지 않으면 전역변수가 되지 않는다.(전체 사용 가능한 변수) ㅁ 텍스트 문자열 텍스트는 " "와 ' '둘 다 가능 ㅁ 숫자 자바스크립트는 정수와 유리수의 구분 없이 숫자 자료형을 가짐 사칙연산자( + - * / )사용 가능 ㅁ 출력 방법 alert("값") : 경고창을 띄우는 것(사용자가 볼 수 있음) document.write("값"); 브라우저에 값을 출력하는 것 consol.log("값"); 개발자 도구에서 확인 가능한 콘솔에서 확인 가능 ㅁ 입력 방법 ㅇ prompt( ) : 입력 창이 뜨는 것 입력해서 반환 받는 값 = prom.. 2019. 5. 11.
자바스크립트 기본, JavaScript란? (+ jQuery) 웹프로그래밍 웹에서 동작하는 프로그래밍 동적인 HTML 생성 (back) jsp, 서블릿, 스프링, back (front) javascript 서버 사이드 : 소스 코드가 노출되지 않는다. 클라이언트 사이드 : 소스 코드가 노출된다. 웹 애플리케이션 : 웹문서를 초월해서 일반적인 애플리케이션에 가까워 졌다. 설치 없이 웹 브라우저를 통해 워드, 엑셀 같은 애플리케이션도 사용할 수 있게 되었다. 자바스크립트란? 웹 브라우저에서 많이 사용하는 프로그래밍 언어 즉시 웹 브라우저에서 실행해 볼 수 있는 인터프리터 언어, 컴파일 과정 없이 즉시 실행 컴파일 언어보다 느리지만, 파이어폭스와 구글 크롬에서 JIT 컴파일 이라는 동적 컴파일 기법을 사용하면서 성능이 비약적으로 향상되었고, 더 발전할 전망 초기 웹은 변.. 2019. 5. 11.
노드 기반 웹프레임워크, Angular / React / Vue 웹 프레임워크는 동적인 웹페이지나, 웹 애플리케이션, 웹 서비스 개발 보조용으로 만들어지는 애플리케이션 프레임 워크의 일종이다. 웹 페이지 개발을 쉽고 편리하게 할 수 있도록 데이터베이슨 연동, 템플릿 형태의 표준 등의 기능을 가지고 있는 것이다. 자바 기반의 프레임워크는 Spring이 있고, 노드 기반의 대표적인 웹 프레임워크는 Angular, React, Vue, Meteor 등이 있다. Angular는 구글에서 프론트엔드 앱 만드는 경우 사용 React는 페이스북에서 사용 React Native는 페이스북, 인스타그램, 에어비앤비, 월마트, 테슬라에서 모바일 앱으로 사용 Electron은 데스크톱 개발 도구 노드는 대부분 서버로 이용했지만, 자바스크립트 언어 사용이 가능하기 때문에 웹, 모바일, 애.. 2019. 5. 11.
노드 Node.js 서버란? 세팅 방법 노드 서버의 특징 싱글 스레드로 멀티 스레드 방식보다 컴퓨터 자원을 적게 사용(CPU 코어를 하나밖에 사용하지 못함) 노드 서버는 I/O 입출력이 많은 작업에 적합, 논블로킹 방식으로 하나의 스레드가 많은 수의 I/O 처리 CPU 부하가 큰 작업에는 적합하지 않음( 하나의 스레드이기 때문) 싱글 스레드 방식 프로그래밍으로 서버 프로그래밍에 익숙하지 않은 사람도 쉽게 배울 수 있음 But, 에러 처리가 제대로 안되면 서버 전체가 멈추게 된다. 웹 서버가 내장되어 있어서 쉬움( 단, 서버 규모가 커지면 결국, nginx 등의 웹 서버를 노드 서버와 연결) 자바스크립트를 사용하여 하나의 언어로 서버까지 프로그래밍 가능 노드 웹서버 express 외부 모듈 설치 1. 노드로 서버를 만들기 위해서는 cmd 창에서.. 2019. 5. 11.
반응형

티스토리툴바