Frontend43 [JavaScript] 문서 객체 모델 이해하기 (document편-1) 웹 브라우저는 생성한 문서 객체 모델을 통해 HTML 문서의 구성 요소를 객체로 인식할 수 있다. 자바스크립트는 웹 브라우저의 문서 객체 모델을 조작해 웹 브라우저에 표시되는 HTML 문서 구조를 변경하거나 새로운 구성 요소를 추가하는 등의 작업을 할 수 있다. 1) 문서 객체 모델이 생성되는 방식 1. 문서 객체 모델은 웹 브라우저가 HTML 문서를 해석 2. 해석한 HTML 문서 구조를 객체로 변환하는 방식으로 생성 3. 생성한 문서 객체 모델을 웹 브라우저에 표시 => 웹 브라우저에 표시되는 HTML 문서는 내부적으로 문서 객체 모델을 해석해서 보이게 된다. 문서 객체 모델은 tree 구조를 가지며, DOM 트리라고 불린다. header link headerlink 위의 코드를 DOM 트리로 변환하.. 2023. 7. 29. [JavaScript] 브라우저 객체 모델 사용하기 (Window편) 브라우저 객체 모델(BOM) : 자바스크립트 언어 사양에 포함되지 않고 웹 브라우저에서 제공하는 객체 종류 1. window 객체 (최상위) 2. document 객체 (웹 문서관련 기능) 3. location 객체 (현재 URL 정보) 4. history 객체 (방문 기록 정보) 5. navigator 객체 (웹 브라우저 정보) 6. screen 객체 ( 방문자의 화면정보) 웹 브라우저와 관련 있는 것들을 제어하려면 브라우저 객체 모델은 필수로 공부해야하고 그만큼 양이 많음. 프로젝트 해보면서 최대한 많이 접해보길! window 객체의 속성과 메소드 window 객체 속성 open()으로 새 창 제어하기 window.open(경로, 이름, 속성); open()은 기본으로 읾이 같은 창은 1개만 열기 때.. 2023. 7. 29. [JavaScript] 표준 내장 객체 사용하기 개발 편의를 위해 수많은 객체가 미리 만들어져 있고, 기본으로 내장되어 있어서 스코프의 위치를 따지지 않고 모든 영역에서 공통으로 사용할 수 있다. (= 표준 내장 객체, standard built-in object) String객체, Array 객체, Date 객체, Math 객체가 있따. String객체 String객체의 주요 속성과 메서드 const pw = "124"; if(pw.length < 4){ console.log("비밀번호는 최소 4자리 이상 입력해 주세요."); } const email = "test!naver.com"; if(email.includes("@") === false){ console.log("올바른 이메일 형식이 아닙니다."); } const email = "test!n.. 2023. 7. 29. [JavaScript] 자바스크립트 객체 다루기 객체란 도대체 뭘까? 자료형의 관점에서 보면, 키(key)와 값(value)으로 구성된 속성의 집합. 자바스크립트에서 제공하는 기본자료형과는 다르게 여러 개의 값을 가질 수 있고, 다른 자료형의 값도 가질 수 있다. 중괄호{} 를 이용한 리터럴 방식으로 객체를 생성했다고 표현한다. 더보기 const person = {}; // 이것도 객체이다. 위와 같이 속성이 하나도 없는 것을 빈 객체라고 한다. 속성은 키와 값으로 구성됨. key : value 형태로 속성이 구성됨. 객체는 아래와 같이 다양한 자료형의 데이터를 값으로 가질 수 있다. const person = { name:["Hong", "Gildong"], age:20, isAdult:true }; 아니면 아래와 같이 객체 안에 또 다른 객체와 함.. 2023. 7. 26. [JavaScript] 자바스크립트 함수 다루기 함수란? (function) : 어떤 목적을 가지고 작성한 코드를 모아 둔 블록문. 함수로 만들면 함수를 호출해 함수 내부에 모아둔 여러 줄의 코드를 한 번에 실행할 수 있다! ☞ 재사용하기가 매우 편리함. 유지 보수가 편리함 함수를 정의한다. : function 키워드, 식별자, 소괄호와 함께 묶으면 함수가 생성 function gugudan(){ // 함수 시작 for(let i = 1; i { // code }; gugu(); //으로 실행 함수 기능 확장하기 매개변수와 인수 매개변수 : 함수를 정의할 때, 외부에서 전달하는 데이터를 함수에서 받을 수 있도록 정의하는 변수 인수 : 정의한 함수를 호출할 때 소괄호 안에 전달하고 싶은 데이터 즉! 함수 호출 시 전달하는 데이터(인수)는 함수의 매개변수.. 2023. 7. 25. [JavaScript] 조건문, 반복문 다루기 ※ 조건문 if문 if 뒤에 오는 소괄호 안의 조건식이 참으로 평가되면 중괄호 안의 코드를 실행하는 조건문 조건식은 무조건 참/거짓으로 평가된다. if(조건식){ // 조건식이 참이면 블록문 실행 } else문 if문의 조건식이 거짓일 때 실행되는 블록문 정의 if문 없이 단독으로 사용할 수 없으며 하나의 if문에는 하나의 else문만 사용할 수 있다. if(조건식){ // 조건식이 참이면 블록문 실행 }else{ // 조건식이 거짓이면 블록문 실행 } else if문 if문에 조건을 추가하고 싶을 때 사용. else if문의 개수에는 제한이 없다. 항상 if문 다음에 사용하고 else문보다는 먼저 사용해야 함. if(조건식1){ // 조건식1이 참이면 블록문 실행 }else if(조건식2){ // 조건.. 2023. 7. 25. 이전 1 2 3 4 5 ··· 8 다음
