개인공부/JavaScript22 Form (#10 Vanilla JS) ## Form form에 대해서 간단하게 배웠습니다. form 태그는 웹 페이지에서 입력 양식을 의미합니다. 로그인창, 회원가입 폼 등이 이에 해당합니다. text를 입력하거나 password, check나 radio box를 체크하고 submit을 누르면 서버로 전달되는 방식입니다. form 태그는 보이지않는 태그라서 실제 사용자가 양식을 입력하기 위해서는 input 태그를 입력합니다. ## input text: 일반문자 password: 비밀번호 button: 버튼 submit: 입력 양식 제출 reset: 입력 양식 초기화 radio: 한 개만 선택할 수 있는 컴포넌트 checkbox: 여러개를 선택할 수 있는 컴포넌트 file: 파일업로드 hidden: 사용자에게 보이지 않은 숨은 요소 ## pr.. 2022. 3. 16. CSS in JavaScript (#9 Vanilla JS) 제목 그대로 CSS의 있는 class들을 JS로 불러들어와 HTML을 수정을 할 수가 있습니다. 우선 수정하고 싶은 element를 querySelector를 이용해서 가져오고 수정을 해야합니다. ## className 우선 CSS file에 .clicked{ color: skyblue; } 이라는 코드를 작성해 주고나서 JS파일에 function 안에 간단하게 작성해서 function handleTitleClick() { if(h1.className === "clicked") { h1.className = ""; } else { h1.className = "clicked"; } } 이렇게 작성합니다. 해당 CSS가 추가되고 없어지는 모습을 볼 수 있습니다. 하지만 이렇게 작성했을 때 큰 오류가 발생합니.. 2022. 3. 14. Events (#8 Vanilla JS) JavaScript가 document로 HTML을 가져올 수도, 수정할 수도 있습니다. document가 HTML을 JS파일로 불러오기 때문에 그다음에 browser가 우리의 document에 접근하게 도와줍니다. ## addEventListener addEventListener("click", function) JS는 event를 listen 할 수 있습니다. 그래서 eventlistener를 통해 JS에게 어떤 event를 listen을 하고 싶은지 알려야합니다. 위에 코드는 "click"이라는 event를 사용해서 function이라는 함수를 listen한다고 생각하면 됩니다. function이라는 함수는 "function()" 이라고 작성하지 않았습니다. 이유는 ()을 작성하게 되면 브라우저를 실.. 2022. 3. 14. Document2 (#7 Vanilla JS) HTML에 있는 정보를 JavaScript에 가져오는 방법을 배웠습니다. ## Searching for document getElementById() getElementByClassName() getElementByTagName() 위에서 부터 getElementById(): 하나의 id값을 불러오는 방법입니다. getElementByClassName(): 많은 element값을 불러오는 방법이고 Array에 할당됩니다. getElementByTagName(): name을 줄 수 있고 Array에 할당합니다. 하지만 위에 3가지 방법도 있지만 우리는 아래의 방법을 더 많이 사용할 것입니다. querySelector() querySelectorAll() querySelector! 왜 ? css 셀렉터처럼 .. 2022. 3. 14. Document (#6 Vanilla JS) 이번 강의는 JS의 다양한 기능을 활용했습니다. 이번 3주차 강의부터 제가 가장 마음에 들었던 부분이 있습니다. 콘솔창에서의 JS활용도 있지만 오브젝트 하나하나의 정보를 알 수 있었던 좋은 강의였습니다. ## document console 창에 document를 입력하면 작성한 HTML을 가져 올 수 있습니다. document는 브라우저에 존재하는 object이며 console.dir(document)를 입력하면 document의 object에 대한 정보가 나옵니다. object이므로 document.title를 입력하면 title이 나옵니다. document.title = "Hi, Hello"라 입력하면 title이 바뀌는 모습을 볼 수 있습니다. 이러한 모습은 JS가 HTML와 연결이 되어있고 JS는.. 2022. 3. 9. Conditionals (#5 Vanilla JS) 콘솔창으로 JS를 활용하는 것은 아주 좋습니다. 원하는 결과값을 바로바로 알 수도 있지만 틀린 부분까지 섬세하게 알려줘서 초보코딩러 입장에서 완벽합니다. ㅠㅠ Conditionals에 들어가기 전에 다양한 함수를 배웠습니다. ## ParseInt, Prompt const test = prompt("How old are you?"); console.log(test); 이렇게 사용하며 prompt는 alert와 비슷하게 알람창이 뜨지만 값을 입력하라고 나옵니다. 값을 입력하기 전까지는 모든 코드의 실행을 멈추고 매우 오래전에 사용한 방법입니다. 또한, 이쁘지고 않고 CSS활용도 못합니다. - 사용안한다는 뜻 또한, 어떠한 값을 입력해도 "string" 타입이 됩니다. 그래서 사용하는게 ParseInt입니다... 2022. 3. 8. 이전 1 2 3 4 다음
