반응형 JavaScript5 [웹프로그래밍 실습] Dom을 이용한 할 일 입력 요구 버튼 만들기 문제 다음은 문제의 초기 상태이다. 텍스트를 입력하고 '추가' 버튼을 클릭하면 아래와 같이 1,2,3 숫자번호가 있는 리스트가 생성이 된다. 텍스트 옆에는 '하위 할 일 추가' 버튼이 생성이 되며 버튼을 누를 경우 prompt가 생성이 되고 입력된 prompt 값이 텍스트의 순서 있는('A, B, C') 하위 리스트로 들어오게 된다. 만약 텍스트의 하위 리스트 요소를 지우려면 빨간색 네모칸에 있는 텍스트만을 클릭해야 삭제가 된다. 2023. 10. 12. [웹프로그래밍 실습] Dom을 이용한 할 일 입력 요구 버튼 만들기 정답 예시 정답 HTML DOCTYPE html> 그룹실습2-DOM 2023 추가 JS document.getElementById("insertButton").addEventListener("click", addList); function addList(){ var para = document.createElement("li"); var text = document.getElementById("insert1").value; var node = document.createElement("span"); var button1 = document.createElement("button"); button1.textContent = "하위 할 일 추가"; node.textContent = text; para.append.. 2023. 10. 12. [JavaScript] HTML - DOM, getElementById, getElementsByTagName, getElementsByClassName HTML DOM( Document Object Model) 웹 페이지를 로드할 때 브라우저는 DOM(Document Object Model) 모델을 만든다. HTML DOM의 경우 객체의 트리형식으로 만들어져 있다. 위의 그림을 차근차근 설명하면 처음에 문서에서 시작하여 시작 요소 하위 요소에는 와 가 존재하며 하위에는 이 이것의 하위 텍스트는 "Mytitle"이 존재한다. 마찬가지로 의 하위에는 와 이 하위요소로 있으며 의 경우 속성이 "href"가 된다. DOM 사용하는 이유? 객체 모델(DOM)을 통해 JavaScript의 필요한 기능을 얻을 수 있다. 자바스크립트 페이지 안에서 HTML 요소를 바꿀 수 있다. 자바스크립트 페이지 안에서 HTML 속성을 바꿀 수 있다. 자바스크립트 페이지 안에서 C.. 2023. 10. 5. [JavaScript] 자바스크립트 문법(JavaScript statements),주석, 변수(let, var) 자바스크립트 프로그램(JavaScript Programs) ● 컴퓨터 프로그램은 컴퓨터에 의해 "실행"되는 "명령"의 목록이다. ● 프로그래밍 언어에서 이러한 지침은 '문법(statements)'라고 한다. ● 자바스크립트 프로그래밍은 프로그래밍 문법이다. ● HTML안에서 JavaScript 프로그램이 웹브라우저에서 실행된다. 자바스크립트 문장(JavaScript Statements) ● 값(Values), 연산자(Operators), 표현식 키워드(Expresssions Keywords) 및 주석(Comments)으로 구성되어있다. ● 자바스크립트 프로그램에는 많은 JavaScript 문이 존재한다. ● 명령문은 실행된 순서대로 하나씩 실행된다. ● 자바스크립트 프로그램은 JavaScript Code.. 2023. 9. 20. 이전 1 2 다음 728x90 반응형
