안녕하세요. 이번 포스팅에서는 제이쿼리(jquery) 선택자 중 직접 선택자에 대해서 알아보도록 하겠습니다. 선택자는 HTML 요소를 선택하여 가져옵니다. jquery에서 선택자는 CSS와 마찬가지로 가져온 요소의 스타일을 변경하는 데 사용됩니다. 다만 차이점은 CSS로 스타일을 적용하는 경우는 사용자의 동작에 의해 동적으로 스타일을 변경하는 게 불가능합니다. 하지만 jquery의 선택자를 이용하면 HTML의 요소들을 사용자의 동작에 맞게 동적으로 스타일을 변경하는 것이 가능합니다. jquery 선택자도 CSS 선택자와 마찬가지로 다양한 종류의 선택자를 제공하고 있습니다. 직접선택자를 시작으로 하나씩 알아보도록 하겠습니다. 1. 전체 선택자 전체 선택자는 HTML 요소 전체를 선택하는 선택자(Select..

안녕하세요. 이번 포스팅에서는 자바스크립트(JavaScript)에서 객체 생성자 함수를 선언하고 객체를 생성하는 방법에 대해서 알아보도록 하겠습니다. 자바스크립트에서 객체를 생성하기 위해서는 먼저 자바스크립트 엔진에 내장된 객체 생성자 함수(Object Constructor Function)를 통해 먼저 선언을 해야 합니다. ▼ 객체 생성자 함수 선언은 function 키워드를 사용하여 나타냅니다. function 함수명(매개변수){} 와 같은 형태로 사용합니다. 함수명은 소문자로 시작해도 무방하지만, 대문자로 시작하는 게 좋습니다. 함수 정의문에는 1개의 속성과 1개의 함수가 등록되어 있습니다. 속성은 this.name = 속성값; 형태로 사용되며 함수는 this.showName = function()..

안녕하세요. 이번 포스팅에서는 자바 스크립트(JavaScript)에서 window 객체의 내장 함수들을 이용하여 다양한 형태의 팝업창을 띄우는 방법에 대해서 알아보겠습니다. 브라우저에 내장되어있는 객체를 '브라우저 객체'라고 부릅니다. window 객체는 브라우저의 객체의 최상위 객체로 다양한 함수들을 제공하고 있습니다. 이번 포스팅에서 알아볼 브라우저에 팝업창을 띄우는 기능이 내장된 함수들도 방금 말한 window 객체에 내장되어있는 함수들입니다. 그럼 하나씩 알아보도록 하겠습니다. 1. window.open() 함수 open() 함수를 사용하여 특정 URL 페이지를 띄울 수 있습니다. window.open("URL", "팝업이름", "팝업 옵션"); ▼ 첫 번째 인자로는 팝업창을 열었을 때 연결될 U..

안녕하세요. 이번 포스팅에서는 자바스크립트(JavaScript)에서 일정 시간마다 코드를 실행할 수 있는 setInterval과 setTimoutout 함수에 대해서 알아보도록 하겠습니다. 1. setInterval / clearInterval setInterval() 함수는 일정한 시간 간격으로 코드를 반복 실행하는 함수입니다. var 참조변수 = setInterval(function() {코드}, 시간간격(ms) clearInterval(참조변수) ▼ setInterval() 함수로 넘기는 인자 정보는 2개입니다. 첫 번째 인자는 일정한 시간 간격으로 반복 실행하고자 하는 코드정보입니다. 두 번째는 시간 정보로 ms 단위로 설정합니다. 즉 1초 간격으로 코드를 실행하고 싶으면 1000으로 지정하면 됩..

안녕하세요. 이번 포스팅에서는 자바스크립트(JavaScript)에서 문자열 객체인 String 객체에 대해 정리해보겠습니다. 1. 문자열 객체 생성 및 초기화 var 참조변수 = new String(문자열 데이터) var 참조변수 = 문자열 데이터 ▼ 문자열 객체를 선언하는 방식은 두 가지가 있습니다. 첫 번째는 new 연산자를 통해 String 객체를 생성하면서 생성자 정보로 문자열 데이터를 넘기는 방식이 있습니다. 두 번째 방식은 new 연산자를 사용하지 않고 사용하는 방식으로 선언한 참조 변수에 문자열 데이터를 입력하여 객체를 생성하는 방식이 있습니다. 아래는 실제로 두 가지 방식을 사용하여 문자열 객체를 생성한 모습입니다. 2. 문자열 함수 - charAt() 자바스크립트(JavaScript)에서..

안녕하세요. 이번 포스팅에서는 지난 포스팅 배열 객체를 사용하는 방법에 이어서 배열 객체에 내장된 다양한 함수에 대해서 알아보도록 하겠습니다. 자바 스크립트 배열 객체에는 다양한 종류의 내장함수가 있습니다. 각각의 종류와 설명은 아래 표를 참조해주세요. 함수 설명 pop() 배열의 맨 마지막 요소를 반환 및 제거합니다 push(new data) 배열의 맨 마지막 인덱스에 새로운 데이터를 추가합니다 shift() 배열의 맨 앞에있는 요소를 반환 및 제거합니다. unshift(new data) 배열의 맨 앞에 인덱스에 새로운 데이터를 추가합니다. join(연결할 문자) 배열 객체의 요소들을 인자로 넘긴 문자로 연결한 새로운 데이터를 반환합니다. reverse() 배열 객체의 데이터의 순서를 바꾼 새로운 배열..

안녕하세요. 이번 포스팅에서는 자바 스크립트에서 배열 객체를 생성하고 값을 초기화하는 방식에 대해서 알아보겠습니다. 변수는 데이터 한 개를 저장하는 저장소입니다. 데이터가 5개면 변수는 5개가 필요한 셈이죠. 반면에 배열의 경우는 하나의 저장소에 여러 개의 데이터를 저장하는 것이 가능합니다. 자바스크립트에서 배열을 생성하고 값을 초기화하는 다양한 방식에 대해 알아보고 배열의 데이터값에 접근하는 방법에 대해서도 알아보도록 하겠습니다. 1. 배열 생성 방법 #1 var 참조 변수 이름 = new Array(); 참조변수[0] = 값1; 참조변수 [1] = 값2 ... 참조변수[n] = 값n ▼ 첫 번째 방식은 new 키워드를 통해 생성하는 방법입니다. 각 index 배열 요소에 접근하여 값을 초기화하기 위해..

이번 포스팅에서는 jquery 라이브러리를 HTML에서 연동하는 방법에 대해 알아보겠습니다. jquery 라이브러리를 연동하는 방식에는 다운로드 방식과 네트워크 전송 방식 두 가지가 있습니다. 1. 다운로드 방식 다운로드 방식은 jquery 라이브러리 파일을 다운로드 받아 HTML에서 해당 파일을 불러와서 연동하는 방식입니다. https://cdnjs.com/ jquery 라이브러리 파일을 받을 수 있는 위 사이트로 이동해줍니다. 해당 사이트에서 jquery를 검색하고 우측에 Copy를 선택하면 jquery 라이브러리 파일이 있는 url이 복사가 됩니다. 해당 url로 이동하여 Ctrl + S를 눌러 HTML 파일이 있는 폴더에 복사를 해줍니다. 다음으로 HTML로 이동하여 태그 안에 6번 라인과 같이 ..

1. 왜 CRA를 사용하는가 ? React Code의 경우 최신 자바스크립트 코드로 작성하는 것이 일반적입니다. 여기서 최신 자바스크립트란 ES6 기반의 코드를 의미하는데 이러한 ES6 기반의 자바 스크립트를 모든 브라우저에서 지원을 해주고 있지 않습니다. 따라서 정식으로는 웹팩이라는 녀석을 설치하고 설정을 따로 해줘야 합니다. 하지만 고맙게도(?) 페이스북에서 초보자를 위해 웹팩을 따로 설치하지 않고도 사용 할 수 있도록 CRA라는 툴을 제공하고 있습니다. CRA는 ES6 자바 스크립트를 브라우저가 이해 할 수 있는 ES5 코드로 변경을 해주는 고마운 툴입니다. 2. ES6 Style의 자바 스크립트 소스 1_TestFunction = function() { console.log("Test Code")..

1. Visual Studio Code 시작하기JavaScript를 시작하기에 앞서 먼저 편지기인 Visual Studio Code를 설치하도록 하겠습니다. https://code.visualstudio.com/ 위 Red Marking 된 부분의 Download for Windows를 Click하여 Setup 파일을 다운로드 합니다.설치과정은 머 없으니 생략하도록 하겠습니다. 설치가 끝나고 아래와 같이 Visual Studio Code가 정상적으로 실행되는 것을 확인하시면 됩니다. 2. Visual Studio Code 알아보기 Visual Studio Code에서 작업 할 폴더를 불러와야 합니다. 위 View Bar 에서 맨 위에 있는 것을 클릭 한 뒤 Open Folder를 Click하여 작업 할 ..