피로그래밍14기: day11 <JAVASCRIPT 응용, 이벤트 구현>

 

 

0. 자바스크립트 응용 - 이벤트 구현

 

아래 링크는 자바스크립트를 이용해서 DOM 조작 연습을 하기 좋은 페이지이다. 피로그래밍에서 연사님이 준비해 오신 페이지인데, 도움이 많이 된 것 같아서 가져왔다. 

Document

 

링크에 처음 들어가서 자바스크립트를 조작하기 위해서는 .js파일을 건드릴수도 있지만, 개발자도구 페이지를 열어서 그자리에서 간단하게 조작할 수도 있다. 개발자도구를 열면 아래와 같이 보인다. 

 

여기서 검정 바탕에 있는 요소를 먼저 오른쪽의 개발자도구 탭에 선언한 뒤 원하는 대로 DOM을 조작할 수 있다. 

 

아래 내용은 이해가 잘 되지 않아서 가져왔다.

돔 파서가 객체 
새로운 변수를 선언하고 객체를 새로 받아옴 
parseFromString(뉴템플릿, 텍스트(타입))는 새로운 돔에 넣을 내용 
안전하지 않은 문자열을 걸러준다 <>는 안전하지 않음

버튼을 눌렀을때 페이지 스크롤하기

 

버튼을 눌렀을때 제일 위로 가는 코드를 짜려고 하면 아래와 같이 넣어주면 된다. 생긴것만 봐도 굉장히 비효율적으로 생겼다. =()=>{}는 처음 보는 코드방식이다. 

btn.onclick = () => {
	window.scrollTo({
    top:0,
    behavior:'smooth',
    })
}

심지어 버튼을 눌렀을때 배경색이 바뀌게 하려면 이렇게 입력해야 한다. 

button.onclick = () => {
	window.style.backgroundcolor = 'black'
}

아까는 함수 안에도 { } 중괄호가 들어가고 : 콜론으로 값을 지정하는 줄 알았는데 갑자기 다시 =을 사용한다. 기준이 분명 있을텐데 아직은 잘 모르겠다.

 

이벤트를 해제할때는 이벤트에 null 값을 넣어준다. 

button.onclick = null

 

혹시 아래 코드에서 e의 의미가 무엇인가요?

이벤트를 걸어주는 대상과 이벤트의 결과값이 나오게 하는 대상이 다를 때, 이벤트를 걸어주는 대상을 명시하기 위해 사용하는 코드이다. 

 

 

퀴즈 만들기

    const quizApp = new QuizApp() 자바스크립트의 중요한 특징중 하나가 함수도 객체의 일부라는것이다 그래서 이렇게 선언을 해줘야 된다. new를 쓰는것과 쓰지 않는 것의 차이? this의 차이. this는 파이썬의 self와 비슷하다. new를 쓰면 this가 리턴이 된다. 굉장히 중요한 차이인듯

 

window로 쓰는거는 맨 밑에다가 선언하는게 국룰이다. 그래야 전체 함수를 훑은 다음에 실행에 들어갈 수 있다.

 

{{ forloop.counter0 }} 장고에서 for문 안에 있는 요소들의 번호를 매기고 싶을때 쓰는 방법
dataset은 기본 내장되어있는 함수이다. <>태그 안에 data-id = '숫자' 와 같은식으로 적어주면 나중에 js에서 e.target.dataset.id 처럼 '숫자'를 호출할 수 있다. 

 

xss 는 크로스 사이트 시큐리티의 약칭인데 댓글을 다는 등의 방식으로 악성 스크립트를 삽입해서 서버쪽에 접근을 해서 정보를 빼내오는 방법이다.