JavaScript 11

[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] 조건문(제어문) IF문, 중첩IF문

제어문은 프로그램의 흐름을 제어할 수 있도록 도와주는 문장을 말합니다. 제어문에는 조건의 만족 여부에 따라 코드나 값이 달라지게 됩니다.조건문과 선택문, 반복문이 있는데 한가지씩 알아보겠습니다 조건문조건문은 조건식의 값이 참인지, 거짓인지에 따라 JavaScript 코드를 제어합니다.조건문의 종류에는 if 문, else문 그리고 else if 문이 있습니다. 1.if문if문은 조건식을 만족할 경우에만 코드를 실행합니다.true 또는 false를 무조건 반환하며 기본형과 간단한 예를 살펴보겠습니다. if (조건식) {   코드; }기본형은 이렇게 쓰이고요. 이해를 위해 예제를 하나 보겠습니다.var num=10;if (num    document.write("hello");}num이 500보다 작기 때문에..

[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] 기초문법(2) 변수선언, 자료형, 변수선언시 주의사항

변수란?데이터(값)를 저장할 수 있는 메모리 공간을 뜻합니다. 변수에는 오직 한 개의 데이터만 저장됩니다. 새로운 데이터가 들어오면 기존의 데이터는 사라집니다. 변수 선언var 키워드를 변수명 앞에 붙입니다. var 변수명; 또는 var 변수명 = 값; 이런식으로 변수를 선언합니다. 변수에 저장할 수 있는 자료형문자형(String), 숫자형(Number), 논리형(Boolean) 그리고 빈 데이터(Undefined)가 있습니다. 1. 문자형 var 변수 = "문자"; 큰 따옴표 안에 숫자 등 어떤것이 들어가도 문자형으로 인식됩니다. 단, html 태그를 포함하여 출력하면 태그로 인식됩니다. 2. 숫자형 var 변수 = 숫자; 문자형 데이터를 숫자형으로 변경하고 싶다면 Number("문자형 숫자");를 사..

[VScode] 비주얼 스튜디오 코드 한글 버전으로 전환

처음 비주얼 스튜디오 코드(VS code)를 설치하면 기본값이 영어로 셋팅되어 있습니다.한글버전으로 바꾸는 방법에 대해 알아보겠습니다. 1.VS Code를 실행시킨 후 뷰 바에서 [확장] 버튼을 눌러주세요.  2.확장 버튼 클릭 후 검색창에 'korean'이라고 적은 후 아래에 Microsoft가 제작자인 Korean Language Pack for Visual Studio Code를 선택해주세요. [설치] 버튼을 눌러 설치하고 우측 하단에 재시작 버튼이 나오면 클릭해 VS Code를 재실행해주세요. 그럼 한글로 버전으로 변경완료되어 있을거에요. 3. 언어를 영어에서 한글로, 한글에서 영어로 자유자재로 변경하는 방법을 알아보겠습니다. 상단 메뉴 바에서 보기 > 명령 팔레트를 클릭해주세요.  4.검색창이 ..

[Javascript]비주얼스튜디오코드 확장 기능 이용해 HTML소스 크롬으로 띄우기

1.먼저 실습해볼 파일을 저장할 폴더(전 C: 에 workspace_JS라는 폴더를 생성했습니다)를 만들어주세요. 먼저 비주얼스튜디오코드 화면에서 뷰 바 - 탐색기를 클릭해주세요. 사이드 바에 탐색기가 나타나면 [폴더 열기] 버튼을 눌러 생성한 workspace_JS 폴더를 찾아 선택해주세요. (탐색기에 폴더를 드래그 앤 드랍해도 됩니다)  2.탐색기에서 불러온 폴더에 마우스 포인터를 올려놓고 새파일 생성 버튼을 클릭해 새 HTML 파일을 생성합니다. 파일 이름은 index.html로 하겠습니다.   3.index.html을 열어주세요. HTML 기본 양식을 작성할 때는 비주얼 스튜디오 코드에 포함된 이멧(Emmet) 기능을 이용하면 편합니다. 이멧 기능은 HTML, CSS를 약식으로 표기하여 작성할 수..

[Javascript] 자바스크립트 개발환경 세팅 (비쥬얼스튜디오코드 설치)

개발에 필요한 크롬과 비쥬얼 스튜디오 코드(visual studio code)를 설치하는 방법을 알아보겠습니다.먼저 크롬 브라우저가 필요합니다. 크롬 설치 및 개발자도구 확인1. http://goo.gl/bcamzC 사이트로 이동한 후 [Chome 다운로드] 버튼을 클릭해 설치해주세요.2. 메뉴 펼침 버튼을 누르거나 F12를 눌러 개발자 도구를 열어주세요.  개발자 도구를 보면 Elements, Console, Source 등의 패널이 있습니다.ElementsHTML(Element), 요소에 적용된 스타일(CSS)를 검사할 수 있습니다.Console자바스크립트 오류 체크는 물론 디버깅을 할 수 있습니다.Source브라우저가 자바스크립트 소스를 파싱(parsing)해오는 과정을 보여줍니다. 오류체크와 디버..