[DAY43] browser_object 모델

NA YE SOM·2023년 9월 4일


-> 메시지를 받아서 쓰면 덮어쓰기 되어서 없어지니까 안내메시지로 남겨두기
























-> 이 코드가 인식이 안되는 상황



-> 본문을 싹 읽은다음에 script를 동작한다

★★★load(타입 이벤트) : script를 상단에 배치할 수 있는 방법

*표준 이벤트

*고전이벤트 : 더 많이 사용됨
(더 많은 브라우저에서 동작한다)
-> 기능이 적지만 이벤트를 한번에 하나만 할 물릴 수 있는 단점이 있음
(2개 이상 물리고 싶으면 하나의 이벤트에 function 2개 호출하면 됨)

-> 고전이벤트

구성요소 먼저 만들고 나중에 구성요소 읽어내는 순으로 동작했음
-> 이제는 load event통해서 조정 가능(어디에 script만들든지 상관없음)





-> 창을 열어주고 열린창으로 데이터 보내주고


function : 어디에 만들던 hoisting 처리됨(선언부를 위로)

opener : 현재 창을 열어준 부모창을 의미함




-> function 동작함

부모창 -> 자식창 : 변수에 담아서 부름
자식창 -> 부모창 : opener 로 호출


-> 광고창 띄우는 것 어렵지 않음
-> 오늘은 더 이상 이창을 열지 않기(서버프로그램에서 사용되는 쿠키를 사용해아함)

XMLHttpRequest(통신객체) : 사용법 익히기 -> ajax 통신 기술 구현하는 객체가 됨

client가 서버측으로 데이터 보내주는 걸 : 요청 (requst)



-> 특정 서비스가 왜 갑자기 안되는지 이해가능

  • 비동기 : 요청결과(응답)을 기다리지 않음
    -> ABCD 4개(내가 보내고 싶은것) 기다리지 않고 그냥 보냄
    -> 비동기가 빠름

태그이름이 정해진게 없음 : 마음대로 만들 수 있음


-> F2(이름 바꾸기)

내용을 태그로 만드는 방법, 속성으로 만드는 방법

-> xml 준비


-> 서버가 보내준 text(xml)
-> 서버측 코드 : book1과 book2로 대신함

서버가 13번 파일로 보내줄 것
(반만 배우는 것)

1. 새페이지를 열어주는것(처리가 끝나면 새HTML보여주는방식)

2. 기존 페이지를 재활용(새로고침)해서 여는것 (나중에 배움)

-> 기존 HTML에 DATA만 보내서 나타내는 방식이있음(AJAX)

->문법은 외우지 X

최종적으로 비동기 처리만 남김

1. GET 방식 : 주소창으로 요청

2. POST 방식 : 본문으로 요청



Server측과 JSON 객체는 데이터를 주고받을때


xhr객체의 readstatechange이벤트

-> 비동기전송 : 응답이 올때까지 기다리지 않음
(요청을 하고 응답이 언제 오는지 별도로 체크로 해줘야함)


-> 개념만 익히기, 문법 알 필요 x








-> 코드를 외우지 x


-> 앞에것이 true여야 다음것 체크함
-> false이면 다음것 체크 안함

-> ajax요청할 일은 없음



-> 2개를 가지고 오려고 할때




-> 변경되서 나오는 것

Ajax :다른페이지 안바꾸고 그것만 바꾼것(화면이 깜빡이면 풀페이지를 다시 로그를 하는방식)

-> 클릭시 ) 깜빡이는것 없이 ♥만 바뀌면 ajax방식임

서버 갔다온것

좋아요 갯수, 하트 갯수 : 서버에 있음

-> 댓글다는 부분도 그러함

(댓글달면 내가 단 댓글만 붙음, 다른 페이지는 그대로 있음)

문법은 중요하지 않음 -> 곧 바뀔것

★★★



-> 만드는 사람의 취향차이


-> 태그에 명시된 속성은 다 attribute임

아예 속성의 이름,값이 달라지는 경우
(checked 속성 등)
-> 이런 경우 때문에 attribute랑 property구분하는것이 좋음


-> 몇번 누르든 덮어쓰기 해서 문제는 없음

HTML의 DOM처리 방식을 거의 다 따름

-> 데이터를 가지고 올때 태그 이름으로 가지고 오는 방법

-> 서버측에서 HTML쪽으로 응답하는 방법은 아직 못함(다음주 월요일에 서버프로그래밍 시작함)
-> 이클립스와 XML 같이 수업을 하는 날

JSON 데이터




-> xml과 다르게 문자열로 받아온 것 : console에서 찍으면 string값으로 보임

-> string상태에서 그대로 parsing 안됨

-> 배열로 바꿔서 처리해야함

-> 데이터는 배열이니까 for문 돌리기전에 문자열 만들어서 배열돌려서 화면에 뿌리기



-> 배열 연습은 끝나고 객체연습


-> 가져오는 것만 차이


local 가져오기







->한번 펼쳐지기


-> 눌러야 내려오는 것으로 해놓음

data.rss.channel.item.description.body

(header는 건너뛰고 )
location이 배열임








-> 4개 화면에 뿌리기

조건으로 province를 봄














1. rowspan += data.length;(길이를 구해서 counting하는것이 더 좋음)
2. rowspan ++

둘 중 한가지로




->첫번째 줄 table data : 5개
->두번째 줄 table data : 4개


-> 다른 방법을 사용해야함
*j.query라면




-> for에 if 가 들어가면 됨






-> 태그만들기: 연습필요함

-> table에 data채운다음에 다시 접근하기



->city만 두번째 열에서 보여주기






-> 서울로 시작한다 조건만 빼면 전국이 나오는 것

★★★



-> 정상적인 코드인지 아닌지 확인하고 싶을때
: 실제 서비스에서 할 건 x



-> 원래는 돌아갈 수 있는 코드이다
-> 실제 서버 경로가 들어갈 수 있음
-> 코드가 맞아도 안되는 상황이 있음


-> 참고만 하기!!



j.Query

이클립스도 웹개발하려면 서버 필요 -> 프로그램 설치

profile
개발자 velog

0개의 댓글