- ECMA 6 버전 사용
- 대소문자를 엄격하게 가림
- error가 발생하면 프로그램 중단됨, 디버깅이 필요함
- on이벤트 종류 = "javaScript 문법"
on이벤트 종류에서는 대소문자 가리지 않음, "" 안에는 문법을 가림
■ html의 element를 찾는 방법
- document.getELementById("아이디");
요소(Node)는 무조건 한개
- document.getElementsByClassName("클래스이름");
요소가 여러개(NodeList)
- document.getELementsByTagName("태그이름")
요소가 여러개(NodeList)
- querySelector("selector 종류")
결과 요소(node) 한개 찾음
- querySelectorAll("selector 종류")
요소가 여러개(NodeList)
- 기본적으로 head 아래 넣지만, 필요하다면 body 안에 넣을 수 있다.
- 또한, **element를 찾기 전에 반드시 body가 정의**되어 있어야 한다.
- 속성이 있는 script 내부는 실행되지 않는다.
- html안에서 js 함수를 가져올 때 함수뒤에 절대 괄호를 붙이지 않는다.
- const: 상수, 변경 금지
변수
- js에서는 값을 저장하기 전에 타입을 알 수 없기 때문에 값 저장전에 사용하면 undefined가 뜸
- js에는 호이스팅이라는 개념이있는데, 문서가 로딩되기 전(DOM)에 var, let, 함수들을 미리 메모리에 올리는 과정을 이야기한다.
- var 키워드를 생략하면 전역변수가 된다.
- 호이스팅의 개념 때문에 함수가 같아도 에러가나지 않는다. 이때는 나중에 선언된(덮어쓴) 함수가 호출된다. 따라서, 함수 이름을 보편적인 것으로 지으면 좋지 않다..
- if("10" == 10) 이면 true가 나옴.
- location.href = "naver.com"
ex) alert(location.href) --> 해당 도메인으로 바로 이동
배열
- const cars = new Array(5,2); 5개의 배열 방, 2로 채워짐
- js 배열은 여러 타입들을 하나의 배열에 저장할 수 있다.
jQuery
https://jqueryui.com/toggle/
- $(selector).속성
- $(selector).함수()
- $ = jQuery
- jQuery는 $(this).val() , $(this).text(), $(this).html
/ js는 this.value, this.innerText = 값, this.innerHTML = 값
$가 없으면 jQuery 문법을 사용할 수 없음
- $().on({이벤트종류:function}(){}, 이벤트 종류:function...)
- 동적으로 새로 생성된 element에 이벤트 등록
$(부모element).on(event종류, "이벤트 대상", function(){})
- on()함수는 정적 또는 동적 요소에 이벤트 적용할 수 있다.
