[JavaScript] jQuery

1. jQuery - 요소들을 선택하는 강력한 방법을 제공하고, 선택된 요소들을 효율적으로 제어할 수 있게 해주는 자바 스크립트 라이브러리 - 자바에서 JVM 느낌 - 예전에는 스크립트가 자바스크립트 외에도 다양하게 많았기 때문에 브라우저마다 코드가 달랐다. - 그때 나온 게 jQuery인데 여기에 코드를 쓰면 jQuery가 각 브라우저에 맞게 알아서 변환시켜준다. - 지금은 자바스크립트가 표준이 되었기 때문에 안 쓰는 추세이지만 여러 개의 태그 객체를 가져와서 for문을 돌려 하나하나 스타일을 줄 때와 같은 불편함을 해결해 주는 데는 jQuery만큼 좋은 게 없다. - jQuery를 사용하면 순수 JavaScript에 비해 속도가 느려진다. - 하지만 간결한 문법으로 인해 개발 속도 증가와 처리비용 감..

[JavaScript] DOM(문서 객체 모델), document 객체

1. DOM(Document Object Model) - 문서 객체 모델(DOM : Document Object Model) - XML이나 HTML 문서에 접근하기 위한 인터페이스, 문서 내의 모든 요소를 정의하고 각각의 요소에 접근하는 방법을 제공 - 자바 스크립트에서 HTML을 접근하기 위해서는 DOM을 사용 2. document 객체 - 웹 페이지 그 자체를 의미 - 웹 페이지에 존재하는 HTML 요소에 접근하고자 할 때에는 반드시 document 객체부터 시작 3. document 메소드 HTML 요소 선택용 - getElementById("아이디명") : 해당 아이디를 가진 요소를 선택해서 객체로 가져오는 함수 - getElementsByTagName("태그명") : 해당 태그인 요소들을 선택해..

[JavaScript] form 태그 접근, location 객체, history 객체

1. form 태그 접근 - name으로 객체를 찾을 때(간단히) -> id명으로도 역시나 찾을 수 있다.(document.getElementById()) let frm = document.joinForm; let inputTag = frm.in1; intputTag.value; --> 입력값 - Form 태그 안에 입력값에 대해서 유효성 검사 목적으로 접근 2. location 객체 - 현재 브라우저에 표시된 HTML 문서의 주소를 얻거나, 브라우저의 새 문서를 불러올 때 사용 가능 - location 객체의 프로퍼티와 함수를 이용하면 현재 문서의 URL 주소를 다양하게 해석하여 처리할 수 있음 location.href - 현재 페이지 URL 정보가 담겨있는 프로퍼티 - 대입을 통해 새로운 문자열을 넣..

[JavaScript] window 객체

1. window 객체 - 웹 브라우저의 창(window)을 나타내는 객체로, 대부분의 웹 브라우저에서 지원 - 자바스크립트의 모든 객체, 전역함수, 전역변수들을 자동으로 window객체의 프로퍼티가 되고 window 객체의 메소드는 전역함수, window 객체의 프로퍼티는 전역변수가 됨 --> windows는 생략 가능 2. window.onload - on : ~할 때, onload(어떤 문서가 로딩될 때) window.onload = function() { 문서가 로딩된 이후에 호출할 문장 } - 스크립트 언어는 위에서 아래로 해석되기 때문에 DOM에서 HTML 요소를 추출할 때 body보다 위에 있다면 해석 순서에서 문제가 생길 수 있음 - 이 경우 자바 스클비트 문서를 밑으로 옮겨야 하는데, h..

[JavaScript] 객체와 상속, 프로토타입

1. 객체 - 추상적인 개념이 실체화 된 것 - 프로퍼티(자바에서 필드)들로 이루어진 하나의 집합 2. 객체 선언 리터널을 이용한 객체 생성 - 장점 : 객체를 빠르고 간단하게 만들 수 있음 - 단점 : 비슷한 형태의 객체가 또 필요하다면 오히려 불편함(틀이 따로 없기 때문에) const 객체명 = { 프로퍼티1명:프로퍼티1값, 프로퍼티1명:프로퍼티1값, ..., 메소드명: function() { }, ... } - 객체 안에 있는 메소드 안에서 프로퍼티를 쓰기 위해서는 명시적으로 this를 써줘야 한다. 왜냐하면 프로퍼티는 변수가 아니기 때문에 this를 안 쓰면 프로퍼티와 이름이 같은 위에 선언된 변수를 쓰게 된다. 그렇기에 this를 명시적으로 적어줘야 한다. 생성자를 이용한 객체 생성 - 자바 스..

[JavaScript] 자바스크립트를 이용한 태그 객체 및 onclick

1. 태그 객체 - document.getElementById("아이디명") 을 이용해서 아이디명을 가진 태그를 객체로 가져오는 것이다. - 이것을 이용해 태그 안에 있는 내용을 바꾸거나 스타일을 바꿀수 있다. - input 태그에서 사용자가 입력한 내용을 받기 위해서는 input태그객체.value를 사용하면 된다. 내용 바꾸기 : 태그객체.innerHTML = "바꿀문자열"; 배경색 바꾸기 : 태그객체.style.background = "값"; --> 다른 CSS도 가능 input 태그에서 사용자가 작성한 값 : input태그객체.value 2. onclick - 태그 혹은 태그에서 버튼 타입을 사용 할 때 onclick을 사용하면 버튼을 눌렀을 때 일어나는 행동들을 정해준다. onclick = "함수..

[JavaScript] 함수(function)

1. 함수(function) - 자바 스크립트에서는 함수도 하나의 값 - 따라서 함수를 변수에 대입할 수 있음 - 다른 함수 내에 중첩되어 정의할 수 있음 함수 선언 방법 function 함수명(매개변수1, 매개변수2, ...) { 실행할 문장; return 리턴값; } 1 2 3 4 5 6 7 function f() { for (let i = 0; i

[JavaScript] 배열(Array), 빠른 for문

1. 배열(Array) - 배열 요소의 타입이 고정되어 있지 않으므로, 같은 배열에 있는 배열 요소끼리의 타입이 서로 달라도 됨 - 배열 요소의 인덱스가 연속적이지 않아도 되기 때문에 특정 배열의 방이 비어있을 수 있음, 비어있다면 그 방에는 undefined가 있음 - 자바 스크립트에서 배열은 Array 타입의 객체로 다뤄짐 2. 배열의 선언 및 길이 배열의 선언 let 배열명 = [값1, 값2, ...]; let 배열명 = new Array(값1, 값2, ...); let 배열명 = Array(값1, 값2, ...); 배열의 길이 배열명.length - console.dir() : 객체가 어떤 식으로 구성되어 있는지 보여주는 명령어 3. 배열의 요소 추가 및 삭제 배열의 요소 추가 배열명[인덱스] =..

[JavaScript] 대화상자(dialog), 제어문(조건문, 반복문), 간단한 예제

- window. 은 생략 가능 1. alert() - 사용자에게 간단한 메세지를 보여주고, 그에 대한 사용자에 확인을 기다림 - 확인을 누르면 undefined를 반환 2. confirm() - 사용자에게 간단한 메세지를 보여주고, 확인을 누르면 true, 취소를 누르면 false를 return함 - while(true)라 무한반복이기에 확인을 눌러 true를 반환시켜줘야만 탈출 할 수 있다. - 그래야 페이지를 볼 수 있다. 3. prompt() - 사용자에게 간단한 메세지를 보여주고, 사용자가 입력한 문자열 값을 return함 4. 제어문(조건문, 반복문) 조건문 - if if문 조건식 자리에 boolean 타입이 아닌 변수 하나만 쓰는 경우 해당 변수의 값이 존재한다면 true, 아니라면 fals..

[JavaScript] 자료형, 형변환, 연산자, NaN

1. 자료형(값의 타입) - 자바 스크립트에서는 변수의 타입은 따로 없고 값의 타입만 있다. 숫자(Number) - 정수와 실수를 구분하지 않음 문자열(String) - 큰 따옴표와 작은 따옴표의 차이가 없음 불린(Boolean) - true / false 객체(Object) - 자바와 다르게 클래스 없이 객체 만들 수 있음 - 여러 변수 혹은 메소드를 선언한 집합의 주소를 가지는 타입 - 필드 접근 시 .(마침표)을 사용 undefined - 타입이 정해지지 않은 것을 의미하는 값 - let num; --> 출력했을 때 undefined가 나옴 null - 주소값이 정해지지 않은 것을 의미하는 값 - let num = null; --> null로 변수를 초기화한 경우 - ` `(백쿼트) 사이에 엔터를 ..