프로그래밍 언어/JavaScript

    [JavaScript] JavaScript JSON Parsing ( new XMLHttpRequest() )
    프로그래밍 언어/JavaScript

    [JavaScript] JavaScript JSON Parsing ( new XMLHttpRequest() )

    예제코드 1 json의 경우 xml과는 다르게 단순하게 .(dot)을 통해서 접근이 가능하다. options의 경우처럼 여러개의 value가 있는 경우 배열의 인덱스를 통해서 접근이 가능하다. 예제코드 2 번호제목(title)저자(author)가격(price) book.json [ { "title":"자바의 정석", "author":"남궁성", "price":30000 }, { "title":"모던 자바스크립트 Deep Dive", "author":"이응모", "price":45000 }, { "title":"하루 10분 SQL", "author":"한상일", "price":24000 }, { "title":"지쳤거나 좋아하는 게 없거나", "author":"강한별", "price":13500 }, { ..

    프로그래밍 언어/JavaScript

    [JavaScript] JavaScript XML Parsing ( new XMLHttpRequest() )

    예제코드 XML문서 1 홍길동 서울시 2020/03/23 2 성춘향 남원시 2021/01/31 3 일지매 부산시 2019/07/11 let xhttp = new XMLHttpRequest(); 통신 하기 위해서는 객체가 필요하다 순서 함수 -> open -> send -> 함수 요청 readyState : 진행 상태 0 -> open 메소드를 수행하기 전 상태 1 -> loading 중..... 2 -> loading 완료 3 -> Server 처리중 4 -> Server 처리 완료 status : 상태 200 -> 성공(success) 403 -> 접근금지 404 -> 없음. 못찾는 경우. ex) test.txt가 없는 경우 500 -> 구문에러(문법 에러) responseText 다 읽었을때 txt를..

    프로그래밍 언어/JavaScript

    [JavaScript] 문자열을 XML파일로 변환하기 (String / XML parsing)

    참고 : https://developer.mozilla.org/ko/docs/Web/API/DOMParser

    프로그래밍 언어/JavaScript

    [JavaScript] getElements.ByTagName()를 사용한 nodeList 실습

    hello world i can do it Never change my mind Nodelist document.getElementsByTagName('p')를 통해서 모든 p태그를 배열로 반환을 받아서 배열의 길이만큼 반복하여 모든 p태그의 배경색을 변경해보는 예제이다. hello world i can do it Never change my mind Nodelist

    프로그래밍 언어/JavaScript

    [JavaScript] DOM이란? JavaScript로 html 태그 추가(JavaScript를 사용해 DOM에 새로운 노드 추가, childNodes)

    DOM? (Document Object Model) 각 tag를 접근하기 위한 object, 그 object를 접근하기 위한 함수들 Document = 문서 -> 문서안의 tag에 접근하도록 만들어진 Object Object = 객체 문서 객체 모델 DOM은 HTML, XML 문서의 프로그래밍 interface이다. DOM은 문서의 구조화된 표현(Structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕니다. DOM은 구조화된 nodes와 property와 method를 갖고 있는 object로 문서를 표현한다. getElementById() - id 속성을 가진 요소를 찾고, 이를..

    프로그래밍 언어/JavaScript

    [JavaScript]이벤트 리스너(event listener)

    key onkeydown 키룰 눌렀을 때 onkeypress 키를 누르고 있을 때 onkeyup 키를 누르고 뗐을 때 mouse onclick 객체를 클릭했을 때 onbdclick 더블클릭할 때 onmouseover 마우스가 객체위에 올라왔을 때 onmouseout 마우스가 객체 바깥으로 나갔을 때 onscroll 스크롤바를 조작할 때 그 외 onblur 객체가 focus를 잃었을 때 onchange 객체의 내용이 바뀌고 focus를 잃었을 때 onerror 에러가 발생했을 때 onfocus 객체에 focus가 되었을 때 onload 문서나 객체가 로딩되었을 때 onreset reset 버튼을 눌렀을 때 onresize 객체의 크기가 바뀌었을 때 onsubmit 폼이 전송될 때 [마이데일리 = 양유진 기..

    [JavaScript] 페이지 이동 ( location.replace(), location.href, <form action="">과 차이점 )
    프로그래밍 언어/JavaScript

    [JavaScript] 페이지 이동 ( location.replace(), location.href, <form action="">과 차이점 )

    index2로 이동하기 href replace() html에서는 tag 혹은 submit button을 이용해서 페이지를 이동시킬 수 있다. JasvaScript에서 페이지 이동은 location.replace(), location.href 가 있다. index2로 이동하기 hrefreplace(link)window.open(link) location.replace('link') 현재 페이지를 덮어 씌우기 때문에 replace를 사용해서 페이지를 넘어가게 되면 이전 페이지로 돌아갈 수 없다. location.href tag와 동일하게 페이지 이동을 하는 메서드 이다. replace()와 다르게 이전 페이지로 돌아갈 수 있다. window.open('link') 새창으로 열기 동일하다. vs JavaScr..

    [JavaScript] html태그 name과 id로 접근하기 ( document.getElementById('id') )
    프로그래밍 언어/JavaScript

    [JavaScript] html태그 name과 id로 접근하기 ( document.getElementById('id') )

    객체 접근 : document.getElementById('id') Hello JS CSS 적용 document.getElementById('id')를 통해서 하나의 객체 그 자체의 값을 넘겨받을 수 있다. 객체 자체를 받아와서 변수 obj에 값을 넣어주면 변수 obj를 통해서 객체의 값을 set 할 수 있다. let obj = document.getElementById('demo'); console.log(obj); 출력결과 Hello JS CSS Hello JS CSS 적용 적용버튼 누른 결과 func()에서 set 한 값들이 적용된다. name으로 접근 라면 타이머 원하는 시간을 선택해 주십시오(기본 시간 3분) 5분 3분 2분 1분 30초 time selected close 라면 타이머 원하는 시..

    [JavaScript] id, class, name 식별자 예제를 통해서 확인하기
    프로그래밍 언어/JavaScript

    [JavaScript] id, class, name 식별자 예제를 통해서 확인하기

    식별자 id 고유한 식별을 목적으로 하는 경우 사용 페이지에서 하나의 요소만 지정 가능 class 재사용을 목적으로 하는 경우 사용 여러 개의 요소에 지정 가능 name form 컨트롤 요소의 값(value)을 서버로 전송하기 위해 필요한 속성 여러 개의 요소에 지정 가능 id : javascript에서 접근 목적. 현 페이지에서 한 개만이 유효 == Javascript class : js에서도 접근이 가능하지만, 일단은 css에서 디자인적인 요소인 경우가 많다. == css 쪽에서 주로 사용, 현 페이지에서 다중으로 설정이 가능하다. name : 값을 전달하기 위한 목적을 가지고 있는 경우가 많다. 다중 설정이 가능하다. 즉, A페이지에서 B페이지로 이동하는 경우 값을 넘겨준다. id : 여러 개의 요..

    프로그래밍 언어/JavaScript

    [JavaScript] html 문서에 JavaScript를 포함할때 어떻게 포함하는게 효율적일까? (head,body,defer, async)

    blocked -> fetching.js -> executing.js -> parsing.html head blocked -> fetching.js -> executing.js -> parsing.html 1.parsing html 사용자가 html 파일을 다운로드하였을 때 브라우저가 1줄씩 parsing 하게 된다. 이때 css와 병합해서 dom요소로 변환하게 된다. 2.blocked html을 쭉 parsing 하다가 script 태그가 보이면 main.js를 다운로드해야 되네?라고 이해하고 html parsing을 멈추게 된다. 3.fetching.js script 태그에 해당되는 main.js 파일을 서버에서 다운로드 받게 된다. 4.executing.js 다운로드가 완료되면 main.js파일을 ..

    티스토리툴바