코딩도전기85 부모창_자식창 코드리뷰 부모창과 자식창 간의 데이터를 전송할 수 있는 코드 자식창 부모창에서 받아온 값 : 부모창으로 보낼 값 : 더보기 우선 부모창에서 자식창을 열어줄 수 있도록 자식창을 만들었습니다. 자식창에는 부모창에서 받아온 값을 넣어주는 텍스트박스와 부모창에 값을 입력해 보낼 수 있는 텍스트박스와 버튼을 만들어주었습니다. 버튼에는 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. CODO DAY6_Java Script(배열&차원&객체) 배열 Shallow copy var a = [1,2,3,4,5]; var b = a; 두 개의 배열 관계는 복사라기 보다는 링크되어 연결된 상태임 (값이 한개가 아니라 여러개로 각각 저장하면 메모리를 많이 차지하여 따로 저장하지 않고 링크시킴) 각 배열의 값을 개별적으로 변경하여도 같은 배열을 사용하기 때문에 변경한 값이 모든 배열에 반영됨 var a = [1,2,3,4,5]; var b = a; console.log('a : ' + a.valueOf()); //a : 1,2,3,4,5 console.log('b : ' + b.valueOf()); //b : 1,2,3,4,5 a[0] = 50; b[4] = 100; console.log('a : ' + a.valueOf()); //a : 50,2,3,4.. 2023. 2. 8. Java Script_TEST(메소드 만들기) 메소드 만들기 2023. 2. 7. CODO DAY5_Java Script(Switch문&반복문&제어문&함수&배열) Switch(Case By Case) 특정 case마다 특정 내용을 실행 switch는 if처럼 복잡한 조건을 다루지 못하는 한계가 있음(단순한 조건) 중요한 내용을 다룰 경우 사용 속도가 빠르지만 메모리를 많이 차지함 var item = '콜라'; switch(item){ //코드는 코드블록에서 시작하면 끝까지 실행해야됨 case "콜라": console.log(item + '가 나왔습니다'); break; //break가 없다면 끝까지 내려가게 됨 case "생수": console.log(item + '가 나왔습니다'); break; //break는 진행중인 내용을 코드블록 밖으로 탈출시켜줌 case "오렌지주스": console.log(item + '가 나왔습니다'); break; default: .. 2023. 2. 7. CODO DAY4_Java Script(연산&IF문) Java script : HTML에 동적 기능을 구현 Java Script의 특징 HTML 문서 내의 객체를 핸들링(삭제 변경 등)할 수 있다. HTML 문서 내의 css요소를 핸들링할 수 있다. 서버와 통신하여 얻은 respons를 동적으로 표현해준다.(Ajax) 자바스크립트 객체 형태의 데이터를 서버와 주고 받을 수 있다.(Json) 자바스크립트를 이용한 라이브러리들이 계속적으로 나타나고 있다.(node.js, jQuery, Electron...) Java Script 적용방법 1. html문서 내에 따로 설정(웹이 시작하자마자 필요한 요소가 아니면 body하위에서 실행해야 빠르게 돌아감) 2. js파일 외부에서 불러옴 변수란? 무언가를 담는 컵 변수 이름 : 컵을 구분하거나 가져올 수 있도록 붙이는.. 2023. 2. 6. 이전 1 ··· 6 7 8 9 10 다음
