자바스크립트
- 자료형
- primitive: 다른 변수에 값을 할당하거나 함수 인자를 넘길 때 값을 복사해 전달
boolean, number, string, null, undefined
- object 자료형(참조 자료형): 값을 복사해 전달하는 것이 아닌 메모리 주소를 복사. 즉 같은 객체를 참조할 뿐
Object 자료형(Reference data type)
: primitive 자료형을 제외한 모든 자료형. 배열, 함수, 클래스 등 모두 object에 포함된다.
속성과 메소드가 존재한다. 객체에 저장된 값이 함수일 때 이를 method라고 부른다.
var cat = { name: '나비', age: 1, meow: function () { return 'meow'; } }
배열
: 숫자형과 문자열과 마찬가지로 일반적인 스크립트와 동일
[ ]나 new Array()를 이용해 생성한다.var arr1 = [1, 2, 3, 4] var arr2 = new Array(1, 2, 3, "a", "b");
- 변수명.length: 배열의 길이
- 변수명.push(추가할 값): 맨 뒤에 값 추가
- 변수명.pop(): 맨 뒤의 값 제거
- 변수명.unshift(추가할 값): 맨 앞에 값 추가
- 변수명.shift(): 맨 앞의 값 제거
- 변수명.indexOf(찾을 값)
: 배열의 인덱스의 순서는 0부터 시작한다.
console.log(arr1.indexOf("a")) ;
딕셔너리
key-값(value)형태로 저장된다. index라는 개념이 없어서 key값으로 가져와야 한다.
var me = { name: 'max', birth: '1212', }; me['gender'] = 'F'; console.log(me); //2가지 방법 console.log(me["name"]); console.log(me.name);
자바스크립트 표준 객체
- 자바스크립트가 기본적으로 가지고 있는 객체들.
- 프로그래밍을 하는데 기본적으로 필요한 도구들
- 예: String, Number, Array, Date, Math 등등
Date 객체
: 자바스크립트에서 매 순간 바뀌는 시간과 날짜에 관한 정보를 얻기 위해 사용하는 객체
//date 초기화 new Date ( ) new Date(milliseconds); //1970년 1월 1일 0시부터 밀리초만큼 지난 날짜 new Date(년,월,일,시,분,초,밀리초) // month는 0(1월)~11(12월)의 숫자이다. new Date(16,5,25) // 1916년 6월 25일 00:00:00 new Date(2016,5,14,15,40); // 2016-6-14, 15:40:00
Date 객체 - 함수
Date.now() ////1970년 1월 1일 0시 0분 0초부터 지난 밀리 초var date = new Date(); date.getFullYear(); //년도를 가져온다. 2022 date.getYear(); // 2000년대와 1900년대 구분 위해 앞에 1이 있다. => 2022년은 122로 나타난다. date.getDate(); // Date객체의 일자 정보를 가져온다. date.getDay(); // 요일: 일-월-화-수-목-금-토에서 인덱스 몇인지, 0부터 시작한다. date.getTime(); // 1970-1-1일부터 지금까지의 밀리세컨드 date.getHour(); // 객체의 시간을 가져온다. date.getMinutes(); //객체의 분 정보 date.getSeconds(); //객체의 초 정보
Math 객체
: 수학에서 자주 사용하는 상수와 함수들을 미리 구현해놓은 자바스크립트 표준 내장 객체.
- 웹 브라우저마다 다른 결과를 얻을 가능성이 있기에 정확한 결과를 얻어야할 때는 사용하지 않는 것이 좋다.
Math.PI //파이값 Math.E // 자연로그 Math.min() // 전달받은 값 중 최소값 반환 - 아무것도 입력되지 않으면 Infinity 반환 // 비교할 수 없는 값, 예를 들어 문자가 들어있다면 NaN 반환 Math.max() //최대값 반환 Math.random() // 무작위 수 반환 -> 숫자는 0~1사이의 소수점 수가 나오게 된다. --- Math.round() // 소수점 첫번째 자리에서 반올림 => 정수 // 소수점 둘째자리에서 반올림 math.round(숫자 * 100)/100을 많이 사용 //그러나 오류가 발생해서 가장 작은 수인 입실론을 더해준다. //math.round((num + Number.EPSILON) * 100) / 100 --- Math.floor() // 내림 => 정수 Math.ceil() // 올림 => 정수 --- console.log(Math.random() * (max - min) + min); => 최대 최소값 사이의 랜덤한 숫자를 소수점과 같이 내보냄
Javascript DOM
Document Object Model: 문서 객체 모델
- XML, HTML 문서에 접근하기 위한 일종의 인터페이스로 문서 내의 모든 요소를 정의하고 각각의 요소에 접근하는 방법을 제공한다.
- 새로운 HTML 요소나 속성을 추가할 수 있습니다.
- 존재하는 HTML 요소나 속성을 제거할 수 있습니다.
- HTML 문서의 모든 HTML 요소를 변경할 수 있습니다.
- HTML 문서의 모든 HTML 속성을 변경할 수 있습니다.
- HTML 문서의 모든 CSS 스타일을 변경할 수 있습니다.
- HTML 문서에 새로운 HTML 이벤트를 추가할 수 있습니다.
- HTML 문서의 모든 HTML 이벤트에 반응할 수 있습니다.
Document
: 웹페이지에 존재하는 html 요소에 접근하여 행동을 하고자 할 때 사용하는 객체
document.documentElement; //문서의 루트요소(최상단 요소)를 나타내는 엘리먼트 반환. //html 문서는 html 요소 반환 document.head; //현재 문서의 <head>요소 document.body; //현재 문서의 <body>요소 document.title; //현재 문서의 <title> document.URL; //현재 문서의 URL document.domain; //현재 문서의 도메인
Document 요소 선택
: id는 단수이기 때문에 getelement이다. s가 붙지 않음에 주의해야 한다.
document.getElementByID("id") document.getElementsByClassName("class") document.getElementsByTagName("tag") document.getElementsByName("name") document.querySelector("") //querySelector는 가장 첫번째 하나만 가져온다. document.querySelectorAll("")
예시) console.log(document.getElementById("input1")); console.log(document.getElementsByClassName("css1")); //클래스를 가진 것이 1개라도 리스트 형태로 가져온다. console.log(document.getElementsByClassName("css1")[0]); console.log(document.getElementsByTagName("img")); //태그가 몇개든 상관없이 리스트 형태로 가져온다. --- console.log(document.querySelector("#input1")); console.log(document.querySelector(".css1")); console.log(document.querySelectorAll(".css1")); console.log(document.querySelectorAll(".css1")[0]);
Document 요소 다루기
document.createElement(html요소); // html요소 생성 -> document.createElement("button"); document.write(텍스트); // 출력 명령문 -> document.write("hello world!"); [].appendChild(); //선택한 element의 자식 element 뒤의 마지막에 추가 //한번 추가할 때 1개의 자식만 추가할 수 있다. [].append.(); //한번 추가할 때 여러개를 추가할 수 있다. [].removeChild(); //선택한 element에 자식 element를 삭제한다. [].remove(); //현재 element를 삭제한다. [].innerText = "내용"; //텍스트를 추가하고 싶을 때 [].innerHTML = "" //html요소를 추가하고 싶을 때 //html요소를 인식한다. //p.innerHTML = "<strong>hello!<strong>"; [].className = 클래스 이름 ; //클래스를 추가하고 싶을 때예시 var ul = document.querySelector("ul"); var li = document.createElement("li") --- ul.appendChild(li); ul.apppend(li); --- var li2 = document.querySelector("li"); ul.removeChild(li2);
- HTML collection: 변화가 생겼을 때 변화를 즉각적으로 반영
getElementsByClassName,getElementsByTagName을 통해 얻을 수 있다. - NodeList: 대부분 HTML 문서 내용이 변했을 때 처음의 내용이 그대로. 변화를 가져오지 않는다.
querySelectorAll가 반환하는 객체
📝