본문 바로가기

Dev. Front-End/JavaScirpt

 (12)
[jQuery] 제이쿼리 문법 ($ 의미) ● jQuery (제이쿼리) 문법 : 제이쿼리를 사용하면 아주 편하게 HTMl 요소를 선택하고, 쉽게 특정 동작들을 설정할 수 있습니다. 사용 예시 : $(선택자).동작함수(); 달러($) 기호는 제이쿼리를 의미하면서 제이쿼리에 접근할 수 있는 식별자 입니다. 괄호안에 "선택자"를 이용하여 원하는 HTML 요소를 선택하고 동작 함수를 정의하여 선택된 요소에 원하는 동작을 설정합니다. ▶ $() 함수 $() 함수는 선택된 HTML 요소를 제이쿼리에서 이용할 수 있는 형태로 생성해줍니다. $() 함수의 인수로는 HTML 태그 이름뿐만 아니라, CSS 선택자를 전달하여 특정 HTML 요소를 선택할 수 있습니다. 이러한 $()함수를 통해 생성된 요소를 제이쿼리 객체(jQuery Object)라고 합니다. 제이쿼..
[JavaScript] DOM이란 무엇이고, 어떻게 사용되나? ● DOM이란? : DOM(Document Object Model) 은 BOM중 하나입니다. BOM(Browse Object Model)이라는 브라우저 객체 모델의 최상위 객체는 window라는 객체가 있고, DOM은 이 window객체의 또하나의 객체이기도 합니다. DOM은 문서 객체 모델인데, 여기서 문서 객체란 또는 같은 html문서의 모든 태그들을 Javascript가 이용할 수 있는 객체로 만들면 이것을 문서객체라고 합니다. Model은 영어단어로는 모형,주형이라는 의미가 있고 모듈이라는 의미도 있습니다. 문서객체를 인식하는 방식이라고 해석 할 수 있습니다. 즉, DOM은 웹 브라우저가 HTML페이지를 인식하는 방식으로써, tree라는 자료구조로 되어있습니다. ​ ● Node(노드)이란? : t..
[Javascript] JSON객체와 메소드 (문자열 변환) ● JSON 객체 : ECMAScript 5 부터는 정식으로 JSON객체를 지원합니다. JSON은 자바스크립트 객체의 형태를 갖는 문자열을 말합니다. ​ ● JSON객체의 메소드​ * JSON.stringfy() : 자바스크립트 객체를 JSON문자열로 변환합니다. * JSON.parse() : JSON문자열을 자바스크립트 객체로 변환합니다. 위 코드를 실행하면 객체의 속성과 값을 쉽게 확인할수 있습니다. object라는 객체를 생성하고 이 객체를 stringify메소드를 통해서 string형태로 변환시켜서 출력됩니다. parse()메소드는 JSON문자열 자바스크립트 객체로 바꾸는 역할을 수행합니다. 즉, 객체를 생성하고 JSON문자열을 변경하고 다시 객체로 변경합니다. JSON.stringify()메소드..
[Javascript] Number객체와 String객체 / 메소드(Method) ● Number 객체 : 자바스크립트에서 가장 단순한 객체로 숫자를 표현할 때 사용합니다. ​ ​ ● Number객체의 메소드 * toExponential() : 숫자를 지수 표시로 나타낸 문자열을 리턴합니다. * toFixed() : 숫자를 고정 소수점 표시로 나타낸 문자열을 리턴합니다. * toPrecision() : 숫자를 길이에 따라 지수 표시 또는 고정 소수점 표시로 나타낸 문자열을 리턴합니다. 이번에는 Number객체를 생성해보았습니다. 각각의 타입을 출력해보았습니다. 위 소스는 toFixed()메소드를 호출해서 예제를 만들어보았습니다. 사진처럼 파라미터로 1을 넣어주면 소수점 1번째자리까지 출력되고, 4를 파라미터로 넣어주면 4번쨰 자리까지 출력됩니다. ● String 객체 : 문자열을 표현..
[Javascript] for of 반복문 / for in 반복문 개념 및 차이점 (예제) ● for in 반복문 : 앞의 반복 변수에 '요소'가 아니라 '인덱스'가 들어갑니다. array배열에 1,2,3,4의 값이 들어있습니다. for in반복문을 보면 array배열값을 in키워드 뒤에 적어주고, var i로 임의로 변수를 만들어줍니다. 해당 인덱스가 0부터 3까지 console.log 출력 괄호안에 인덱스i가 들어가고 array[]배열안에 [i]를 적어줘서 해당 인덱스 값을 불러옵니다. ● for of 반복문 : ES6(ECMAScript 6)에서는 for of 반복문이 추가되어 내부의 요소를 바로 넣어 활용할 수 있게 되었습니다. for in 반복문과 달리 of키워드 뒤에 배열을 직접 적어주고 element변수로 값을 출력해줍니다. 여기서 ` `는 ES6에서 추가된 사항입니다.
[Javascript] 숫자와 문자열 자료형 변환(Number) 첫번째는 '1+2'자체를 문자열 자료형으로 인식하기에 그대로 출력됩니다. 두번째는 자료형의 덧셈이 실행되서 3이 출력됩니다. 나머지 3개는 모두 문자열 '12'가 출력되는데, 숫자자료형과 문자열 자료형이 더해지면 숫자 자료형을 문자열 자료형으로 자동 변환됩니다. 첫번째를 제외하고 모두 숫자자료형으로 인식해서 2가 출력됩니다. 자료형이 자동으로 변환되는것 이외에는 강제로 자료형을 변환할수도있습니다. 아래 예제에서 설명해드리겠습니다. input은 1이라는 문자열이 저장되었고, Number이라는 함수를 사용해서 파라미터로 input을 넣으면 강제로 숫자로 변환되어 numbe..
[Javascript] prompt(), confirm() 함수 ● prompt() : 문자열 자료형을 입력할때 사용하는 함수입니다. 사용자에게 입력을 요구하는 입력창이 나타나고, 입력창에 값을 입력하고 확인을 누르면 prompt()함수는 입력한 문자열을 input변수에 저장합니다. ● confirm() : 불 자료형을 입력받을때 사용하는 함수입니다. 사용자에게 확인을 요구하는 창이 나타납니다. 사용자가 [확인]을 클릭하면 true를 return하고, [취소]를 클릭하면 false를 return합니다.
[Javascript] 배열 (Array) / length, push ​ ● 배열 : 여러개의 변수를 한꺼번에 선언해 다룰수있는 자료형 입니다. 자바스크립트에서는 문자열, 숫자, 불(bool), 객체, 함수, undefined의 총 여섯가지 자료형이 있습니다. 배열은 객체 자료형중 하나입니다. 기본적으로 위 소스처럼 배열을 선언합니다. array변수에 저장해주었습니다. 배열에는 문자열, 숫자, 불(bool), 객체, 함수, undefined의 총 여섯가지 자료형을 넣을수 있습니다. 배열을 선언하고, 배열 기호 안에 들어간 숫자를 인덱스(index)라고 합니다. 인덱스는 특별히 별도로 지정해주지않는한 위처럼 소스를 입력하면, 0부터 시작됩니다. 123의 값은 인덱스 0 에 저장되고, 32의 값은 인덱스 1에 저장되고, 102의 값은 인덱스2 ........ 에 저장됩니다. ..

티스토리툴바