primavera

우리의 목표: 1. user에게 질문한다(What is your name?) 2. 그 다음 유저에게 정보를 받아서 3. 그 정보를 화면에 표시한다. (콘솔 창에 표시) 우선 1번부터 해보자. input, button 태그를 만들고 그걸 log-form이라는 아이디를 가진 idv 안에다가 넣자. Log In 이 각각의 태그를 자바스크립트에서 접근할 수 있다. const loginInput = document.querySelector('#login-form input'); const loginButton = document.querySelector('#login-form button'); 이제 Log In 버튼이 눌렸을 때 이벤트를 적용해보자. 우리가 하고 싶은 것은 버튼을 눌렀을 때 Input에 입력된 값..

이전에 작성한 코드 중에서 handleh1Click 함수만 남겨놓자. 우리가 하고 싶은 것은 h1을 클릭했을 때 blue로 바뀌는 것에서, 다시 한 번 더 클릭하면 tomato로, 또 클릭하면 blue로 만들고 싶다. blue->tomato->blue->tomato->blue->... 어떻게 해야할까? h1의 color가 blue라면 tomato로 바꾸고, blue가 아니라면 blue로 바꿔주면 된다. 전에 배웠던 if를 사용해서 만들 수 있다. const h1 = document.querySelector('div.hello:first-child h1'); function handleh1Click() { if (h1.style.color === 'blue') { h1.style.color = 'tomat..

요소의 style 속성에 접근해서 글자색을 바꿀 수 있다! const title = document.querySelector('div.hello:first-child h1'); title.style.color = 'blue'; event란? - click 하는 것 - 마우스를 올리는 것 - 입력을 끝내는 것 - wifi 접속이 해제되는 것 -... 등등 이 모든 이벤트들을 자바스크립트는 listen 할 수 있다. click 이벤트 addEventListener(listen 할 이벤트, 이벤트 후 실행할 함수) 실행할 함수에는 handleTitleClick처럼 이름만 써준다. 주의! handleTitleClick()처럼 뒤에 괄호를 넣으면 함수가 바로 실행된다. const title = document.q..

콘솔에 document라고 치면 내가 작성한 html을 가져올 수 있다. document는 html을 가리키는 객체이다. document가 html를 가리키기 때문에, html에 작성한 title도 가져올 수 있다. object의 property를 수정했던것처럼 document.title을 수정할 수 있다. 수정하면, 창의 이름이 바뀐다! 자바스크립트가 HTML에 연결되어 있다. 자바스크립트는 document를 통해 HTML에 접근할 수 있다! HTML 파일에 접근하기 1 : getElementById() html 파일에 이렇게 적은 후 Grab me! 콘솔에서 이 요소에 접근하기 콘솔에서 접근한 것처럼, 자바스크립트 파일에서 접근할 수 있다 요소 확인하기 const title = document.get..

조건문에 대해 알아보기 전에 prompt에 대해 먼저 살펴보자. prompt() const age = prompt('How old are you?'); console.log(age); alert()에서 봤던 것처럼 창이 뜨고, 페이지가 계속 로딩중이다. prompt는 - 사용자에게 메시지를 보여주고 값 입력을 기다린다. - 사용자가 입력할 때까지 javascript를 멈추고 기다린다.(페이지가 계속 로딩중) - 그렇기 때문에 prompt를 실제로는 잘 쓰지 않는다. -> 페이지 계속 로딩중, 스타일 변경 불가 - '취소'를 누르면 null이 뜨고 - 아무 입력도 하지 않은 상태에서 '확인' 버튼을 누르면 아무것도 보이지 않는다. # 제대로 값을 입력해보자 이 값은 integer일까? 값의 타입을 확인해보..

const calculator = { plus: function (a, b) { alert(a + b); }, minus: function (a, b) { alert(a - b); }, multiply: function (a, b) { alert(a * b); }, divide: function (a, b) { alert(a / b); }, power: function (a, b) { alert(a ** b); }, }; console.log(calculator.plus(2, 3)); 위 코드의 결과는 아래와 같다. calculator의 plus를 호출했기 때문에 alert함수를 통해 알람이 뜬다. 그 후에 console.log를 호출하는데, 이런.. 결과가 undefined가 나오게 되었다. 우리는 2..

함수가 없다면.. console.log("Hello my name is Spring"); console.log("Hello my name is Summer"); console.log("Hello my name is Autumn"); console.log("Hello my name is Winter"); 끝에 있는 이름만 달라지는데, 똑같은 코드를 계속 써줘야 한다 굉장히 비효율적이다. -> 함수를 사용해서 반복되는 코드를 줄이자! 함수 만들고 호출하기 function sayHello(x) { console.log('Hello!'); } sayHello(); sayHello(); sayHello(); 이 경우 sayHello 함수가 같은 동작(Hello!출력)을 하기 때문에 그다지 쓸모가 없다. argum..

const playerName = "spring"; const playerPoints = 121212; const playerHandsome = true; const playerFat = "little bit"; //이렇게 일일이 변수로 나열해주기 보단 player.name player.points player.handsome //이렇게 쓰는 것이 더 효율적 const player = ["spring", 121212, false, "little bit"] //이렇게 배열로 하는 것도 적합하지 않다. //각각의 요소가 의미를 가지는데, 그 의미를 배열을 통해서는 나타낼 수 없기 때문! 그래서 우리는 object를 만들어야 한다! object 만들기 배열을 만드는 것과는 다르게 :와 ,를 사용해서 속성을 만..

드디어 배열이다..! 데이터를 정리하기 위해서 배열을 사용한다. 만약 배열이 없다면? //array가 없을 때 const mon = "mon"; const tue = "tue"; const wed = "wed"; const thu = "thu"; const fri = "fri"; const sat = "sat"; const sun = "sun"; const daysOfWeek = mon + tue + wed + thu + fri + sat + sun; console.log(daysOfWeek); 이렇게 월, 화, 수, 목,... 하나하나씩 변수를 만들어야 하고 와우 굉장히 긴 strin을 얻게 되었다. 그리고 이렇게 만든다면, 월요일, 금요일 각각 하나하나에 접근할 수가 없다. string slice 하..

boolean boolean은 true, false 값을 갖는다. const amIFat = false; //boolean console.log(amIFat); 언제 사용할까? - 사용자가 로그인을 했는가? - 비디오가 재생되었는가? 등을 나타낼 때 사용한다. *주의해야한다. "true"라고 하면 string 값을 의미한다. const amIFat = "true"; //string console.log(amIFat); null 아무것도 없는 것을 의미한다. false와 null은 다르다! const x = null; //boolean console.log(x); undefined variable은 존재하는데 아직 정의되지 않았다. 메모리는 존재하는데 그 안에 값이 없는 것이다. let something;..