코딩도전기/Dom5 부모창_자식창 코드리뷰 부모창과 자식창 간의 데이터를 전송할 수 있는 코드 자식창 부모창에서 받아온 값 : 부모창으로 보낼 값 : 더보기 우선 부모창에서 자식창을 열어줄 수 있도록 자식창을 만들었습니다. 자식창에는 부모창에서 받아온 값을 넣어주는 텍스트박스와 부모창에 값을 입력해 보낼 수 있는 텍스트박스와 버튼을 만들어주었습니다. 버튼에는 onclick했을 때 이벤트가 발생할 수 있도록 sendVal함수를 넣어주었습니다. sendVal함수에 부모창으로 보낼 값을 담을 수 있는 val변수를 선언해주고 opener로 부모창에 있는 fromChild를 아이디로 가진 텍스트 박스에 val변수의 값이 담길 수 있도록 해주었습니다. 그리고 부모창에 있는 plus함수로 10과 20을 연산할 수 있도록 함께 보내주었습니다. 창열기 창닫기 자.. 2023. 2. 10. CODO Day8_Java Script_DOM Alert 경고창 새 창과 달리 tool bar가 존재하지 않으며 기능이 한정적임 alert confirm prompt Timing Browser에서는 특정 시간마다 어떤 일을 수행 할 수 있습니다. 특정 시간 후에 어떤 일을 수행 할 수도 있습니다. 그 시간의 단위는 1/1000 초(milliseconds) 입니다. 0 증가 정지 3초 후 경고 이 기능을 이용해 남은시간 측정이나 특정시간 후에 페이지를 이동하는 기능을 수행할 수 있다. css를 이용하여 시각적인 애니메이션 효과도 줄 수 있다. 5초 후에 다운로드가 시작됩니다. Cookie Web 사용흔적을 담기 위해 만들어졌다. Html간에 데이터 공유가 이루어 지지 않아 Cookie를 활용함 java Script에서 제어 가능하고, 사용자 PC에 저.. 2023. 2. 10. CODO Day7_Java Script_DOM Event 객체와 This 이벤트가 발생할 경우 이벤트 객체가 반환 이벤트가 발생한 당사자 요소인 this(이벤트를 당한 태그) 이 두 객체를 활용하면 복잡한 내용도 쉽게 해결할 수 있다. button 1 button 2 click 1 click 2 Event Listener 특정 요소에 특정 이벤트를 감시하는 기능을 추가 잘 사용하지 않음(주로 속성으로 사용하기 때문) 속성에 추가한 이벤트 에서 on만 빠진 형태 FOCUS NULL mouse position : Browser Object Model 브라우저(윈도우)를 모델로 봄 HTML과 Java Script는 Browser 안에서만 실행이 된다. BOM은 DOM보다 한 단계 더 큰 개념이다. Window Object Window는 브라우저 “창”을 .. 2023. 2. 9. DOM_TEST 버튼을 누르면 글자 색상이 '빨->주->노->초->파->남->보' 순서로 변경되는 코드짜기 버튼을 누르면 글자 색상이 변경된다 빨->주->노->초->파->남->보 보라색에서 다시 클릭하면 빨강으로 되돌아 온다 글자 색상이 변경됩니다 색상변경 //색상을 차례대로 변경할 수 있도록 배열로 담아주었고 var colorList = ['red','orange','yellow','green','blue','navy','purple']; //버튼 클릭 수를 담을 수 있는 변수 i를 선언했습니다. var i = 0; //'btn'을 아이디로 가진 버튼태그를 가져와 addEventListener로 버튼을 클릭할 경우 다음 기능을 실행하도록 설정해줍니다. document.getElementById('btn').addEve.. 2023. 2. 9. CODO Day6_Java Script_Dom(속성&이벤트) Document Object Model Java Script에서는 문서 내 객체를 가져와 속성을 다루는 역할을 함 *document 내 Tag를 가져와 opacity와 color 속성을 변경하는 과정 DOM으로 가져오기 객체(Object)의 속성(Attribute)을 다루기 위해서는 우선 객체를 가져와야 한다. HI TAG 1 HI TAG 2 HI TAG 3 HI TAG 4 HI TAG 5 H2 Tag 1 H2 Tag 2 H2 Tag 3 H2 Tag 4 H3 Tag Element 내의 속성 활용 하기 가져온 Element(요소)에서 Attribute(속성)을 다룰 수 있다. 다룰 수 있는 속성은 사용자 속성과 기본속성으로 나눌 수 있다. 링크 클릭 링크 클릭 링크 클릭 2023. 2. 8. 이전 1 다음
