seoyoung.dev

1. json 데이터 내에서, value 가 숫자인 key 값들 출력 더보기 var data = { "debug": "on", "window": { "title": "Sample Konfabulator Widget", "name": "main_window", "width": 500, "height": 500 }, "image": { "src": "Images/Sun.png", "name": "sun1", "hOffset": 250, "vOffset": 250, "alignment": "center" }, "text": { "data": "Click Here", "size": 36, "style": "bold", "name": "text1", "hOffset": 250, "vOffs..

자바스크립트 시리즈는 '생활코딩-클라이언트 과목의 '웹브라우저 자바스크립트' 강의'를 참고로 공부하고 기록하기 위한 용도입니다. * Event - Event target : 지정한 이벤트가 발생하는 대상을 말하며, 위 코드의 경우에는 버튼 태그의 객체입니다. - Event type : 이벤트의 종류를 의미하며, 위 경우 'click'이 이벤트 타입입니다. + 이벤트 타입의 종류 - Event Handler : 이벤트가 발생했을 때 수행될 코드를 말하며, 위에서는 'alert(window.open)'을 가리킵니다. 대부분 function 이벤트 핸들러 를 차지합니다. -> 이벤트를 동작시키기 위해서는, 이벤트의 대상에 이벤트 핸들러를 등록해줘야 하는데, 등록하는 방법에는 Inline방식 , Property..

자바스크립트 시리즈는 '생활코딩-클라이언트 과목의 '웹브라우저 자바스크립트' 강의'를 참고로 공부하고 기록하기 위한 용도입니다. * innerHTML : 특정 element의 내부 HTML 내용을 가져오거나, 특정 요소의 HTML 내용을 변경합니다. HTML CSS -> 의 id를 통해 의 안의 html 코드를 변경해줘서, set 버튼 클릭시, html 코드가 변경됩니다. Naver -> change Link 버튼을 누르면, 나타나는 링크가 바뀌게 됩니다. * outerHTML HTML CSS function set(){ ..

자바스크립트 시리즈는 '생활코딩-클라이언트 과목의 '웹브라우저 자바스크립트' 강의'를 참고로 공부하고 기록하기 위한 용도입니다. * Node 객체 : HTML 코드의 모든 구성 요소들은 Node 객체의 상속을 받고, Node 객체는 firstChild,parentNode,nextSibling,previousSibling 과 같은 API 를 갖고 있다. 이러한 property 를 통해, 각 노드를 기준으로 형제, 부모, 자식 같은 관계를 알아낼 수 있다. Node.childNodes - 자식노드들을 유사배열에 담아서 리턴 Node.firstChild - 첫번째 자식 노드 ( 두 태그 사이에 줄바꿈 이나 여백도 child 로 포함된다. ) Node.lastChild - 마지막 자식 노드 Node.nextSi..

자바스크립트 시리즈는 '생활코딩-클라이언트 과목의 '웹브라우저 자바스크립트' 강의'를 참고로 공부하고 기록하기 위한 용도입니다. ( DOM 은 HTML 만을 제어하기 위한 모델이 아니므로, Element 와 HTMLElement 라는 객체가 따로 구성된다. ) * 식별자 API html css JAVASCRIPT - Element.tagName console.log(document.getElementById('active').tagName); //tagName 은 변경 불가, Readonly - Element.id var Active = document.getElementById('active'); console.log(Active.id); //active console창 출력..

자바스크립트 시리즈는 '생활코딩-클라이언트 과목의 '웹브라우저 자바스크립트' 강의'를 참고로 공부하고 기록하기 위한 용도입니다. -> DOM (document object model) 은 웹페이지를 자바스크립트로 제어하기 위한 객체모델을 의미한다. window 객체의 document 프로퍼티를 통해 사용할 수 있으며, 앞서 익힌 window 객체가 '창'을 의미한다면, document 객체는 윈도우에 로드된 '문서'를 의미한다. -> 문서를 자바스크립트로 제어하려면, 제어의 대상에 해당되는 객체를 제일 먼저 찾아야 한다. * getElementsByTagName() html css JAVASCRIPT html css JAVASCRIPT * getElementsByClassName() 과 getElemen..

자바스크립트 시리즈는 '생활코딩-클라이언트 과목의 '웹브라우저 자바스크립트' 강의'를 참고로 공부하고 기록하기 위한 용도입니다. * Location 객체 - 현재 브라우저의 URL 에 대한 정보를 지니고 있으며, window 객체의 property 로, window.location 형태로 접근 가능하다. - Location 객체를 이용해서, 윈도우의 문서 URL 을 변경할 수 있고, 문서의 위치와 관련한 정보들을 얻을 수 있다. console.log(window.location.href); //현재 페이지의 url return console.log(window.location.hostname); //웹 호스트의 domain name을 return console.log(window.location.path..

자바스크립트 시리즈는 '생활코딩-클라이언트 과목의 '웹브라우저 자바스크립트' 강의'를 참고로 공부하고 기록하기 위한 용도입니다. * Object model (객체 모델) : 웹 브라우저의 구성요소들은 객체화 하여 제공되고, 자바스크립트로 이 객체를 제어해서, 웹 브라우저를 제어할 수 있게 된다. : 브라우저에서 각 태그들마다 미리 객체를 만들어놓고, 해당 객체를 대상으로 메소드를 호출하거나 속성을 이용하거나 해서 객체를 활용할 수 있게 된다. var imgs=document.getElementByTagName('img'); //이미지 태그들의 목록을 가져와서 변수에 저장->여러개의 태그들 값 : 배열에 저장 imgs[0]; //html 태그에서 img 첫번째 태그에 해당되는 객체 imgs[0].style..