Log In const loginForm = document.querySelector("#login-form") const loginInput = document.querySelector("#login-form input") function onLoginBtnSubmit(tomato){ tomato.preventDefault(); console.log(tomato) } loginForm.addEventListener("submit",onLoginBtnSubmit) preventDefault 기본적으로 form을 사용해서 submit을 하는 경우 페이지 전체가 새로고침 된다 그래서 그것을 막기 위한 function이다 모든 EventListener function의 첫번째 argument는 항상 지금 벌어..

const title = document.querySelector(".hello:first-child h1") //.className h1중의 첫번째 자식 function handleTitleClick(){ console.log("title was clicked!") } title.addEventListener("click",handleTitleClick) //()은 실행코드 이므로 클릭시 실행은 쓰지 말아야함 우리는 사용자가 Click이라는 Event를 발생시킬 때 실행될 function을 만들어줘야 한다 function 안에는 내 맘대로 변경할 수 있으니 할 수 있는 범위가 훨씬 넓어졌다 https://developer.mozilla.org/ko/docs/Web/API/HTMLElement HTMLE..

본격적으로 html과 js 간의 소통을 공부한다 console로 html의 title을 변경할 수 있고 미리 작성되어 있는 Object를 이용할 수 있다 document.title = "hi" js에 코드가 나중에 실행되는 것을 볼 수 있다 html 페이지를 실행하면 html의 타이틀이 먼저 뜨고 js가 실행되므로 변경된 title로 뜬다 JS로 html의 구성요소 찾기 document.getElementById("title") if 찾으려는 태그의 id가 title이라면 string 형식으로 찾을 수 있음 Js에서는 html 자체를 가져오는게 아니고 object 형식으로 가져옴

Object 안에서 function을 사용하는 방법들과 실제 함수에서 자주 쓰이는 return을 공부했다 해본 적이 있어서 이해하는데 어렵지는 않았다 그리고 prompt를 공부중인데 잘 안쓴다고 한다 이유는 message가 별로 이쁘지 않고 어떤 스타일(css)도 적용시킬 수 없다 한다 아주 오래된 function 그리고 가장 직접적인 function 실행되는 동안 JS는 일시정지 const age = prompt(String "How old are u?", default값 "28") //default 값은 미리 작성되는 값 console.log(age) 요즘 대부분은 각자 만든 html과 css로 값을 받는다 한다 type 형변환 먼저 값의 type을 보려면 console.log(typeof age) ..

오늘은 자바에 메소드와 비슷한 JS의 function을 공부했다 확실히 JS나 파이썬은 다른 언어보다 허용되는 범위가 넓은 것 같다 형식은 function functionName(argument) { } const player = { name : JM sayHello : functionName (argument) { console.log("Hello! " + argument) } } 아래 껀 object 안에 쓸 수 있는 방법이다 player.functionName 으로 실행 가능하다 중간부터 티스토리를 작성해서 아래는 기억나는 부분 1. var 는 과거의 쓰던 변수선언문 값 변경 가능 (쓰지말기) (let, const 두 개 합쳐져있는 것으로 보면 됨) 2. const 는 값 변경 불가능 (데이터를 업..