Java Script/Java Script10 자바스크립트 작성 방식 : inline / internal / External Inline JavaScript 인라인 자바스크립트 태그 내에 직접 자바스크립트 명령어를 작성하는 방법을 인라인 자바스크립트라고 한다. 이벤트 핸들러 속성을 지정해서 자바스크립트를 실행하도록 하는 고전적인 방식으로 onclick이 인라인 자바스크립트 방식이다. 허나 HTML 문서와 분리하는 것을 권장하기 때문에 onclick을 사용하는 inline JavaScript 방식은 자주 사용하지 않는다. ㅇ 해당 h1 태그 클릭 시 알림창에 ok!가 텍스트가 보이게 하는 것 인라인 방식 자바스크립트 내부 자바스크립트 Internal JavaScript 내부 자바스크립트 HTML 문서 내 별도의 영역에 자바스크립트를 작성하는 방식 태그 내에 작성, 외부 자바스크립트 2019. 5. 31. 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. 이전 1 2 다음 반응형
