자바스크립트 9

[Javascript] 자바스크립트 제이쿼리 라이브러리 연동하기

제이쿼리란?제이쿼리는 모질라 사의 자바스크립트 개발자였던 존 레식(John Resig)이 자바스크립트를 이용해 만든 라이브러리 언어입니다. 라이브러리 언어란 자바스크립트로 만들어진 다양한 함수들의 집합을 가리킵니다.앞선 포스팅에서 함수는 일련의 코드를 함수 내에 정의했다가 필요할 때마다 호출하여 사용하는 것이라고 배웠습니다. 제이쿼리는 이런 다양한 함수들을 사용자들에게 제공함으로써 자바스크립트에서 사용할때 불편했던 점들을 간편하게 사용할 수 있도록 개선했습니다.​  제이쿼리에서 개선된 사항들1. 호환성 문제 해결자바스크립트의 문서 객체 모델(DOM)과 이벤트 객체는 호환성이 떨어진다는 단점이 있습니다. 예를 들어 인접 요소 선택자 중 다음 요소 선택자는 IE8 이하의 브라우저에서 문서객체를 선택했을 때와..

[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] 자주쓰는 함수 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보다 작기 때문에..

[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)해오는 과정을 보여줍니다. 오류체크와 디버..

[JavaScript] 자바스크립트란? 뭘까요?

HTML은 웹페이지상에서 문단, 제목, 표 이미지, 동영상 등을 정의하고 그 구조화 의미를 부여하는 마크업 언어입니다.CSS는 배경색, 폰트, 컨텐츠의 레이아웃등을 지정하며, HTML을 꾸며주는 스타일 규칙 언어입니다.JavaScript는 동적으로 컨텐츠를 변경하고, 멀티미디어를 다루고, 움직이는 이미지 등 웹 페이지를 다이나믹하게 만들어주는 프로그래밍언어, 스크립트 언어입니다. JavaScript는 HTML과 CSS가 결합되고 웹페이지 상에서 올려진 후, 브라우저의 JavaScript 엔진에 의해 실행됩니다. 이는 페이지의 구조와 스타일 등을 정해놓고, 자바스크립트가 실행된다는 의미입니다. 웹 개발 맥락에서 서버측과 클라이언트 측 코드에 대해 들어보셨을 겁니다. 클라이언트측 코드란 사용자의 컴퓨터에서 ..