개발 공부/Javascript (7) 썸네일형 리스트형 웹브라우저 Javascript - 이벤트, 네트워크 통신, 활용 웹브라우저 Javascript (자바스크립트) 8. 문서의 기하학적 특성 8.1 문서의 기하학적 특성 Coding 9. 이벤트 9.1 이벤트 이벤트는 어떤 사건을 의미한다. 브라우저에서 사건이란 사용자가 클릭을 했을 때, 스크롤을 했을 때, 필드의 내용을 바꿨을 때와 같은 것을 의미한다. button 태그가 event target(event가 발생하는 대상) click이 event type. event가 발생할 때의 코드를 event handler라고 함 9.2 등록방법 & inline inline 방식은 이벤트를 이벤트 대상의 태그 속성으로 지정하는 것이다. getElementById는 한 개의 개체만 return한다. id 중복일 경우 return x 9.3 프로퍼티 리스너 이벤트가 실행된 맥락의 정.. 웹브라우저 Javascript - Element, Node, Document, Text 객체 웹브라우저 Javascript (자바스크립트) 4. Element 객체 4.1 Element 객체 . html css JavaScript t는 HTMLLIElement이다. 모든 HTML 태그들을 대표하는, 공통으로 속성으로 갖고 있는 객체는 HTMLElement이다. (ex, HTMLElement.style은 css 속성을 관리함) HTMLElement는 Element를 상속받는다. Element는 엘리먼트를 추상화한 객체이다. DOM은 HTML만을 제어하기 위한 모델이 아니다. XML, SVG 등의 마크업 형태의 언어를 제어하기 위한 규격이므로, Element는 마크업 언어의 일반적인 규격에 대한 속성을 정의하고 있다. 구체적인 각각의 언어는 HTMLElement, SVGElement 같은 객체를 통.. 웹브라우저 Javascript - 1.OT, 2. BOM, 3.DOM 웹브라우저 Javascript (자바스크립트) 1. Orientation 1.1 실습방법 Sublime Text 툴 사용 1.2 HTML Javascript 로드하기 이 방식의 장점은 자바스크립트가 어떤 html 태그 안에 있어 어떤 대상을 담당으로 하는지 알 수 있다. 그러나 정보와 제어가 합쳐져 있어서 유지보수가 쉽지 않다. script 안에 자바 스크립트가 들어가 있는 경우이다. js 파일로 따로 로드할 수 있다. script를 head에 넣게 되면, 밑에 있는 id=hw인 컴포넌트를 찾을 수 없기 때문에 위의 스크립트가 null이 된다. 이를 방지하기 위해 script 전체에 window.anload = function() {} 를 적용시키면 된다. 현재 이 웹페이지에 있는 모든 코드가 읽히고, .. 자바스크립트 언어 기본 - 객체지향 자바스크립트 언어 기본 - Javscript 17. 객체지향 - 객체지향 프로그래밍 소개 17.1 객체지향 프로그래밍 오리엔테이션 객체지향 프로그래밍은 객체들을 마치 레고 블럭처럼 조립해서 하나의 프로그램을 만드는 것 연관되어 있는 변수와 메소드를 결합해서 하나의 그룹을 짓는 것, 그 그룹 하나하나를 객체라고 한다. 재활용성을 높이기 위해서. 17.2 추상화 문법 : 객체지향을 편하게 할 수 있도록 언어가 제공하는 기능을 익히는 것 설계 : 좋을 객체를 만드는 것 = 설계를 잘하는 법 현실은 복잡하지만 여기서 용도에 초점을 맞춰서 needs를 뽑아내는 것 17.3 부품화 부품화 : 객체 지향은 부품화의 정점 정답이 있다기보단, 자신이 처해져 있는 상황에서 적합한 부품화를 찾는 것. 메소드는 부품화의 예라.. 자바스크립트 언어 기본 - 함수지향 자바스크립트 언어 기본 - Javscript 12. 함수지향 - 유효범위 12.1 전역변수와 지역변수 유효범위 (scope)는 변수의 수명을 의미한다. 함수 밖에서 변수를 선언하면 그 변수는 전역변수이다. 애플리케이션 전역에서 접근 가능하다. 12.2 유효범위의 효용성 function a (){ var i = 0; //결과 01234 // i=0; // 결과 무한반복 } for(var i = 0; i < 5; i++){ a(); document.write(i); } 12.3 전역변수를 사용하는 법 불가피하게 전역변수를 사용하는 경우 하나의 객체를 전역변수로 만들고 객체의 속성으로 관리하는 것 익명함수로 만들어서 전역변수가 아예 없는 소스 코드를 만들 수도 있다. 12.4 유효범위의 대상 java에서는 {.. 자바스크립트 언어 기본 - 함수, 배열, 객체, 모듈 자바스크립트 언어 기본 - Javscript 6. 함수 함수란 하나의 로직을 재실행할 수 있도록 하는 것, 코드의 재사용성을 높여준다. 6.1 함수란? 함수 문법 function 함수명( [인자...[,인자]] ){ 코드 내용 return 반환값 } 6.2 함수의 효용성 중복되는 작업을 함수로 따로 빼서, 함수만 재실행하면 편하다. 6.3 함수의 출력 6.4 함수의 입력 6.5 다양한 함수 정의 방법 이렇게도 함수의 이름을 정의할 수 있다. 7. 배열 연관되어 있는 데이터를 모아 통으로 관리하기 위한 데이터 타입. 변수가 하나의 데이터를 저장하기 위한 것이라면 배열은 여러 개의 데이터를 하나의 변수에 저장하기 위한 것. 7.1 배열의 문법 하나의 변수 안에 여러 개의 데이터를 담을 수 있는 것. 각각의 .. 자바스크립트 언어 기본 - 실습환경, 숫자, 변수, 비교, 조건문, 반복문 자바스크립트 언어 기본 - Javscript 0. Javascript 언어 소개 자바스크립트는 "프로그래밍"적으로 웹 브라우저를 제어하기 위한 언어. 오늘날 자바스크립트의 흐름은 "탈웹브라우저"이다. 자바 스크립트가 웹브라우저 제어에서 벗어나고 있는 것이다. 웹브라우저와 자바 스크립트 동작이 분리되고 있는 것. (브라우저를 벗어나 웹 서버까지 확대) 웹 서버 사이드 스크립트 -> ex node.js 탈웹 ex Google Apps Script 웹브라우저 사용 언어라는 공통 분모 위에서 각각의 환경에 맞게 적용해주어야 한다. Javascript 기본 - 실행방법과 실습환경 0.0 코드 작성과 실행 크롬에서 바로 Ctrl+O를 눌러, 해당 파일을 열면 된다. 0.1 크롬 개발자 도구 - 콘솔 사용법 F12를.. 이전 1 다음
