본문 바로가기

분류 전체보기141

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.
반응형

티스토리툴바