Front60 JavaScript - 브라우저 객체 모델(history, location, navigation) JavaScript 객체 내장 객체 브라우저 객체 문서 객체(DOM) 사용자 정의 객체 브라우저 객체 모델(Browser Object Model) 자바스크립트에서는 웹페이지를 구성하는 HTML 태그의 모든 요소와 웹 브라우저를 구성하는 요소들을 객체로 정의하여 제공 객체들을 계층구조로 분류 대표적인 브라우저 객체 웹 브라우저를 대상으로 이루어진 객체 new 연산자를 통해서 생성하지 않고 그냥 사용 ex) document.write() window: 창 document: 문서 history 객체: 웹 브라우저 기록 정보 location 객체: 주소 정보 navigation 객체: 웹 브라우저 정보(종류 판별 등) history 객체 최근 방문한 주소에 관한 정보를 기억하고 있는 개체 메소드 back() :.. 2021. 12. 10. JavaScript - 브라우저 객체 모델(window) JavaScript 객체 내장 객체 브라우저 객체 문서 객체(DOM) 사용자 정의 객체 브라우저 객체 모델(Browser Object Model) 자바스크립트에서는 웹페이지를 구성하는 HTML 태그의 모든 요소와 웹 브라우저를 구성하는 요소들을 객체로 정의하여 제공 객체들을 계층구조로 분류 대표적인 브라우저 객체 웹 브라우저를 대상으로 이루어진 객체 new 연산자를 통해서 생성하지 않고 그냥 사용 ex) document.write() window: 창 document: 문서 history 객체: 웹 브라우저 기록 정보 location 객체: 주소 정보 navigation 객체: 웹 브라우저 정보(종류 판별 등) 브라우저 객체의 계층 구조 window객체 창에 대한 전반적인 상황을 제어하는 최상위 객체 자.. 2021. 12. 10. JavaScript - 내장함수(Math, Spring) JavaScript 객체 내장 객체 브라우저 객체 문서 객체(DOM) 사용자 정의 객체 자바스크립트 내장 객체 (Built in Object) 미리 정의되어 있는 객체 선언 과정을 통해 객체 변수를 정의해서 사용 특별한 경우에만 사용자 정의 객체를 정의하여 사용하고, 대부분의 경우 내장 객체를 많이 사용한다. 대표적인 내장 객체 Date : 날짜와 시간을 처리하기 위한 객체 Array: 배열을 만들기 위한 객체 String: 문자열을 다루기 위한 객체 Math: 수학 계산을 위한 객체 Event: 발생하는 이벤트에 관한 정보를 제공하는 객체 Screen: 화면의 해상도, 색상, 크기에 관한 정보를 제공하는 객체 Math객체 수학적 계산에 필요한 함수나 상수 값 제공 상수 값은 속성으로, 수학 삼수는 메소.. 2021. 12. 9. JavaScript - 내장함수(Date, Array) JavaScript 객체 내장 객체 브라우저 객체 문서 객체(DOM) 사용자 정의 객체 자바스크립트 내장 객체 (Built in Object) 미리 정의되어 있는 객체 선언 과정을 통해 객체 변수를 정의해서 사용 특별한 경우에만 사용자 정의 객체를 정의하여 사용하고, 대부분의 경우 내장 객체를 많이 사용한다. 대표적인 내장 객체 Date : 날짜와 시간을 처리하기 위한 객체 Array: 배열을 만들기 위한 객체 String: 문자열을 다루기 위한 객체 Math: 수학 계산을 위한 객체 Event: 발생하는 이벤트에 관한 정보를 제공하는 객체 Screen: 화면의 해상도, 색상, 크기에 관한 정보를 제공하는 객체 객체 생성 및 사용 방법 객체 생성 var today = new Date(); // Date .. 2021. 12. 9. JavaScript - 화살표 함수, 디폴트 매개변수 JavaScript 화살표 함수(Arrow Function) 자바 언어의 람다식과 동일 function 키워드 대신 화살표(=>)를 사용하여 더 간략한 방법으로 함수를 선언하는 방식 기본 문법 매개변수 => {실행부분} ( ) => {return name;} // 매개변수가 없는 경우. 괄호 생략 불가 x => { ... } // 매개변수 1개인 경우 괄호 생략 가능 (x, y) : { ... } // 매개변수가 여러 개인 경우. 괄호 생략 불가 x => x * x // 수행 문장이 한 줄인 경우 중괄호 생략 가능 arrowFunction1.html arrowFunction2.html forEach() 함수를 화살표 함수를 사용해서 변경 화살표 함수 사용 예 이벤트 리스너 처리할 때 사용 원래 형식 객체.. 2021. 12. 9. JavaScript - 익명함수, 콜백함수 JavaScript 익명 함수(Anonymous Function) 함수 이름이 없는 함수 함수명 대신 변수명에 함수 코드를 저장해서 구현하는 함수 변수명에 값을 대입하는 형식으로 맨 끝에 세미콜론(;) 사용 함수 호출 시 변수명을 함수명처럼 사용 var 변수명 = function() { } var start = function() { 함수 수행 문장; }; 변수명 다르게 함수 코드 저장 가능 호이스팅 불가 콜백 함수로 주로 사용 예제 anonymousFunction.js var sum = function(a, b) { document.write(a + b + " "); }; // sum() 호출 sum(10,20); // 다른 변수 add 이름으로 기존 sum 함수 코드 저장해서 사용 가능 var add.. 2021. 12. 9. JavaScript - var, let, const 차이점 var, let, const의 차이점 1. 변수 선언 방식 var은 변수 선언 방식에 단점을 가진다. var name = 'javascript'; console.log(name); // javascript var name = 'person'; console.log(name); // person 변수를 한번 더 선언했지만, 에러가 나오지 않고 각기 다른 값이 출력됨 간단한 테스트에는 편리하지만, 코드랴야이 많아지면 어디에서, 어떻게 사용할지 파악하기 힘드며, 값이 바뀔 우려 존재 let var name = 'javascript'; console.log(name); // javascript var name = 'person'; console.log(n.. 2021. 12. 9. JavaScript - 함수의 반환값, 매개변수 JavaScript 함수의 반환 값 함수 실행이 끝난 후 호출한 곳으로 돌려주는 결과값 함수 내에서 return문 사용 함수 호출한 곳으로 반환하기 function sum() { return n1 + n2; } // 함수 호출한 곳으로 값 반환 var s = sum(); 출력문에서 호출한 결과값 바로 출력하기 function sum() { return n1 + n2; } // 출력문에서 호출한 결과값 바로 출력하기 document.write("합계 : " + sum()); 예제 functionReturn.js 숫자 2개를 입력받아 두 수를 더한 결과값 반환하기 // sum() : 숫자 2개를 입력받아서 두 수를 더한 결과값 반환 function sum() { var n1 = Number(prompt("숫.. 2021. 12. 9. CSS - header 메뉴 정렬 (float / clear) float 왼쪽 또는 오른쪽 정렬할 때 사용하는 속성 float:left; float:right; clear float 속성 해제 clear:left; -> float:left; 해제 clear:right; -> float:right; 해제 clear:both: -> float:left;와 float:right; 모두 해제 float 속성 문제 float을 적용해서 정렬된 요소 다음에 오는 요소가 float이 적용된 요소 뒤로 붙는 현상 정상 float:right; 를 적용하고 해제했을 때 / float:left;를 적용하고 해제했을 때 float:right; 를 적용했을 때 문제 float:left; 를 적용했을 때 문제 문제 해결 방법(1) : float이 적용된 요소 다음에 오는 요소에 clear .. 2021. 12. 9. 이전 1 2 3 4 5 6 7 다음
