profile
공부 정리용 블로그

form 제출을 자바스크립트에서 처리하기

이러한 form이 존재할 때 form에 입력된 정보를 자바스크립트로 핸들링 하려면 어떻게 해야 할까?먼저 자바스크립트에서 form에 접근한 후에(이 html문서에서 form은 하나밖에 없음) eventlistener를 추가한다. 이때 event의 type으로는 ‘sub

2022년 6월 30일
·
0개의 댓글
·

자바스크립트 for of, for in

자바스크립트에도 반복문이 존재하는데, 그냥 for문은 c언어의 그것과 문법이 유사했으나 for of과 for in은 처음보는 문법이었다.배열에서 사용하는 for문이다. 배열의 모든 요소를 반복한다.이때 배열의 요소를 불러오고 이를 굳이 변경할 필요가 없다면 let대신

2022년 6월 27일
·
0개의 댓글
·

자바스크립트 연산자

자바스크립트가 파이썬과 유사한 점이 많아 비교연산자도 비슷할거라 생각했지만 다른 점이 많았다.==와 =====는 값만 비교할 수 있는 연산자이고, ===는 값과 데이터 타입을 비교하는 연산자이다5 == ‘5’ -> true5 === ‘5’ -> false그러므로 값만

2022년 6월 27일
·
0개의 댓글
·
post-thumbnail

글자수에 동적으로 반응하는 입력창 만들기

글자를 입력할 때마다 오른쪽의 숫자가 그만큼 줄어드는 입력창을 만들어보자출처 - 100일 코딩 챌린지 - 2022 Web Development 부트캠프탐지해야 할 이벤트는 키 입력이다. addEventListene의 첫 번째 파라미터 값으로는 ‘input’을 넣어준다.

2022년 6월 26일
·
0개의 댓글
·
post-thumbnail

자바스크립트 이벤트 객체

이러한 변수와 함수가 존재할 경우 retrieveInput함수의 파라미터로 아무 이름을 설정하면(이벤트가 발생하면 브라우저가 해당 기능을 실행할 때 함수의 첫 번째 파라미터를 이벤트 객체 값으로 설정하므로 이름이 무엇이든 상관 없다.)이 events라는 이름을 가진 파

2022년 6월 26일
·
0개의 댓글
·

자바스크립트 'click' event listener 추가하기

event란 유저가 사이트의 특정 부분에 입력, 클릭, 스크롤 하는 등의 행동을 의미한다. 자바스크립트를 사용하면 이벤트를 탐지하여 특정 코드를 실행하도록 할 수 있다.이를 위해서는 addEventListener메서드를 사용한다. 이 메서드는 요소에 이벤트 리스너를 추

2022년 6월 26일
·
0개의 댓글
·

DOM 요소 삭제/이동

DOM에서 요소를 삭제하려면 두 가지를 기억하면 된다.1\. 삭제할 요소를 선택하고 2. 그 요소를 삭제한다.삭제할 요소 선택에서 h1태그를 삭제하려고 할 때, 여러 가지 방법이 있다. ID로 선택하거나 querySelector를 사용하는 등.요소 삭제선택한 요소를 삭

2022년 6월 26일
·
0개의 댓글
·

JS를 통해 새로운 HTML요소 삽입하기

JS에서 새로운 요소를 추가하려면 1. 새로운 요소를 생성하고 2. 생성한 요소를 담고 있는 부모 요소에 접근해야 하며(DOM에 접근하기 위함) 3. 새 요소를 부모 요소의 콘텐츠에 삽입해야 한다.I’m new!라는 텍스트를 담고 있는 p태그에 a태그를 추가하려고 한다

2022년 6월 26일
·
0개의 댓글
·
post-thumbnail

DOM트리와 DOM탐색

HTML에서 볼 수 있는 중첩구조는 DOM에도 적용된다. 이를 트리 구조처럼 생각할 수 있다.출처 - 100일 코딩 챌린지 - 2022 Web Development 부트캠프탐색 방법에는 두 가지가 있다.점 표기법으로 탐색이 방법은 DOM의 중첩구조를 정확히 알고 있어야

2022년 6월 25일
·
0개의 댓글
·
post-thumbnail

html요소의 선택과 변경을 위한 DOM드릴링

드디어 종강 후 복습 후 포스팅...현재 a태그에는 아무런 주소도 입력되어 있지 않으므로 눌러도 반응이 없다. 자바스크립트를 이용해 주소를 입력하려면 어떻게 해야 할까?개발자 도구에서 a를 찾아보면 이는 document – body – children – p – chi

2022년 6월 25일
·
0개의 댓글
·
post-thumbnail

DOM이란?

출처 - 100일 코딩 챌린지 - 2022 Web Development 부트캠프DOM은 웹개발의 개념으로, 작성된 HTML코드를 분석하여 데이터와 브라우저의 내부를 표현한 것이라고 한다.브라우저는 HTML코드를 분석(parsing)하여 화면에 표시할 내용이 무엇인지 알

2022년 5월 29일
·
0개의 댓글
·
post-thumbnail

전역 객체 window, document

출처 - 100일 코딩 챌린지 - 2022 Web Development 부트캠프활성화된 브라우저의 윈도우(탭)과 관련된 정보와 기능을 저장하는 객체이다. 이는 내가 현재 어떤 페이지에 있는지를 알려주거나 alert같은 유틸리티 함수에 접근할 수 있게 해준다.보안상의 이

2022년 5월 29일
·
0개의 댓글
·