자바스크립트문법 9

[Javascript] 자바스크립트 함수스코프, 전역함수, 지역함수, 객체 생성자 함수

함수 스코프함수 스코프란?스코프(scope)의 사전적 의미는 '범위'이며, 여기에서는 변수 또는 함수의 유효 범위를 가리킵니다.스코프를 이해하기 위해 지역 변수와 전역 변수의 개념과 차이를 먼저 살펴보겠습니다~전역 변수와 지역 변수의 개념과 차이전역 변수는 자바스크립트 어디에서든 사용할 수 있는 변수입니다.지역 변수는 함수 스코프(범위)에서만 사용할 수 있는 변수입니다.  //기본형 var 변수명; //전역 변수 function 함수명() {     var 변수명;  //지역 변수 }   전역함수와 지역함수의 차이전역 함수는 자바스크립트 어디에서든 사용할 수 있는 함수이고,지역 함수는 함수 스코프에서만 사용할 수 있는 함수입니다.기본형)전역과 지역을 나누는 이유프로그램을 개발할 때 전역과 지역을 나누면 ..

[Javascript] 자바스크립트브라우저 객체(screen, location, history, navigator)

브라우저 객체 모델 브라우저 객체란? 브라우저에 내장된 객체를 브라우저 객체라고 합니다. window는 브라우저 객체의 최상위 객체이며, window 객체에는 하위 객체가 포함되어 있습니다. 계층적 구조로 이루어져 있으며, 이를 브라우저 객체 모델(BOM)이라고 합니다. window는 브라우저 객체의 최상위 객체이며, 아래 링크를 통해 window 객체의 메서드 종류를 많이 사용하니 숙지해주세요. 종류 설명 open("URL", "새 창 이름", "새 창 옵션") URL 페이지를 새 창으로 나타냅니다. alert(data) 경고 창을 나타내고 데이터를 보여줍니다. 방문자가 [확인] 버튼을 누르면 alert()를 사용한 다음 위치의 코드를 수행합니다. prompt("질문", 답변") 질문과 답변으로 질의 ..

[Javascript] 자바스크립트 내장 객체(날짜, 수학, 배열 , 문자열) 내장함수

내장 객체1.내장 객체 생성하기기본형) 참조 변수(인스턴스 이름) = new 생성 함수(); 바로 예제를 통해 알아보겠습니다. 2.날짜 정보 객체날짜나 시간 관련 정보를 제공받고 싶을 때는 날짜 객체(Data Object)를 생성합니다. 현재 날짜의 정보를 제공하는 Date 객체는 다음과 같습니다. 기본형) 참조 변수 = new Date(); ex) var t = new Date(); 특정 날짜의 Date 객체는 다음과 같이 생성합니다. (2002 월드컵 날짜를 예로 들겠습니다) 기본형) 참조 변수 = new Date("연/ 월/ 일"); ex) var t = new Date("2002/ 5/ 31"); 참조 변수 = new Date(연, 월-1, 일); ex) var t = new Date(2002, ..

[Javascript] 자바스크립트 객체란, 객체의 종류(내장, 브라우저, 문서 객체)

객체란?자바스크립트는 개체 기반 언어입니다. 객체는 기능과 속성을 가지고 있습니다.예로 TV에는 켜다, 끄다, 볼륨을 높이다, 줄이다 등의 기능이 있습니다.​앞의 포스팅에서는 document라는 객체를 사용해 보았고, 출력이라는 기능을 사용해 보았습니다.이런 기능들을 메서드(Method)라고 합니다. 또한 객체는 속성(Property)을 가지고 있습니다.예로 TV의 크기나 색상, 무게 등을 속성이라고 할 수 있죠! 기본형)객체.메서드();객체.속성 또는 객체.속성 = 값;​ 객체의 종류자바스크립트의 객체는 크게 내장 객체, 브라우저 객체모델(BOM, Browser Object Model), 문서 객체 모델(DOM, Document Object Model)로 나눌 수 있습니다.​내장 객체내장 객체로는 문자..

[Javascript] 자주쓰는 함수 charAt, concat, Math.floor, getDate, getTime등

날짜 관련 메서드 날짜 정보를 가져올 때(GET)날짜 정보를 수정할 떄(SET)getFullYear()연도 정보를 가져옴setFullYear()연도 정보만 수정함getMonth()월 정보를 가져옴(현재 월-1)setMonth()월 정보만 수정함(월 -1)getDate()일 정보를 가져옴setDate()일 정보만 수정함getDay()요일 정보를 가져옴(일: 0 ~ 토:6)요일은 날짜를 바꾸면 자동으로 바뀌므로 setDay()는 없음getHours()시 정보를 가져옴setHours()시 정보만 수정함getMinutes()분 정보를 가져옴setMinutes()분 정보만 수정함getSeconds()초 정보를 가져옴setSeconds()초 정보만 수정함getMilliseconds()밀리초 정보를 가져옴(1/100..

[Javascript] 선택문 switch, 반복문 while, dowhile, for, break, continue

선택문Switch 문선택문인 switch 문은 변수에 저장된 값과 switch 문에 있는 경우의 값을 검사하여 변수와 경우의 값에서 일치하는 값이 있을 때 그에 해당하는 코드를 실행합니다. if문은 만족하는 데이터가 여러 개일 경우에 주로 사용하고, switch문은 여러 경우의 값 중 일치하는 데이터를 찾아 그에 해당하는 코드를 실행시킬 때 사용합니다.기본형)var 변수 = 초기값;switch(변수) {   case 값1 : 코드 1;   break;   case 값1 : 코드 1;   break;   case 값1 : 코드 1;   break;​   default : 코드 5;}반복문1.while 문while 문은 조건식을 만족할 때까지 여러번 반복할 수 있습니다.기본형)var 변수 = 초기값;whil..

[Javascript] 기초문법(4) 논리, 삼항 연산자, 연산자 우선순위

논리 연산자논리 연산자의 종류종류설명||or 연산자라 부르며, 피연산자 값 중 하나라도 true가 있다면 ture를 반환&&and 연산자라 부르며, 피연산자 값 중 하나라도 false가 있따면 false를 반환!not 연산자라 부르며, 피연산자 값의 반대 결과를 반환(true면 false를 반환)  연산자 우선순위1. ()2. 단항연산자(--, ++, !)3. 산술 연산자(*, /, %, +, -)4. 비교 연산자(>, >=, )5. 논리 연산자(&&, ||)6. 대입 연산자(=, +=, -=, *=, /=, %=)  삼항 조건 연산자조건식의 결과에 따라 값이 달라지며, 연산을 위해서 피연산자 3개가 필요합니다.기본형)조건식 ? 코드1 : 코드2;조건식이 true라면 코드1을, false라면 코드2를 리..

[Javascript] 기초문법(3) 문자결합, 대입/증감/비교 연산자

연산자에는 덧셈, 뺄셈, 곱셈, 나눗셈, 나머지 이렇게 있는데요. 숫자를 가지고 기본적인 실습은 어떤 언어로든 한번씩 해보게 됩니다. 좀 더 들어가서 문자 결합 연산자부터 대입, 증감, 비교, 논리 삼항 조건 연산자까지 알아보겠습니다. 문자결합 연산자문자형 데이터 + 문자형 데이터 = 하나의 문자형 데이터 "hello" + " world" = "hello world"; 문자형 데이터 + 숫자형 데이터 = 하나의 문자형 데이터 "100" + 200 = "100200"; 숫자형과 문자형을 더하기 연산하면 하나의 문자형 데이터가 됩니다. 대입연산자대입연산자는 = 을 말합니다. 프로그래밍 언어에서는 대입연산자(=)는 같다라는 뜻이 아니라 우변의 데이터를 좌변에 대입한다라는 뜻입니다. 복합 대입 연산자는 산술 연..

[Javascript] 기초문법(1) 선언문, 주석, 내부스크립트 외부 분리

자바스크립트 선언문자바스크립트 코드를 쓸 영역을 선언하는 것입니다. 태그 종료까지가 JS코드가 들어갈 영역입니다. 또는 태그 안에 선언하면 되지만~ 대부분 태그 아네에 선언하기 때문에 태그 안에 선언해보겠습니다. 자바스크립트 주석 처리코드가 아닌, 코드에 대한 설명을 넣고 싶다면 주석 처리하면 됩니다. //한줄 주석 /* 여러줄 주석 */ 참고로 HTML 소스 주석은 이렇게 처리하면 됩니다. 내부 스크립트 외부로 분리하기html 내부에 작성된 자바스크립트는 외부로 분리해주어야 합니다. 이유는 소스찾기도 쉬워지고 손상될 염려도 적어지듯 프로젝트 관리를 원활하게 하기 위합니다. html 코드 안에 JS 코드가 적혀 있는 파일경로를 지정해주면 됩니다. 기본형은 이렇게 작성하면 됩니다. 1. html 내부에 s..