코딩하는 김딸기

DOM(문서 객체 모델)document:웹 브라우저에서 실행되는 프런트엔드 웹 애플리케이션에서 사용하는 내장 객체입니다.HTML 문서 전체를 지칭하며, JavaScript를 통해 이 문서의 구조를 조작할 수 있습니다.DOM 노드:document를 통해 HTML 문서가 파싱되면서 생성되는 다양한 객체들입니다.JavaScript 코드로 DOM 노드에 접근해 여러 작업을 수행할 수 있습니다.DOM 노드 종류요소 노드 (Element Node):HTML 태그를 나타냅니다. 예를 들어, , 등이 있습니다.속성 노드 (Attribute Node):태그의 속성을 나타냅니다. 예를 들어, 에서 src와 alt가 속성 노드입니다.텍스트 노드 (Text Node):HTML 태그 내에 작성된 내용을 나타냅니다. 예를 들어..

브라우저 내장 객체브라우저 내장 객체는 브라우저에서 제공하는 자바스크립트 내장 객체로, 브라우저에서 실행되는 프런트 웹 애플리케이션에서만 사용됩니다. 이러한 객체들은 브라우저와의 상호작용을 용이하게 해 주며, 개발자는 이를 통해 웹 애플리케이션을 더욱 동적이고 유연하게 만들 수 있습니다.주요 브라우저 내장 객체window브라우저 창을 지칭하는 객체로, 모든 자바스크립트 코드의 최상위 객체입니다.브라우저에서 실행되는 모든 애플리케이션에서 접근할 수 있으며, 글로벌 변수나 함수를 저장합니다.예를 들어, alert(), console 등은 모두 window 객체의 함수입니다.document브라우저에 출력되는 HTML 문서를 지칭하는 객체입니다.웹 페이지의 요소를 선택하고 조작하는 데 사용되며, DOM(Docu..

객체/OOP객체(Object)는 함수와 데이터의 집합으로, 프로그래밍에서 중요한 개념 중 하나입니다. **객체지향 프로그래밍(OOP)**은 객체를 선언하고 그 객체를 통해 코드를 작성하는 기법을 의미하며, 자바스크립트와 같은 여러 언어에서 활용됩니다. 객체 생성 방식 (JavaScript 기준)자바스크립트에서 객체를 생성하는 방법은 크게 세 가지로 나눌 수 있습니다:객체 리터럴:객체를 간단하게 정의할 수 있는 방법입니다.javascript코드 복사const car = { make: 'Toyota', model: 'Camry', year: 2021, start: function() { console.log('Starting the car...'); } };함수 생성자:new 키워드를 사용하여 객체를 생성합..

이벤트 프로그래밍이벤트 프로그래밍은 애플리케이션이 특정 이벤트가 발생했을 때 그에 대한 반응을 처리하는 방식입니다.이벤트 종류브라우저 이벤트: 브라우저 자체에서 발생하는 이벤트입니다.사용자 이벤트: 사용자가 키보드나 마우스를 통해 발생시키는 이벤트로, 세 가지로 나눌 수 있습니다:마우스 이벤트: 클릭, 더블 클릭, 마우스 이동 등키 이벤트: 키보드 입력 관련 이벤트HTML FORM 관련 이벤트: 폼 제출 등이벤트 프로그래밍 구조이벤트 프로그래밍에서 중요한 요소는 이벤트 소스, 이벤트 핸들러, 그리고 이 둘을 연결하는 리스너입니다.이벤트 소스: 이벤트가 발생하는 객체 (예: 버튼)이벤트 핸들러: 이벤트가 발생했을 때 실행할 코드리스너: 이벤트 소스와 이벤트 핸들러를 연결하는 방법이벤트 등록 방법1) add..

함수와호이스팅호이스팅(Hoisting)은 자바스크립트에서 나중에 선언된 변수나 함수를 코드 맨 위로 끌어올려 먼저 사용할 수 있게 해주는 기능입니다. 변수 호이스팅: 변수를 코드 아래에서 선언해도, 자바스크립트가 그 변수를 코드 맨 위로 끌어올려 오류 없이 사용할 수 있게 해주는 기능입니다. var로 선언한 변수만 호이스팅되며, 값이 할당되기 전까지는 undefined 상태입니다.         => let, const 로 선언된 변수는 호이스팅이 지원되지않습니다//var hoisting test......................//아래에 선언된 변수의 선언부분만(값 할당은 빼고) 위로 올린다.console.log(`step1, data1 = ${data1}`)//step1, data1 = unde..

function printResult(array) {//✨array를 매개변수로 전달받음    let resultArray = ''  //❔문제1) 함수내에서 선언해야하는 이유    array.forEach(( value,index) => { //✨전달받은 결과 배열의 각 요소(인덱스, 값)  //❔문제2)value,index 순서        //array.forEach((index.value)=>{}) //resultArray에 각 배열의 요소마다 입력받는 array값 추가하기        resultArray += `${value}`//✨최종출력배열에 li형식으로 할당    })    resultNode.innerHTML=resultArray=//❔문제3)resultNode.innerHTML(res..

body>    english word    input type="text" id="word">    button id="addBtn" onclick="add()">addbutton>    br>    button id="mapBtn" onclick="map()">mapbutton>    button id="filterBtn" onclick="filter()">filterbutton>    button id ="sortBtn" onclick="sort()">sortbutton>    br>    ul id="result">ul>    script src="main.js">script>body> 변수 설정"use strict"let inputNode=document.getElementById('word')..

body>    div id="login-form">    input value="33" type="text" placeholder="name?">    button>log inbutton>    div>    script src="app.js">script>    body>1) HTML 코드 작성하기1. 사용자가 이름을 작성할 수 있도록 input 태그를 작성한다.안에 텍스트를 넣을 거니까, type="text"해주고, 안에 미리 작성할 말은 placeholder 안에 써주기2. 그리고 Log In 버튼을 만든다.3. div태그로 위의 것들 묶어주고, id="login-form"을 해준다.->둘을 묶은 다음, 저 id를 통해서 자바스크립트에서 내가 원하는 태그들을 쉽게 찾기 위해서 묶어주는 것 2)in..