[JavaScript] toggle() 활용 예제 코드
·
JavaScript
12345678910111213141516171819202122232425262728<head>    ...    <style>        .like--heart {            font-size: 100px;            color: gray;    &..
[JavaScript] BOM : document 객체 ★
·
JavaScript
document 객체  - 웹 문서에서 태그를 만나면 만들어지는 객체  - HTML 문서 정보를 가지고 있음  노드 접근하기#  태그 선택자 이용1234567document.querySelector("태그명") // 또는 // 컬렉션 타입 반환// 인덱스 연산자 []를 이용해서 각 노드에 접근 가능document.getElementsByTagName("태그명"); cs" data-ke-type="html">HTML 삽입미리보기할 수 없는 소스 #  id 선택자 이용12345document.querySelector("#아이디명") // 또는 do..
[JavaScript] HTML 렌더링과 JavaScript 실행
·
JavaScript
HTML 렌더링 순서1. 서버에서 HTML 문서를 받아옴2. HTML 문서를 파싱하여 DOM 트리를 생성함3. CSS 파일을 로드/파싱하여 CSSOM 트리를 생성함4. DOM 트리와 CSSOM 트리를 결합하여 렌더트리를 생성함5. 렌더트리를 기반으로 레이아웃을 계산하고, 실제로 화면에 표시될 요소를 결정함6. 브라우저에서 화면에 표시함 JavaScript 실행 순서1. HTML 파싱 중 태그를 만나면, 해당 스크립트를 다운로드함2. 스크립트를 파싱하여 실행 가능한 코드를 생성함    - 이때, 오류가 있으면 실행되지 않음3. 생성된 코드를 실행함4. 다음 태그를 만날 때까지 파싱과 실행을 반복함 #  유의사항  - 스크립트 코드가 HTML 파싱 과정에서 실행되는 순서에 따라 예기치 못한 결과가 발생할..
[JavaScript] 이벤트
·
JavaScript
이벤트 등록123456789// 요소 선택let 변수명 = document.querySelector("요소"); 변수명.addEventListener("이벤트종류", function() {    // 이벤트 발생 시 실행 코드});   // 또는변수명.addEventListener("이벤트종류", 함수명); // 함수명은 괄호 없이cs" data-ke-type="html">HTML 삽입미리보기할 수 없는 소스 123456// click 이벤트는 bu..
[JavaScript] 내장 함수
·
JavaScript
#  데이터 타입을 확인하는 연산자  - typeof 변수 #  데이터 타입 변환  - Number(변수)      : 숫자형 타입으로 변환  - parseInt(변수)      : 정수형 타입으로 변환  - parseFloat(변수)      : 실수형 타입으로 변환  - String(변수)      : 문자형 타입으로 변환  - Boolean(변수)      : 논리형 타입으로 변환      · 입력된 값 : true      · null : false #  true/false 판별  - isNaN("문자열")      : 숫자가 아닌 문자가 포함되어 있으면 true      · isNaN : is Not a Number      ex) isNaN("5-3") : true #  문자형 데이터를 코드 ..

티스토리툴바